chore(meshconfig): refactor rest of modal api

libremesh · Oct 24, 2024 · a1c9002 · a1c9002
1 parent 52eec74
commit a1c9002
Show file tree

Hide file tree

Showing 8 changed files with 638 additions and 441 deletions.
diff --git a/plugins/lime-plugin-mesh-wide-upgrade/src/components/modals.tsx b/plugins/lime-plugin-mesh-wide-upgrade/src/components/modals.tsx
@@ -1,61 +1,108 @@
 import { Trans } from "@lingui/macro";
-import { VNode } from "preact";
+import { ComponentChildren, VNode } from "preact";
 import { useCallback } from "react";
 
-import { useModal } from "components/Modal/Modal";
+import {
+    CallbackFn,
+    Modal,
+    ModalProps,
+    useModal,
+} from "components/Modal/Modal";
 
-interface IUseParallelQueriesModalProps {
-    useSuccessBtn?: boolean;
-    cb?: (e) => void;
-    title?: VNode;
-    content?: VNode;
-    btnTxt?: VNode;
-}
+import { useMeshUpgrade } from "plugins/lime-plugin-mesh-wide-upgrade/src/hooks/meshWideUpgradeProvider";
+import {
+    useParallelConfirmUpgrade,
+    useParallelScheduleUpgrade,
+} from "plugins/lime-plugin-mesh-wide-upgrade/src/meshUpgradeQueries";
 
-const useParallelQueriesModal = ({
-    useSuccessBtn,
-    cb,
-    title,
-    content,
-    btnTxt = <Trans>Schedule</Trans>,
-}: IUseParallelQueriesModalProps) => {
-    const { toggleModal, setModalState } = useModal();
-    const runAndClose = useCallback(() => {
-        cb(null);
-        toggleModal();
-    }, [cb, toggleModal]);
+// interface IUseParallelQueriesModalProps {
+//     useSuccessBtn?: boolean;
+//     cb?: (e) => void;
+//     title?: VNode;
+//     content?: VNode;
+//     btnTxt?: VNode;
+// }
 
-    const showModal = useCallback(() => {
-        setModalState({
-            content,
-            title,
-            successCb: useSuccessBtn ? runAndClose : undefined,
-            deleteCb: !useSuccessBtn ? runAndClose : undefined,
-            successBtnText: btnTxt,
-            deleteBtnText: btnTxt,
-        });
-        toggleModal();
-    }, [
-        setModalState,
-        content,
-        title,
-        useSuccessBtn,
-        runAndClose,
-        btnTxt,
-        toggleModal,
-    ]);
-    return { showModal, toggleModal };
-};
+// const useParallelQueriesModal = ({
+//     useSuccessBtn,
+//     cb,
+//     title,
+//     content,
+//     btnTxt = <Trans>Schedule</Trans>,
+// }: IUseParallelQueriesModalProps) => {
+//     const { toggleModal, setModalState } = useModal();
+//     const runAndClose = useCallback(() => {
+//         cb(null);
+//         toggleModal();
+//     }, [cb, toggleModal]);
+//
+//     const showModal = useCallback(() => {
+//         setModalState({
+//             content,
+//             title,
+//             successCb: useSuccessBtn ? runAndClose : undefined,
+//             deleteCb: !useSuccessBtn ? runAndClose : undefined,
+//             successBtnText: btnTxt,
+//             deleteBtnText: btnTxt,
+//         });
+//         toggleModal();
+//     }, [
+//         setModalState,
+//         content,
+//         title,
+//         useSuccessBtn,
+//         runAndClose,
+//         btnTxt,
+//         toggleModal,
+//     ]);
+//     return { showModal, toggleModal };
+// };
 
