From 9f51a1982ecebc1ebbaea8ff5fef4de7f760a4e9 Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Thu, 13 Jun 2024 19:18:19 +0200
Subject: [PATCH 01/29] feat: edit profile page setup with routing

---
 src/app/(auth)/(tabs)/profile/_layout.tsx     |  2 ++
 src/app/(auth)/(tabs)/profile/editProfile.tsx | 13 +++++++++
 src/components/profile/ProfileHeader.tsx      |  2 +-
 src/screens/EditProfilePage.tsx               | 29 +++++++++++++++++++
 4 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 src/app/(auth)/(tabs)/profile/editProfile.tsx
 create mode 100644 src/screens/EditProfilePage.tsx

diff --git a/src/app/(auth)/(tabs)/profile/_layout.tsx b/src/app/(auth)/(tabs)/profile/_layout.tsx
index 656c3eb..28c8fab 100644
--- a/src/app/(auth)/(tabs)/profile/_layout.tsx
+++ b/src/app/(auth)/(tabs)/profile/_layout.tsx
@@ -5,7 +5,9 @@ const ProfileRootLayout = () => {
   return (
     <Stack>
       <Stack.Screen name="[userid]" options={{ headerShown: false, animation: 'fade_from_bottom' }} />
+      <Stack.Screen name="editProfile" options={{ headerShown: false, animation: 'fade_from_bottom' }} />
     </Stack>
+    
   );
 };
 
