From c7a3ae41b117845c524c77cd1efd081fe0055a1e Mon Sep 17 00:00:00 2001 From: Hubert Koster Date: Tue, 1 Nov 2022 14:51:41 +0100 Subject: [PATCH 01/14] migrate dialog to typescript --- src/components/global/Dialog/Dialog.jsx | 62 ------------------- src/components/global/Dialog/Dialog.tsx | 60 ++++++++++++++++++ .../NavigationLinks/NavigationLinks.tsx | 3 - 3 files changed, 60 insertions(+), 65 deletions(-) delete mode 100644 src/components/global/Dialog/Dialog.jsx create mode 100644 src/components/global/Dialog/Dialog.tsx diff --git a/src/components/global/Dialog/Dialog.jsx b/src/components/global/Dialog/Dialog.jsx deleted file mode 100644 index cd34ab7a..00000000 --- a/src/components/global/Dialog/Dialog.jsx +++ /dev/null @@ -1,62 +0,0 @@ -import React, { useEffect, useRef } from "react"; - -import { useDialogPolyfill } from "./useDialogPolyfill"; -import styles from "./Dialog.module.scss"; - -export default function Dialog({ - closeOnOutsideClick, - onRequestClose, - open, - ...props -}) { - const dialogRef = useRef(); - - useDialogPolyfill(dialogRef); - useDialogOpening(dialogRef, open); - useDialogClosing(dialogRef, onRequestClose); - - function handleOutsideClick(event) { - const dialogNode = dialogRef.current; - if (closeOnOutsideClick && event.target === dialogNode) { - onRequestClose(); - } - } - - return ( - -
-
- ); -} - -const useDialogOpening = (dialogRef, open) => { - const lastActiveElement = useRef(null); - useEffect(() => { - const dialogNode = dialogRef.current; - if (open) { - lastActiveElement.current = document.activeElement; - dialogNode.showModal(); - } else { - dialogNode.close(); - lastActiveElement.current.focus(); - } - }, [open]); -}; - -const useDialogClosing = (dialogRef, onRequestClose) => { - useEffect(() => { - const dialogNode = dialogRef.current; - const handleCancel = (event) => { - event.preventDefault(); - onRequestClose(); - }; - dialogNode.addEventListener("cancel", handleCancel); - return () => { - dialogNode.removeEventListener("cancel", handleCancel); - }; - }, [onRequestClose]); -}; diff --git a/src/components/global/Dialog/Dialog.tsx b/src/components/global/Dialog/Dialog.tsx new file mode 100644 index 00000000..bacb409c --- /dev/null +++ b/src/components/global/Dialog/Dialog.tsx @@ -0,0 +1,60 @@ +import { ReactEventHandler, RefObject, useEffect, useRef } from "react"; +import { useDialogPolyfill } from "./useDialogPolyfill"; +import styles from "./Dialog.module.scss"; + +export default function Dialog({ + closeOnOutsideClick, + onRequestClose, + open, + ...props +}) { + const dialogRef = useRef(null); + + useDialogPolyfill(dialogRef); + useDialogOpening(dialogRef, open); + useDialogClosing(dialogRef, onRequestClose); + + const handleOutsideClick: ReactEventHandler = (event) => { + const dialogNode = dialogRef?.current; + if (closeOnOutsideClick && event?.target === dialogNode) { + onRequestClose(); + } + } + + return ( + +
+
+ ); +} + +const useDialogOpening = (dialogRef: RefObject, open: boolean) => { + const lastActiveElement = useRef(null); + useEffect(() => { + const dialogNode = dialogRef?.current; + if (open) { + dialogNode?.showModal(); + } else { + dialogNode?.close(); + lastActiveElement?.current?.focus(); + } + }, [open]); +}; + +const useDialogClosing = (dialogRef: RefObject, onRequestClose: VoidFunction) => { + useEffect(() => { + const dialogNode = dialogRef?.current; + const handleCancel: EventListener = (event) => { + event.preventDefault(); + onRequestClose(); + }; + dialogNode?.addEventListener("cancel", handleCancel); + return () => { + dialogNode?.removeEventListener("cancel", handleCancel); + }; + }, [onRequestClose]); +}; diff --git a/src/components/global/Header/NavigationLinks/NavigationLinks.tsx b/src/components/global/Header/NavigationLinks/NavigationLinks.tsx index ffa76364..f5bb1355 100644 --- a/src/components/global/Header/NavigationLinks/NavigationLinks.tsx +++ b/src/components/global/Header/NavigationLinks/NavigationLinks.tsx @@ -16,9 +16,6 @@ export default function NavigationLinks() { // Check if user is on current page location const trimmed_route = route.path.replace(/\//g, '') const path_is_route = split_path.includes(trimmed_route); - - console.log(route.path); - const LinkComponent = () => { return (
From 104287fdf002ecb5cd626b6575f350363709b06a Mon Sep 17 00:00:00 2001 From: Hubert Koster Date: Tue, 1 Nov 2022 15:10:06 +0100 Subject: [PATCH 02/14] removing consolelog in seperate pr --- .../global/Header/NavigationLinks/NavigationLinks.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/global/Header/NavigationLinks/NavigationLinks.tsx b/src/components/global/Header/NavigationLinks/NavigationLinks.tsx index f5bb1355..ffa76364 100644 --- a/src/components/global/Header/NavigationLinks/NavigationLinks.tsx +++ b/src/components/global/Header/NavigationLinks/NavigationLinks.tsx @@ -16,6 +16,9 @@ export default function NavigationLinks() { // Check if user is on current page location const trimmed_route = route.path.replace(/\//g, '') const path_is_route = split_path.includes(trimmed_route); + + console.log(route.path); + const LinkComponent = () => { return (
From 57acb318eb9af8716116ff852b1300be15d00edb Mon Sep 17 00:00:00 2001 From: Hubert Koster Date: Wed, 2 Nov 2022 11:34:22 +0100 Subject: [PATCH 03/14] removing dialog polyfill --- index.d.ts | 4 +++- src/components/global/Dialog/Dialog.tsx | 20 ++++++++--------- .../global/Dialog/useDialogPolyfill.js | 22 ------------------- 3 files changed, 13 insertions(+), 33 deletions(-) delete mode 100644 src/components/global/Dialog/useDialogPolyfill.js diff --git a/index.d.ts b/index.d.ts index b8bae3ed..aa643c6a 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1 +1,3 @@ -declare module '*.png'; \ No newline at end of file +declare module '*.png'; +declare module '*.css'; +declare module '*.scss'; \ No newline at end of file diff --git a/src/components/global/Dialog/Dialog.tsx b/src/components/global/Dialog/Dialog.tsx index bacb409c..b839c94f 100644 --- a/src/components/global/Dialog/Dialog.tsx +++ b/src/components/global/Dialog/Dialog.tsx @@ -1,5 +1,4 @@ -import { ReactEventHandler, RefObject, useEffect, useRef } from "react"; -import { useDialogPolyfill } from "./useDialogPolyfill"; +import React from "react"; import styles from "./Dialog.module.scss"; export default function Dialog({ @@ -8,13 +7,12 @@ export default function Dialog({ open, ...props }) { - const dialogRef = useRef(null); + const dialogRef = React.useRef(null); - useDialogPolyfill(dialogRef); useDialogOpening(dialogRef, open); useDialogClosing(dialogRef, onRequestClose); - const handleOutsideClick: ReactEventHandler = (event) => { + const handleOutsideClick: React.ReactEventHandler = (event) => { const dialogNode = dialogRef?.current; if (closeOnOutsideClick && event?.target === dialogNode) { onRequestClose(); @@ -32,9 +30,11 @@ export default function Dialog({ ); } -const useDialogOpening = (dialogRef: RefObject, open: boolean) => { - const lastActiveElement = useRef(null); - useEffect(() => { +type TDialogRef = React.RefObject + +const useDialogOpening = (dialogRef: TDialogRef, open: boolean) => { + const lastActiveElement = React.useRef(null); + React.useEffect(() => { const dialogNode = dialogRef?.current; if (open) { dialogNode?.showModal(); @@ -45,8 +45,8 @@ const useDialogOpening = (dialogRef: RefObject, open: boolean }, [open]); }; -const useDialogClosing = (dialogRef: RefObject, onRequestClose: VoidFunction) => { - useEffect(() => { +const useDialogClosing = (dialogRef: TDialogRef, onRequestClose: () => void) => { + React.useEffect(() => { const dialogNode = dialogRef?.current; const handleCancel: EventListener = (event) => { event.preventDefault(); diff --git a/src/components/global/Dialog/useDialogPolyfill.js b/src/components/global/Dialog/useDialogPolyfill.js deleted file mode 100644 index b3e485ed..00000000 --- a/src/components/global/Dialog/useDialogPolyfill.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from "react"; - -let dialogPolyfill = null; - -if (window.HTMLDialogElement === undefined) { - import("dialog-polyfill/dialog-polyfill.css"); -} - -export function useDialogPolyfill(ref) { - React.useLayoutEffect(() => { - if (window.HTMLDialogElement === undefined) { - if (dialogPolyfill) { - dialogPolyfill.registerDialog(ref.current); - } else { - import("dialog-polyfill").then((polyfill) => { - polyfill.default.registerDialog(ref.current); - dialogPolyfill = polyfill.default; - }); - } - } - }, [ref]); -} From 5a91636163e7919d1d09ba8770d20738fc17b547 Mon Sep 17 00:00:00 2001 From: Hubert Koster Date: Wed, 2 Nov 2022 12:22:20 +0100 Subject: [PATCH 04/14] refactoring code --- src/components/global/Dialog/Dialog.tsx | 17 ++++++++++++----- src/components/global/Modal/Modal.tsx | 2 +- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/global/Dialog/Dialog.tsx b/src/components/global/Dialog/Dialog.tsx index b839c94f..f929c951 100644 --- a/src/components/global/Dialog/Dialog.tsx +++ b/src/components/global/Dialog/Dialog.tsx @@ -1,18 +1,27 @@ import React from "react"; import styles from "./Dialog.module.scss"; -export default function Dialog({ +type TDialog = { + closeOnOutsideClick: boolean + onRequestClose: () => void + open: boolean, + props: HTMLElement +} + +type TDialogRef = React.RefObject + +export const Dialog = ({ closeOnOutsideClick, onRequestClose, open, ...props -}) { +}: TDialog) => { const dialogRef = React.useRef(null); useDialogOpening(dialogRef, open); useDialogClosing(dialogRef, onRequestClose); - const handleOutsideClick: React.ReactEventHandler = (event) => { + const handleOutsideClick = (event: React.MouseEvent) => { const dialogNode = dialogRef?.current; if (closeOnOutsideClick && event?.target === dialogNode) { onRequestClose(); @@ -30,8 +39,6 @@ export default function Dialog({ ); } -type TDialogRef = React.RefObject - const useDialogOpening = (dialogRef: TDialogRef, open: boolean) => { const lastActiveElement = React.useRef(null); React.useEffect(() => { diff --git a/src/components/global/Modal/Modal.tsx b/src/components/global/Modal/Modal.tsx index f08fe315..31c7585b 100644 --- a/src/components/global/Modal/Modal.tsx +++ b/src/components/global/Modal/Modal.tsx @@ -1,5 +1,5 @@ import Button from "../Button/Button"; -import Dialog from "../Dialog/Dialog"; +import { Dialog } from "../Dialog/Dialog"; import styles from "./Modal.module.scss"; export default function Modal({ From 66171ebd66f1253e7f31a1a04393954ec82cd436 Mon Sep 17 00:00:00 2001 From: Hubert Koster Date: Wed, 2 Nov 2022 12:26:15 +0100 Subject: [PATCH 05/14] komma --- src/components/global/Dialog/Dialog.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/global/Dialog/Dialog.tsx b/src/components/global/Dialog/Dialog.tsx index f929c951..7f757c1c 100644 --- a/src/components/global/Dialog/Dialog.tsx +++ b/src/components/global/Dialog/Dialog.tsx @@ -2,8 +2,8 @@ import React from "react"; import styles from "./Dialog.module.scss"; type TDialog = { - closeOnOutsideClick: boolean - onRequestClose: () => void + closeOnOutsideClick: boolean, + onRequestClose: () => void, open: boolean, props: HTMLElement } From a221f9e810a43b7be580af90f779150e052934cc Mon Sep 17 00:00:00 2001 From: Hubert Koster Date: Wed, 2 Nov 2022 15:09:44 +0100 Subject: [PATCH 06/14] refactoring --- src/components/global/Dialog/Dialog.tsx | 36 ++++++++++++------------- src/components/global/Modal/Modal.tsx | 24 +++++++++-------- 2 files changed, 31 insertions(+), 29 deletions(-) diff --git a/src/components/global/Dialog/Dialog.tsx b/src/components/global/Dialog/Dialog.tsx index 7f757c1c..2518147b 100644 --- a/src/components/global/Dialog/Dialog.tsx +++ b/src/components/global/Dialog/Dialog.tsx @@ -5,7 +5,7 @@ type TDialog = { closeOnOutsideClick: boolean, onRequestClose: () => void, open: boolean, - props: HTMLElement + children: React.ReactNode[] | HTMLElement[], } type TDialogRef = React.RefObject @@ -14,54 +14,54 @@ export const Dialog = ({ closeOnOutsideClick, onRequestClose, open, - ...props + ...children }: TDialog) => { - const dialogRef = React.useRef(null); + const dialog_ref = React.useRef(null); - useDialogOpening(dialogRef, open); - useDialogClosing(dialogRef, onRequestClose); + useDialogOpening(dialog_ref, open); + useDialogClosing(dialog_ref, onRequestClose); const handleOutsideClick = (event: React.MouseEvent) => { - const dialogNode = dialogRef?.current; - if (closeOnOutsideClick && event?.target === dialogNode) { + const dialog_node = dialog_ref?.current; + if (closeOnOutsideClick && event?.target === dialog_node) { onRequestClose(); } } return ( -
+
); } -const useDialogOpening = (dialogRef: TDialogRef, open: boolean) => { +const useDialogOpening = (dialog_ref: TDialogRef, open: boolean) => { const lastActiveElement = React.useRef(null); React.useEffect(() => { - const dialogNode = dialogRef?.current; + const dialog_node = dialog_ref?.current; if (open) { - dialogNode?.showModal(); + dialog_node?.showModal(); } else { - dialogNode?.close(); + dialog_node?.close(); lastActiveElement?.current?.focus(); } }, [open]); }; -const useDialogClosing = (dialogRef: TDialogRef, onRequestClose: () => void) => { +const useDialogClosing = (dialog_ref: TDialogRef, onRequestClose: () => void) => { React.useEffect(() => { - const dialogNode = dialogRef?.current; - const handleCancel: EventListener = (event) => { + const dialog_node = dialog_ref?.current; + const handleCancel = (event: Event): void => { event.preventDefault(); onRequestClose(); }; - dialogNode?.addEventListener("cancel", handleCancel); + dialog_node?.addEventListener("cancel", handleCancel); return () => { - dialogNode?.removeEventListener("cancel", handleCancel); + dialog_node?.removeEventListener("cancel", handleCancel); }; }, [onRequestClose]); }; diff --git a/src/components/global/Modal/Modal.tsx b/src/components/global/Modal/Modal.tsx index 31c7585b..99614230 100644 --- a/src/components/global/Modal/Modal.tsx +++ b/src/components/global/Modal/Modal.tsx @@ -2,6 +2,18 @@ import Button from "../Button/Button"; import { Dialog } from "../Dialog/Dialog"; import styles from "./Modal.module.scss"; +type TModal = { + onRequestClose: () => void; + open: boolean; + type: "success" | "warning"; + title: string; + description: string; + primaryButtonText?: string; + secondaryButtonText: string; + onPrimaryButtonClick?: () => void; + onSecondaryButtonClick: () => void; +} + export default function Modal({ onRequestClose, open, @@ -12,17 +24,7 @@ export default function Modal({ secondaryButtonText, onPrimaryButtonClick, onSecondaryButtonClick, -}: { - onRequestClose: () => void; - open: any; - type: "success" | "warning"; - title: string; - description: string; - primaryButtonText?: any; - secondaryButtonText: string; - onPrimaryButtonClick?: () => void; - onSecondaryButtonClick: () => void; -}) { +}: TModal) { return (
From 333a4ebb2ce84498f2a9b3482504e3f3b218a1f2 Mon Sep 17 00:00:00 2001 From: Hubert Koster Date: Wed, 2 Nov 2022 15:16:07 +0100 Subject: [PATCH 07/14] small refactor --- src/components/global/Dialog/Dialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/global/Dialog/Dialog.tsx b/src/components/global/Dialog/Dialog.tsx index 2518147b..126abc23 100644 --- a/src/components/global/Dialog/Dialog.tsx +++ b/src/components/global/Dialog/Dialog.tsx @@ -55,7 +55,7 @@ const useDialogOpening = (dialog_ref: TDialogRef, open: boolean) => { const useDialogClosing = (dialog_ref: TDialogRef, onRequestClose: () => void) => { React.useEffect(() => { const dialog_node = dialog_ref?.current; - const handleCancel = (event: Event): void => { + const handleCancel: EventListener = (event: Event): void => { event.preventDefault(); onRequestClose(); }; From 60855d718032e1b493a17d1e545de0ea2d88aabb Mon Sep 17 00:00:00 2001 From: Hubert Koster Date: Wed, 2 Nov 2022 15:24:16 +0100 Subject: [PATCH 08/14] fixing registerAppDialog errors --- .../RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx | 4 ++-- src/components/global/Modal/Modal.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/app-registration/AppRegistration/RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx b/src/components/app-registration/AppRegistration/RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx index 021cf46a..6982e7db 100644 --- a/src/components/app-registration/AppRegistration/RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx +++ b/src/components/app-registration/AppRegistration/RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx @@ -9,12 +9,12 @@ import { stateService } from "../../../../state/stateSignal"; const Modal = lazy(() => import("../../../global/Modal/Modal")); export default function RegisterAppDialogSuccess() { - const isModalOpen = useSelector(stateService, isRegisterSuccessSelector); + const isModalOpen: boolean = useSelector(stateService, isRegisterSuccessSelector); const isUpdateMode = useSelector(stateService, isUpdateModeSelector); const description = isUpdateMode ? "Your app has been updated successfully." : "You have successfully registered your application. You can now start using Deriv API."; - const primaryButtonText = isUpdateMode ? null : "Manage application"; + const primaryButtonText: string | null = isUpdateMode ? null : "Manage application"; if (!isModalOpen) { return null; } diff --git a/src/components/global/Modal/Modal.tsx b/src/components/global/Modal/Modal.tsx index 99614230..45a1c582 100644 --- a/src/components/global/Modal/Modal.tsx +++ b/src/components/global/Modal/Modal.tsx @@ -8,7 +8,7 @@ type TModal = { type: "success" | "warning"; title: string; description: string; - primaryButtonText?: string; + primaryButtonText?: string | null; secondaryButtonText: string; onPrimaryButtonClick?: () => void; onSecondaryButtonClick: () => void; From 64e6bae6fa2f275b23cdbd58289d5c8f8a3cf4a3 Mon Sep 17 00:00:00 2001 From: Hubert Koster Date: Wed, 2 Nov 2022 15:27:50 +0100 Subject: [PATCH 09/14] fixing error in RegisterAppDialogError --- .../RegisterAppDialogError/RegisterAppDialogError.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/app-registration/AppRegistration/AppRegistrationForm/RegisterAppDialogError/RegisterAppDialogError.tsx b/src/components/app-registration/AppRegistration/AppRegistrationForm/RegisterAppDialogError/RegisterAppDialogError.tsx index 7fdd488b..a988bd63 100644 --- a/src/components/app-registration/AppRegistration/AppRegistrationForm/RegisterAppDialogError/RegisterAppDialogError.tsx +++ b/src/components/app-registration/AppRegistration/AppRegistrationForm/RegisterAppDialogError/RegisterAppDialogError.tsx @@ -7,7 +7,7 @@ import DelayedFallback from "../../../../global/DelayedFallback/DelayedFallback" const Modal = lazy(() => import("../../../../global/Modal/Modal")); export default function RegisterAppDialogError({ error }) { - const isModalOpen = useSelector(stateService, isRegisterErrorSelector); + const isModalOpen: boolean = useSelector(stateService, isRegisterErrorSelector); if (!isModalOpen) { return null; } From 7286f55900104f055b3338990eaa832e5bd42a52 Mon Sep 17 00:00:00 2001 From: Hubert Koster Date: Fri, 4 Nov 2022 15:08:06 +0100 Subject: [PATCH 10/14] refactor --- src/components/global/Dialog/Dialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/global/Dialog/Dialog.tsx b/src/components/global/Dialog/Dialog.tsx index 126abc23..6ff80930 100644 --- a/src/components/global/Dialog/Dialog.tsx +++ b/src/components/global/Dialog/Dialog.tsx @@ -55,7 +55,7 @@ const useDialogOpening = (dialog_ref: TDialogRef, open: boolean) => { const useDialogClosing = (dialog_ref: TDialogRef, onRequestClose: () => void) => { React.useEffect(() => { const dialog_node = dialog_ref?.current; - const handleCancel: EventListener = (event: Event): void => { + const handleCancel: EventListener = (event) => { event.preventDefault(); onRequestClose(); }; From 0dae46a1284a46ba0d556ffa87f1d059e08aab3f Mon Sep 17 00:00:00 2001 From: Hubert Koster Date: Fri, 4 Nov 2022 15:17:03 +0100 Subject: [PATCH 11/14] removing unnecessary types --- .../RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/app-registration/AppRegistration/RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx b/src/components/app-registration/AppRegistration/RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx index 6982e7db..021cf46a 100644 --- a/src/components/app-registration/AppRegistration/RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx +++ b/src/components/app-registration/AppRegistration/RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx @@ -9,12 +9,12 @@ import { stateService } from "../../../../state/stateSignal"; const Modal = lazy(() => import("../../../global/Modal/Modal")); export default function RegisterAppDialogSuccess() { - const isModalOpen: boolean = useSelector(stateService, isRegisterSuccessSelector); + const isModalOpen = useSelector(stateService, isRegisterSuccessSelector); const isUpdateMode = useSelector(stateService, isUpdateModeSelector); const description = isUpdateMode ? "Your app has been updated successfully." : "You have successfully registered your application. You can now start using Deriv API."; - const primaryButtonText: string | null = isUpdateMode ? null : "Manage application"; + const primaryButtonText = isUpdateMode ? null : "Manage application"; if (!isModalOpen) { return null; } From 45f02171e5b2c874a51949a15a6632157b71c4b1 Mon Sep 17 00:00:00 2001 From: Hubert Koster Date: Fri, 4 Nov 2022 15:19:12 +0100 Subject: [PATCH 12/14] accidentally removed check --- .../RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/app-registration/AppRegistration/RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx b/src/components/app-registration/AppRegistration/RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx index 021cf46a..599aecb6 100644 --- a/src/components/app-registration/AppRegistration/RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx +++ b/src/components/app-registration/AppRegistration/RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx @@ -9,7 +9,7 @@ import { stateService } from "../../../../state/stateSignal"; const Modal = lazy(() => import("../../../global/Modal/Modal")); export default function RegisterAppDialogSuccess() { - const isModalOpen = useSelector(stateService, isRegisterSuccessSelector); + const isModalOpen: boolean = useSelector(stateService, isRegisterSuccessSelector); const isUpdateMode = useSelector(stateService, isUpdateModeSelector); const description = isUpdateMode ? "Your app has been updated successfully." From 0d75880a35b7eeaad6a304b37bc8186eecf77622 Mon Sep 17 00:00:00 2001 From: Hubert Koster Date: Fri, 9 Dec 2022 10:49:40 +0100 Subject: [PATCH 13/14] husky --- .../RegisterAppDialogSuccess.tsx | 58 +++++------ src/components/global/Dialog/Dialog.tsx | 99 +++++++++---------- src/components/global/Modal/Modal.tsx | 84 ++++++++-------- 3 files changed, 115 insertions(+), 126 deletions(-) diff --git a/src/components/app-registration/AppRegistration/RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx b/src/components/app-registration/AppRegistration/RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx index 87e6bb99..1257b9a2 100644 --- a/src/components/app-registration/AppRegistration/RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx +++ b/src/components/app-registration/AppRegistration/RegisterAppDialogSuccess/RegisterAppDialogSuccess.tsx @@ -6,33 +6,33 @@ import { stateService } from '../../../../state/stateSignal'; const Modal = lazy(() => import('../../../global/Modal/Modal')); export default function RegisterAppDialogSuccess() { - const isModalOpen: boolean = useSelector(stateService, isRegisterSuccessSelector); - const isUpdateMode = useSelector(stateService, isUpdateModeSelector); - const description = isUpdateMode - ? "Your app has been updated successfully." - : "You have successfully registered your application. You can now start using Deriv API."; - const primaryButtonText = isUpdateMode ? null : "Manage application"; - if (!isModalOpen) { - return null; - } - const closeModal = () => { - stateService.send("CLOSE_MODAL"); - }; - return ( - }> - { - stateService.send("MANAGE_TOGGLE_TAB"); - }} - onSecondaryButtonClick={closeModal} - /> - - ); + const isModalOpen: boolean = useSelector(stateService, isRegisterSuccessSelector); + const isUpdateMode = useSelector(stateService, isUpdateModeSelector); + const description = isUpdateMode + ? 'Your app has been updated successfully.' + : 'You have successfully registered your application. You can now start using Deriv API.'; + const primaryButtonText = isUpdateMode ? null : 'Manage application'; + if (!isModalOpen) { + return null; + } + const closeModal = () => { + stateService.send('CLOSE_MODAL'); + }; + return ( + }> + { + stateService.send('MANAGE_TOGGLE_TAB'); + }} + onSecondaryButtonClick={closeModal} + /> + + ); } diff --git a/src/components/global/Dialog/Dialog.tsx b/src/components/global/Dialog/Dialog.tsx index 6ff80930..4f730373 100644 --- a/src/components/global/Dialog/Dialog.tsx +++ b/src/components/global/Dialog/Dialog.tsx @@ -1,67 +1,58 @@ -import React from "react"; -import styles from "./Dialog.module.scss"; +import React from 'react'; +import styles from './Dialog.module.scss'; type TDialog = { - closeOnOutsideClick: boolean, - onRequestClose: () => void, - open: boolean, - children: React.ReactNode[] | HTMLElement[], -} + closeOnOutsideClick: boolean; + onRequestClose: () => void; + open: boolean; + children: React.ReactNode[] | HTMLElement[]; +}; -type TDialogRef = React.RefObject +type TDialogRef = React.RefObject; -export const Dialog = ({ - closeOnOutsideClick, - onRequestClose, - open, - ...children -}: TDialog) => { - const dialog_ref = React.useRef(null); +export const Dialog = ({ closeOnOutsideClick, onRequestClose, open, ...children }: TDialog) => { + const dialog_ref = React.useRef(null); - useDialogOpening(dialog_ref, open); - useDialogClosing(dialog_ref, onRequestClose); + useDialogOpening(dialog_ref, open); + useDialogClosing(dialog_ref, onRequestClose); - const handleOutsideClick = (event: React.MouseEvent) => { - const dialog_node = dialog_ref?.current; - if (closeOnOutsideClick && event?.target === dialog_node) { - onRequestClose(); - } - } + const handleOutsideClick = (event: React.MouseEvent) => { + const dialog_node = dialog_ref?.current; + if (closeOnOutsideClick && event?.target === dialog_node) { + onRequestClose(); + } + }; - return ( - -
-
- ); -} + return ( + +
+
+ ); +}; const useDialogOpening = (dialog_ref: TDialogRef, open: boolean) => { - const lastActiveElement = React.useRef(null); - React.useEffect(() => { - const dialog_node = dialog_ref?.current; - if (open) { - dialog_node?.showModal(); - } else { - dialog_node?.close(); - lastActiveElement?.current?.focus(); - } - }, [open]); + const lastActiveElement = React.useRef(null); + React.useEffect(() => { + const dialog_node = dialog_ref?.current; + if (open) { + dialog_node?.showModal(); + } else { + dialog_node?.close(); + lastActiveElement?.current?.focus(); + } + }, [open]); }; const useDialogClosing = (dialog_ref: TDialogRef, onRequestClose: () => void) => { - React.useEffect(() => { - const dialog_node = dialog_ref?.current; - const handleCancel: EventListener = (event) => { - event.preventDefault(); - onRequestClose(); - }; - dialog_node?.addEventListener("cancel", handleCancel); - return () => { - dialog_node?.removeEventListener("cancel", handleCancel); - }; - }, [onRequestClose]); + React.useEffect(() => { + const dialog_node = dialog_ref?.current; + const handleCancel: EventListener = event => { + event.preventDefault(); + onRequestClose(); + }; + dialog_node?.addEventListener('cancel', handleCancel); + return () => { + dialog_node?.removeEventListener('cancel', handleCancel); + }; + }, [onRequestClose]); }; diff --git a/src/components/global/Modal/Modal.tsx b/src/components/global/Modal/Modal.tsx index 45a1c582..db94a7a7 100644 --- a/src/components/global/Modal/Modal.tsx +++ b/src/components/global/Modal/Modal.tsx @@ -1,49 +1,47 @@ -import Button from "../Button/Button"; -import { Dialog } from "../Dialog/Dialog"; -import styles from "./Modal.module.scss"; +import Button from '../Button/Button'; +import { Dialog } from '../Dialog/Dialog'; +import styles from './Modal.module.scss'; type TModal = { - onRequestClose: () => void; - open: boolean; - type: "success" | "warning"; - title: string; - description: string; - primaryButtonText?: string | null; - secondaryButtonText: string; - onPrimaryButtonClick?: () => void; - onSecondaryButtonClick: () => void; -} + onRequestClose: () => void; + open: boolean; + type: 'success' | 'warning'; + title: string; + description: string; + primaryButtonText?: string | null; + secondaryButtonText: string; + onPrimaryButtonClick?: () => void; + onSecondaryButtonClick: () => void; +}; export default function Modal({ - onRequestClose, - open, - type, - title, - description, - primaryButtonText, - secondaryButtonText, - onPrimaryButtonClick, - onSecondaryButtonClick, + onRequestClose, + open, + type, + title, + description, + primaryButtonText, + secondaryButtonText, + onPrimaryButtonClick, + onSecondaryButtonClick, }: TModal) { - return ( - -
-
-
-
- {type === "success" &&
} - {type === "warning" &&
} -
{title}
-
{description}
-
-
- - {primaryButtonText && ( - - )} -
-
- ); + return ( + +
+
+
+
+ {type === 'success' &&
} + {type === 'warning' &&
} +
{title}
+
{description}
+
+
+ + {primaryButtonText && } +
+
+ ); } From c6427d7719f2b71aa6e3a352e4c6a0b317ec3e44 Mon Sep 17 00:00:00 2001 From: Hubert Koster Date: Fri, 9 Dec 2022 10:56:12 +0100 Subject: [PATCH 14/14] fixing ts error --- .../RegisterAppDialogError/RegisterAppDialogError.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/app-registration/AppRegistration/AppRegistrationForm/RegisterAppDialogError/RegisterAppDialogError.tsx b/src/components/app-registration/AppRegistration/AppRegistrationForm/RegisterAppDialogError/RegisterAppDialogError.tsx index 2d9990a4..0b65bb16 100644 --- a/src/components/app-registration/AppRegistration/AppRegistrationForm/RegisterAppDialogError/RegisterAppDialogError.tsx +++ b/src/components/app-registration/AppRegistration/AppRegistrationForm/RegisterAppDialogError/RegisterAppDialogError.tsx @@ -7,7 +7,7 @@ import DelayedFallback from '../../../../global/DelayedFallback/DelayedFallback' const Modal = lazy(() => import('../../../../global/Modal/Modal')); export default function RegisterAppDialogError({ error }) { - const isModalOpen = useSelector(stateService, isRegisterErrorSelector); + const isModalOpen: boolean = useSelector(stateService, isRegisterErrorSelector); if (!isModalOpen) { return null; }