From 688e894ef18e96d16f7cca948e5f1335b68d459a Mon Sep 17 00:00:00 2001
From: JKaypa <jose_kaypa@hotmail.com>
Date: Mon, 2 Sep 2024 16:17:53 -0500
Subject: [PATCH 1/5] OV-133: + get full name from store and handle initials

---
 .../user-card/components/user-avatar.tsx      | 11 +++---
 .../user-card/helpers/get-initials.helper.ts  | 12 ++++++
 .../components/user-card/helpers/helpers.ts   |  1 +
 .../users/components/user-card/user-card.tsx  | 39 ++++++++++++-------
 4 files changed, 43 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/bundles/users/components/user-card/helpers/get-initials.helper.ts
 create mode 100644 frontend/src/bundles/users/components/user-card/helpers/helpers.ts

diff --git a/frontend/src/bundles/users/components/user-card/components/user-avatar.tsx b/frontend/src/bundles/users/components/user-card/components/user-avatar.tsx
index 9ef4a435d..32e91fcd8 100644
--- a/frontend/src/bundles/users/components/user-card/components/user-avatar.tsx
+++ b/frontend/src/bundles/users/components/user-card/components/user-avatar.tsx
@@ -1,10 +1,11 @@
 import { Circle } from '~/bundles/common/components/components.js';
+import { useAppSelector } from '~/bundles/common/hooks/hooks.js';
 
-type Properties = {
-    username: string;
-};
+import { getInitials } from '../helpers/helpers.js';
 