diff --git a/src/app/(auth)/(tabs)/profile/editProfile.tsx b/src/app/(auth)/(tabs)/profile/editProfile.tsx
new file mode 100644
index 0000000..2f78f15
--- /dev/null
+++ b/src/app/(auth)/(tabs)/profile/editProfile.tsx
@@ -0,0 +1,13 @@
+import { View, Text } from 'react-native'
+import React from 'react'
+import EditProfilePage from '@screens/EditProfilePage'
+
+const EditProfile = () => {
+  return (
+    <View>
+      <EditProfilePage></EditProfilePage>
+    </View>
+  )
+}
+
+export default EditProfile
\ No newline at end of file
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index c25c43d..0ef58cf 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -54,7 +54,7 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({ user, isSelf }) => {
           {isSelf ? (
             <>
               <Button
-                onPress={() => console.log('Edit Profile View')}
+                onPress={() => router.push('/(auth)/(tabs)/profile/editProfile')}
                 backgroundColor="#A372F9"
                 size="$4"
                 borderRadius="$10"
diff --git a/src/screens/EditProfilePage.tsx b/src/screens/EditProfilePage.tsx
new file mode 100644
index 0000000..745be63
--- /dev/null
+++ b/src/screens/EditProfilePage.tsx
@@ -0,0 +1,29 @@
+import { View, Text, ActivityIndicator, ScrollView } from 'react-native';
+import React from 'react';
+import useAuth from '@modules/auth/useAuth';
+import { useGetNotifications } from '@api/user/query/useGetNotifications';
+import { H1, SizableText, YStack } from 'tamagui';
+import { GetNotificationsResponse, Notification } from '@api/responses';
+import NotificationCard from '@components/notification/NotificationCard';
+
+const EditProfilePage = () => {
+  const { user } = useAuth();
+
+
+
+  return (
+    <YStack padding="$4" height="100%">
+      <H1 marginVertical="$4" fontSize={24} fontWeight="800">
+        Edit Profile
+      </H1>
+
+      <ScrollView bounces>
+        <YStack space="$3">
+
+        </YStack>
+      </ScrollView>
+    </YStack>
+  );
+};
+
+export default EditProfilePage;

From ef77e113644d12d9b92a41089aa46c4f8e139a22 Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Thu, 13 Jun 2024 23:05:19 +0200
Subject: [PATCH 02/29] style: minHeight variable for bio

---
 src/components/profile/ProfileHeader.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 0ef58cf..3f2ab30 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -46,7 +46,10 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({ user, isSelf }) => {
             <H3 fontWeight="700">{user?.dispname}</H3>
             <SizableText opacity={0.8}>@{user?.username}</SizableText>
           </YStack>
-          <SizableText>{user?.bio.substring(0, 100)}</SizableText>
+
+          <YStack minHeight="$4.5">
+            <SizableText>{user?.bio.substring(0, 100)}</SizableText>
+          </YStack>
         </YStack>
 
         {/* Button component in profile header*/}

From e75f73142d07f4bde9212cef1597d86d0fde7dc3 Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Fri, 14 Jun 2024 17:06:31 +0200
Subject: [PATCH 03/29] refactor: renamed component

---
 src/components/profile/GenreBadge.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/profile/GenreBadge.tsx b/src/components/profile/GenreBadge.tsx
index 0e89f7e..87203d4 100644
--- a/src/components/profile/GenreBadge.tsx
+++ b/src/components/profile/GenreBadge.tsx
@@ -23,7 +23,7 @@ interface Props {
   percent?: number;
 }
 
-const ProfileHeader: React.FC<Props> = ({ genre = "Camping  ⛺️", percent = 0 }) => {
+const GenreBadge: React.FC<Props> = ({ genre = "Camping  ⛺️", percent = 0 }) => {
   const genreIcon = genreLookup[genre] || '❓';
 
   return (
@@ -45,4 +45,4 @@ const ProfileHeader: React.FC<Props> = ({ genre = "Camping  ⛺️", percent = 0
   );
 };
 
-export default ProfileHeader;
+export default GenreBadge;

From cdd5d40b947186bd58554f828c3cd1bc6a806441 Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Fri, 14 Jun 2024 17:29:41 +0200
Subject: [PATCH 04/29] style: completely redesigned genrebadge in profilepage
 so it better fits screens

---
 src/components/profile/GenreBadge.tsx | 31 +++++++++------------------
 src/screens/ProfilePage.tsx           |  9 +++-----
 2 files changed, 13 insertions(+), 27 deletions(-)

diff --git a/src/components/profile/GenreBadge.tsx b/src/components/profile/GenreBadge.tsx
index a702c35..156c465 100644
--- a/src/components/profile/GenreBadge.tsx
+++ b/src/components/profile/GenreBadge.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { YStack, SizableText } from 'tamagui';
+import { YStack, SizableText, XStack } from 'tamagui';
 
 interface Props {
   genre: string;
@@ -8,26 +8,15 @@ interface Props {
 
 const GenreBadge: React.FC<Props> = ({ genre, percent = 0 }) => {
   return (
-    <YStack
-      padding="$2"
-      gap="$1"
-      alignItems="center"
-      backgroundColor="$primaryLight"
-      height="$10"
-      width="$8"
-      borderRadius={15}>
-      <YStack
-        justifyContent="center"
-        alignItems="center"
-        height="$4"
-        width="$4"
-        backgroundColor="#151718"
-        borderRadius={15}>
-        <SizableText fontSize={20}>{genre.split(' ')[1] ?? '❓'}</SizableText>
-      </YStack>
-      <YStack alignItems="center">
-        <SizableText fontSize={13}>{genre.split(' ')[0]}</SizableText>
-        <SizableText fontSize={13}>{percent}%</SizableText>
+    <YStack padding="$2" backgroundColor="$primaryLight" borderRadius={15}>
+      <YStack gap="$2" paddingLeft="$2" paddingRight="$2">
+        <SizableText fontSize={14}>
+          {percent}% {genre}
+        </SizableText>
+        <XStack justifyContent='space-between'>
+          <SizableText fontSize={13} color="$color.textWashedOut">Avg. Viewers: 1.2k</SizableText>
+          <SizableText fontSize={13} color="$color.textWashedOut">Mostly Mo or Fr</SizableText>
+        </XStack>
       </YStack>
     </YStack>
   );
diff --git a/src/screens/ProfilePage.tsx b/src/screens/ProfilePage.tsx
index a13beda..49993d0 100644
--- a/src/screens/ProfilePage.tsx
+++ b/src/screens/ProfilePage.tsx
@@ -64,18 +64,15 @@ const ProfilePage: React.FC<{ userid: string }> = ({ userid }) => {
         </XStack>
 
         <ScrollView bounces>
-          <YStack gap="$-8" marginBottom="$8">
-            <XStack flex={1} justifyContent="center" gap="$6" padding="$7">
+          <YStack marginBottom="$8" padding="$4">
+            <YStack flex={1} gap="$3">
               <GenreBadge genre="Education 👨‍🏫" percent={30} />
               <GenreBadge genre="Music 🎶" percent={20} />
               <GenreBadge genre="Football ⚽️" percent={13} />
-            </XStack>
-
-            <XStack flex={1} justifyContent="center" gap="$6" padding="$7">
               <GenreBadge genre="IRL 😄" percent={9} />
               <GenreBadge genre="Art 🎨" percent={5} />
               <GenreBadge genre="Sport 🏈" percent={2} />
-            </XStack>
+            </YStack>
           </YStack>
         </ScrollView>
       </YStack>

From 5045894876da8c664abfa2cd1d2a4bb5fdc600d1 Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Fri, 14 Jun 2024 17:35:20 +0200
Subject: [PATCH 05/29] feat: dynamic display of avg viewer with formatted
 numbers

---
 src/components/profile/GenreBadge.tsx |  6 ++++--
 src/screens/ProfilePage.tsx           | 12 ++++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/profile/GenreBadge.tsx b/src/components/profile/GenreBadge.tsx
index 156c465..b41672f 100644
--- a/src/components/profile/GenreBadge.tsx
+++ b/src/components/profile/GenreBadge.tsx
@@ -1,12 +1,14 @@
+import { formatNumber } from '@utils/formatNumber';
 import React from 'react';
 import { YStack, SizableText, XStack } from 'tamagui';
 
 interface Props {
   genre: string;
   percent: number;
+  avgViewer: number;
 }
 
-const GenreBadge: React.FC<Props> = ({ genre, percent = 0 }) => {
+const GenreBadge: React.FC<Props> = ({ genre, percent, avgViewer }) => {
   return (
     <YStack padding="$2" backgroundColor="$primaryLight" borderRadius={15}>
       <YStack gap="$2" paddingLeft="$2" paddingRight="$2">
@@ -14,7 +16,7 @@ const GenreBadge: React.FC<Props> = ({ genre, percent = 0 }) => {
           {percent}% {genre}
         </SizableText>
         <XStack justifyContent='space-between'>
-          <SizableText fontSize={13} color="$color.textWashedOut">Avg. Viewers: 1.2k</SizableText>
+          <SizableText fontSize={13} color="$color.textWashedOut">Avg. Viewers: {formatNumber(avgViewer)}</SizableText>
           <SizableText fontSize={13} color="$color.textWashedOut">Mostly Mo or Fr</SizableText>
         </XStack>
       </YStack>
diff --git a/src/screens/ProfilePage.tsx b/src/screens/ProfilePage.tsx
index 49993d0..98014f0 100644
--- a/src/screens/ProfilePage.tsx
+++ b/src/screens/ProfilePage.tsx
@@ -66,12 +66,12 @@ const ProfilePage: React.FC<{ userid: string }> = ({ userid }) => {
         <ScrollView bounces>
           <YStack marginBottom="$8" padding="$4">
             <YStack flex={1} gap="$3">
-              <GenreBadge genre="Education 👨‍🏫" percent={30} />
-              <GenreBadge genre="Music 🎶" percent={20} />
-              <GenreBadge genre="Football ⚽️" percent={13} />
-              <GenreBadge genre="IRL 😄" percent={9} />
-              <GenreBadge genre="Art 🎨" percent={5} />
-              <GenreBadge genre="Sport 🏈" percent={2} />
+              <GenreBadge genre="Education 👨‍🏫" percent={30} avgViewer={10234} />
+              <GenreBadge genre="Music 🎶" percent={20} avgViewer={1200} />
+              <GenreBadge genre="Football ⚽️" percent={13} avgViewer={1200} />
+              <GenreBadge genre="IRL 😄" percent={9} avgViewer={1200} />
+              <GenreBadge genre="Art 🎨" percent={5} avgViewer={1200} />
+              <GenreBadge genre="Sport 🏈" percent={2} avgViewer={1200} />
             </YStack>
           </YStack>
         </ScrollView>

From 179dadb361bc0f8fd0e54e6c6c2b7c154cdda2be Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Fri, 14 Jun 2024 19:16:33 +0200
Subject: [PATCH 06/29] feat: genre type

---
 src/api/responses.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/api/responses.ts b/src/api/responses.ts
index 7c086d0..c141314 100644
--- a/src/api/responses.ts
+++ b/src/api/responses.ts
@@ -77,6 +77,13 @@ export type Notification = {
   updated_at: Date;
 };
 
+export type Genre = {
+  name: string;
+  percent: number;
+  days: Days[];
+  avgViewers: number;
+}
+
 export type GetUserResponse = TypedResponse<{
   user: User & {
     subscribed: boolean;

From acaa93f7f671b1d0b2de863298606f96a3575641 Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Fri, 14 Jun 2024 19:16:58 +0200
Subject: [PATCH 07/29] feat: display text if no statistics are available

---
 src/screens/ProfilePage.tsx | 45 ++++++++++++++++++++++++++++++-------
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/screens/ProfilePage.tsx b/src/screens/ProfilePage.tsx
index 98014f0..d460912 100644
--- a/src/screens/ProfilePage.tsx
+++ b/src/screens/ProfilePage.tsx
@@ -1,4 +1,5 @@
-import { GetUserResponse } from '@api/responses';
+import { Genre, GetMostStreamedGenresResponse, GetUserResponse } from '@api/responses';
+import { useGetGenreStatistic } from '@api/user/query/useGetGenreStatistic';
 import { useGetUser } from '@api/user/query/useGetUser';
 import SwitchButton from '@components/SwitchButton';
 import GenreBadge from '@components/profile/GenreBadge';
@@ -6,7 +7,7 @@ import ProfileHeader from '@components/profile/ProfileHeader';
 import useAuth from '@modules/auth/useAuth';
 import React, { useEffect, useState } from 'react';
 import { ActivityIndicator, ScrollView } from 'react-native';
-import { XStack, YStack } from 'tamagui';
+import { SizableText, View, XStack, YStack } from 'tamagui';
 
 type States = 'Statistics' | 'Achievements';
 const ProfilePage: React.FC<{ userid: string }> = ({ userid }) => {
@@ -16,10 +17,18 @@ const ProfilePage: React.FC<{ userid: string }> = ({ userid }) => {
     refetchOnWindowFocus: true,
   });
 
+  const { data: mostStreamedGenres } = useGetGenreStatistic({
+    variables: { id: userid },
+    refetchOnMount: true,
+    refetchOnWindowFocus: true,
+  });
+
   const { user: me } = useAuth();
 
   const [userData, setUserData] = useState<GetUserResponse['data']>(null);
 
+  const [genreData, setGenreData] = useState<Genre[]>([]);
+
   const [activeState, setActiveState] = useState<States>('Statistics');
 
   const handleStateChange = (newState: string) => {
@@ -32,6 +41,13 @@ const ProfilePage: React.FC<{ userid: string }> = ({ userid }) => {
     }
   }, [data]);
 
+  useEffect(() => {
+    if (mostStreamedGenres && mostStreamedGenres.data) {
+      setGenreData(mostStreamedGenres.data.user.genres);
+    }
+  }, [mostStreamedGenres]);
+
+
   if (isFetching && !userData) {
     return (
       <YStack
@@ -63,18 +79,31 @@ const ProfilePage: React.FC<{ userid: string }> = ({ userid }) => {
           />
         </XStack>
 
+        { genreData.length === 0 ? <>
+
+        <YStack flex={1} paddingTop="$8" alignItems='center'>
+            <SizableText fontSize={24} textAlign='center'>
+              There are currently no statistics available!
+            </SizableText>
+        </YStack>
+
+        </> : <>
         <ScrollView bounces>
           <YStack marginBottom="$8" padding="$4">
             <YStack flex={1} gap="$3">
-              <GenreBadge genre="Education 👨‍🏫" percent={30} avgViewer={10234} />
-              <GenreBadge genre="Music 🎶" percent={20} avgViewer={1200} />
-              <GenreBadge genre="Football ⚽️" percent={13} avgViewer={1200} />
-              <GenreBadge genre="IRL 😄" percent={9} avgViewer={1200} />
-              <GenreBadge genre="Art 🎨" percent={5} avgViewer={1200} />
-              <GenreBadge genre="Sport 🏈" percent={2} avgViewer={1200} />
+              {genreData.map((genre, index) => (
+                <GenreBadge
+                  key={index} // Key prop should be unique for each item in the array
+                  genre={genre.name} // Assuming genre name is stored in `name` property
+                  percent={genre.percent}
+                  avgViewer={genre.avgViewers}
+                />
+              ))}
             </YStack>
           </YStack>
         </ScrollView>
+        </> }
+
       </YStack>
     </YStack>
   );

From 3e7f7888bb3407923ee1c184d6243ba8e6fe2285 Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Fri, 14 Jun 2024 20:13:31 +0200
Subject: [PATCH 08/29] style: edit profile is now safeareaview

---
 src/app/(auth)/(tabs)/profile/editProfile.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/(auth)/(tabs)/profile/editProfile.tsx b/src/app/(auth)/(tabs)/profile/editProfile.tsx
index 2f78f15..1ea62f1 100644
--- a/src/app/(auth)/(tabs)/profile/editProfile.tsx
+++ b/src/app/(auth)/(tabs)/profile/editProfile.tsx
@@ -1,12 +1,13 @@
 import { View, Text } from 'react-native'
 import React from 'react'
 import EditProfilePage from '@screens/EditProfilePage'
+import { SafeAreaView } from 'react-native-safe-area-context'
 
 const EditProfile = () => {
   return (
-    <View>
+    <SafeAreaView>
       <EditProfilePage></EditProfilePage>
-    </View>
+    </SafeAreaView>
   )
 }
 

From 043ddc48760f3f10d2beb25e2d15a3430ce11b3e Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Fri, 14 Jun 2024 20:14:02 +0200
Subject: [PATCH 09/29] feat: avatar display on edit profile page

---
 src/screens/EditProfilePage.tsx | 58 +++++++++++++++++++++++----------
 1 file changed, 41 insertions(+), 17 deletions(-)

diff --git a/src/screens/EditProfilePage.tsx b/src/screens/EditProfilePage.tsx
index 745be63..3bae6db 100644
--- a/src/screens/EditProfilePage.tsx
+++ b/src/screens/EditProfilePage.tsx
@@ -1,27 +1,51 @@
-import { View, Text, ActivityIndicator, ScrollView } from 'react-native';
 import React from 'react';
 import useAuth from '@modules/auth/useAuth';
-import { useGetNotifications } from '@api/user/query/useGetNotifications';
-import { H1, SizableText, YStack } from 'tamagui';
-import { GetNotificationsResponse, Notification } from '@api/responses';
-import NotificationCard from '@components/notification/NotificationCard';
+import {
+  Avatar,
+  Button,
+  H1,
+  SizableText,
+  XStack,
+  YStack,
+} from 'tamagui';
+import { Feather } from '@expo/vector-icons';
+import { router } from 'expo-router';
+
 
 const EditProfilePage = () => {
   const { user } = useAuth();
 
-
-
   return (
-    <YStack padding="$4" height="100%">
-      <H1 marginVertical="$4" fontSize={24} fontWeight="800">
-        Edit Profile
-      </H1>
-
-      <ScrollView bounces>
-        <YStack space="$3">
-
-        </YStack>
-      </ScrollView>
+    <YStack padding="$4" backgroundColor="$background" gap="$5">
+      <XStack alignItems="center" justifyContent="space-between">
+        <XStack alignItems="center">
+          <Button
+            backgroundColor="#151718"
+            icon={<Feather name="chevron-left" size={24} color="white" />}
+            onPress={() => router.back()}
+          />
+          <H1 fontSize={24}>Edit Profile</H1>
+        </XStack>
+        <SizableText fontSize={18} color="$accentWashedOut">
+          Finish
+        </SizableText>
+      </XStack>
+      <YStack alignItems="center">
+        <Avatar circular size="$10">
+          <Avatar.Image
+            accessibilityLabel="Cam"
+            src="https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80"
+          />
+          <Avatar.Fallback backgroundColor="$blue10" />
+        </Avatar>
+        <SizableText color="$textWashedOut">Edit Avatar</SizableText>
+      </YStack>
+      <YStack gap="$2">
+        <XStack justifyContent="space-between">
+          <SizableText>Display-name</SizableText>
+          <SizableText>0/20</SizableText>
+        </XStack>
+      </YStack>
     </YStack>
   );
 };

From e1d5c3883df5d1fcfb8d85595236c283ea1195da Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Fri, 14 Jun 2024 20:14:24 +0200
Subject: [PATCH 10/29] chore: Formik added per yarn add

---
 package.json |  1 +
 yarn.lock    | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/package.json b/package.json
index 9b85f6d..5e5030b 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "expo-status-bar": "~1.11.1",
     "expo-system-ui": "~2.9.3",
     "expo-web-browser": "~12.8.2",
+    "formik": "^2.4.6",
     "install": "^0.13.0",
     "jwt-decode": "^4.0.0",
     "mediasoup-client": "^3.7.8",
diff --git a/yarn.lock b/yarn.lock
index 16c056d..189e111 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5718,6 +5718,11 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
+deepmerge@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 deepmerge@^4.2.2, deepmerge@^4.3.0:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
@@ -7100,6 +7105,20 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+formik@^2.4.6:
+  version "2.4.6"
+  resolved "https://registry.yarnpkg.com/formik/-/formik-2.4.6.tgz#4da75ca80f1a827ab35b08fd98d5a76e928c9686"
+  integrity sha512-A+2EI7U7aG296q2TLGvNapDNTZp1khVt5Vk0Q/fyfSROss0V/V6+txt2aJnwEos44IxTCW/LYAi/zgWzlevj+g==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.1"
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    react-fast-compare "^2.0.1"
+    tiny-warning "^1.0.2"
+    tslib "^2.0.0"
+
 freeport-async@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/freeport-async/-/freeport-async-2.0.0.tgz#6adf2ec0c629d11abff92836acd04b399135bab4"
@@ -9224,6 +9243,11 @@ lockfile@~1.0.3:
   dependencies:
     signal-exit "^3.0.2"
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash._baseuniq@~4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8"
@@ -11093,6 +11117,11 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-fast-compare@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
 react-fast-compare@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
@@ -12881,6 +12910,11 @@ timed-out@^4.0.0:
   resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
   integrity sha512-G7r3AhovYtr5YKOWQkta8RKAPb+J9IsO4uVmzjl8AZwfhs8UcUwTiD6gcJYSgOtzyjvQKrKYn41syHbUWMkafA==
 
+tiny-warning@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"

From a9030fa37b6b01a9bc9f4ed6573ab5b742a8b6bc Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Fri, 14 Jun 2024 21:10:06 +0200
Subject: [PATCH 11/29] feat: Formik forms styled

---
 src/screens/EditProfilePage.tsx | 45 +++++++++++++++++++++++----------
 1 file changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/screens/EditProfilePage.tsx b/src/screens/EditProfilePage.tsx
index 3bae6db..b8b872a 100644
--- a/src/screens/EditProfilePage.tsx
+++ b/src/screens/EditProfilePage.tsx
@@ -1,16 +1,10 @@
 import React from 'react';
 import useAuth from '@modules/auth/useAuth';
-import {
-  Avatar,
-  Button,
-  H1,
-  SizableText,
-  XStack,
-  YStack,
-} from 'tamagui';
+import { Avatar, Button, H1, Input, SizableText, XStack, YStack } from 'tamagui';
 import { Feather } from '@expo/vector-icons';
 import { router } from 'expo-router';
-
+import { Formik } from 'formik';
+import { TextInput, View } from 'react-native';
 
 const EditProfilePage = () => {
   const { user } = useAuth();
@@ -40,11 +34,36 @@ const EditProfilePage = () => {
         </Avatar>
         <SizableText color="$textWashedOut">Edit Avatar</SizableText>
       </YStack>
+
       <YStack gap="$2">
-        <XStack justifyContent="space-between">
-          <SizableText>Display-name</SizableText>
-          <SizableText>0/20</SizableText>
-        </XStack>
+        <Formik initialValues={{ displayname: '', bio: '' }} onSubmit={(values) => {}}>
+          {(props) => (
+            <YStack gap="$2">
+              <XStack justifyContent="space-between">
+                <SizableText color="$textWashedOut">Displayname</SizableText>
+                <SizableText color="$textWashedOut">0/20</SizableText>
+              </XStack>
+              <Input
+                placeholderTextColor="$textWashedOut"
+                placeholder="displayname"
+                onChangeText={props.handleChange('displayname')}
+                value={props.values.displayname}
+              />
+
+              <XStack justifyContent="space-between">
+                <SizableText color="$textWashedOut">Bio</SizableText>
+                <SizableText color="$textWashedOut">0/100</SizableText>
+              </XStack>
+              <Input
+                multiline
+                placeholderTextColor="$textWashedOut"
+                placeholder="bio"
+                onChangeText={props.handleChange('bio')}
+                value={props.values.bio}
+              />
+            </YStack>
+          )}
+        </Formik>
       </YStack>
     </YStack>
   );

From 3cddaba45ca113e9b9db204c72bfbd0357d3490e Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Fri, 14 Jun 2024 21:27:40 +0200
Subject: [PATCH 12/29] refactor: tamagui components in formik

---
 src/screens/EditProfilePage.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/screens/EditProfilePage.tsx b/src/screens/EditProfilePage.tsx
index b8b872a..be32420 100644
--- a/src/screens/EditProfilePage.tsx
+++ b/src/screens/EditProfilePage.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import useAuth from '@modules/auth/useAuth';
-import { Avatar, Button, H1, Input, SizableText, XStack, YStack } from 'tamagui';
+import { Avatar, Button, H1, Input, SizableText, TextArea, XStack, YStack } from 'tamagui';
 import { Feather } from '@expo/vector-icons';
 import { router } from 'expo-router';
 import { Formik } from 'formik';
@@ -54,8 +54,8 @@ const EditProfilePage = () => {
                 <SizableText color="$textWashedOut">Bio</SizableText>
                 <SizableText color="$textWashedOut">0/100</SizableText>
               </XStack>
-              <Input
-                multiline
+              <TextArea
+                maxHeight="$8"
                 placeholderTextColor="$textWashedOut"
                 placeholder="bio"
                 onChangeText={props.handleChange('bio')}

From e8ead94285e3cf2aafe1db8299076c1e84c136d8 Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Fri, 14 Jun 2024 21:30:00 +0200
Subject: [PATCH 13/29] style: multiple ystacks with gap

---
 src/screens/EditProfilePage.tsx | 48 ++++++++++++++++++---------------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/screens/EditProfilePage.tsx b/src/screens/EditProfilePage.tsx
index be32420..2c680d5 100644
--- a/src/screens/EditProfilePage.tsx
+++ b/src/screens/EditProfilePage.tsx
@@ -38,29 +38,33 @@ const EditProfilePage = () => {
       <YStack gap="$2">
         <Formik initialValues={{ displayname: '', bio: '' }} onSubmit={(values) => {}}>
           {(props) => (
-            <YStack gap="$2">
-              <XStack justifyContent="space-between">
-                <SizableText color="$textWashedOut">Displayname</SizableText>
-                <SizableText color="$textWashedOut">0/20</SizableText>
-              </XStack>
-              <Input
-                placeholderTextColor="$textWashedOut"
-                placeholder="displayname"
-                onChangeText={props.handleChange('displayname')}
-                value={props.values.displayname}
-              />
+            <YStack gap="$6">
+              <YStack gap="$2">
+                <XStack justifyContent="space-between">
+                  <SizableText color="$textWashedOut">Displayname</SizableText>
+                  <SizableText color="$textWashedOut">0/20</SizableText>
+                </XStack>
+                <Input
+                  placeholderTextColor="$textWashedOut"
+                  placeholder="displayname"
+                  onChangeText={props.handleChange('displayname')}
+                  value={props.values.displayname}
+                />
+              </YStack>
 
-              <XStack justifyContent="space-between">
-                <SizableText color="$textWashedOut">Bio</SizableText>
-                <SizableText color="$textWashedOut">0/100</SizableText>
-              </XStack>
-              <TextArea
-                maxHeight="$8"
-                placeholderTextColor="$textWashedOut"
-                placeholder="bio"
-                onChangeText={props.handleChange('bio')}
-                value={props.values.bio}
-              />
+              <YStack gap="$2">
+                <XStack justifyContent="space-between">
+                  <SizableText color="$textWashedOut">Bio</SizableText>
+                  <SizableText color="$textWashedOut">0/100</SizableText>
+                </XStack>
+                <TextArea
+                  maxHeight="$8"
+                  placeholderTextColor="$textWashedOut"
+                  placeholder="bio"
+                  onChangeText={props.handleChange('bio')}
+                  value={props.values.bio}
+                />
+              </YStack>
             </YStack>
           )}
         </Formik>

From 683019bc239945ad45678fdc01ebf1b5f5d0c18f Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Fri, 14 Jun 2024 21:37:47 +0200
Subject: [PATCH 14/29] style: Pressable() instead of a button

---
 src/screens/EditProfilePage.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/screens/EditProfilePage.tsx b/src/screens/EditProfilePage.tsx
index 2c680d5..6f76a94 100644
--- a/src/screens/EditProfilePage.tsx
+++ b/src/screens/EditProfilePage.tsx
@@ -4,7 +4,7 @@ import { Avatar, Button, H1, Input, SizableText, TextArea, XStack, YStack } from
 import { Feather } from '@expo/vector-icons';
 import { router } from 'expo-router';
 import { Formik } from 'formik';
-import { TextInput, View } from 'react-native';
+import { Pressable, TextInput, View } from 'react-native';
 
 const EditProfilePage = () => {
   const { user } = useAuth();
@@ -13,11 +13,9 @@ const EditProfilePage = () => {
     <YStack padding="$4" backgroundColor="$background" gap="$5">
       <XStack alignItems="center" justifyContent="space-between">
         <XStack alignItems="center">
-          <Button
-            backgroundColor="#151718"
-            icon={<Feather name="chevron-left" size={24} color="white" />}
-            onPress={() => router.back()}
-          />
+        <Pressable onPress={() => router.back()}>
+          <Feather name="chevron-left" size={28} color="white" />
+        </Pressable>
           <H1 fontSize={24}>Edit Profile</H1>
         </XStack>
         <SizableText fontSize={18} color="$accentWashedOut">

From 1d8564482b6dbdbaa0308db63753b50499218ec2 Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Fri, 14 Jun 2024 22:04:11 +0200
Subject: [PATCH 15/29] feat: limit and update the character count

---
 src/screens/EditProfilePage.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/screens/EditProfilePage.tsx b/src/screens/EditProfilePage.tsx
index 6f76a94..df857dd 100644
--- a/src/screens/EditProfilePage.tsx
+++ b/src/screens/EditProfilePage.tsx
@@ -9,6 +9,7 @@ import { Pressable, TextInput, View } from 'react-native';
 const EditProfilePage = () => {
   const { user } = useAuth();
 
+
   return (
     <YStack padding="$4" backgroundColor="$background" gap="$5">
       <XStack alignItems="center" justifyContent="space-between">
@@ -40,26 +41,32 @@ const EditProfilePage = () => {
               <YStack gap="$2">
                 <XStack justifyContent="space-between">
                   <SizableText color="$textWashedOut">Displayname</SizableText>
-                  <SizableText color="$textWashedOut">0/20</SizableText>
-                </XStack>
+                  <SizableText color="$textWashedOut">{props.values.displayname.length}/20</SizableText>
+                  </XStack>
                 <Input
                   placeholderTextColor="$textWashedOut"
                   placeholder="displayname"
-                  onChangeText={props.handleChange('displayname')}
+                  onChangeText={(text) => {
+                    props.handleChange('displayname')(text.substring(0,20)); 
+                    console.log(`Character count: ${text}`); 
+                  }}
                   value={props.values.displayname}
+                  
                 />
               </YStack>
 
               <YStack gap="$2">
                 <XStack justifyContent="space-between">
                   <SizableText color="$textWashedOut">Bio</SizableText>
-                  <SizableText color="$textWashedOut">0/100</SizableText>
+                  <SizableText color="$textWashedOut">{props.values.bio.length}/100</SizableText>
                 </XStack>
                 <TextArea
-                  maxHeight="$8"
                   placeholderTextColor="$textWashedOut"
                   placeholder="bio"
-                  onChangeText={props.handleChange('bio')}
+                  onChangeText={(text) => {
+                    props.handleChange('bio')(text.substring(0,100)); 
+                    console.log(`Character count: ${text}`); 
+                  }}
                   value={props.values.bio}
                 />
               </YStack>

From 8d694e68a13b85e5647b178dac6a167ca26fa1ec Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Fri, 14 Jun 2024 22:06:39 +0200
Subject: [PATCH 16/29] refactor: removed console logs

---
 src/screens/EditProfilePage.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/screens/EditProfilePage.tsx b/src/screens/EditProfilePage.tsx
index df857dd..b7afbf4 100644
--- a/src/screens/EditProfilePage.tsx
+++ b/src/screens/EditProfilePage.tsx
@@ -48,10 +48,8 @@ const EditProfilePage = () => {
                   placeholder="displayname"
                   onChangeText={(text) => {
                     props.handleChange('displayname')(text.substring(0,20)); 
-                    console.log(`Character count: ${text}`); 
                   }}
                   value={props.values.displayname}
-                  
                 />
               </YStack>
 
@@ -65,7 +63,6 @@ const EditProfilePage = () => {
                   placeholder="bio"
                   onChangeText={(text) => {
                     props.handleChange('bio')(text.substring(0,100)); 
-                    console.log(`Character count: ${text}`); 
                   }}
                   value={props.values.bio}
                 />

From 5a41201f48f21ce808998e779fd3c3434e2b5bd7 Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Fri, 14 Jun 2024 22:09:09 +0200
Subject: [PATCH 17/29] feat: dynamically show days in genrebadge

---
 src/components/profile/GenreBadge.tsx | 5 +++--
 src/screens/ProfilePage.tsx           | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/profile/GenreBadge.tsx b/src/components/profile/GenreBadge.tsx
index b41672f..6236d77 100644
--- a/src/components/profile/GenreBadge.tsx
+++ b/src/components/profile/GenreBadge.tsx
@@ -6,9 +6,10 @@ interface Props {
   genre: string;
   percent: number;
   avgViewer: number;
+  days: string[];
 }
 
-const GenreBadge: React.FC<Props> = ({ genre, percent, avgViewer }) => {
+const GenreBadge: React.FC<Props> = ({ genre, percent, avgViewer, days }) => {
   return (
     <YStack padding="$2" backgroundColor="$primaryLight" borderRadius={15}>
       <YStack gap="$2" paddingLeft="$2" paddingRight="$2">
@@ -17,7 +18,7 @@ const GenreBadge: React.FC<Props> = ({ genre, percent, avgViewer }) => {
         </SizableText>
         <XStack justifyContent='space-between'>
           <SizableText fontSize={13} color="$color.textWashedOut">Avg. Viewers: {formatNumber(avgViewer)}</SizableText>
-          <SizableText fontSize={13} color="$color.textWashedOut">Mostly Mo or Fr</SizableText>
+          <SizableText fontSize={13} color="$color.textWashedOut">Mostly {days}</SizableText>
         </XStack>
       </YStack>
     </YStack>
diff --git a/src/screens/ProfilePage.tsx b/src/screens/ProfilePage.tsx
index d460912..a0ab195 100644
--- a/src/screens/ProfilePage.tsx
+++ b/src/screens/ProfilePage.tsx
@@ -93,10 +93,11 @@ const ProfilePage: React.FC<{ userid: string }> = ({ userid }) => {
             <YStack flex={1} gap="$3">
               {genreData.map((genre, index) => (
                 <GenreBadge
-                  key={index} // Key prop should be unique for each item in the array
-                  genre={genre.name} // Assuming genre name is stored in `name` property
+                  key={index} 
+                  genre={genre.name} 
                   percent={genre.percent}
                   avgViewer={genre.avgViewers}
+                  days={genre.days}
                 />
               ))}
             </YStack>

From c12761fb9ffdd894ac23cddd7a2a2e4ed074b3b8 Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Fri, 14 Jun 2024 22:31:03 +0200
Subject: [PATCH 18/29] fix: display of percentages now limited to 1 after
 comma

---
 src/components/profile/GenreBadge.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/profile/GenreBadge.tsx b/src/components/profile/GenreBadge.tsx
index 6236d77..2219222 100644
--- a/src/components/profile/GenreBadge.tsx
+++ b/src/components/profile/GenreBadge.tsx
@@ -14,7 +14,7 @@ const GenreBadge: React.FC<Props> = ({ genre, percent, avgViewer, days }) => {
     <YStack padding="$2" backgroundColor="$primaryLight" borderRadius={15}>
       <YStack gap="$2" paddingLeft="$2" paddingRight="$2">
         <SizableText fontSize={14}>
-          {percent}% {genre}
+          {percent.toPrecision(3)}% {genre}
         </SizableText>
         <XStack justifyContent='space-between'>
           <SizableText fontSize={13} color="$color.textWashedOut">Avg. Viewers: {formatNumber(avgViewer)}</SizableText>

From ccf1bb35850563e950a5a022a9ee66a584f1c147 Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Fri, 14 Jun 2024 22:41:57 +0200
Subject: [PATCH 19/29] style: height to 100%

---
 src/screens/EditProfilePage.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/screens/EditProfilePage.tsx b/src/screens/EditProfilePage.tsx
index b7afbf4..4488c45 100644
--- a/src/screens/EditProfilePage.tsx
+++ b/src/screens/EditProfilePage.tsx
@@ -11,7 +11,7 @@ const EditProfilePage = () => {
 
 
   return (
-    <YStack padding="$4" backgroundColor="$background" gap="$5">
+    <YStack padding="$4" backgroundColor="$background" gap="$5" height="100%">
       <XStack alignItems="center" justifyContent="space-between">
         <XStack alignItems="center">
         <Pressable onPress={() => router.back()}>
@@ -23,6 +23,7 @@ const EditProfilePage = () => {
           Finish
         </SizableText>
       </XStack>
+
       <YStack alignItems="center">
         <Avatar circular size="$10">
           <Avatar.Image

From d50e9367ff5c470b0b2e81ba33a91731ee149653 Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Fri, 14 Jun 2024 23:08:07 +0200
Subject: [PATCH 20/29] refactor: maxLength attribute to TextInput and TextArea

---
 src/screens/EditProfilePage.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/screens/EditProfilePage.tsx b/src/screens/EditProfilePage.tsx
index 4488c45..e6ccc82 100644
--- a/src/screens/EditProfilePage.tsx
+++ b/src/screens/EditProfilePage.tsx
@@ -45,10 +45,11 @@ const EditProfilePage = () => {
                   <SizableText color="$textWashedOut">{props.values.displayname.length}/20</SizableText>
                   </XStack>
                 <Input
+                  maxLength={20}
                   placeholderTextColor="$textWashedOut"
                   placeholder="displayname"
                   onChangeText={(text) => {
-                    props.handleChange('displayname')(text.substring(0,20)); 
+                    props.handleChange('displayname')(text); 
                   }}
                   value={props.values.displayname}
                 />
@@ -60,10 +61,11 @@ const EditProfilePage = () => {
                   <SizableText color="$textWashedOut">{props.values.bio.length}/100</SizableText>
                 </XStack>
                 <TextArea
+                  maxLength={100}
                   placeholderTextColor="$textWashedOut"
                   placeholder="bio"
                   onChangeText={(text) => {
-                    props.handleChange('bio')(text.substring(0,100)); 
+                    props.handleChange('bio')(text); 
                   }}
                   value={props.values.bio}
                 />

From 04f0a5261e3147075e8e52475d11d2ca24a0337e Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Thu, 20 Jun 2024 15:42:08 +0200
Subject: [PATCH 21/29] chore: yarn install

---
 yarn.lock | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/yarn.lock b/yarn.lock
index 83cc2d1..4e26fbe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11143,6 +11143,11 @@ react-error-boundary@^3.1.0:
   dependencies:
     "@babel/runtime" "^7.12.5"
 
+react-fast-compare@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
 react-fast-compare@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"

From 1a4004a73da62d3201554d6ddef4e9d139fd8c28 Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Thu, 20 Jun 2024 15:42:44 +0200
Subject: [PATCH 22/29] feat: displayname and bio count displayed red when
 maxLength

---
 src/screens/EditProfilePage.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/screens/EditProfilePage.tsx b/src/screens/EditProfilePage.tsx
index e6ccc82..9a6af07 100644
--- a/src/screens/EditProfilePage.tsx
+++ b/src/screens/EditProfilePage.tsx
@@ -9,14 +9,13 @@ import { Pressable, TextInput, View } from 'react-native';
 const EditProfilePage = () => {
   const { user } = useAuth();
 
-
   return (
     <YStack padding="$4" backgroundColor="$background" gap="$5" height="100%">
       <XStack alignItems="center" justifyContent="space-between">
         <XStack alignItems="center">
-        <Pressable onPress={() => router.back()}>
-          <Feather name="chevron-left" size={28} color="white" />
-        </Pressable>
+          <Pressable onPress={() => router.back()}>
+            <Feather name="chevron-left" size={28} color="white" />
+          </Pressable>
           <H1 fontSize={24}>Edit Profile</H1>
         </XStack>
         <SizableText fontSize={18} color="$accentWashedOut">
@@ -42,14 +41,17 @@ const EditProfilePage = () => {
               <YStack gap="$2">
                 <XStack justifyContent="space-between">
                   <SizableText color="$textWashedOut">Displayname</SizableText>
-                  <SizableText color="$textWashedOut">{props.values.displayname.length}/20</SizableText>
-                  </XStack>
+                  <SizableText
+                    color={props.values.displayname.length >= 20 ? 'red' : '$textWashedOut'}>
+                    {props.values.displayname.length}/20
+                  </SizableText>
+                </XStack>
                 <Input
                   maxLength={20}
                   placeholderTextColor="$textWashedOut"
                   placeholder="displayname"
                   onChangeText={(text) => {
-                    props.handleChange('displayname')(text); 
+                    props.handleChange('displayname')(text);
                   }}
                   value={props.values.displayname}
                 />
@@ -58,14 +60,16 @@ const EditProfilePage = () => {
               <YStack gap="$2">
                 <XStack justifyContent="space-between">
                   <SizableText color="$textWashedOut">Bio</SizableText>
-                  <SizableText color="$textWashedOut">{props.values.bio.length}/100</SizableText>
+                  <SizableText color={props.values.bio.length >= 100 ? 'red' : '$textWashedOut'}>
+                    {props.values.bio.length}/100
+                  </SizableText>
                 </XStack>
                 <TextArea
                   maxLength={100}
                   placeholderTextColor="$textWashedOut"
                   placeholder="bio"
                   onChangeText={(text) => {
-                    props.handleChange('bio')(text); 
+                    props.handleChange('bio')(text);
                   }}
                   value={props.values.bio}
                 />

From 2ff884b8b669cb035881c6cbfdc2f06d347c18ba Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Thu, 20 Jun 2024 16:32:55 +0200
Subject: [PATCH 23/29] feat: update bio and displayname with Formik onPress()

---
 src/screens/EditProfilePage.tsx | 159 +++++++++++++++++++-------------
 1 file changed, 95 insertions(+), 64 deletions(-)

diff --git a/src/screens/EditProfilePage.tsx b/src/screens/EditProfilePage.tsx
index 9a6af07..000f4a2 100644
--- a/src/screens/EditProfilePage.tsx
+++ b/src/screens/EditProfilePage.tsx
@@ -5,80 +5,111 @@ import { Feather } from '@expo/vector-icons';
 import { router } from 'expo-router';
 import { Formik } from 'formik';
 import { Pressable, TextInput, View } from 'react-native';
+import { useUpdateUser } from '@api/user/mutation/useUpdateUser';
+import { useGetUser } from '@api/user/query/useGetUser';
 
 const EditProfilePage = () => {
   const { user } = useAuth();
 
-  return (
-    <YStack padding="$4" backgroundColor="$background" gap="$5" height="100%">
-      <XStack alignItems="center" justifyContent="space-between">
-        <XStack alignItems="center">
-          <Pressable onPress={() => router.back()}>
-            <Feather name="chevron-left" size={28} color="white" />
-          </Pressable>
-          <H1 fontSize={24}>Edit Profile</H1>
-        </XStack>
-        <SizableText fontSize={18} color="$accentWashedOut">
-          Finish
-        </SizableText>
-      </XStack>
+  const { data } = useGetUser({
+    variables: { id: user.id },
+    refetchOnMount: true,
+    refetchOnWindowFocus: true,
+  });
 
-      <YStack alignItems="center">
-        <Avatar circular size="$10">
-          <Avatar.Image
-            accessibilityLabel="Cam"
-            src="https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80"
-          />
-          <Avatar.Fallback backgroundColor="$blue10" />
-        </Avatar>
-        <SizableText color="$textWashedOut">Edit Avatar</SizableText>
-      </YStack>
+  const { mutate } = useUpdateUser();
 
-      <YStack gap="$2">
-        <Formik initialValues={{ displayname: '', bio: '' }} onSubmit={(values) => {}}>
-          {(props) => (
-            <YStack gap="$6">
-              <YStack gap="$2">
-                <XStack justifyContent="space-between">
-                  <SizableText color="$textWashedOut">Displayname</SizableText>
-                  <SizableText
-                    color={props.values.displayname.length >= 20 ? 'red' : '$textWashedOut'}>
-                    {props.values.displayname.length}/20
-                  </SizableText>
-                </XStack>
-                <Input
-                  maxLength={20}
-                  placeholderTextColor="$textWashedOut"
-                  placeholder="displayname"
-                  onChangeText={(text) => {
-                    props.handleChange('displayname')(text);
-                  }}
-                  value={props.values.displayname}
-                />
-              </YStack>
+  const updateUser = async (displayname: string, bio: string) => {
+    const formData = new FormData();
+    formData.append('dispname', displayname);
+    formData.append('bio', bio);
+    mutate({
+      id: user.id,
+      data: formData,
+    });
+  };
 
-              <YStack gap="$2">
-                <XStack justifyContent="space-between">
-                  <SizableText color="$textWashedOut">Bio</SizableText>
-                  <SizableText color={props.values.bio.length >= 100 ? 'red' : '$textWashedOut'}>
-                    {props.values.bio.length}/100
-                  </SizableText>
-                </XStack>
-                <TextArea
-                  maxLength={100}
-                  placeholderTextColor="$textWashedOut"
-                  placeholder="bio"
-                  onChangeText={(text) => {
-                    props.handleChange('bio')(text);
-                  }}
-                  value={props.values.bio}
+  const handleFinishPress = (displayname: string, bio: string) => {
+    updateUser(displayname, bio);
+    router.back();
+  };
+
+  return (
+    <Formik
+      initialValues={{ displayname: user.dispname || '', bio: data?.data?.user.bio || '' }}
+      onSubmit={(values) => updateUser(values.displayname, values.bio)}
+    >
+      {(props) => (
+          <YStack padding="$4" backgroundColor="$background" gap="$5" height="100%">
+            <XStack alignItems="center" justifyContent="space-between">
+              <XStack alignItems="center">
+                <Pressable onPress={() => router.back()}>
+                  <Feather name="chevron-left" size={28} color="white" />
+                </Pressable>
+                <H1 fontSize={24}>Edit Profile</H1>
+              </XStack>
+              <Pressable onPress={() => handleFinishPress(props.values.displayname, props.values.bio)}>
+                <SizableText fontSize={18} color="$accentWashedOut">
+                  Finish
+                </SizableText>
+              </Pressable>
+            </XStack>
+
+            <YStack alignItems="center">
+              <Avatar circular size="$10" testID="profile-avatar">
+                <Avatar.Image
+                  accessibilityLabel="Nate Wienert"
+                  src={
+                    user?.avatar_url !== ''
+                      ? user.avatar_url
+                      : 'https://lyveblobstorage.blob.core.windows.net/images/avatar_placeholder.png'
+                  }
                 />
+                <Avatar.Fallback delayMs={600} backgroundColor="$blue10" />
+              </Avatar>
+              <SizableText color="$textWashedOut">Edit Avatar</SizableText>
+            </YStack>
+
+            <YStack gap="$2">
+              <YStack gap="$6">
+                <YStack gap="$2">
+                  <XStack justifyContent="space-between">
+                    <SizableText color="$textWashedOut">Displayname</SizableText>
+                    <SizableText
+                      color={props.values.displayname.length >= 20 ? 'red' : '$textWashedOut'}
+                    >
+                      {props.values.displayname.length}/20
+                    </SizableText>
+                  </XStack>
+                  <Input
+                    maxLength={20}
+                    placeholderTextColor="$textWashedOut"
+                    placeholder="displayname"
+                    onChangeText={props.handleChange('displayname')}
+                    value={props.values.displayname}
+                  />
+                </YStack>
+
+                <YStack gap="$2">
+                  <XStack justifyContent="space-between">
+                    <SizableText color="$textWashedOut">Bio</SizableText>
+                    <SizableText color={props.values.bio.length >= 100 ? 'red' : '$textWashedOut'}>
+                      {props.values.bio.length}/100
+                    </SizableText>
+                  </XStack>
+                  <TextArea
+                    maxLength={100}
+                    placeholderTextColor="$textWashedOut"
+                    placeholder="bio"
+                    onChangeText={props.handleChange('bio')}
+                    value={props.values.bio}
+                  />
+                </YStack>
               </YStack>
             </YStack>
-          )}
-        </Formik>
-      </YStack>
-    </YStack>
+          </YStack>
+      )}
+    </Formik>
   );
 };
 

From 4601acf4c7911355deb3c808824eca8d6b86d640 Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Thu, 20 Jun 2024 16:39:58 +0200
Subject: [PATCH 24/29] chore: user avatar url

---
 src/screens/EditProfilePage.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/screens/EditProfilePage.tsx b/src/screens/EditProfilePage.tsx
index 000f4a2..d566cd1 100644
--- a/src/screens/EditProfilePage.tsx
+++ b/src/screens/EditProfilePage.tsx
@@ -60,9 +60,8 @@ const EditProfilePage = () => {
                 <Avatar.Image
                   accessibilityLabel="Nate Wienert"
                   src={
-                    user?.avatar_url !== ''
-                      ? user.avatar_url
-                      : 'https://lyveblobstorage.blob.core.windows.net/images/avatar_placeholder.png'
+                    data?.data?.user.avatar_url ??
+                    'https://lyveblobstorage.blob.core.windows.net/images/avatar_placeholder.png'
                   }
                 />
                 <Avatar.Fallback delayMs={600} backgroundColor="$blue10" />

From 8e5e62f82440ea68e009892f3cc37c2321fb5df6 Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Thu, 20 Jun 2024 18:04:35 +0200
Subject: [PATCH 25/29] chore: remove tabbar on edit profile page

---
 src/app/(auth)/(tabs)/_layout.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/app/(auth)/(tabs)/_layout.tsx b/src/app/(auth)/(tabs)/_layout.tsx
index 9bb4a63..92ca136 100644
--- a/src/app/(auth)/(tabs)/_layout.tsx
+++ b/src/app/(auth)/(tabs)/_layout.tsx
@@ -1,26 +1,30 @@
 import FloatingButton from '@components/FloatingButton';
 import { Feather } from '@expo/vector-icons';
 import useAuth from '@modules/auth/useAuth';
-import { Tabs } from 'expo-router';
+import { Tabs, usePathname } from 'expo-router';
 import React from 'react';
 import { Platform } from 'react-native';
 
 export default function TabLayout() {
   const { user } = useAuth();
 
+  const pathname = usePathname();
+
   return (
     <Tabs
       screenOptions={{
+        tabBarHideOnKeyboard: true,
         tabBarTestID: 'tabbar',
         tabBarActiveTintColor: 'white',
         tabBarInactiveTintColor: '#676D75',
         headerShown: false,
         tabBarStyle: {
+          display: pathname.includes('editProfile') ? 'none' : 'flex',
           position: 'absolute',
           justifyContent: 'center',
           alignItems: 'center',
           borderWidth: 0,
-          height: Platform.OS === 'ios' ? '11%' : '8%',
+          height: Platform.OS === 'ios' ? '11%' : '9%',
           borderColor: '#151718',
           borderTopWidth: 1,
           borderTopColor: '#242526',

From fc796f013e76bc4ec950fa449b29a9e529cef6c2 Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Thu, 20 Jun 2024 18:05:29 +0200
Subject: [PATCH 26/29] feat: KeyBoardAvoidingView on edit Profile

---
 src/app/(auth)/(tabs)/profile/editProfile.tsx | 36 +++++++++++++------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/app/(auth)/(tabs)/profile/editProfile.tsx b/src/app/(auth)/(tabs)/profile/editProfile.tsx
index 1ea62f1..0528832 100644
--- a/src/app/(auth)/(tabs)/profile/editProfile.tsx
+++ b/src/app/(auth)/(tabs)/profile/editProfile.tsx
@@ -1,14 +1,30 @@
-import { View, Text } from 'react-native'
-import React from 'react'
-import EditProfilePage from '@screens/EditProfilePage'
-import { SafeAreaView } from 'react-native-safe-area-context'
+import {
+  View,
+  Text,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  TouchableWithoutFeedback,
+  Keyboard,
+} from 'react-native';
+import React from 'react';
+import EditProfilePage from '@screens/EditProfilePage';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 const EditProfile = () => {
   return (
-    <SafeAreaView>
-      <EditProfilePage></EditProfilePage>
-    </SafeAreaView>
-  )
-}
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={{ flex: 1 }}>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+        <SafeAreaView style={{ flex: 1 }}>
+          <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+            <EditProfilePage />
+          </ScrollView>
+        </SafeAreaView>
+      </TouchableWithoutFeedback>
+    </KeyboardAvoidingView>
+  );
+};
 
-export default EditProfile
\ No newline at end of file
+export default EditProfile;

From 66049e6dead751373e65850ef9b691b90bfb34b0 Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Thu, 20 Jun 2024 18:05:46 +0200
Subject: [PATCH 27/29] chore: genreStatisticBadge

---
 .../profile/GenreStatisticBadge.tsx           | 36 ++++++++-----------
 1 file changed, 14 insertions(+), 22 deletions(-)

diff --git a/src/components/profile/GenreStatisticBadge.tsx b/src/components/profile/GenreStatisticBadge.tsx
index b33d482..1c425ee 100644
--- a/src/components/profile/GenreStatisticBadge.tsx
+++ b/src/components/profile/GenreStatisticBadge.tsx
@@ -1,33 +1,25 @@
+import { formatNumber } from '@utils/formatNumber';
 import React from 'react';
-import { YStack, SizableText } from 'tamagui';
+import { YStack, SizableText, XStack } from 'tamagui';
 
 interface Props {
   genre: string;
   percent: number;
+  avgViewer: number;
+  days: string[];
 }
 
-const GenreStatisticBadge: React.FC<Props> = ({ genre, percent = 0 }) => {
+const GenreStatisticBadge: React.FC<Props> = ({ genre, percent, avgViewer, days }) => {
   return (
-    <YStack
-      padding="$2"
-      gap="$1"
-      alignItems="center"
-      backgroundColor="$primaryLight"
-      height="$10"
-      width="$8"
-      borderRadius={15}>
-      <YStack
-        justifyContent="center"
-        alignItems="center"
-        height="$4"
-        width="$4"
-        backgroundColor="#151718"
-        borderRadius={15}>
-        <SizableText fontSize={20}>{genre.split(' ')[1] ?? '❓'}</SizableText>
-      </YStack>
-      <YStack alignItems="center">
-        <SizableText fontSize={13}>{genre.split(' ')[0]}</SizableText>
-        <SizableText fontSize={13}>{percent}%</SizableText>
+    <YStack padding="$2" backgroundColor="$primaryLight" borderRadius={15}>
+      <YStack gap="$2" paddingLeft="$2" paddingRight="$2">
+        <SizableText fontSize={14}>
+          {percent.toPrecision(3)}% {genre}
+        </SizableText>
+        <XStack justifyContent='space-between'>
+          <SizableText fontSize={13} color="$color.textWashedOut">Avg. Viewers: {formatNumber(avgViewer)}</SizableText>
+          <SizableText fontSize={13} color="$color.textWashedOut">Mostly {days}</SizableText>
+        </XStack>
       </YStack>
     </YStack>
   );

From 0a94214fcbe12952a78bf209293eca47708cd258 Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Thu, 20 Jun 2024 18:06:04 +0200
Subject: [PATCH 28/29] feat: upload images to change profile picture

---
 src/screens/EditProfilePage.tsx | 51 ++++++++++++++++++++++++++++-----
 1 file changed, 44 insertions(+), 7 deletions(-)

diff --git a/src/screens/EditProfilePage.tsx b/src/screens/EditProfilePage.tsx
index d566cd1..7ff4e7c 100644
--- a/src/screens/EditProfilePage.tsx
+++ b/src/screens/EditProfilePage.tsx
@@ -1,14 +1,43 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import useAuth from '@modules/auth/useAuth';
 import { Avatar, Button, H1, Input, SizableText, TextArea, XStack, YStack } from 'tamagui';
 import { Feather } from '@expo/vector-icons';
 import { router } from 'expo-router';
 import { Formik } from 'formik';
-import { Pressable, TextInput, View } from 'react-native';
+import { KeyboardAvoidingView, Platform, Pressable } from 'react-native';
 import { useUpdateUser } from '@api/user/mutation/useUpdateUser';
 import { useGetUser } from '@api/user/query/useGetUser';
+import useCameraActionSheet from '@hooks/useCameraActionSheet';
 
 const EditProfilePage = () => {
+
+
+  const { show, assets } = useCameraActionSheet();
+
+
+  const [imageUri, setImageUri] = useState<{
+    image: {
+      uri: string;
+      name: string;
+      type: string;
+    };
+  } | null>(null);
+
+  useEffect(() => {
+    if (assets && assets[0]) {
+      const { uri, mimeType, fileName, assetId } = assets[0];
+      setImageUri({
+        image: { uri, type: mimeType ?? 'image/jpeg', name: fileName ?? assetId ?? 'image' },
+      });
+    }
+  }, [assets]);
+
+  const openActionSheet = async () => {
+    console.log("fnjkgjrngjrj");
+    await show();
+  };
+
+
   const { user } = useAuth();
 
   const { data } = useGetUser({
@@ -21,6 +50,13 @@ const EditProfilePage = () => {
 
   const updateUser = async (displayname: string, bio: string) => {
     const formData = new FormData();
+
+
+    if (imageUri) {  
+      // @ts-ignore
+      formData.append('image', { ...imageUri.image });     
+    }
+
     formData.append('dispname', displayname);
     formData.append('bio', bio);
     mutate({
@@ -35,12 +71,12 @@ const EditProfilePage = () => {
   };
 
   return (
+ 
     <Formik
       initialValues={{ displayname: user.dispname || '', bio: data?.data?.user.bio || '' }}
-      onSubmit={(values) => updateUser(values.displayname, values.bio)}
-    >
+      onSubmit={(values) => updateUser(values.displayname, values.bio)}>
       {(props) => (
-          <YStack padding="$4" backgroundColor="$background" gap="$5" height="100%">
+          <YStack padding="$4" backgroundColor="$background" gap="$5" flexGrow={1}>
             <XStack alignItems="center" justifyContent="space-between">
               <XStack alignItems="center">
                 <Pressable onPress={() => router.back()}>
@@ -66,7 +102,9 @@ const EditProfilePage = () => {
                 />
                 <Avatar.Fallback delayMs={600} backgroundColor="$blue10" />
               </Avatar>
+              <Pressable onPress={openActionSheet}>
               <SizableText color="$textWashedOut">Edit Avatar</SizableText>
+              </Pressable>
             </YStack>
 
             <YStack gap="$2">
@@ -75,8 +113,7 @@ const EditProfilePage = () => {
                   <XStack justifyContent="space-between">
                     <SizableText color="$textWashedOut">Displayname</SizableText>
                     <SizableText
-                      color={props.values.displayname.length >= 20 ? 'red' : '$textWashedOut'}
-                    >
+                      color={props.values.displayname.length >= 20 ? 'red' : '$textWashedOut'}>
                       {props.values.displayname.length}/20
                     </SizableText>
                   </XStack>

From 8f5316aa2da40fb1281067a375707b5fcb5e7eba Mon Sep 17 00:00:00 2001
From: jrau1801 <janrau1802@gmail.com>
Date: Thu, 20 Jun 2024 18:06:23 +0200
Subject: [PATCH 29/29] refactor: renamed bagde

---
 src/screens/ProfilePage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/screens/ProfilePage.tsx b/src/screens/ProfilePage.tsx
index 039928a..5b94d29 100644
--- a/src/screens/ProfilePage.tsx
+++ b/src/screens/ProfilePage.tsx
@@ -92,7 +92,7 @@ const ProfilePage: React.FC<{ userid: string }> = ({ userid }) => {
           <YStack marginBottom="$8" padding="$4">
             <YStack flex={1} gap="$3">
               {genreData.map((genre, index) => (
-                <GenreBadge
+                <GenreStatisticBadge
                   key={index} 
                   genre={genre.name} 
                   percent={genre.percent}