implement function to move selected goal to other goal's hierarchy

src/components/GoalsComponents/GoalConfigModal/ConfigGoal.tsx

@@ -26,6 +26,7 @@ import "./ConfigGoal.scss";
 import CustomDatePicker from "./CustomDatePicker";
 import HintToggle from "./ConfigGoal/HintToggle";
 import useVirtualKeyboardOpen from "../../../hooks/useVirtualKeyBoardOpen";
+import { moveGoalState } from "@src/store/moveGoalState";
 
 const onDays = [...calDays.slice(1), "Sun"];
 
@@ -63,10 +64,18 @@ const ConfigGoal = ({ goal, action }: { action: "Update" | "Create"; goal: GoalI
   const showAddGoal = useRecoilValue(displayAddGoal);
   const showUpdateGoal = useRecoilValue(displayUpdateGoal);
   const [betweenSliderUpdated, setBetweenSliderUpdated] = useState(false);
+  const [moveGoal, setMoveGoal] = useRecoilState(moveGoalState);
 
   const open = !!showAddGoal || !!showUpdateGoal;
   const [hints, setHints] = useState(false);
 
+  const handleMove = () => {
+    setMoveGoal({
+      ...moveGoal,
+      goal,
+    });
+  };
+
   useEffect(() => {
     getGoalHintItem(goal.id).then((hintItem) => {
       setHints(!!hintItem?.hint);
@@ -314,6 +323,7 @@ const ConfigGoal = ({ goal, action }: { action: "Update" | "Create"; goal: GoalI
             onChange={(e) => setTitle(e.target.value)}
             inputMode="text"
           />
+          <button onClick={handleMove}>Move</button>
         </div>
         <div
           style={{

src/components/GoalsComponents/MyGoal/MyGoal.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import { useRecoilValue } from "recoil";
+import { useRecoilState, useRecoilValue } from "recoil";
 
 import { darkModeState, displayPartnerMode } from "@src/store";
 import { displayGoalId, displayUpdateGoal, goalsHistory, displayChangesModal, TAction } from "@src/store/GoalsState";
@@ -10,6 +10,8 @@ import GoalAvatar from "../GoalAvatar";
 import GoalSummary from "./GoalSummary/GoalSummary";
 import GoalDropdown from "./GoalDropdown";
 import GoalTitle from "./GoalTitle";
+import { moveGoalState } from "@src/store/moveGoalState";
+import { moveGoalHierarchy } from "@src/helpers/GoalController";
 
 interface MyGoalProps {
   actionType: TAction;
@@ -49,6 +51,7 @@ const MyGoal: React.FC<MyGoalProps> = ({ goal, actionType, showActions, setShowA
   const selectedGoalId = useRecoilValue(displayGoalId);
   const subGoalHistory = useRecoilValue(goalsHistory);
   const showChangesModal = useRecoilValue(displayChangesModal);
+  const [moveGoal, setMoveGoal] = useRecoilState(moveGoalState);
 
   const handleGoalClick = () => {
     if (showActions.open === goal.id && showActions.click > 0) {
@@ -100,6 +103,17 @@ const MyGoal: React.FC<MyGoalProps> = ({ goal, actionType, showActions, setShowA
     }
   }, [location]);
 
+  const handleMove = () => {
+    console.log("goal moved");
+
+    if (moveGoal.goal == null) return;
+    setMoveGoal({
+      ...moveGoal,
+      parentGoalId: goal.id,
+    });
+    moveGoalHierarchy(moveGoal.goal, goal.id);
+  };
+
   return (
     <>
       <div
@@ -119,6 +133,9 @@ const MyGoal: React.FC<MyGoalProps> = ({ goal, actionType, showActions, setShowA
           </div>
           <div aria-hidden className="goal-tile" onClick={handleGoalClick}>
             <GoalTitle goal={goal} isImpossible={goal.impossible} />
+            <button type="button" onClick={handleMove}>
+              Move here
+            </button>
           </div>
         </div>
         {!showPartnerMode && goal.participants?.length > 0 && <GoalAvatar goal={goal} />}

src/helpers/GoalController.ts

@@ -135,3 +135,17 @@ export const deleteSharedGoal = async (goal: GoalItem) => {
     });
   }
 };
+
+export const moveGoalHierarchy = async (goal: GoalItem, parentGoalId: string) => {
+  await updateGoal(goal.id, { parentGoalId });
+  if (goal.parentGoalId !== "root") {
+    getGoal(goal.parentGoalId).then(async (parentGoal: GoalItem) => {
+      const parentGoalSublist = parentGoal.sublist;
+      const childGoalIndex = parentGoalSublist.indexOf(goal.id);
+      if (childGoalIndex !== -1) {
+        parentGoalSublist.splice(childGoalIndex, 1);
+      }
+      await updateGoal(parentGoal.id, { sublist: parentGoalSublist });
+    });
+  }
+};

src/store/moveGoalState.ts

@@ -0,0 +1,10 @@
+import { GoalItem } from "@src/models/GoalItem";
+import { atom } from "recoil";
+
+export const moveGoalState = atom({
+  key: "moveGoalState",
+  default: {
+    parentGoalId: "",
+    goal: null as GoalItem | null,
+  },
+});