Merge branch 'task/OV-13-add-side-bar-component' into task/OV-50-inte…

…grate-user-card-into-side-bar
BinaryStudioAcademy · Aug 22, 2024 · 037263e · 037263e
2 parents 738bec9 + 79c883d
commit 037263e
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 54 deletions.
diff --git a/frontend/src/bundles/common/components/icon/components/icons.tsx b/frontend/src/bundles/common/components/icon/components/icons.tsx
diff --git a/frontend/src/bundles/common/components/icon/icon-map.ts b/frontend/src/bundles/common/components/icon/icon-map.ts
@@ -1,10 +1,9 @@
 import { ArrowLeftIcon, ArrowRightIcon } from '@chakra-ui/icons';
-
-import { HomeIcon, LogOutIcon } from './components/icons.js';
+import { faHouse, faRightFromBracket } from '@fortawesome/free-solid-svg-icons';
 
 const IconMap = {
-    HOME: HomeIcon,
-    LOG_OUT: LogOutIcon,
+    HOME: faHouse,
+    LOG_OUT: faRightFromBracket,
     ARROW_LEFT: ArrowLeftIcon,
     ARROW_RIGHT: ArrowRightIcon,
 } as const;

diff --git a/frontend/src/bundles/common/components/icon/size.enum.ts b/frontend/src/bundles/common/components/icon/size.enum.ts
@@ -1,5 +1,5 @@
 const Size = {
     LG: 5,
-};
+} as const;
 
 export { Size };
diff --git a/frontend/src/bundles/common/components/side-bar/libs/components/collapse-button-link.tsx b/frontend/src/bundles/common/components/side-bar/libs/components/collapse-button-link.tsx
@@ -1,7 +1,6 @@
-import { useLocation } from 'react-router-dom';
-
 import { Link } from '~/bundles/common/components/components.js';
 import { type AppRoute } from '~/bundles/common/enums/enums.js';
+import { useLocation } from '~/bundles/common/hooks/hooks.js';
 import { type ValueOf } from '~/bundles/common/types/types.js';
 
 import {

diff --git a/frontend/src/bundles/common/components/side-bar/libs/components/collapse-button.tsx b/frontend/src/bundles/common/components/side-bar/libs/components/collapse-button.tsx
@@ -3,21 +3,21 @@ import { type ReactElement } from 'react';
 import { Box } from '~/bundles/common/components/components.js';
 
 type Properties = {
-    bg?: string;
-    color?: string;
-    handleClick?: () => void;
     icon: ReactElement;
     isCollapsed: boolean;
     label: string;
+    bg?: string;
+    color?: string;
+    handleClick?: () => void;
 };
 
 const CollapseButton = ({
-    bg = 'none',
-    color = 'white',
-    handleClick = (): void => {},
     icon,
     isCollapsed,
     label,
+    bg = 'none',
+    color = 'white',
+    handleClick = (): void => {},
 }: Properties): JSX.Element => {
     return (
         <Box

diff --git a/frontend/src/bundles/common/components/side-bar/side-bar.tsx b/frontend/src/bundles/common/components/side-bar/side-bar.tsx
@@ -1,5 +1,4 @@
-import { useCallback, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import {
     Box,
@@ -10,6 +9,12 @@ import {
     Spacer,
 } from '~/bundles/common/components/components.js';
 import { AppRoute } from '~/bundles/common/enums/enums.js';
+import {
+    useCallback,
+    useLocation,
+    useNavigate,
+    useState,
+} from '~/bundles/common/hooks/hooks.js';
 import { type ValueOf } from '~/bundles/common/types/types.js';
 import { UserCard, UserCircle } from '~/bundles/users/components/components.js';
 
@@ -24,7 +29,7 @@ const SideBar = (): JSX.Element => {
     const { pathname } = useLocation();
     const navigate = useNavigate();
 
-    const toggle = useCallback(
+    const handleToggle = useCallback(
         (): void => setIsCollapsed(!isCollapsed),
         [isCollapsed],
     );
@@ -33,7 +38,7 @@ const SideBar = (): JSX.Element => {
         return pathname === page ? 'white' : 'background.600';
     };
 
-    const logOut = useCallback(() => {
+    const handleLogOut = useCallback(() => {
         //ToDo: log out user with token
         navigate(AppRoute.SIGN_IN);
     }, [navigate]);
@@ -50,7 +55,6 @@ const SideBar = (): JSX.Element => {
             pb="20px"
         >
             <IconButton
-                bg="none"
                 aria-label={isCollapsed ? 'expand' : 'collapse'}
                 icon={
                     isCollapsed ? (
@@ -59,11 +63,9 @@ const SideBar = (): JSX.Element => {
                         <Icon as={IconMap.ARROW_LEFT} />
                     )
                 }
-                mb="10px"
-                onClick={toggle}
-                _active={{ bg: 'none' }}
-                _hover={{ bg: 'none' }}
+                onClick={handleToggle}
                 justifyContent={isCollapsed ? 'center' : 'flex-end'}
+                variant="icon"
             />
             <Box mb="30px">
                 {/* ToDo: Add this username value dynamically */}
@@ -74,7 +76,8 @@ const SideBar = (): JSX.Element => {
                 <CollapseButtonLink
                     icon={
                         <Icon
-                            as={IconMap.HOME}
+                            as={FontAwesomeIcon}
+                            icon={IconMap.HOME}
                             boxSize={Size.LG}
                             color={activeIconPage('/')}
                         />
@@ -91,14 +94,15 @@ const SideBar = (): JSX.Element => {
                 color="brand.secondary.600"
                 icon={
                     <Icon
-                        as={IconMap.LOG_OUT}
+                        as={FontAwesomeIcon}
+                        icon={IconMap.LOG_OUT}
                         boxSize={Size.LG}
                         color="brand.secondary.600"
                     />
                 }
                 isCollapsed={isCollapsed}
                 label={'log out'}
-                handleClick={logOut}
+                handleClick={handleLogOut}
             />
         </Flex>
     );

diff --git a/frontend/src/bundles/common/hooks/hooks.ts b/frontend/src/bundles/common/hooks/hooks.ts
@@ -3,4 +3,4 @@ export { useAppForm } from './use-app-form/use-app-form.hook.js';
 export { useAppSelector } from './use-app-selector/use-app-selector.hook.js';
 export { useField as useFormField } from 'formik';
 export { useCallback, useEffect, useMemo, useState } from 'react';
-export { useLocation } from 'react-router-dom';
+export { useLocation, useNavigate } from 'react-router-dom';
diff --git a/frontend/src/framework/theme/styles/components.styles.ts b/frontend/src/framework/theme/styles/components.styles.ts
@@ -85,6 +85,12 @@ const components = {
                     color: colors.brand.secondary[300],
                 },
             },
+            icon: {
+                color: colors.white,
+                bg: 'none',
+                _active: { bg: 'none' },
+                _hover: { bg: 'none' },
+            },
         },
     },
     Link: {