From 5b0d5671b35e1ed091d19a7a30f22ce501afe024 Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Fri, 1 Dec 2023 11:24:31 +0700 Subject: [PATCH] Remove unnecessary code, refactor, fix bug and add section comment --- .../{src => public}/assets/fonts/Cabin.ttf | Bin .../{src => public}/assets/fonts/Cabin.woff2 | Bin .../{src => public}/assets/images/logo.png | Bin hotel-management/src/App.tsx | 2 +- .../src/components/ButtonIcon/styled.ts | 11 +++--- .../src/components/ConfirmMessage/index.tsx | 6 ++- .../src/components/Form/index.tsx | 7 +++- .../src/components/Form/styled.ts | 9 ++++- .../src/components/Menus/index.tsx | 23 +++++++---- .../src/components/Menus/styled.ts | 7 +++- .../src/components/Modal/styled.ts | 7 +++- .../src/components/Pagination/index.tsx | 30 +++++--------- .../src/components/Pagination/styled.ts | 6 ++- .../src/components/SortBy/index.tsx | 6 +-- hotel-management/src/constants/messages.ts | 2 - hotel-management/src/constants/styles.ts | 11 ------ hotel-management/src/helpers/helper.ts | 6 ++- hotel-management/src/helpers/validators.ts | 13 +++++- .../src/hooks/authentication/useAccount.ts | 4 ++ .../src/hooks/authentication/useLogin.ts | 4 ++ .../src/hooks/authentication/useLogout.ts | 4 ++ .../hooks/authentication/useUpdateAccount.ts | 4 ++ .../src/hooks/bookings/useDeleteBooking.ts | 35 ----------------- hotel-management/src/hooks/useDebounce.ts | 6 +++ .../src/hooks/useUserRoomAvailable.ts | 4 ++ hotel-management/src/pages/Account/styled.ts | 7 +++- .../src/pages/Booking/BookingForm.tsx | 37 ++++++++++-------- .../src/pages/Booking/BookingRow.tsx | 17 ++++++-- hotel-management/src/pages/Booking/styled.ts | 6 ++- hotel-management/src/pages/Login/index.tsx | 5 +-- hotel-management/src/pages/Login/styled.ts | 8 +++- .../src/pages/NotFound/NotFound.tsx | 21 ++++++++++ .../{NotFound.tsx => NotFound/index.tsx} | 25 +++--------- hotel-management/src/pages/Room/RoomRow.tsx | 20 ++++++---- hotel-management/src/pages/Room/RoomTable.tsx | 6 ++- hotel-management/src/pages/Room/styled.ts | 6 ++- hotel-management/src/pages/User/UserRow.tsx | 11 ++++-- hotel-management/src/pages/User/UserTable.tsx | 15 +++++-- hotel-management/src/pages/User/styled.ts | 6 ++- .../src/services/authenticationService.ts | 17 ++++++++ .../src/services/bookingServices.ts | 18 --------- hotel-management/src/services/userServices.ts | 17 +------- .../src/styles/bases/typography.css | 4 +- hotel-management/tsconfig.json | 1 - 44 files changed, 261 insertions(+), 193 deletions(-) rename hotel-management/{src => public}/assets/fonts/Cabin.ttf (100%) rename hotel-management/{src => public}/assets/fonts/Cabin.woff2 (100%) rename hotel-management/{src => public}/assets/images/logo.png (100%) delete mode 100644 hotel-management/src/constants/styles.ts delete mode 100644 hotel-management/src/hooks/bookings/useDeleteBooking.ts create mode 100644 hotel-management/src/pages/NotFound/NotFound.tsx rename hotel-management/src/pages/{NotFound.tsx => NotFound/index.tsx} (51%) diff --git a/hotel-management/src/assets/fonts/Cabin.ttf b/hotel-management/public/assets/fonts/Cabin.ttf similarity index 100% rename from hotel-management/src/assets/fonts/Cabin.ttf rename to hotel-management/public/assets/fonts/Cabin.ttf diff --git a/hotel-management/src/assets/fonts/Cabin.woff2 b/hotel-management/public/assets/fonts/Cabin.woff2 similarity index 100% rename from hotel-management/src/assets/fonts/Cabin.woff2 rename to hotel-management/public/assets/fonts/Cabin.woff2 diff --git a/hotel-management/src/assets/images/logo.png b/hotel-management/public/assets/images/logo.png similarity index 100% rename from hotel-management/src/assets/images/logo.png rename to hotel-management/public/assets/images/logo.png diff --git a/hotel-management/src/App.tsx b/hotel-management/src/App.tsx index 534dbb3..f650215 100644 --- a/hotel-management/src/App.tsx +++ b/hotel-management/src/App.tsx @@ -14,7 +14,7 @@ import RootLayout from '@component/RootLayout'; import User from './pages/User'; import Booking from './pages/Booking'; import Room from './pages/Room'; -import NotFound from './pages/NotFound'; +import NotFound from './pages/NotFound/NotFound'; import Login from '@page/Login'; import Account from '@page/Account'; diff --git a/hotel-management/src/components/ButtonIcon/styled.ts b/hotel-management/src/components/ButtonIcon/styled.ts index 26d978d..d0cd174 100644 --- a/hotel-management/src/components/ButtonIcon/styled.ts +++ b/hotel-management/src/components/ButtonIcon/styled.ts @@ -1,5 +1,4 @@ import styled, { css } from 'styled-components'; -import { COLOR, SIZE } from '@constant/styles'; interface IStyledButtonIcon { isHaveChildren: boolean; @@ -77,13 +76,13 @@ const StyledButtonIcon = styled.button` StyledButtonIcon.defaultProps = { style: { - fontSize: SIZE.DEFAULT, - backgroundColor: COLOR.DEFAULT, - color: COLOR.BLACK, + fontSize: '14px', + backgroundColor: 'var(--primary-color)', + color: '#000', }, iconStyle: { - color: COLOR.BLACK, - size: SIZE.DEFAULT, + color: '#000', + size: '14px', }, }; diff --git a/hotel-management/src/components/ConfirmMessage/index.tsx b/hotel-management/src/components/ConfirmMessage/index.tsx index 8ea6d85..2ad2f14 100644 --- a/hotel-management/src/components/ConfirmMessage/index.tsx +++ b/hotel-management/src/components/ConfirmMessage/index.tsx @@ -13,7 +13,11 @@ interface IConfirmMessage { } const ConfirmMessage = memo( - ({ message, onConfirm, onCloseModal }: IConfirmMessage) => { + ({ + message, + onConfirm, + onCloseModal + }: IConfirmMessage) => { const handleConfirmBtn = useCallback(() => { onConfirm(); onCloseModal!(); diff --git a/hotel-management/src/components/Form/index.tsx b/hotel-management/src/components/Form/index.tsx index 891934b..ea3c4d5 100644 --- a/hotel-management/src/components/Form/index.tsx +++ b/hotel-management/src/components/Form/index.tsx @@ -34,7 +34,12 @@ const Form = ({ children, onSubmit, id }: IFormProps) => { ); }; -const FormRow = ({ label, error, children, direction }: IFormRow) => { +const FormRow = ({ + label, + error, + children, + direction +}: IFormRow) => { return ( diff --git a/hotel-management/src/components/Form/styled.ts b/hotel-management/src/components/Form/styled.ts index f9a2192..ac469c2 100644 --- a/hotel-management/src/components/Form/styled.ts +++ b/hotel-management/src/components/Form/styled.ts @@ -65,4 +65,11 @@ StyledFormRow.defaultProps = { direction: 'horizontal', }; -export { StyledForm, StyledActionBtn, StyledFormRow, Label, Error, FormBtn }; +export { + StyledForm, + StyledActionBtn, + StyledFormRow, + Label, + Error, + FormBtn +}; diff --git a/hotel-management/src/components/Menus/index.tsx b/hotel-management/src/components/Menus/index.tsx index 96ed1cc..70bf25f 100644 --- a/hotel-management/src/components/Menus/index.tsx +++ b/hotel-management/src/components/Menus/index.tsx @@ -16,9 +16,6 @@ import MenusContext from '@context/MenuContext'; // Types import { Nullable } from '@type/common'; -// Constants -import { COLOR } from '@constant/styles'; - interface IButton { children?: string; icon?: ReactNode; @@ -32,19 +29,29 @@ const Menus = ({ children }: { children: ReactNode }) => { const open = setOpenId; return ( - + {children} ); }; const Toggle = ({ id }: { id: string }): ReactNode => { - const { openId, close, open } = useContext(MenusContext); + const { + openId, + close, + open + } = useContext(MenusContext); const handleClick = (e: MouseEvent) => { e.stopPropagation(); - openId === '' || openId !== id - ? open!(id) + openId !== id + ? open!(id) : close!(); }; @@ -82,7 +89,7 @@ const Button = ({ children, icon, onClick, disabled }: IButton): ReactNode => { diff --git a/hotel-management/src/components/Menus/styled.ts b/hotel-management/src/components/Menus/styled.ts index 8002912..56a5726 100644 --- a/hotel-management/src/components/Menus/styled.ts +++ b/hotel-management/src/components/Menus/styled.ts @@ -63,4 +63,9 @@ const StyledList = styled.ul` width: max-content; `; -export { StyledMenu, StyledButton, StyledList, StyledToggle }; +export { + StyledMenu, + StyledButton, + StyledList, + StyledToggle +}; diff --git a/hotel-management/src/components/Modal/styled.ts b/hotel-management/src/components/Modal/styled.ts index d7f850d..fe5e786 100644 --- a/hotel-management/src/components/Modal/styled.ts +++ b/hotel-management/src/components/Modal/styled.ts @@ -39,4 +39,9 @@ const TitleModal = styled.p` margin-bottom: 30px; ` -export { StyledModal, Overlay, StyledModalContent, TitleModal }; +export { + StyledModal, + Overlay, + StyledModalContent, + TitleModal +}; diff --git a/hotel-management/src/components/Pagination/index.tsx b/hotel-management/src/components/Pagination/index.tsx index a21fc53..118ea73 100644 --- a/hotel-management/src/components/Pagination/index.tsx +++ b/hotel-management/src/components/Pagination/index.tsx @@ -1,4 +1,3 @@ -import { useCallback, useMemo } from 'react'; import { useSearchParams } from 'react-router-dom'; // Constants @@ -22,35 +21,24 @@ const Pagination = ({ count }: IPagination) => { const totalPage = Math.ceil(count / DEFAULT_PAGE_SIZE); - const nextPage = useCallback(() => { - const next = currentPage === totalPage - ? currentPage - : currentPage + 1; + const nextPage = () => { + const next = currentPage === totalPage ? currentPage : currentPage + 1; searchParams.set('page', next.toString()); setSearchParams(searchParams); - }, [currentPage, searchParams, totalPage, setSearchParams]); + }; - const previousPage = useCallback(() => { - const previous = currentPage === 1 - ? currentPage - : currentPage - 1; + const previousPage = () => { + const previous = currentPage === 1 ? currentPage : currentPage - 1; searchParams.set('page', previous.toString()); setSearchParams(searchParams); - }, [currentPage, searchParams, setSearchParams]); + }; - const fromIndex = useMemo( - () => (currentPage - 1) * DEFAULT_PAGE_SIZE + 1, - [currentPage] - ); + const fromIndex = (currentPage - 1) * DEFAULT_PAGE_SIZE + 1; - const toIndex = useMemo( - () => (currentPage === totalPage - ? count - : currentPage * DEFAULT_PAGE_SIZE), - [currentPage, count, totalPage] - ); + const toIndex = + currentPage === totalPage ? count : currentPage * DEFAULT_PAGE_SIZE; return ( totalPage > 1 && ( diff --git a/hotel-management/src/components/Pagination/styled.ts b/hotel-management/src/components/Pagination/styled.ts index 83074b5..33f281d 100644 --- a/hotel-management/src/components/Pagination/styled.ts +++ b/hotel-management/src/components/Pagination/styled.ts @@ -47,4 +47,8 @@ const PaginationBtn = styled.button` } `; -export { StyledPagination, PaginationBtn, Buttons }; +export { + StyledPagination, + PaginationBtn, + Buttons +}; diff --git a/hotel-management/src/components/SortBy/index.tsx b/hotel-management/src/components/SortBy/index.tsx index 1d29c41..546e5ed 100644 --- a/hotel-management/src/components/SortBy/index.tsx +++ b/hotel-management/src/components/SortBy/index.tsx @@ -1,5 +1,5 @@ import { useSearchParams } from 'react-router-dom'; -import { ChangeEvent } from 'react'; +import { ChangeEvent, memo } from 'react'; // Components import Select from '@component/Select'; @@ -11,7 +11,7 @@ interface ISortByProps { }[]; } -const SortBy = ({ options }: ISortByProps) => { +const SortBy = memo(({ options }: ISortByProps) => { const [searchParams, setSearchParams] = useSearchParams(); const sortBy = searchParams.get('sortBy') || ''; const handleChange = (event: ChangeEvent) => { @@ -27,6 +27,6 @@ const SortBy = ({ options }: ISortByProps) => { ariaLabel="Sort" /> ); -}; +}); export default SortBy; diff --git a/hotel-management/src/constants/messages.ts b/hotel-management/src/constants/messages.ts index 7553385..c9c97b6 100644 --- a/hotel-management/src/constants/messages.ts +++ b/hotel-management/src/constants/messages.ts @@ -9,7 +9,6 @@ const BOOKINGS_TABLE = 'bookings'; const ERROR_FETCHING_BOOKING = "Can't fetch booking data!"; const ERROR_UPDATE_BOOKING = "Can't update booking!"; const ERROR_CREATE_BOOKING = "Can't create booking!"; -const ERROR_DELETE_BOOKING = "Can't delete booking!"; const CHECKOUT_SUCCESS = 'Check out success!'; const ERROR_CHECKOUT = "Can't checkout!"; @@ -41,7 +40,6 @@ export { ERROR_FETCHING_BOOKING, ERROR_UPDATE_BOOKING, ERROR_CREATE_BOOKING, - ERROR_DELETE_BOOKING, ROOMS_TABLE, ERROR_FETCHING_ROOM, ERROR_UPDATE_ROOM, diff --git a/hotel-management/src/constants/styles.ts b/hotel-management/src/constants/styles.ts deleted file mode 100644 index 2144a4c..0000000 --- a/hotel-management/src/constants/styles.ts +++ /dev/null @@ -1,11 +0,0 @@ -const COLOR = { - PRIMARY: '#0010ba', - BLACK: '#000', - DEFAULT: 'transparent', -}; - -const SIZE = { - DEFAULT: '14px', -}; - -export { COLOR, SIZE }; diff --git a/hotel-management/src/helpers/helper.ts b/hotel-management/src/helpers/helper.ts index 9aae61c..dce6e83 100644 --- a/hotel-management/src/helpers/helper.ts +++ b/hotel-management/src/helpers/helper.ts @@ -34,4 +34,8 @@ const convertCurrencyToNumber = (currency: string) => { return Number(currency.replace(/[^0-9.-]+/g,"")) } -export { formatCurrency, getDayDiff, convertCurrencyToNumber }; +export { + formatCurrency, + getDayDiff, + convertCurrencyToNumber +}; diff --git a/hotel-management/src/helpers/validators.ts b/hotel-management/src/helpers/validators.ts index 3bfa24b..5f156ba 100644 --- a/hotel-management/src/helpers/validators.ts +++ b/hotel-management/src/helpers/validators.ts @@ -26,8 +26,19 @@ const isValidString = (value: string): boolean => { return value.trim().length >= 5; }; +/** + * Compare two days + * @param startDate The start date + * @param endDate The end date + * @returns Return true if start date greater than end date + */ const compareTwoDates = (startDate: Date, endDate: Date): boolean => { return startDate > endDate; }; -export { isValidRegex, isValidString, isValidDiscount, compareTwoDates }; +export { + isValidRegex, + isValidString, + isValidDiscount, + compareTwoDates +}; diff --git a/hotel-management/src/hooks/authentication/useAccount.ts b/hotel-management/src/hooks/authentication/useAccount.ts index 34c5c86..869f278 100644 --- a/hotel-management/src/hooks/authentication/useAccount.ts +++ b/hotel-management/src/hooks/authentication/useAccount.ts @@ -3,6 +3,10 @@ import { useQuery } from '@tanstack/react-query'; // Services import { getCurrentAccount } from '@service/authenticationService'; +/** + * Get data of account currently login + * @returns The data of account currently login + */ const useAccount = () => { let isAuthenticated: boolean = false; const { data: account, isPending } = useQuery({ diff --git a/hotel-management/src/hooks/authentication/useLogin.ts b/hotel-management/src/hooks/authentication/useLogin.ts index 5529169..a2cd49a 100644 --- a/hotel-management/src/hooks/authentication/useLogin.ts +++ b/hotel-management/src/hooks/authentication/useLogin.ts @@ -8,6 +8,10 @@ import { login as loginFn } from '@service/authenticationService'; // Types import { ILogin } from '@type/common'; +/** + * Login web + * @returns The login function and isPending boolean + */ const useLogin = () => { const queryClient = useQueryClient(); const navigate = useNavigate(); diff --git a/hotel-management/src/hooks/authentication/useLogout.ts b/hotel-management/src/hooks/authentication/useLogout.ts index 66cc623..fd6cb28 100644 --- a/hotel-management/src/hooks/authentication/useLogout.ts +++ b/hotel-management/src/hooks/authentication/useLogout.ts @@ -4,6 +4,10 @@ import { useNavigate } from 'react-router-dom'; // Services import { logout as logoutFn } from '@service/authenticationService'; +/** + * Logout web + * @returns The logout function and isPending boolean + */ const useLogout = () => { const navigate = useNavigate(); const queryClient = useQueryClient(); diff --git a/hotel-management/src/hooks/authentication/useUpdateAccount.ts b/hotel-management/src/hooks/authentication/useUpdateAccount.ts index f8e9e06..ebe4d9d 100644 --- a/hotel-management/src/hooks/authentication/useUpdateAccount.ts +++ b/hotel-management/src/hooks/authentication/useUpdateAccount.ts @@ -7,6 +7,10 @@ import { updateAccount as updateAccountFn } from '@service/authenticationService // Constants import { UPDATE_ACCOUNT_SUCCESSFUL } from '@constant/messages'; +/** + * Update account currently login. + * @returns Return updateAccount function and isUpdating boolean + */ const useUpdateAccount = () => { const queryClient = useQueryClient(); diff --git a/hotel-management/src/hooks/bookings/useDeleteBooking.ts b/hotel-management/src/hooks/bookings/useDeleteBooking.ts deleted file mode 100644 index 4834bc8..0000000 --- a/hotel-management/src/hooks/bookings/useDeleteBooking.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { useMutation, useQueryClient } from '@tanstack/react-query'; -import toast from 'react-hot-toast'; - -// Services -import { deleteBooking as deleteBookingFn } from '@service/bookingServices'; - -// Constants -import { DELETE_SUCCESS } from '@constant/messages'; - -/** - * Delete the booking from database - * @returns The boolean of status deleting and deleteBooking function - */ -const useDeleteBooking = () => { - const queryClient = useQueryClient(); - - const { - isPending: isDeleting, - mutate: deleteBooking, - isSuccess, - } = useMutation({ - mutationFn: deleteBookingFn, - onSuccess: () => { - toast.success(DELETE_SUCCESS); - queryClient.invalidateQueries({ - queryKey: ['bookings'], - }); - }, - onError: (err) => toast.error(err.message), - }); - - return { isDeleting, deleteBooking, isSuccess }; -}; - -export { useDeleteBooking }; diff --git a/hotel-management/src/hooks/useDebounce.ts b/hotel-management/src/hooks/useDebounce.ts index 3af1ecd..10f3eb6 100644 --- a/hotel-management/src/hooks/useDebounce.ts +++ b/hotel-management/src/hooks/useDebounce.ts @@ -1,5 +1,11 @@ import { useEffect, useState } from 'react'; +/** + * The debounce hooks use to execute the callback function every x delay time + * @param value The value need to be pass + * @param delay The number of time want to delay + * @returns Return the value after delay number + */ const useDebounce = (value: T, delay: number): T => { const [debouncedValue, setDebouncedValue] = useState(value); diff --git a/hotel-management/src/hooks/useUserRoomAvailable.ts b/hotel-management/src/hooks/useUserRoomAvailable.ts index e362b9d..ffc1fbd 100644 --- a/hotel-management/src/hooks/useUserRoomAvailable.ts +++ b/hotel-management/src/hooks/useUserRoomAvailable.ts @@ -3,6 +3,10 @@ import { useContext } from 'react'; // Contexts import { UserRoomAvailableContext } from '@context/UserRoomAvailableContext'; +/** + * The hooks check the place call is in UserRoomAvailableProvider or not + * @returns The context of UserRoomAvailableContext + */ const useUserRoomAvailable = () => { const context = useContext(UserRoomAvailableContext); diff --git a/hotel-management/src/pages/Account/styled.ts b/hotel-management/src/pages/Account/styled.ts index 80d01a1..5383a5e 100644 --- a/hotel-management/src/pages/Account/styled.ts +++ b/hotel-management/src/pages/Account/styled.ts @@ -33,4 +33,9 @@ const FormArea = styled.div` margin-top: 50px; ` -export { Title, StyledAccount, FormArea, SubTitle }; +export { + Title, + StyledAccount, + FormArea, + SubTitle +}; diff --git a/hotel-management/src/pages/Booking/BookingForm.tsx b/hotel-management/src/pages/Booking/BookingForm.tsx index 641be0b..0371607 100644 --- a/hotel-management/src/pages/Booking/BookingForm.tsx +++ b/hotel-management/src/pages/Booking/BookingForm.tsx @@ -32,16 +32,18 @@ interface IBookingFormProp { } const BookingForm = ({ onCloseModal, booking }: IBookingFormProp) => { - const { roomsAvailable, usersAvailable, dispatch } = useUserRoomAvailable(); + const { + roomsAvailable, + usersAvailable, + dispatch + } = useUserRoomAvailable(); const { isCreating, createBooking } = useCreateBooking(); const { isUpdating, updateBooking } = useUpdateBooking(); const isLoading = isCreating || isUpdating; const { id: editId, ...editValues } = { ...booking }; - const [ amountValue, setAmountValue ] = useState( - editValues.amount - ? formatCurrency(editValues.amount) - : '$0.00' - ); + const [amountValue, setAmountValue] = useState( + editValues.amount ? formatCurrency(editValues.amount) : '$0.00' + ); const formMethods = useForm({ defaultValues: editId ? { @@ -177,15 +179,12 @@ const BookingForm = ({ onCloseModal, booking }: IBookingFormProp) => { const startDate = new Date(getValues().startDate); const endDate = new Date(getValues().endDate); - if(startDate >= endDate) { + if (startDate >= endDate) { setValue('endDate', ''); } }, [setValue, getValues]); - const startDateValidate = useMemo( - () => new Date().toISOString().split('T')[0], - [] - ); + const startDateValidate = new Date().toISOString().split('T')[0]; const endDateValidate = () => { if (getValues('startDate')) { @@ -201,7 +200,7 @@ const BookingForm = ({ onCloseModal, booking }: IBookingFormProp) => { return (
- + {userOptions.length ? ( { )} - + { /> - + { /> - + { name="submit" disabled={!isDirty || !isValid || isLoading} > - {!editId ? 'Add' : 'Save'} + { + !editId + ? 'Add' + : 'Save' + } { const { checkOutBooking } = useCheckOut(); - const { id, users, startDate, endDate, rooms, amount, status } = booking; - const statusText = status ? 'Check in' : 'Check out'; + const { + id, + users, + startDate, + endDate, + rooms, + amount, + status + } = booking; const formattedPrice = useMemo(() => formatCurrency(amount), [amount]); const renderEditBtn = useCallback( (onCloseModal: () => void) => ( @@ -79,7 +86,11 @@ const BookingRow = ({ booking }: IBookingRow) => {
{rooms?.name}
{formattedPrice}
-
{statusText}
+
{ + status + ? 'Check in' + : 'Check out' + }
diff --git a/hotel-management/src/pages/Booking/styled.ts b/hotel-management/src/pages/Booking/styled.ts index 3bf1fdc..39afa0a 100644 --- a/hotel-management/src/pages/Booking/styled.ts +++ b/hotel-management/src/pages/Booking/styled.ts @@ -21,4 +21,8 @@ const StyledOperationTable = styled.div` justify-content: flex-end; `; -export { StyledBooking, Title, StyledOperationTable }; +export { + StyledBooking, + Title, + StyledOperationTable +}; diff --git a/hotel-management/src/pages/Login/index.tsx b/hotel-management/src/pages/Login/index.tsx index c443ab2..cbb80d6 100644 --- a/hotel-management/src/pages/Login/index.tsx +++ b/hotel-management/src/pages/Login/index.tsx @@ -3,9 +3,6 @@ import { Navigate } from 'react-router-dom'; // Styled import { LoginLayout, StyledLogo, TitleStyled } from './styled'; -// Assets -import logo from '@assets/images/logo.png'; - // Components import LoginForm from './LoginForm'; @@ -21,7 +18,7 @@ const Login = () => { return ( - + Log In diff --git a/hotel-management/src/pages/Login/styled.ts b/hotel-management/src/pages/Login/styled.ts index 9298f3b..0dbc971 100644 --- a/hotel-management/src/pages/Login/styled.ts +++ b/hotel-management/src/pages/Login/styled.ts @@ -40,4 +40,10 @@ const FieldInput = styled.input` width: 300px; ` -export { LoginLayout, StyledLogo, TitleStyled, StyledLoginForm, FieldInput }; +export { + LoginLayout, + StyledLogo, + TitleStyled, + StyledLoginForm, + FieldInput +}; diff --git a/hotel-management/src/pages/NotFound/NotFound.tsx b/hotel-management/src/pages/NotFound/NotFound.tsx new file mode 100644 index 0000000..4cf9b99 --- /dev/null +++ b/hotel-management/src/pages/NotFound/NotFound.tsx @@ -0,0 +1,21 @@ +import { useNavigate } from 'react-router-dom'; + +// Styled +import { Button, Heading, StyledNotFound } from '.'; + + +const NotFound = () => { + const useMoveBack = () => { + const navigate = useNavigate(); + return () => navigate(-1); + }; + + return ( + + The page not found! + + + ); +}; + +export default NotFound; diff --git a/hotel-management/src/pages/NotFound.tsx b/hotel-management/src/pages/NotFound/index.tsx similarity index 51% rename from hotel-management/src/pages/NotFound.tsx rename to hotel-management/src/pages/NotFound/index.tsx index f362a42..2b661d9 100644 --- a/hotel-management/src/pages/NotFound.tsx +++ b/hotel-management/src/pages/NotFound/index.tsx @@ -1,5 +1,4 @@ -import { useNavigate } from 'react-router-dom'; -import styled from 'styled-components'; +import styled from "styled-components"; const StyledNotFound = styled.div` height: 100vh; @@ -27,20 +26,8 @@ const Button = styled.button` border-radius: var(--radius-sm); `; -const useMoveBack = () => { - const navigate = useNavigate(); - return () => navigate(-1); -}; - -const NotFound = () => { - const onBack = useMoveBack(); - - return ( - - The page not found! - - - ); -}; - -export default NotFound; +export { + StyledNotFound, + Heading, + Button, +} diff --git a/hotel-management/src/pages/Room/RoomRow.tsx b/hotel-management/src/pages/Room/RoomRow.tsx index a8e6607..df5d73e 100644 --- a/hotel-management/src/pages/Room/RoomRow.tsx +++ b/hotel-management/src/pages/Room/RoomRow.tsx @@ -26,11 +26,13 @@ interface IRoomRow { } const RoomRow = ({ room }: IRoomRow) => { - const { id, name, price, status } = room; + const { + id, + name, + price, + status + } = room; const { setIsDeleteRoom } = useSetIsDeleteRoom(); - const statusText = status - ? 'Unavailable' - : 'Available'; const formattedPrice = useMemo(() => formatCurrency(price), [price]); const renderEditBtn = useCallback( (onCloseModal: () => void) => ( @@ -42,11 +44,11 @@ const RoomRow = ({ room }: IRoomRow) => { ); const renderDeleteBtn = useCallback( (onCloseModal: () => void) => ( - } onClick={onCloseModal}> + } onClick={onCloseModal} disabled={status}> Delete ), - [] + [status] ); return ( @@ -54,7 +56,11 @@ const RoomRow = ({ room }: IRoomRow) => {
{id}
{name}
{formattedPrice}
-
{statusText}
+
{ + status + ? 'Unavailable' + : 'Available' + }
diff --git a/hotel-management/src/pages/Room/RoomTable.tsx b/hotel-management/src/pages/Room/RoomTable.tsx index 5585563..e0d8ce6 100644 --- a/hotel-management/src/pages/Room/RoomTable.tsx +++ b/hotel-management/src/pages/Room/RoomTable.tsx @@ -26,7 +26,11 @@ import Pagination from '@component/Pagination'; const RoomTable = () => { const columnName = ['Id', 'Name', 'Price', 'Status']; - const { isLoading, rooms, count } = useRooms(); + const { + isLoading, + rooms, + count + } = useRooms(); const renderRoomRow = useCallback( (room: IRoom) => , diff --git a/hotel-management/src/pages/Room/styled.ts b/hotel-management/src/pages/Room/styled.ts index 8381a4c..bf16bbc 100644 --- a/hotel-management/src/pages/Room/styled.ts +++ b/hotel-management/src/pages/Room/styled.ts @@ -21,4 +21,8 @@ const StyledOperationTable = styled.div` justify-content: flex-end; `; -export { StyledRoom, Title, StyledOperationTable }; +export { + StyledRoom, + Title, + StyledOperationTable +}; diff --git a/hotel-management/src/pages/User/UserRow.tsx b/hotel-management/src/pages/User/UserRow.tsx index c8ec6b5..2613da5 100644 --- a/hotel-management/src/pages/User/UserRow.tsx +++ b/hotel-management/src/pages/User/UserRow.tsx @@ -18,7 +18,12 @@ interface IUserRow { } const UserRow = ({ user }: IUserRow) => { - const { id, name, phone, isBooked } = user; + const { + id, + name, + phone, + isBooked + } = user; const { setIsDeleteUser } = useIsDeleteUser(); const renderEditBtn = useCallback( @@ -32,11 +37,11 @@ const UserRow = ({ user }: IUserRow) => { const renderDeleteBtn = useCallback( (onCloseModal: () => void) => ( - } onClick={onCloseModal}> + } onClick={onCloseModal} disabled={isBooked}> Delete ), - [] + [isBooked] ); return ( diff --git a/hotel-management/src/pages/User/UserTable.tsx b/hotel-management/src/pages/User/UserTable.tsx index 31f0254..53ef00c 100644 --- a/hotel-management/src/pages/User/UserTable.tsx +++ b/hotel-management/src/pages/User/UserTable.tsx @@ -25,8 +25,17 @@ import { useUsers } from '@hook/users/useUsers'; import Pagination from '@component/Pagination'; const UserTable = () => { - const columnName = ['Id', 'Name', 'Phone', 'Is Booked']; - const { isLoading, users, count } = useUsers(); + const columnName = [ + 'Id', + 'Name', + 'Phone', + 'Is Booked' + ]; + const { + isLoading, + users, + count + } = useUsers(); const renderUserRow = useCallback( (user: IUser) => ( @@ -52,7 +61,7 @@ const UserTable = () => { {users && users.length ? ( - +
data={users} render={renderUserRow} /> diff --git a/hotel-management/src/pages/User/styled.ts b/hotel-management/src/pages/User/styled.ts index 803f1ec..98933cc 100644 --- a/hotel-management/src/pages/User/styled.ts +++ b/hotel-management/src/pages/User/styled.ts @@ -21,4 +21,8 @@ const StyledOperationTable = styled.div` justify-content: flex-end; `; -export { StyledUser, Title, StyledOperationTable }; +export { + StyledUser, + Title, + StyledOperationTable +}; diff --git a/hotel-management/src/services/authenticationService.ts b/hotel-management/src/services/authenticationService.ts index 151730e..a064ce3 100644 --- a/hotel-management/src/services/authenticationService.ts +++ b/hotel-management/src/services/authenticationService.ts @@ -7,6 +7,11 @@ import supabase from './supabaseService'; // Types import { IAccount } from '@type/account'; +/** + * Login services + * @param param0 The object contains email and password to login + * @returns The data of account login if success + */ const login = async ({ email, password }: ILogin) => { const { data, error } = await supabase.auth.signInWithPassword({ email, @@ -20,6 +25,10 @@ const login = async ({ email, password }: ILogin) => { return data; }; +/** + * Get data of account current login + * @returns The data of account currently login + */ const getCurrentAccount = async () => { const { data } = await supabase.auth.getSession(); @@ -36,6 +45,9 @@ const getCurrentAccount = async () => { return accountData.user; }; +/** + * Logout services + */ const logout = async () => { const { error } = await supabase.auth.signOut(); @@ -44,6 +56,11 @@ const logout = async () => { } }; +/** + * Update account currently login + * @param param0 The object contain fullName, password to be updated + * @returns The data of account after updated + */ const updateAccount = async ({ fullName, password }: IAccount) => { let accountUpdate: UserAttributes | null = null; diff --git a/hotel-management/src/services/bookingServices.ts b/hotel-management/src/services/bookingServices.ts index b8cac0e..bd24708 100644 --- a/hotel-management/src/services/bookingServices.ts +++ b/hotel-management/src/services/bookingServices.ts @@ -10,7 +10,6 @@ import { BOOKINGS_TABLE, ERROR_CHECKOUT, ERROR_CREATE_BOOKING, - ERROR_DELETE_BOOKING, ERROR_FETCHING_BOOKING, ERROR_UPDATE_BOOKING, } from '@constant/messages'; @@ -100,22 +99,6 @@ const createBooking = async (booking: IBooking): Promise => { return data; }; -/** - * Delete booking in database - * @param idRoom The id of booking need to delete - */ -const deleteBooking = async (idBooking: number) => { - const { error } = await supabase - .from(BOOKINGS_TABLE) - .delete() - .eq('id', idBooking); - - if (error) { - console.error(error.message); - throw new Error(ERROR_DELETE_BOOKING); - } -}; - /** * Check out booking services * @param param0 The ICheckOutBooking object @@ -150,6 +133,5 @@ export { createBooking, getAllBookings, updateBooking, - deleteBooking, checkOutBooking, }; diff --git a/hotel-management/src/services/userServices.ts b/hotel-management/src/services/userServices.ts index 1af1d12..11837cb 100644 --- a/hotel-management/src/services/userServices.ts +++ b/hotel-management/src/services/userServices.ts @@ -3,7 +3,8 @@ import { IUser } from '@type/user'; // Services import supabase from './supabaseService'; -import { IDataState } from '@type/common'; + +// Constants import { DEFAULT_PAGE_SIZE } from '@constant/config'; import { ERROR_CREATE_USER, @@ -118,19 +119,6 @@ const getAllUsers = async ({ return { data, count }; }; -const getUserNotBooked = async (): Promise => { - const { data, error } = await supabase - .from(USERS_TABLE) - .select('id, name, isBooked'); - - if (error) { - console.error(error.message); - throw new Error(ERROR_FETCHING_USER); - } - - return data; -}; - const updateUserBookedStatus = async ( id: number, isBooked: boolean @@ -153,6 +141,5 @@ export { createUser, getAllUsers, setIsDeleteUser, - getUserNotBooked, updateUserBookedStatus, }; diff --git a/hotel-management/src/styles/bases/typography.css b/hotel-management/src/styles/bases/typography.css index d13a845..64ac4f8 100644 --- a/hotel-management/src/styles/bases/typography.css +++ b/hotel-management/src/styles/bases/typography.css @@ -1,7 +1,7 @@ @font-face { font-family: 'Cabin'; - src: url('../../assets/fonts/Cabin.woff2') format('woff2'), - url('../../assets/fonts/Cabin.ttf') format('truetype'); + src: url('./assets/fonts/Cabin.woff2') format('woff2'), + url('./assets/fonts/Cabin.ttf') format('truetype'); font-display: swap; } diff --git a/hotel-management/tsconfig.json b/hotel-management/tsconfig.json index 284f24e..75af449 100644 --- a/hotel-management/tsconfig.json +++ b/hotel-management/tsconfig.json @@ -33,7 +33,6 @@ "@commonStyle/*": ["./src/commons/styles/*"], "@type/*": ["./src/types/*"], "@page/*": ["./src/pages/*"], - "@assets/*": ["./src/assets/*"], } }, "include": ["src", "test"],