Merge pull request #134 from BinaryStudioAcademy/task/OV-133-add-user…

…-name

OV-133: Add-user-name

frontend/src/bundles/common/components/sidebar/sidebar.tsx

@@ -10,6 +10,7 @@ import {
 import { AppRoute } from '~/bundles/common/enums/enums.js';
 import {
     useAppDispatch,
+    useAppSelector,
     useCallback,
     useLocation,
     useNavigate,
@@ -29,6 +30,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 dispatch = useAppDispatch();
 
     const handleToggle = useCallback(
@@ -77,8 +79,11 @@ const Sidebar = ({ children }: Properties): JSX.Element => {
                     variant="icon"
                 />
                 <Box mb="30px">
-                    {/* ToDo: Add this username value dynamically */}
-                    {isCollapsed ? <UserAvatar username="FN" /> : <UserCard />}
+                    {isCollapsed ? (
+                        <UserAvatar username={user?.fullName} />
+                    ) : (
+                        <UserCard />
+                    )}
                 </Box>
                 <Box>
                     <Link to={AppRoute.ROOT}>

frontend/src/bundles/users/components/user-card/components/user-avatar.tsx

@@ -1,18 +1,21 @@
 import { Circle } from '~/bundles/common/components/components.js';
 
+import { getInitials } from '../helpers/helpers.js';
+
 type Properties = {
-    username: string;
+    username: string | undefined;
 };
 
 const UserAvatar: React.FC<Properties> = ({ username }) => {
+    const initials = getInitials(username);
     return (
         <Circle
             size="40px"
             border="2px solid"
             borderColor="brand.secondary.900"
             color="brand.secondary.900"
         >
-            {username}
+            {initials}
         </Circle>
     );
 };

frontend/src/bundles/users/components/user-card/helpers/get-initials.helper.ts

@@ -0,0 +1,12 @@
+const getInitials = (fullName: string | undefined): string => {
+    if (!fullName) {
+        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 };

frontend/src/bundles/users/components/user-card/helpers/helpers.ts

@@ -0,0 +1 @@
+export { getInitials } from './get-initials.helper.js';

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.user);
+
+    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 username={user?.fullName} />
+                <Text>{user?.fullName ?? 'FirstName LastName'}</Text>
+            </Flex>
+            <Button label="Create video" />
+        </VStack>
+    );
+};
 
 export { UserCard };