From 540f498d369868116c2ea0e8ea13a5d03d88552e Mon Sep 17 00:00:00 2001 From: Bogdan Date: Fri, 29 Dec 2023 18:47:49 +0200 Subject: [PATCH] refactor: change dialog to md components --- .../SettingsPageComp/ClearStorageComp.tsx | 12 +++---- src/components/SettingsPageComp/ClearUndo.tsx | 4 ++- .../SettingsPageComp/ConfirmModal.tsx | 33 +++++++++++------ .../SettingsPageComp/ConfirmOverlay.tsx | 31 ---------------- src/components/loginReg/FormInput.tsx | 12 ------- src/layouts/MainLayout.tsx | 3 +- src/shared/constants/const.ts | 1 + src/test/SettingsPage/SettingsPage.test.tsx | 36 +------------------ 8 files changed, 35 insertions(+), 97 deletions(-) delete mode 100644 src/components/SettingsPageComp/ConfirmOverlay.tsx delete mode 100644 src/components/loginReg/FormInput.tsx diff --git a/src/components/SettingsPageComp/ClearStorageComp.tsx b/src/components/SettingsPageComp/ClearStorageComp.tsx index 60a0b3b..17b4528 100644 --- a/src/components/SettingsPageComp/ClearStorageComp.tsx +++ b/src/components/SettingsPageComp/ClearStorageComp.tsx @@ -4,7 +4,6 @@ import useLanguage from '@/shared/Context/hooks'; import FilledTonalButton from '@/shared/ui/FilledTonalButton'; import ConfirmModal from './ConfirmModal'; -import ConfirmOverlay from './ConfirmOverlay'; const ClearStorageComp = () => { const [isModalShown, setIsModalShown] = useState(false); @@ -21,12 +20,11 @@ const ClearStorageComp = () => { {translation.settingsPage.clear.btn} - - - + ); }; diff --git a/src/components/SettingsPageComp/ClearUndo.tsx b/src/components/SettingsPageComp/ClearUndo.tsx index 4183ad2..de9a8e9 100644 --- a/src/components/SettingsPageComp/ClearUndo.tsx +++ b/src/components/SettingsPageComp/ClearUndo.tsx @@ -1,5 +1,7 @@ import { useEffect, useState } from 'react'; +import { SNACKBAR_AUTO_HIDE_DURATION } from '@shared/constants/const'; + type UndoPropsType = { closeToast: () => void; title: string; @@ -17,7 +19,7 @@ const ClearUndo = (props: UndoPropsType) => { useEffect(() => { const timeoutId = setTimeout(() => { dataClearance(); - }, 2000); + }, SNACKBAR_AUTO_HIDE_DURATION); setDeleteDataTimeout(timeoutId); diff --git a/src/components/SettingsPageComp/ConfirmModal.tsx b/src/components/SettingsPageComp/ConfirmModal.tsx index faf5290..bf537e0 100644 --- a/src/components/SettingsPageComp/ConfirmModal.tsx +++ b/src/components/SettingsPageComp/ConfirmModal.tsx @@ -1,15 +1,18 @@ -import { Dispatch, FC, SetStateAction } from 'react'; +import { Dispatch, FC, SetStateAction, useRef } from 'react'; +import { MdDialog } from '@material/web/all'; import { toast } from 'react-toastify'; import FilledTonalButton from '@/shared/ui/FilledTonalButton'; import Icon from '@/shared/ui/Icon'; import TextButton from '@/shared/ui/TextButton'; +import Dialog from '@shared/ui/Dialog'; import ClearUndo from './ClearUndo'; type PropsType = { setIsShown: Dispatch>; + open: boolean; locales: { title: string; subtitle: string; @@ -20,25 +23,35 @@ type PropsType = { }; }; -const ConfirmModal: FC = ({ setIsShown, locales }) => { +const ConfirmModal: FC = ({ open, setIsShown, locales }) => { const { title, subtitle, cancel, confirm, undoTitle, cancelBtn } = locales; + const dialogRef = useRef(null); + return ( -
- delete -

{title}

-

{subtitle}

-
- setIsShown((prev) => !prev)}>{cancel} + setIsShown(false)}> +
{title}
+ delete_outline +
+ {subtitle} +
+
+ { + if (dialogRef.current) dialogRef.current.close(); + }} + > + {cancel} + { toast( {}} title={undoTitle} btn={cancelBtn} />); - setIsShown((prev) => !prev); + if (dialogRef.current) dialogRef.current.close(); }} > {confirm}
-
+ ); }; diff --git a/src/components/SettingsPageComp/ConfirmOverlay.tsx b/src/components/SettingsPageComp/ConfirmOverlay.tsx deleted file mode 100644 index fd30fcb..0000000 --- a/src/components/SettingsPageComp/ConfirmOverlay.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { Dispatch, KeyboardEvent, MouseEvent, ReactNode, SetStateAction } from 'react'; - -type PropsType = { - setIsShown: Dispatch>; - isShown: boolean; - children: ReactNode; -}; - -const ConfirmOverlay = ({ isShown, setIsShown, children }: PropsType) => { - function closeHandler(e: MouseEvent | KeyboardEvent) { - if ((e.target as HTMLButtonElement).hasAttribute('data-overlay')) { - setIsShown((prev) => !prev); - } - } - if (!isShown) { - return null; - } - return ( -
closeHandler(e)} - onKeyDown={(e) => closeHandler(e)} - className="overlay absolute left-0 top-0 z-10 flex h-full w-full items-center justify-center bg-black/60" - > - {children} -
- ); -}; - -export default ConfirmOverlay; diff --git a/src/components/loginReg/FormInput.tsx b/src/components/loginReg/FormInput.tsx deleted file mode 100644 index cb9da3d..0000000 --- a/src/components/loginReg/FormInput.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { FC, HTMLAttributes } from 'react'; - -import { TextInputProps } from '@shared/types'; -import OutlinedTextField from '@shared/ui/OutlinedTextField'; - -type FormInputProps = HTMLAttributes & TextInputProps; - -const FormInput: FC = ({ ...props }) => { - return ; -}; - -export default FormInput; diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx index b95892e..937242d 100644 --- a/src/layouts/MainLayout.tsx +++ b/src/layouts/MainLayout.tsx @@ -6,6 +6,7 @@ import Header from '@components/Header/Header'; import Nav from '@components/Nav/Nav'; import Controls from '@components/RequestEditor/ui/Controls'; import ViewProvider from '@components/ViewList/context/ViewProvider'; +import { SNACKBAR_AUTO_HIDE_DURATION } from '@shared/constants/const'; import useScrollbar from '@shared/lib/hooks/useScrollbar'; const SnackBarTransition = cssTransition({ @@ -39,7 +40,7 @@ const MainLayout = () => { { expect(await screen.findByText('Dark mode')).toBeInTheDocument(); expect(await screen.findByText('Clear storage')).toBeInTheDocument(); }); - it('Should opened modal and close it with proper buttons', async () => { - render(); - const clearDataBtn = screen.getByText('Clear data'); - expect(screen.queryByTestId('overlay')).toBeNull(); - await act(async () => { - fireEvent.click(clearDataBtn); - }); - expect(await screen.findByTestId('overlay')).toBeInTheDocument(); - const closeBtn = await screen.findByText('Cancel'); - await act(async () => { - fireEvent.click(closeBtn); - }); - waitForElementToBeRemoved(() => { - expect(screen.queryByTestId('overlay')).toBeNull(); - }).catch(() => {}); - }); - it('Should open confirm modal and close it after clicking corresponding buttons', async () => { - render(); - const clearDataBtn = screen.getByText('Clear data'); - await act(async () => { - fireEvent.click(clearDataBtn); - }); - const clearBtn = await screen.findByText('Clear'); - await act(async () => { - fireEvent.click(clearBtn); - }); - const undoBtn = await screen.findByText('Undo'); - await act(async () => { - fireEvent.click(undoBtn); - }); - waitForElementToBeRemoved(() => { - expect(undoBtn).toBeNull(); - }).catch(() => {}); - }); it('Should change color theme after clicking on theme switcher', async () => { render(); expect(document.body.getAttribute('data-user-theme')).toBeNull();