Merge pull request #136 from IntersectMBO/feature/reasonings-modals-m…

…ocked-data feature: Handle Reasonings modals with mocked data
IntersectMBO · Jun 21, 2024 · 0875a10 · 0875a10
2 parents bc13e4f + e737ca0
commit 0875a10
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 16 deletions.
diff --git a/frontend/src/components/organisms/GovActionTable/GovActionTableRow.tsx b/frontend/src/components/organisms/GovActionTable/GovActionTableRow.tsx
@@ -10,7 +10,13 @@ import {
   OutlinedLightButton,
   Typography,
 } from "@atoms";
-import { GovActionModalState, GovernanceActionTableI } from "../types";
+import {
+  GovActionModalState,
+  GovernanceActionTableI,
+  OpenAddReasoningModalState,
+  OpenPreviewReasoningModal,
+  OpenReasoningLinkModalState,
+} from "../types";
 import { customPalette, ICONS } from "@consts";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
@@ -32,27 +38,61 @@ export const GovActionTableRow = ({
   },
 }: Props) => {
   const t = useTranslations("GovernanceActions");
-  const { openModal } = useModal<GovActionModalState>();
+  const govActionModal = useModal<GovActionModalState>();
+  const addReasoningModal = useModal<OpenAddReasoningModalState>();
+  const reasoningLinkModal = useModal<OpenReasoningLinkModalState>();
+  const updateReasoningkModal = useModal<OpenPreviewReasoningModal>();
+
   const isDisabled = false; //todo
+  const isUnvoted = gov_action_proposal_status === "UNVOTED";
 
   const openGAModal = () => {
-    openModal({
+    govActionModal.openModal({
       type: "govActionModal",
       state: {
         id: gov_action_proposal_id,
       },
     });
   };
+  const openUpdateReasoningCallback = () => {
+    updateReasoningkModal.closeModal();
+    openAddReasoningModal();
+  };
+  const openUpdateReasoningModal = () => {
+    updateReasoningkModal.openModal({
+      type: "previewReasoningModal",
+      state: {
+        id: gov_action_proposal_id,
+        actionTitle: t("updateReasoning"),
+        onActionClick: openUpdateReasoningCallback,
+      },
+    });
+  };
+
+  const openReasoningLinkModal = () => {
+    reasoningLinkModal.openModal({
+      type: "reasoningLinkModal",
+      state: {
+        hash: "324rfwdf123abcdH76ADF8utkm",
+        link: "djfs.fems.com",
+      },
+    });
+  };
 
-  const getActionButtonTitle = () => {
-    if (gov_action_proposal_status === "UNVOTED") {
-      return t("addReasoning");
-    } else {
-      return t("updateReasoning");
-    }
+  const addReasoningCallback = () => {
+    addReasoningModal.closeModal();
+    openReasoningLinkModal();
   };
 
-  const onActionClick = () => {};
+  const openAddReasoningModal = () => {
+    addReasoningModal.openModal({
+      type: "addReasoningModal",
+      state: {
+        id: gov_action_proposal_id,
+        callback: addReasoningCallback,
+      },
+    });
+  };
 
   return (
     <Grid
@@ -185,10 +225,12 @@ export const GovActionTableRow = ({
             <Button
               disabled={isDisabled}
               sx={{ whiteSpace: "nowrap" }}
-              onClick={onActionClick}
+              onClick={() =>
+                isUnvoted ? openAddReasoningModal() : openUpdateReasoningModal()
+              }
               variant="outlined"
             >
-              {getActionButtonTitle()}
+              {isUnvoted ? t("addReasoning") : t("updateReasoning")}
             </Button>
           </Grid>
         </Grid>

diff --git a/frontend/src/components/organisms/Modals/AddReasoningModal.tsx b/frontend/src/components/organisms/Modals/AddReasoningModal.tsx
@@ -14,14 +14,17 @@ import { ControlledField } from "@organisms";
 import { useModal } from "@context";
 import { useRouter } from "next/navigation";
 import { useSnackbar } from "@/context/snackbar";
+import { OpenAddReasoningModalState } from "../types";
 
 interface AddReasoningFormData {
   title: string;
   reasoning: string;
 }
 export const AddReasoningModal = () => {
   const t = useTranslations("Modals");
-  const { closeModal } = useModal();
+  const {
+    state: { callback },
+  } = useModal<OpenAddReasoningModalState>();
   const router = useRouter();
   const { addSuccessAlert, addErrorAlert } = useSnackbar();
 
@@ -36,9 +39,10 @@ export const AddReasoningModal = () => {
     try {
       router.refresh();
       addSuccessAlert(t("addReasoning.alerts.success"));
-      closeModal();
     } catch (error) {
       addErrorAlert(t("addReasoning.alerts.error"));
+    } finally {
+      callback();
     }
   };
 

diff --git a/frontend/src/components/organisms/PageTitleTabs.tsx b/frontend/src/components/organisms/PageTitleTabs.tsx
@@ -1,5 +1,4 @@
 import { Grid, Typography } from "@mui/material";
-import { useTranslations } from "next-intl";
 import { usePathname, useRouter } from "next/navigation";
 
 interface Tab {
@@ -9,7 +8,6 @@ interface Tab {
 
 export const PageTitleTabs = ({ tabs }: { tabs: Tab[] }) => {
   const router = useRouter();
-  const t = useTranslations("MyActions");
   const pathname = usePathname();
   const isSelectedTab = (path: string) => pathname.includes(path);
 

diff --git a/frontend/src/components/organisms/types.ts b/frontend/src/components/organisms/types.ts
@@ -49,6 +49,16 @@ export interface GovActionModalState {
   id: string;
 }
 
+export interface OpenAddReasoningModalState {
+  id: string;
+  callback: () => void;
+}
+
+export interface OpenReasoningLinkModalState {
+  hash: string;
+  link: string;
+}
+
 export interface GovActionMetadata {
   id: string;
   title: string;