-const UserAvatar: React.FC<Properties> = ({ username }) => {
+const UserAvatar: React.FC = () => {
+    const { user } = useAppSelector(({ auth }) => auth);
+    const initials = getInitials(user?.fullName);
     return (
         <Circle
             size="40px"
@@ -12,7 +13,7 @@ const UserAvatar: React.FC<Properties> = ({ username }) => {
             borderColor="brand.secondary.900"
             color="brand.secondary.900"
         >
-            {username}
+            {initials}
         </Circle>
     );
 };
diff --git a/frontend/src/bundles/users/components/user-card/helpers/get-initials.helper.ts b/frontend/src/bundles/users/components/user-card/helpers/get-initials.helper.ts
new file mode 100644
index 000000000..6ed062412
--- /dev/null
+++ b/frontend/src/bundles/users/components/user-card/helpers/get-initials.helper.ts
@@ -0,0 +1,12 @@
+const getInitials = (fullName: string | undefined): string => {
+    if (fullName) {
+        const splittedName = fullName.trim().split(/\s+/);
+        const firstInitial = splittedName[0]?.charAt(0).toUpperCase();
+        const secondInitial = splittedName[1]?.charAt(0).toUpperCase() ?? '';
+
+        return `${firstInitial}${secondInitial}`;
+    }
+    return 'FN';
+};
+
+export { getInitials };
diff --git a/frontend/src/bundles/users/components/user-card/helpers/helpers.ts b/frontend/src/bundles/users/components/user-card/helpers/helpers.ts
new file mode 100644
index 000000000..3030e7966
--- /dev/null
+++ b/frontend/src/bundles/users/components/user-card/helpers/helpers.ts
@@ -0,0 +1 @@
+export { getInitials } from './get-initials.helper.js';
diff --git a/frontend/src/bundles/users/components/user-card/user-card.tsx b/frontend/src/bundles/users/components/user-card/user-card.tsx
index 60aefd861..4fb14a60c 100644
--- a/frontend/src/bundles/users/components/user-card/user-card.tsx
+++ b/frontend/src/bundles/users/components/user-card/user-card.tsx
@@ -4,24 +4,33 @@ import {
     Text,
     VStack,
 } from '~/bundles/common/components/components.js';
+import { useAppSelector } from '~/bundles/common/hooks/hooks.js';
 
 import { UserAvatar } from './components/user-avatar.js';
 
-const UserCard: React.FC = () => (
-    <VStack rounded="lg" bg="background.600" spacing="10px" p="15px 5px 10px">
-        <Flex
-            w="full"
-            align="center"
-            color="brand.secondary.900"
-            gap="15px"
-            pl="10px"
+const UserCard: React.FC = () => {
+    const { user } = useAppSelector(({ auth }) => auth);
+
+    return (
+        <VStack
+            rounded="lg"
+            bg="background.600"
+            spacing="10px"
+            p="15px 5px 10px"
         >
-            {/* TODO: replace Circle and Text content with dynamic values */}
-            <UserAvatar username="FN" />
-            <Text>Firstname Lastname</Text>
-        </Flex>
-        <Button label="Create video" />
-    </VStack>
-);
+            <Flex
+                w="full"
+                align="center"
+                color="brand.secondary.900"
+                gap="15px"
+                pl="10px"
+            >
+                <UserAvatar />
+                <Text>{user?.fullName ?? 'FirstName LastName'}</Text>
+            </Flex>
+            <Button label="Create video" />
+        </VStack>
+    );
+};
 
 export { UserCard };

From 3ba67670e68acc74f682eeb1b393b02a2515457a Mon Sep 17 00:00:00 2001
From: JKaypa <jose_kaypa@hotmail.com>
Date: Mon, 2 Sep 2024 16:19:17 -0500
Subject: [PATCH 2/5] OV-133: * update usercard/useravatar from sidebar

---
 frontend/src/bundles/common/components/sidebar/sidebar.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/bundles/common/components/sidebar/sidebar.tsx b/frontend/src/bundles/common/components/sidebar/sidebar.tsx
index 99fe569ea..97a71bb16 100644
--- a/frontend/src/bundles/common/components/sidebar/sidebar.tsx
+++ b/frontend/src/bundles/common/components/sidebar/sidebar.tsx
@@ -42,7 +42,6 @@ const Sidebar = ({ children }: Properties): JSX.Element => {
     };
 
     const handleLogOut = useCallback(() => {
-        //ToDo: log out user with token
         navigate(AppRoute.SIGN_IN);
     }, [navigate]);
 
@@ -74,8 +73,7 @@ const Sidebar = ({ children }: Properties): JSX.Element => {
                     variant="icon"
                 />
                 <Box mb="30px">
-                    {/* ToDo: Add this username value dynamically */}
-                    {isCollapsed ? <UserAvatar username="FN" /> : <UserCard />}
+                    {isCollapsed ? <UserAvatar /> : <UserCard />}
                 </Box>
                 <Box>
                     <Link to={AppRoute.ROOT}>

From a9454ea6acfc7995ba41b225302376bc87f062fc Mon Sep 17 00:00:00 2001
From: JKaypa <jose_kaypa@hotmail.com>
Date: Tue, 3 Sep 2024 06:56:21 -0500
Subject: [PATCH 3/5] OV-133: * make suggested changes

---
 .../users/components/user-card/components/user-avatar.tsx   | 2 +-
 .../components/user-card/helpers/get-initials.helper.ts     | 6 +++---
 .../src/bundles/users/components/user-card/user-card.tsx    | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/bundles/users/components/user-card/components/user-avatar.tsx b/frontend/src/bundles/users/components/user-card/components/user-avatar.tsx
index 32e91fcd8..7517aeb84 100644
--- a/frontend/src/bundles/users/components/user-card/components/user-avatar.tsx
+++ b/frontend/src/bundles/users/components/user-card/components/user-avatar.tsx
@@ -4,7 +4,7 @@ import { useAppSelector } from '~/bundles/common/hooks/hooks.js';
 import { getInitials } from '../helpers/helpers.js';
 
 const UserAvatar: React.FC = () => {
-    const { user } = useAppSelector(({ auth }) => auth);
+    const user = useAppSelector(({ auth }) => auth.user);
     const initials = getInitials(user?.fullName);
     return (
         <Circle
diff --git a/frontend/src/bundles/users/components/user-card/helpers/get-initials.helper.ts b/frontend/src/bundles/users/components/user-card/helpers/get-initials.helper.ts
index 6ed062412..0e3593359 100644
--- a/frontend/src/bundles/users/components/user-card/helpers/get-initials.helper.ts
+++ b/frontend/src/bundles/users/components/user-card/helpers/get-initials.helper.ts
@@ -1,8 +1,8 @@
 const getInitials = (fullName: string | undefined): string => {
     if (fullName) {
-        const splittedName = fullName.trim().split(/\s+/);
-        const firstInitial = splittedName[0]?.charAt(0).toUpperCase();
-        const secondInitial = splittedName[1]?.charAt(0).toUpperCase() ?? '';
+        const [firstName, lastName] = fullName.trim().split(/\s+/);
+        const firstInitial = firstName?.charAt(0).toUpperCase();
+        const secondInitial = lastName?.charAt(0).toUpperCase() ?? '';
 
         return `${firstInitial}${secondInitial}`;
     }
diff --git a/frontend/src/bundles/users/components/user-card/user-card.tsx b/frontend/src/bundles/users/components/user-card/user-card.tsx
index 4fb14a60c..1054a155c 100644
--- a/frontend/src/bundles/users/components/user-card/user-card.tsx
+++ b/frontend/src/bundles/users/components/user-card/user-card.tsx
@@ -9,7 +9,7 @@ import { useAppSelector } from '~/bundles/common/hooks/hooks.js';
 import { UserAvatar } from './components/user-avatar.js';
 
 const UserCard: React.FC = () => {
-    const { user } = useAppSelector(({ auth }) => auth);
+    const user = useAppSelector(({ auth }) => auth.user);
 
     return (
         <VStack

From 54ec2d5ea84cfd15213f62fbbc9d3baf7ec3e6d0 Mon Sep 17 00:00:00 2001
From: JKaypa <jose_kaypa@hotmail.com>
Date: Tue, 3 Sep 2024 08:54:06 -0500
Subject: [PATCH 4/5] OV-133: * pass user name as props

---
 .../src/bundles/common/components/sidebar/sidebar.tsx  |  8 +++++++-
 .../components/user-card/components/user-avatar.tsx    | 10 ++++++----
 .../bundles/users/components/user-card/user-card.tsx   |  2 +-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/src/bundles/common/components/sidebar/sidebar.tsx b/frontend/src/bundles/common/components/sidebar/sidebar.tsx
index 97a71bb16..312ca1d80 100644
--- a/frontend/src/bundles/common/components/sidebar/sidebar.tsx
+++ b/frontend/src/bundles/common/components/sidebar/sidebar.tsx
@@ -8,6 +8,7 @@ import {
 } from '~/bundles/common/components/components.js';
 import { AppRoute } from '~/bundles/common/enums/enums.js';
 import {
+    useAppSelector,
     useCallback,
     useLocation,
     useNavigate,
@@ -27,6 +28,7 @@ const Sidebar = ({ children }: Properties): JSX.Element => {
     const [isCollapsed, setIsCollapsed] = useState(false);
     const { pathname } = useLocation();
     const navigate = useNavigate();
+    const user = useAppSelector(({ auth }) => auth.user);
 
     const handleToggle = useCallback(
         (): void => setIsCollapsed(!isCollapsed),
@@ -73,7 +75,11 @@ const Sidebar = ({ children }: Properties): JSX.Element => {
                     variant="icon"
                 />
                 <Box mb="30px">
-                    {isCollapsed ? <UserAvatar /> : <UserCard />}
+                    {isCollapsed ? (
+                        <UserAvatar username={user?.fullName} />
+                    ) : (
+                        <UserCard />
+                    )}
                 </Box>
                 <Box>
                     <Link to={AppRoute.ROOT}>
diff --git a/frontend/src/bundles/users/components/user-card/components/user-avatar.tsx b/frontend/src/bundles/users/components/user-card/components/user-avatar.tsx
index 7517aeb84..554acb29d 100644
--- a/frontend/src/bundles/users/components/user-card/components/user-avatar.tsx
+++ b/frontend/src/bundles/users/components/user-card/components/user-avatar.tsx
@@ -1,11 +1,13 @@
 import { Circle } from '~/bundles/common/components/components.js';
-import { useAppSelector } from '~/bundles/common/hooks/hooks.js';
 
 import { getInitials } from '../helpers/helpers.js';
 
-const UserAvatar: React.FC = () => {
-    const user = useAppSelector(({ auth }) => auth.user);
-    const initials = getInitials(user?.fullName);
+type Properties = {
+    username: string | undefined;
+};
+
+const UserAvatar: React.FC<Properties> = ({ username }) => {
+    const initials = getInitials(username);
     return (
         <Circle
             size="40px"
diff --git a/frontend/src/bundles/users/components/user-card/user-card.tsx b/frontend/src/bundles/users/components/user-card/user-card.tsx
index 1054a155c..6e468aaf5 100644
--- a/frontend/src/bundles/users/components/user-card/user-card.tsx
+++ b/frontend/src/bundles/users/components/user-card/user-card.tsx
@@ -25,7 +25,7 @@ const UserCard: React.FC = () => {
                 gap="15px"
                 pl="10px"
             >
-                <UserAvatar />
+                <UserAvatar username={user?.fullName} />
                 <Text>{user?.fullName ?? 'FirstName LastName'}</Text>
             </Flex>
             <Button label="Create video" />

From 6c86f67c68daeb4c406e56bfc34510f449a42181 Mon Sep 17 00:00:00 2001
From: JKaypa <jose_kaypa@hotmail.com>
Date: Tue, 3 Sep 2024 10:43:06 -0500
Subject: [PATCH 5/5] OV-133: * early return

---
 .../user-card/helpers/get-initials.helper.ts       | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/bundles/users/components/user-card/helpers/get-initials.helper.ts b/frontend/src/bundles/users/components/user-card/helpers/get-initials.helper.ts
index 0e3593359..95de150dd 100644
--- a/frontend/src/bundles/users/components/user-card/helpers/get-initials.helper.ts
+++ b/frontend/src/bundles/users/components/user-card/helpers/get-initials.helper.ts
@@ -1,12 +1,12 @@
 const getInitials = (fullName: string | undefined): string => {
-    if (fullName) {
-        const [firstName, lastName] = fullName.trim().split(/\s+/);
-        const firstInitial = firstName?.charAt(0).toUpperCase();
-        const secondInitial = lastName?.charAt(0).toUpperCase() ?? '';
-
-        return `${firstInitial}${secondInitial}`;
+    if (!fullName) {
+        return 'FN';
     }
-    return 'FN';
+    const [firstName, lastName] = fullName.trim().split(/\s+/);
+    const firstInitial = firstName?.charAt(0).toUpperCase();
+    const secondInitial = lastName?.charAt(0).toUpperCase() ?? '';
+
+    return `${firstInitial}${secondInitial}`;
 };
 
 export { getInitials };