Skip to content

Commit

Permalink
OV-13: * update code review
Browse files Browse the repository at this point in the history
  • Loading branch information
JKaypa committed Aug 22, 2024
1 parent ca68a7c commit 79c883d
Show file tree
Hide file tree
Showing 8 changed files with 34 additions and 54 deletions.
28 changes: 0 additions & 28 deletions frontend/src/bundles/common/components/icon/components/icons.tsx

This file was deleted.

7 changes: 3 additions & 4 deletions frontend/src/bundles/common/components/icon/icon-map.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/bundles/common/components/icon/size.enum.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const Size = {
LG: 5,
};
} as const;

export { Size };
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
28 changes: 16 additions & 12 deletions frontend/src/bundles/common/components/side-bar/side-bar.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { useCallback, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import {
Box,
Expand All @@ -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 { Size } from '../icon/icon.js';
Expand All @@ -23,7 +28,7 @@ const SideBar = (): JSX.Element => {
const { pathname } = useLocation();
const navigate = useNavigate();

const toggle = useCallback(
const handleToggle = useCallback(
(): void => setIsCollapsed(!isCollapsed),
[isCollapsed],
);
Expand All @@ -32,7 +37,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]);
Expand All @@ -49,7 +54,6 @@ const SideBar = (): JSX.Element => {
pb="20px"
>
<IconButton
bg="none"
aria-label={isCollapsed ? 'expand' : 'collapse'}
icon={
isCollapsed ? (
Expand All @@ -58,18 +62,17 @@ 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>
<CollapseButtonLink
icon={
<Icon
as={IconMap.HOME}
as={FontAwesomeIcon}
icon={IconMap.HOME}
boxSize={Size.LG}
color={activeIconPage('/')}
/>
Expand All @@ -86,14 +89,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>
);
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/bundles/common/hooks/hooks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
6 changes: 6 additions & 0 deletions frontend/src/framework/theme/styles/components.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,12 @@ const components = {
color: colors.brand.secondary[300],
},
},
icon: {
color: colors.white,
bg: 'none',
_active: { bg: 'none' },
_hover: { bg: 'none' },
},
},
},
Link: {
Expand Down

0 comments on commit 79c883d

Please sign in to comment.