Refactor code

hotel-management/src/components/AppLayout/index.tsx

@@ -10,8 +10,8 @@ import { Main, StyledAppLayout } from './styled';
 const AppLayout = () => {
   return (
     <StyledAppLayout>
-      <Header />
-      <Sidebar />
+      <Header accountName='Admin'/>
+      <Sidebar heading='Hotel Management'/>
       <Main>
         <Outlet />
       </Main>

hotel-management/src/components/Dialog/index.tsx

@@ -1,11 +1,19 @@
 import { forwardRef } from 'react';
 
-// Components
-import { IDialogProps } from '../../globals/interfaces';
-
 // Styled
 import { StyledBody, StyledDialog, StyledTitle } from './styled';
 
+export interface IDialogProps<T> {
+  title?: string;
+  children?: JSX.Element[] | JSX.Element;
+  onClose?: () => void;
+  reload?: boolean;
+  setReload?: React.Dispatch<React.SetStateAction<boolean>>;
+  ref?: React.MutableRefObject<HTMLDialogElement | undefined>;
+  data?: T | null;
+  isAdd?: boolean;
+}
+
 const Dialog = forwardRef((props, ref) => {
   const { title, children, onClose } = props as IDialogProps<unknown>;
   return (

hotel-management/src/components/Header/index.tsx

@@ -4,10 +4,14 @@ import HeaderMenu from '../HeaderMenu';
 // Styled
 import { StyledHeader } from './styled';
 
-const Header = () => {
+interface IHeader {
+  accountName: string
+}
+
+const Header = ({accountName}: IHeader) => {
   return (
     <StyledHeader>
-      <p>Hi, Admin!</p>
+      <p>Hi, {accountName}!</p>
       <HeaderMenu />
     </StyledHeader>
   );

hotel-management/src/components/Menus/index.tsx

@@ -5,12 +5,15 @@ import { HiEllipsisVertical } from 'react-icons/hi2';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { StyledMenu, StyledButton, StyledList, StyledToggle } from './styled';
 
-// Interfaces
-import { IButton } from '../../globals/interfaces';
-
 // Contexts
 import MenusContext from '../../contexts/MenuContext';
 
+interface IButton {
+  children?: string;
+  icon?: JSX.Element;
+  onClick?: () => void;
+}
+
 const Menus = ({ children }: { children: JSX.Element }) => {
   const [openId, setOpenId] = useState('');
 
@@ -30,7 +33,6 @@ const Toggle = ({ id }: { id: string }): React.JSX.Element => {
   const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.stopPropagation();
 
-    // prettier-ignore
     openId === '' || openId !== id 
       ? open!(id) 
       : close!();

hotel-management/src/components/Nav/index.tsx

@@ -6,18 +6,21 @@ import { BsHouseDoorFill } from 'react-icons/bs';
 // Styled
 import { StyledNav, StyledNavLink } from './styled';
 
+// Constants
+import { DASHBOARD, ROOM, USER } from '../../constants/path';
+
 const Nav = () => {
   return (
     <StyledNav>
-      <StyledNavLink to={'/dashboard'}>
+      <StyledNavLink to={DASHBOARD}>
         <MdSpaceDashboard />
         <span>Dashboard</span>
       </StyledNavLink>
-      <StyledNavLink to={'/user'}>
+      <StyledNavLink to={USER}>
         <HiUsers />
         <span>User</span>
       </StyledNavLink>
-      <StyledNavLink to={'/room'}>
+      <StyledNavLink to={ROOM}>
         <BsHouseDoorFill />
         <span>Room</span>
       </StyledNavLink>

hotel-management/src/components/Select/index.tsx

@@ -1,6 +1,9 @@
-import { ISelectOptions } from '../../globals/interfaces';
 import { StyledSelect } from './styled';
 
+export interface ISelectOptions {
+  value: string;
+  label: string;
+}
 interface ISelect {
   options: ISelectOptions[];
   value: string;

hotel-management/src/components/Sidebar/index.tsx

@@ -4,10 +4,14 @@ import Nav from '../Nav';
 // Styled
 import { Heading, StyledSidebar } from './styled';
 
-const Sidebar = () => {
+interface ISidebar {
+  heading: string;
+}
+
+const Sidebar = ({heading}: ISidebar) => {
   return (
     <StyledSidebar>
-      <Heading>Hotel Management</Heading>
+      <Heading>{heading}</Heading>
       <Nav />
     </StyledSidebar>
   );

hotel-management/src/components/SortBy/index.tsx

@@ -1,8 +1,8 @@
 import { useSearchParams } from 'react-router-dom';
+import { memo } from 'react';
 
 // Components
 import Select from '../Select';
-import { memo } from 'react';
 
 interface ISortByProps {
   options: {

hotel-management/src/components/Table/index.tsx

@@ -3,24 +3,31 @@ import { ReactNode, useContext } from 'react';
 // Components
 import { StyledBody, StyledHeader, StyledRow, StyledTable } from './styled';
 
-// Interfaces
-import { ITable, ITableBody } from '../../globals/interfaces';
-
 // Contexts
 import TableContext from '../../contexts/TableContext';
 
+interface ITable {
+  columns?: string;
+  children: React.ReactNode;
+}
+
+interface ITableBody<T> {
+  data?: T[];
+  render?: (value: T) => JSX.Element;
+}
+
 type CallbackMapFunc<T> = (value: T, index: number, array: T[]) => ReactNode;
 
 const Table = ({ columns, children }: ITable) => {
   return (
-    <TableContext.Provider value={columns!}>
+    <TableContext.Provider value={{ columns }}>
       <StyledTable>{children}</StyledTable>
     </TableContext.Provider>
   );
 };
 
 const Header = ({ children }: ITable) => {
-  const columns = useContext(TableContext);
+  const { columns } = useContext(TableContext);
   return <StyledHeader columns={columns}>{children}</StyledHeader>;
 };
 
@@ -33,7 +40,7 @@ const Body = <T,>({ data, render }: ITableBody<T>) => {
 };
 
 const Row = ({ children }: ITable) => {
-  const columns = useContext(TableContext);
+  const { columns } = useContext(TableContext);
   return <StyledRow columns={columns}>{children}</StyledRow>;
 };
 

hotel-management/src/components/Toast/index.tsx

@@ -1,26 +1,46 @@
-import { Toaster } from 'react-hot-toast';
+import { DefaultToastOptions, ToastOptions, ToastPosition, Toaster } from 'react-hot-toast';
+import { CSSProperties } from 'styled-components';
 
-const Toast = () => {
+interface IToast {
+  position: ToastPosition;
+  gutter: number;
+  containerStyle: CSSProperties;
+  toastOptions: DefaultToastOptions;
+  success: ToastOptions;
+  error: ToastOptions;
+  style: CSSProperties | undefined;
+}
+
+const Toast = ({position, gutter, containerStyle, success, error, style}: IToast) => {
   return (
     <Toaster
-      position="top-center"
-      gutter={12}
-      containerStyle={{ margin: '8px', zIndex: 1 }}
+      position={position}
+      gutter={gutter}
+      containerStyle={containerStyle}
       toastOptions={{
-        success: {
-          duration: 3000,
-        },
-        error: {
-          duration: 5000,
-        },
-        style: {
-          fontSize: '16px',
-          maxWidth: '500px',
-          padding: '16px 24px',
-        },
+        success,
+        error,
+        style
       }}
     />
   );
 };
 
+Toast.defaultProps = {
+  position: "top-center",
+  gutter: 12,
+  containerStyle: { margin: '8px', zIndex: 1 },
+  success: {
+    duration: 3000,
+  },
+  error:{
+    duration: 5000,
+  },
+  style: {
+    fontSize: '16px',
+    maxWidth: '500px',
+    padding: '16px 24px',
+  }
+}
+
 export default Toast;