-export const useScheduleUpgradeModal = ({
-    useSuccessBtn,
+type IUseParallelQueriesModalProps = {
+    isSuccess: boolean;
+} & Pick<ModalProps, "isOpen" | "onClose">;
+
+export const ParallelQueriesModal = ({
+    children,
+    isSuccess,
     cb,
-}: IUseParallelQueriesModalProps) => {
+    ...rest
+}: {
+    cb: CallbackFn;
+    children: ComponentChildren;
+} & IUseParallelQueriesModalProps &
+    Pick<ModalProps, "title">) => {
+    let props: Partial<
+        Pick<
+            ModalProps,
+            "onSuccess" | "onDelete" | "successBtnText" | "deleteBtnText"
+        >
+    > = {
+        onSuccess: cb,
+        successBtnText: <Trans>Schedule</Trans>,
+    };
+    if (!isSuccess) {
+        props = {
+            onDelete: cb,
+            deleteBtnText: <Trans>Schedule</Trans>,
+        };
+    }
+    return (
+        <Modal {...props} {...rest}>
+            {children}
+        </Modal>
+    );
+};
+
+export const ScheduleUpgradeModal = (props: IUseParallelQueriesModalProps) => {
+    const { callMutations: startScheduleMeshUpgrade } =
+        useParallelScheduleUpgrade();
+
     let title = <Trans>All nodes are ready</Trans>;
     let content = (
         <Trans>Schedule a firmware upgrade for all nodes on the network</Trans>
     );
-    if (!useSuccessBtn) {
+    if (!props.isSuccess) {
         title = <Trans>Some nodes are not ready</Trans>;
         content = (
             <Trans>
@@ -65,23 +112,25 @@ export const useScheduleUpgradeModal = ({
         );
     }
 
-    return useParallelQueriesModal({
-        useSuccessBtn,
-        cb,
-        title,
-        content,
-    });
+    return (
+        <ParallelQueriesModal
+            cb={startScheduleMeshUpgrade}
+            title={title}
+            {...props}
+        >
+            {content}
+        </ParallelQueriesModal>
+    );
 };
 
-export const useConfirmModal = ({
-    useSuccessBtn,
-    cb,
-}: IUseParallelQueriesModalProps) => {
+export const ConfirmModal = (props: IUseParallelQueriesModalProps) => {
+    const { callMutations: confirmMeshUpgrade } = useParallelConfirmUpgrade();
+
     let title = <Trans>All nodes are upgraded successfully</Trans>;
     let content = (
         <Trans>Confirm mesh wide upgrade for all nodes on the network</Trans>
     );
-    if (!useSuccessBtn) {
+    if (!props.isSuccess) {
         title = <Trans>Some nodes don't upgraded properly</Trans>;
         content = (
             <Trans>
@@ -90,15 +139,18 @@ export const useConfirmModal = ({
             </Trans>
         );
     }
-    return useParallelQueriesModal({
-        useSuccessBtn,
-        cb,
-        title,
-        content,
-    });
+    return (
+        <ParallelQueriesModal cb={confirmMeshUpgrade} title={title} {...props}>
+            {content}
+        </ParallelQueriesModal>
+    );
 };
 
-export const useAbortModal = ({ cb }: IUseParallelQueriesModalProps) => {
+export const AbortModal = ({
+    ...props
+}: Omit<IUseParallelQueriesModalProps, "isSuccess">) => {
+    const { abort } = useMeshUpgrade();
+
     const title = <Trans>Abort current mesh wide upgrade?</Trans>;
     const content = (
         <Trans>
@@ -107,11 +159,9 @@ export const useAbortModal = ({ cb }: IUseParallelQueriesModalProps) => {
         </Trans>
     );
     const btnTxt = <Trans>Abort</Trans>;
-    return useParallelQueriesModal({
-        useSuccessBtn: false,
-        cb,
-        title,
-        content,
-        btnTxt,
-    });
+    return (
+        <Modal title={title} deleteBtnText={btnTxt} onDelete={abort} {...props}>
+            {content}
+        </Modal>
+    );
 };