when in move state single tap on global add btn show options

tijlleenders · Nov 10, 2024 · db860a4 · db860a4
1 parent 46e2dc0
commit db860a4
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 52 deletions.
diff --git a/src/components/GlobalAddBtn.tsx b/src/components/GlobalAddBtn.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode, useEffect } from "react";
-import { useRecoilValue, useSetRecoilState } from "recoil";
+import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";
 
@@ -68,8 +68,7 @@ const GlobalAddBtn = ({ add }: { add: string }) => {
   const [searchParams] = useSearchParams();
   const themeSelection = useRecoilValue(themeSelectionMode);
   const isAddingBudgetGoalAllowed = useRecoilValue(allowAddingBudgetGoal);
-  const goalToMove = useRecoilValue(moveGoalState);
-  const setGoalToMove = useSetRecoilState(moveGoalState);
+  const [goalToMove, setGoalToMove] = useRecoilState(moveGoalState);
 
   const enterPressed = useKeyPress("Enter");
   const plusPressed = useKeyPress("+");
@@ -91,6 +90,13 @@ const GlobalAddBtn = ({ add }: { add: string }) => {
   };
   const handleGlobalAddClick = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.stopPropagation();
+    if (goalToMove) {
+      if (add === "myGoals" || isPartnerModeActive) {
+        navigate(`/goals/${parentId}?addOptions=true`, { state });
+      }
+      return;
+    }
+
     if (themeSelection) {
       window.history.back();
     } else if (add === "myTime" || add === "myGoals" || isPartnerModeActive) {
@@ -146,28 +152,42 @@ const GlobalAddBtn = ({ add }: { add: string }) => {
             window.history.back();
           }}
         />
-        {shouldRenderMoveButton && (
-          <AddGoalOption handleClick={handleMoveGoalHere} bottom={214}>
-            {t("Move Here")}
-          </AddGoalOption>
+        {goalToMove ? (
+          <>
+            <AddGoalOption handleClick={handleMoveGoalHere} bottom={144} disabled={!shouldRenderMoveButton}>
+              {t("Move Here")}
+            </AddGoalOption>
+            <AddGoalOption
+              handleClick={() => {
+                setGoalToMove(null);
+                window.history.back();
+              }}
+              bottom={74}
+            >
+              {t("Cancel")}
+            </AddGoalOption>
+          </>
+        ) : (
+          <>
+            <AddGoalOption
+              handleClick={() => {
+                handleAddGoal("Budget");
+              }}
+              disabled={!isAddingBudgetGoalAllowed}
+              bottom={144}
+            >
+              {t("addBtnBudget")}
+            </AddGoalOption>
+            <AddGoalOption
+              handleClick={() => {
+                handleAddGoal("Standard");
+              }}
+              bottom={74}
+            >
+              {t("addBtnGoal")}
+            </AddGoalOption>
+          </>
         )}
-        <AddGoalOption
-          handleClick={() => {
-            handleAddGoal("Budget");
-          }}
-          disabled={!isAddingBudgetGoalAllowed}
-          bottom={144}
-        >
-          {t("addBtnBudget")}
-        </AddGoalOption>
-        <AddGoalOption
-          handleClick={() => {
-            handleAddGoal("Standard");
-          }}
-          bottom={74}
-        >
-          {t("addBtnGoal")}
-        </AddGoalOption>
       </>
     );
   }

diff --git a/src/components/GoalsComponents/MyGoal/MoveGoalAlert.tsx b/src/components/GoalsComponents/MyGoal/MoveGoalAlert.tsx
diff --git a/src/components/GoalsComponents/MyGoalActions/RegularGoalActions.tsx b/src/components/GoalsComponents/MyGoalActions/RegularGoalActions.tsx
@@ -74,6 +74,8 @@ const RegularGoalActions = ({ goal }: { goal: GoalItem }) => {
     } else if (action === "colabRequest") {
       await convertSharedWMGoalToColab(goal);
       setLastAction("goalColabRequest");
+    } else if (action === "move") {
+      await handleMove(goal);
     }
     window.history.back();
   };

diff --git a/src/pages/GoalsPage/MyGoals.tsx b/src/pages/GoalsPage/MyGoals.tsx
@@ -34,7 +34,6 @@ import DeletedGoals from "./components/DeletedGoals";
 import ArchivedGoals from "./components/ArchivedGoals";
 
 import "./GoalsPage.scss";
-import MoveGoalAlert from "@components/GoalsComponents/MyGoal/MoveGoalAlert";
 
 export const MyGoals = () => {
   let debounceTimeout: ReturnType<typeof setTimeout>;
@@ -130,7 +129,6 @@ export const MyGoals = () => {
         )}
 
         <div className="myGoals-container" ref={goalWrapperRef}>
-          <MoveGoalAlert />
           {parentId === "root" ? (
             <div className="my-goals-content">
               <div className="d-flex f-col">