wip 9

IntersectMBO · Mar 27, 2024 · 6f93600 · 6f93600
1 parent 3fea43f
commit 6f93600
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 196 deletions.
diff --git a/govtool/frontend/src/components/molecules/VoteActionForm.tsx b/govtool/frontend/src/components/molecules/VoteActionForm.tsx
@@ -1,27 +1,17 @@
-import {
-  useState,
-  useEffect,
-  useMemo,
-  useCallback,
-  Dispatch,
-  SetStateAction,
-} from "react";
+import { useState, useEffect, useMemo, Dispatch, SetStateAction } from "react";
 import { useLocation } from "react-router-dom";
-import { Box, Link } from "@mui/material";
+import { Box } from "@mui/material";
+import { Trans } from "react-i18next";
 
-import { Button, LoadingButton, Radio, Spacer, Typography } from "@atoms";
-import { ICONS, orange } from "@consts";
+import { Button, LoadingButton, Radio, Typography } from "@atoms";
+import { orange } from "@consts";
 import { useModal } from "@context";
 import {
   useScreenDimension,
   useVoteActionForm,
   useTranslation,
   useGetVoterInfo,
 } from "@hooks";
-import { openInNewTab } from "@utils";
-
-import { Trans } from "react-i18next";
-import { ControlledField } from "../organisms";
 
 // TODO: Decide with BE on how cast votes will be implemented
 // and adjust accordingly the component below (UI is ready).
