move goal feat

src/Interfaces/IContactMessages.ts

@@ -0,0 +1,15 @@
+import { GoalItem } from "@src/models/GoalItem";
+
+export interface SharedGoalMessage {
+  relId: string;
+  goalWithChildrens: GoalItem[];
+  lastProcessedTimestamp: string;
+  type: "shareMessage";
+  installId: string;
+  TTL: number;
+}
+
+export interface SharedGoalMessageResponse {
+  success: boolean;
+  response: SharedGoalMessage[];
+}

src/Interfaces/IPopupModals.ts

@@ -9,6 +9,7 @@ export interface TConfirmActionState {
     addHint: boolean;
     deleteHint: boolean;
     reportHint: boolean;
+    move: boolean;
   };
   collaboration: {
     colabRequest: boolean;
@@ -20,7 +21,7 @@ export interface TConfirmActionState {
 
 export interface TConfirmGoalAction {
   actionCategory: "goal";
-  actionName: "archive" | "delete" | "shareAnonymously" | "shareWithOne" | "restore";
+  actionName: "archive" | "delete" | "shareAnonymously" | "shareWithOne" | "restore" | "move";
 }
 
 export interface TConfirmColabGoalAction {

src/api/GoalsAPI/index.ts

@@ -157,22 +157,22 @@ export const unarchiveUserGoal = async (goal: GoalItem) => {
   await unarchiveGoal(goal);
 };
 
-export const removeGoal = async (goal: GoalItem) => {
+export const removeGoal = async (goal: GoalItem, permanently = false) => {
   await deleteHintItem(goal.id);
   await Promise.allSettled([
     db.goalsCollection.delete(goal.id).catch((err) => console.log("failed to delete", err)),
-    addDeletedGoal(goal),
+    permanently ? null : addDeletedGoal(goal),
   ]);
 };
 
-export const removeChildrenGoals = async (parentGoalId: string) => {
+export const removeChildrenGoals = async (parentGoalId: string, permanently = false) => {
   const childrenGoals = await getChildrenGoals(parentGoalId);
   if (childrenGoals.length === 0) {
     return;
   }
   childrenGoals.forEach((goal) => {
-    removeChildrenGoals(goal.id);
-    removeGoal(goal);
+    removeChildrenGoals(goal.id, permanently);
+    removeGoal(goal, permanently);
   });
 };
 
@@ -312,9 +312,9 @@ export const notifyNewColabRequest = async (id: string, relId: string) => {
 //   });
 // };
 
-export const removeGoalWithChildrens = async (goal: GoalItem) => {
-  await removeChildrenGoals(goal.id);
-  await removeGoal(goal);
+export const removeGoalWithChildrens = async (goal: GoalItem, permanently = false) => {
+  await removeChildrenGoals(goal.id, permanently);
+  await removeGoal(goal, permanently);
   if (goal.parentGoalId !== "root") {
     getGoal(goal.parentGoalId).then(async (parentGoal: GoalItem) => {
       const parentGoalSublist = parentGoal.sublist;

src/api/SharedWMAPI/index.ts

@@ -2,7 +2,8 @@
 import { db } from "@models";
 import { GoalItem } from "@src/models/GoalItem";
 import { createGoalObjectFromTags } from "@src/helpers/GoalProcessor";
-import { addDeletedGoal, addGoal } from "../GoalsAPI";
+import { addGoal } from "../GoalsAPI";
+import { getContactByRelId } from "../ContactsAPI";
 
 export const addSharedWMSublist = async (parentGoalId: string, goalIds: string[]) => {
   db.transaction("rw", db.sharedWMCollection, async () => {
@@ -17,29 +18,53 @@ export const addSharedWMSublist = async (parentGoalId: string, goalIds: string[]
   });
 };
 
-export const addSharedWMGoal = async (goalDetails: object) => {
+export const addSharedWMGoal = async (goalDetails: GoalItem, relId = "") => {
+  console.log("[addSharedWMGoal] Input goal details:", goalDetails);
+  console.log("[addSharedWMGoal] Input relId:", relId);
+
   const { participants } = goalDetails;
-  const newGoal = createGoalObjectFromTags({ ...goalDetails, typeOfGoal: "shared" });
-  if (participants) newGoal.participants = participants;
+  let updatedParticipants = participants || [];
+
+  if (relId) {
+    const contact = await getContactByRelId(relId);
+    if (contact) {
+      const contactExists = updatedParticipants.some((p) => p.relId === relId);
+      if (!contactExists) {
+        updatedParticipants = [...updatedParticipants, { ...contact, following: true, type: "sharer" }];
+      }
+    }
+  }
+
+  console.log("[addSharedWMGoal] Updated participants:", updatedParticipants);
+  const newGoal = createGoalObjectFromTags({
+    ...goalDetails,
+    typeOfGoal: "shared",
+    participants: updatedParticipants,
+  });
+
   await db
     .transaction("rw", db.sharedWMCollection, async () => {
       await db.sharedWMCollection.add(newGoal);
+      console.log("[addSharedWMGoal] Goal added to sharedWMCollection");
     })
     .then(async () => {
       const { parentGoalId } = newGoal;
       if (parentGoalId !== "root") {
+        console.log("[addSharedWMGoal] Adding goal to parent sublist. ParentId:", parentGoalId);
         await addSharedWMSublist(parentGoalId, [newGoal.id]);
       }
     })
     .catch((e) => {
-      console.log(e.stack || e);
+      console.error("[addSharedWMGoal] Error:", e.stack || e);
     });
+
+  console.log("[addSharedWMGoal] Successfully created goal with ID:", newGoal.id);
   return newGoal.id;
 };
 
-export const addGoalsInSharedWM = async (goals: GoalItem[]) => {
+export const addGoalsInSharedWM = async (goals: GoalItem[], relId: string) => {
   goals.forEach((ele) => {
-    addSharedWMGoal(ele).then((res) => console.log(res, "added"));
+    addSharedWMGoal(ele, relId).then((res) => console.log(res, "added"));
   });
 };
 
@@ -83,7 +108,7 @@ export const getRootGoalsOfPartner = async (relId: string) => {
   ).reverse();
 };
 
-export const updateSharedWMGoal = async (id: string, changes: object) => {
+export const updateSharedWMGoal = async (id: string, changes: Partial<GoalItem>) => {
   db.transaction("rw", db.sharedWMCollection, async () => {
     await db.sharedWMCollection.update(id, changes).then((updated) => updated);
   }).catch((e) => {
@@ -157,3 +182,19 @@ export const convertSharedWMGoalToColab = async (goal: GoalItem) => {
     })
     .catch((err) => console.log(err));
 };
+
+export const updateSharedWMParentSublist = async (oldParentId: string, newParentId: string, goalId: string) => {
+  // Remove from old parent
+  const oldParentGoal = await getSharedWMGoal(oldParentId);
+  if (oldParentGoal?.sublist) {
+    const updatedOldSublist = oldParentGoal.sublist.filter((id) => id !== goalId);
+    await updateSharedWMGoal(oldParentId, { sublist: updatedOldSublist });
+  }
+
+  // Add to new parent
+  const newParentGoal = await getSharedWMGoal(newParentId);
+  if (newParentGoal) {
+    const updatedNewSublist = [...(newParentGoal.sublist || []), goalId];
+    await updateSharedWMGoal(newParentId, { sublist: updatedNewSublist });
+  }
+};

src/common/ConfirmationModal.tsx

@@ -1,7 +1,7 @@
 import { Checkbox } from "antd";
 import React, { useState } from "react";
 import { useRecoilState, useRecoilValue } from "recoil";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 
 import { darkModeState, displayConfirmation } from "@src/store";
 import { ConfirmationModalProps } from "@src/Interfaces/IPopupModals";
@@ -51,7 +51,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({ action, handleCli
         {t(headerKey)}
       </p>
       <p>
-        {t("note")}: {t(noteKey)}
+        {t("note")}: <Trans i18nKey={noteKey} components={{ br: <br />, ul: <ul />, li: <li /> }} />
       </p>
       <div style={{ display: "flex", gap: "5px" }}>
         <Checkbox

src/common/Icon.tsx

@@ -656,6 +656,23 @@ const Icon: React.FC<IconProps> = ({ title, active }) => {
         </svg>
       );
 
+    case "Move":
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="200"
+          height="200"
+          fill={color2}
+          version="1.1"
+          viewBox="0 0 232.439 232.439"
+          xmlSpace="preserve"
+        >
+          <g>
+            <path d="M55.416 64.245a7.499 7.499 0 00-8.174 1.625L2.197 110.915a7.502 7.502 0 000 10.608l45.045 45.045a7.501 7.501 0 0012.804-5.304v-90.09a7.499 7.499 0 00-4.63-6.929zm-10.37 78.912l-26.938-26.938L45.046 89.28v53.877zM121.523 2.196a7.502 7.502 0 00-10.607 0L65.871 47.241a7.5 7.5 0 005.304 12.804h90.09a7.499 7.499 0 005.304-12.804L121.523 2.196zM89.281 45.045l26.938-26.938 26.939 26.938H89.281zM230.242 110.915L185.197 65.87a7.499 7.499 0 00-12.804 5.304v90.09a7.499 7.499 0 0012.804 5.304l45.045-45.045a7.502 7.502 0 000-10.608zm-42.849 32.242V89.28l26.939 26.938-26.939 26.939zM161.263 172.393H71.175a7.499 7.499 0 00-5.304 12.804l45.045 45.046a7.502 7.502 0 0010.608-.001l45.043-45.046a7.499 7.499 0 00-5.304-12.803zm-45.043 41.94l-26.938-26.939h53.876l-26.938 26.939z" />
+          </g>
+        </svg>
+      );
+
     default:
       return <div />;
   }

src/common/ZButton.tsx

@@ -0,0 +1,24 @@
+import { darkModeState } from "@src/store";
+import React from "react";
+import { useRecoilValue } from "recoil";
+
+interface ZButtonProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+  className?: string;
+}
+
+const ZButton: React.FC<ZButtonProps> = ({ children, onClick, className }) => {
+  const darkModeStatus = useRecoilValue(darkModeState);
+
+  const defaultClassName = `default-btn${darkModeStatus ? "-dark" : ""}`;
+  const combinedClassName = className ? `${defaultClassName} ${className}` : defaultClassName;
+
+  return (
+    <button type="button" className={combinedClassName} onClick={onClick}>
+      {children}
+    </button>
+  );
+};
+
+export default ZButton;

src/components/BottomNavbar/BottomNavbar.tsx

@@ -64,6 +64,7 @@ const BottomNavbar = ({ title }: { title: string }) => {
       }
     }
   };
+
   const { activeGoalId } = location.state || {};
   const isAddBtnVisible = title !== "Focus" && (isPartnerModeActive ? !!activeGoalId : true);
   return (

src/components/GlobalAddBtn.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode, useEffect } from "react";
-import { useRecoilValue } from "recoil";
+import React, { ReactNode, useEffect, useState } from "react";
+import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";
 
@@ -17,6 +17,10 @@ import { TGoalCategory } from "@src/models/GoalItem";
 import { allowAddingBudgetGoal } from "@src/store/GoalsState";
 import useLongPress from "@src/hooks/useLongPress";
 import { useKeyPress } from "@src/hooks/useKeyPress";
+import { moveGoalState } from "@src/store/moveGoalState";
+import { moveGoalHierarchy } from "@src/helpers/GoalController";
+import { displayToast, lastAction } from "@src/store";
+import { useParentGoalContext } from "@src/contexts/parentGoal-context";
 
 interface AddGoalOptionProps {
   children: ReactNode;
@@ -52,10 +56,20 @@ const GlobalAddBtn = ({ add }: { add: string }) => {
   const { handleAddFeeling } = useFeelingStore();
   const isPartnerModeActive = !!partnerId;
 
+  const setToastMessage = useSetRecoilState(displayToast);
+
+  const setLastAction = useSetRecoilState(lastAction);
+
+  const {
+    parentData: { parentGoal = { id: "root" } },
+  } = useParentGoalContext();
+
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const themeSelection = useRecoilValue(themeSelectionMode);
   const isAddingBudgetGoalAllowed = useRecoilValue(allowAddingBudgetGoal);
+  const [goalToMove, setGoalToMove] = useRecoilState(moveGoalState);
+  const [isDisabled, setIsDisabled] = useState(false);
 
   const enterPressed = useKeyPress("Enter");
   const plusPressed = useKeyPress("+");
@@ -77,6 +91,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) {
@@ -102,13 +123,28 @@ const GlobalAddBtn = ({ add }: { add: string }) => {
 
   const { onClick, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = handlers;
 
+  const handleMoveGoalHere = async () => {
+    if (!goalToMove) return;
+    setIsDisabled(true);
+    await moveGoalHierarchy(goalToMove.id, parentId).then(() => {
+      setToastMessage({ open: true, message: "Goal moved successfully", extra: "" });
+    });
+    setLastAction("goalMoved");
+    setGoalToMove(null);
+    setIsDisabled(false);
+    window.history.back();
+  };
+
   useEffect(() => {
     if ((plusPressed || enterPressed) && !state.goalType) {
       // @ts-ignore
       handleGlobalAddClick(new MouseEvent("click"));
     }
   }, [plusPressed, enterPressed]);
 
+  const shouldRenderMoveButton =
+    goalToMove && goalToMove.id !== parentGoal?.id && goalToMove.parentGoalId !== parentGoal?.id;
+
   if (searchParams?.get("addOptions")) {
     return (
       <>
@@ -119,23 +155,46 @@ const GlobalAddBtn = ({ add }: { add: string }) => {
             window.history.back();
           }}
         />
-        <AddGoalOption
-          handleClick={() => {
-            handleAddGoal("Budget");
-          }}
-          disabled={!isAddingBudgetGoalAllowed}
-          bottom={144}
-        >
-          {t("addBtnBudget")}
-        </AddGoalOption>
-        <AddGoalOption
-          handleClick={() => {
-            handleAddGoal("Standard");
-          }}
-          bottom={74}
-        >
-          {t("addBtnGoal")}
-        </AddGoalOption>
+        {goalToMove ? (
+          <>
+            <AddGoalOption
+              handleClick={handleMoveGoalHere}
+              bottom={144}
+              disabled={!shouldRenderMoveButton || isDisabled}
+            >
+              {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>
+          </>
+        )}
       </>
     );
   }