diff --git a/src/components/home/ChooseFileBox.tsx b/src/components/home/ChooseFileBox.tsx index de6a38a..4a5305a 100644 --- a/src/components/home/ChooseFileBox.tsx +++ b/src/components/home/ChooseFileBox.tsx @@ -3,12 +3,10 @@ import { Dialog, DialogBody } from '@material-tailwind/react'; import { useUploadDocumentBox } from './UploadDocumentBox'; // Loc's task in here. -// This style is using custom hook. See ../common/SidebarMenu.tsx // This hook is used in ./src/pages/HomePage.tsx export function useChooseFileBox() { const { openUploadDocumentBox, UploadDocumentBox } = useUploadDocumentBox(); - const [openBox, setOpenBox] = useState(false); const ChooseFileBox = useMemo( @@ -17,7 +15,14 @@ export function useChooseFileBox() { return ( <> - A + { + setOpenBox(false); + openUploadDocumentBox(); + }} + > + A + {} diff --git a/src/components/home/UploadDocumentBox.tsx b/src/components/home/UploadDocumentBox.tsx index 6ae5bbd..866bd4d 100644 --- a/src/components/home/UploadDocumentBox.tsx +++ b/src/components/home/UploadDocumentBox.tsx @@ -1,14 +1,19 @@ -import { useState } from 'react'; +import { useMemo, useState } from 'react'; import { Dialog, DialogBody } from '@material-tailwind/react'; export function useUploadDocumentBox() { const [openBox, setOpenBox] = useState(false); - const handleOpenBox = () => setOpenBox(!openBox); - const UploadDocumentBox = () => ( - - A - + const UploadDocumentBox = useMemo( + () => () => { + const handleOpenBox = () => setOpenBox(!openBox); + return ( + + A + + ); + }, + [openBox] ); return {