@@ -45,18 +35,12 @@ export const VoteActionForm = ({
   abstainVotes,
   isInProgress,
 }: VoteActionFormProps) => {
-  const [isContext, setIsContext] = useState<boolean>(false);
-
   const [voteContextText, setVoteContextText] = useState<string | undefined>();
   const [voteContextHash, setVoteContextHash] = useState<string | undefined>();
   const [voteContextUrl, setVoteContextUrl] = useState<string | undefined>();
   const [showWholeVoteContext, setShowWholeVoteContext] =
     useState<boolean>(false);
 
-  console.log("voteContextText", voteContextText);
-  console.log("voteContextHash", voteContextHash);
-  console.log("voteContextUrl", voteContextUrl);
-
   const { state } = useLocation();
   const { isMobile } = useScreenDimension();
   const { openModal } = useModal();
@@ -65,10 +49,7 @@ export const VoteActionForm = ({
 
   const {
     areFormErrors,
-    clearErrors,
     confirmVote,
-    control,
-    errors,
     isDirty,
     isVoteLoading,
     registerInput,
@@ -86,14 +67,6 @@ export const VoteActionForm = ({
     }
   }, [state, voteFromEP, setValue]);
 
-  // useEffect(() => {
-  //   clearErrors();
-  // }, [isContext]);
-
-  // const handleContext = useCallback(() => {
-  //   setIsContext((prev) => !prev);
-  // }, []);
-
   const renderCancelButton = useMemo(
     () => (
       <Button
@@ -119,7 +92,7 @@ export const VoteActionForm = ({
         disabled={
           (!areFormErrors && voteFromEP === vote) ||
           areFormErrors ||
-          (!isContext && voteFromEP === vote)
+          voteFromEP === vote
         }
         isLoading={isVoteLoading}
         variant="contained"
@@ -259,7 +232,7 @@ export const VoteActionForm = ({
             mt: 6,
           }}
         >
-          optional
+          {t("optional")}
         </Typography>
         <Typography
           variant="body2"
@@ -269,8 +242,8 @@ export const VoteActionForm = ({
           }}
         >
           {voteContextText
-            ? "Context about your vote"
-            : "You can provide context about your vote. This information will be viewable by other users."}
+            ? t("govActions.contextAboutYourVote")
+            : t("govActions.youCanProvideContext")}
         </Typography>
         {voteContextText ? (
           <Box
@@ -319,7 +292,7 @@ export const VoteActionForm = ({
                   borderBottom: "1px solid",
                 }}
               >
-                Show more
+                {showWholeVoteContext ? t("showLess") : t("showMore")}
               </Typography>
             </Button>
           </Box>
@@ -338,7 +311,7 @@ export const VoteActionForm = ({
               mt: "12px",
             }}
           >
-            Provide context about your vote
+            {t("govActions.provideContextAboutYourVote")}
           </Button>
         )}
       </Box>
@@ -371,7 +344,7 @@ export const VoteActionForm = ({
           disabled={
             !vote ||
             state?.vote === vote ||
-            (isContext && areFormErrors && isDirty) ||
+            (areFormErrors && isDirty) ||
             voteFromEP === vote
           }
           isLoading={isVoteLoading}

diff --git a/govtool/frontend/src/components/organisms/VoteContext/VoteContextCheckResult.tsx b/govtool/frontend/src/components/organisms/VoteContext/VoteContextCheckResult.tsx
@@ -3,11 +3,7 @@ import { Box } from "@mui/material";
 
 import { IMAGES } from "@consts";
 import { Button, Typography } from "@atoms";
-import {
-  useScreenDimension,
-  //  useTranslation,
-  useVoteContextForm,
-} from "@hooks";
+import { useScreenDimension, useTranslation, useVoteContextForm } from "@hooks";
 
 type VoteContextCheckResultProps = {
   submitVoteContext: () => void;
@@ -22,7 +18,7 @@ export const VoteContextCheckResult = ({
   setStep,
   errorMessage,
 }: VoteContextCheckResultProps) => {
-  // const { t } = useTranslation();
+  const { t } = useTranslation();
   const { isMobile } = useScreenDimension();
 
   const { watch } = useVoteContextForm();
@@ -57,7 +53,7 @@ export const VoteContextCheckResult = ({
       </Typography>
       {!errorMessage ? (
         <Button
-          data-testid="confirm-modal-button"
+          data-testid="go-to-vote-modal-button"
           onClick={submitVoteContext}
           sx={{
             borderRadius: 50,
@@ -69,7 +65,7 @@ export const VoteContextCheckResult = ({
           }}
           variant="contained"
         >
-          Go To Vote
+          {t("govActions.goToVote")}
         </Button>
       ) : (
         <Box
@@ -82,18 +78,18 @@ export const VoteContextCheckResult = ({
           }}
         >
           <Button
-            data-testid="cancel-modal-button"
+            data-testid="go-back-modal-button"
             onClick={() => setStep(3)}
             size="large"
             sx={{
               width: isMobile ? "100%" : "154px",
             }}
             variant="outlined"
           >
-            Go back
+            {t("goBack")}
           </Button>
           <Button
-            data-testid="confirm-modal-button"
+            data-testid="close-modal-button"
             disabled={isContinueDisabled}
             onClick={closeModal}
             size="large"
@@ -102,7 +98,7 @@ export const VoteContextCheckResult = ({
             }}
             variant="contained"
           >
-            Close modal
+            {t("close")}
           </Button>
         </Box>
       )}

diff --git a/govtool/frontend/src/components/organisms/VoteContext/VoteContextModal.tsx b/govtool/frontend/src/components/organisms/VoteContext/VoteContextModal.tsx
@@ -1,15 +1,15 @@
 import { useState } from "react";
+import { useForm, FormProvider } from "react-hook-form";
 
 import { ModalWrapper } from "@atoms";
 import { useModal } from "@context";
-import { useForm, FormProvider } from "react-hook-form";
 import {
   VoteContextStoringInformation,
   VoteContextCheckResult,
   VoteContextTerms,
   VoteContextText,
 } from "@organisms";
-import { VoteContextFormValues } from "@/hooks/forms/useVoteContextForm";
+import { VoteContextFormValues } from "@hooks";
 
 type VoteContextModalState = {
   onSubmit: (url: string, hash: string | null, voteContextText: string) => void;

diff --git a/govtool/frontend/src/components/organisms/VoteContext/VoteContextText.tsx b/govtool/frontend/src/components/organisms/VoteContext/VoteContextText.tsx
@@ -25,7 +25,7 @@ export const VoteContextText = ({
     key: "voteContextText",
     layoutStyles: { mb: 3 },
     name: "voteContextText",
-    placeholder: "Provide context",
+    placeholder: t("govActions.provideContext"),
     rules: {
       required: {
         value: true,
@@ -53,7 +53,7 @@ export const VoteContextText = ({
           color: orange.c400,
         }}
       >
-        optional
+        {t("optional")}
       </Typography>
       <Typography
         variant="title2"
@@ -62,10 +62,11 @@ export const VoteContextText = ({
           mb: 1,
         }}
       >
-        Provide context about your vote
+        {t("govActions.provideContextAboutYourVote")}
       </Typography>
       <Typography variant="body1" sx={{ fontWeight: 400, mb: 2 }}>
-        Info about how you voting and whats to do now (?)
+        {/* TODO: Update text when design ready */}
+        Additional information about your vote
       </Typography>
       <ControlledField.TextArea
         {...{ control, errors }}

diff --git a/govtool/frontend/src/components/organisms/VoteContext/VoteContextWrapper.tsx b/govtool/frontend/src/components/organisms/VoteContext/VoteContextWrapper.tsx
@@ -1,7 +1,8 @@
+import { FC, PropsWithChildren } from "react";
 import { Box } from "@mui/material";
-import { useScreenDimension } from "@hooks";
+
+import { useScreenDimension, useTranslation } from "@hooks";
 import { Button } from "@atoms";
-import { FC, PropsWithChildren } from "react";
 
 type VoteContextWrapperProps = {
   onContinue: () => void;
@@ -13,6 +14,7 @@ export const VoteContextWrapper: FC<
   PropsWithChildren<VoteContextWrapperProps>
 > = ({ onContinue, isContinueDisabled, onCancel, children }) => {
   const { isMobile } = useScreenDimension();
+  const { t } = useTranslation();
 
   return (
     <>
@@ -42,7 +44,7 @@ export const VoteContextWrapper: FC<
           }}
           variant="outlined"
         >
-          Cancel
+          {t("cancel")}
         </Button>
         <Button
           data-testid="confirm-modal-button"
@@ -54,7 +56,7 @@ export const VoteContextWrapper: FC<
           }}
           variant="contained"
         >
-          Continue
+          {t("continue")}
         </Button>
       </Box>
     </>

diff --git a/govtool/frontend/src/hooks/forms/useVoteActionForm.tsx b/govtool/frontend/src/hooks/forms/useVoteActionForm.tsx
@@ -44,7 +44,6 @@ export const useVoteActionForm = (
     formState: { errors, isDirty },
     setValue,
     register: registerInput,
-    clearErrors,
   } = useVoteActionFormController();
 
   const watch = useWatch({
@@ -62,11 +61,6 @@ export const useVoteActionForm = (
       const urlSubmitValue = voteContextUrl ?? "";
       const hashSubmitValue = voteContextHash ?? "";
 
-      console.log("vote", vote);
-
-      console.log("urlSubmitValue", urlSubmitValue);
-      console.log("hashSubmitValue", hashSubmitValue);
-
       try {
         const isPendingTx = isPendingTransaction();
         if (isPendingTx) return;
@@ -100,14 +94,11 @@ export const useVoteActionForm = (
   );
 
   return {
-    control,
-    errors,
     confirmVote: handleSubmit(confirmVote),
     setValue,
     vote: watch.vote,
     registerInput,
     isDirty,
-    clearErrors,
     areFormErrors,
     isVoteLoading: isLoading,
   };