From 7d58c70d0b54b7b3622dcaee81e0a1d3e260262f Mon Sep 17 00:00:00 2001
From: Tushar Inani <tusharinani93@gmail.com>
Date: Fri, 19 Jul 2024 15:49:19 +0000
Subject: [PATCH] transitioning: state -> url params in mygoals

---
 .../GoalSublist/GoalSublist.tsx               | 61 ++++++++-----------
 .../{ => components}/GoalHistory.tsx          |  0
 .../GoalsComponents/GoalsAccordion.tsx        | 26 +++-----
 src/pages/GoalsPage/MyGoals.tsx               | 25 ++++----
 4 files changed, 50 insertions(+), 62 deletions(-)
 rename src/components/GoalsComponents/GoalSublist/{ => components}/GoalHistory.tsx (100%)

diff --git a/src/components/GoalsComponents/GoalSublist/GoalSublist.tsx b/src/components/GoalsComponents/GoalSublist/GoalSublist.tsx
index fe01d7a6b..037abae4e 100755
--- a/src/components/GoalsComponents/GoalSublist/GoalSublist.tsx
+++ b/src/components/GoalsComponents/GoalSublist/GoalSublist.tsx
@@ -1,50 +1,40 @@
-/* eslint-disable no-unused-vars */
 import React, { useEffect, useState } from "react";
 import { useRecoilValue } from "recoil";
 import { useTranslation } from "react-i18next";
 
-import {
-  displayAddGoal,
-  displayChangesModal,
-  displayGoalId,
-  displaySuggestionsModal,
-  displayUpdateGoal,
-} from "@src/store/GoalsState";
+import { displayChangesModal, displayGoalId, displaySuggestionsModal } from "@src/store/GoalsState";
 import { GoalItem } from "@src/models/GoalItem";
 import { getDeletedGoals } from "@src/api/TrashAPI";
 import { createGoalObjectFromTags } from "@src/helpers/GoalProcessor";
-import { getChildrenGoals, getGoal } from "@src/api/GoalsAPI";
-import { displayPartnerMode, lastAction } from "@src/store";
-import { getSharedWMChildrenGoals, getSharedWMGoal } from "@src/api/SharedWMAPI";
+import { lastAction } from "@src/store";
 import { getGoalHintItem } from "@src/api/HintsAPI";
 import { priotizeImpossibleGoals } from "@src/utils/priotizeImpossibleGoals";
 import { useParentGoalContext } from "@src/contexts/parentGoal-context";
+import { DeletedGoalProvider } from "@src/contexts/deletedGoal-context";
+import DeletedGoals from "@pages/GoalsPage/components/DeletedGoals";
+import ArchivedGoals from "@pages/GoalsPage/components/ArchivedGoals";
+import { TrashItem } from "@src/models/TrashItem";
 
 import GoalsList from "../GoalsList";
-import ConfigGoal from "../GoalConfigModal/ConfigGoal";
-import GoalHistory from "./GoalHistory";
-import GoalsAccordion from "../GoalsAccordion";
+import GoalHistory from "./components/GoalHistory";
 
 import "./GoalSublist.scss";
-import GoalItemSummary from "../MyGoal/GoalItemSummary/GoalItemSummary";
+import BudgetSummary from "../../../common/GoalItemSummary/BudgetSummary";
+import GoalSummary from "../../../common/GoalItemSummary/GoalSummary";
 
 export const GoalSublist = () => {
   const {
     parentData: { parentGoal, subgoals },
     dispatch,
   } = useParentGoalContext();
+
   const { t } = useTranslation();
   const action = useRecoilValue(lastAction);
   const goalID = useRecoilValue(displayGoalId);
-  const showAddGoal = useRecoilValue(displayAddGoal);
-  const showUpdateGoal = useRecoilValue(displayUpdateGoal);
   const showChangesModal = useRecoilValue(displayChangesModal);
   const showSuggestionModal = useRecoilValue(displaySuggestionsModal);
-  const showPartnerMode = useRecoilValue(displayPartnerMode);
-  // const [parentGoal, setParentGoal] = useState<GoalItem | null>(null);
-  const [deletedGoals, setDeletedGoals] = useState<GoalItem[]>([]);
+  const [deletedGoals, setDeletedGoals] = useState<TrashItem[]>([]);
   const [archivedChildren, setArchivedChildren] = useState<GoalItem[]>([]);
-  // const [showActions, setShowActions] = useState({ open: "root", click: 1 });
   const [goalhints, setGoalHints] = useState<GoalItem[]>([]);
 
   useEffect(() => {
@@ -60,26 +50,22 @@ export const GoalSublist = () => {
   }, [goalID, action]);
 
   useEffect(() => {
-    (showPartnerMode ? getSharedWMGoal(goalID) : getGoal(goalID)).then((parent) => {
-      getDeletedGoals(goalID).then((res) => {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        setDeletedGoals([...res.map(({ deletedAt, ...goal }) => goal)]);
-      });
+    getDeletedGoals(goalID).then((res) => {
+      setDeletedGoals([...res]);
     });
   }, [goalID]);
 
   useEffect(() => {
     async function init() {
-      const fetchedGoals = showPartnerMode ? await getSharedWMChildrenGoals(goalID) : subgoals;
-      const sortedGoals = await priotizeImpossibleGoals(fetchedGoals);
+      const sortedGoals = await priotizeImpossibleGoals(subgoals);
       setArchivedChildren([...sortedGoals.filter((goal) => goal.archived === "true")]);
       getDeletedGoals(goalID).then((res) => {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        setDeletedGoals([...res.map(({ deletedAt, ...goal }) => goal)]);
+        setDeletedGoals([...res]);
       });
     }
+    console.log("refreshed goals");
     init();
-  }, [action, parentGoal, showAddGoal, showSuggestionModal, showChangesModal, showUpdateGoal]);
+  }, [action, parentGoal, showSuggestionModal, showChangesModal]);
 
   return (
     <div className="sublist-container">
@@ -87,7 +73,11 @@ export const GoalSublist = () => {
       <div className="sublist-content-container">
         <div className="sublist-content">
           <p className="sublist-title">{parentGoal && t(parentGoal?.title)}</p>
-          {parentGoal && <GoalItemSummary goal={parentGoal} />}
+          {parentGoal && (
+            <span className="goal-item-summary-wrapper">
+              {!parentGoal.timeBudget ? <BudgetSummary goal={parentGoal} /> : <GoalSummary goal={parentGoal} />}
+            </span>
+          )}
           <div className="sublist-list-container">
             <GoalsList
               goals={subgoals}
@@ -95,9 +85,10 @@ export const GoalSublist = () => {
                 dispatch({ type: "SET_SUBGOALS", payload: orderedGoals });
               }}
             />
-            <GoalsAccordion header="Hints" goals={goalhints} />
-            <GoalsAccordion header="Done" goals={archivedChildren} />
-            <GoalsAccordion header="Trash" goals={deletedGoals} />
+            <DeletedGoalProvider>
+              {deletedGoals.length > 0 && <DeletedGoals goals={deletedGoals} />}
+            </DeletedGoalProvider>
+            {archivedChildren.length > 0 && <ArchivedGoals goals={archivedChildren} />}
           </div>
         </div>
       </div>
diff --git a/src/components/GoalsComponents/GoalSublist/GoalHistory.tsx b/src/components/GoalsComponents/GoalSublist/components/GoalHistory.tsx
similarity index 100%
rename from src/components/GoalsComponents/GoalSublist/GoalHistory.tsx
rename to src/components/GoalsComponents/GoalSublist/components/GoalHistory.tsx
diff --git a/src/components/GoalsComponents/GoalsAccordion.tsx b/src/components/GoalsComponents/GoalsAccordion.tsx
index f7a97ace4..77d9234b6 100755
--- a/src/components/GoalsComponents/GoalsAccordion.tsx
+++ b/src/components/GoalsComponents/GoalsAccordion.tsx
@@ -4,8 +4,10 @@ import { darkModeState } from "@src/store";
 
 import { GoalItem } from "@src/models/GoalItem";
 import ZAccordion from "@src/common/Accordion";
-import { TAction, displayGoalActions } from "@src/store/GoalsState";
 
+import { useSearchParams } from "react-router-dom";
+import { useActiveGoalContext } from "@src/contexts/activeGoal-context";
+import { useDeletedGoalContext } from "@src/contexts/deletedGoal-context";
 import MyGoal from "./MyGoal/MyGoal";
 import AccordionActions from "./MyGoalActions/AccordionActions";
 import HintsAccordionActions from "./MyGoalActions/HintsAccordianAction";
@@ -15,26 +17,18 @@ interface IGoalsAccordionProps {
   goals: GoalItem[];
 }
 
-// const actionsMap: {
-//   [key: string]: TAction;
-// } = {
-//   Done: "archived",
-//   Trash: "deleted",
-//   Hints: "hints",
-// };
-
 const GoalsAccordion: React.FC<IGoalsAccordionProps> = ({ header, goals }) => {
   const darkModeStatus = useRecoilValue(darkModeState);
-  const showGoalActions = useRecoilValue(displayGoalActions);
+
+  const [searchParams] = useSearchParams();
+  const showOptions = !!searchParams.get("showOptions") && activeGoal;
+  const { goal: activeGoal } = useActiveGoalContext();
+  const { goal: deleteGoal } = useDeletedGoalContext();
 
   return (
     <div className="archived-drawer">
-      {showGoalActions && ["archived", "deleted"].includes(showGoalActions.actionType) && (
-        <AccordionActions open goal={showGoalActions.goal} actionType={showGoalActions.actionType} />
-      )}
-      {showGoalActions && ["hints"].includes(showGoalActions.actionType) && (
-        <HintsAccordionActions open goal={showGoalActions.goal} />
-      )}
+      {showOptions && header === "Hints" && <HintsAccordionActions open goal={activeGoal} />}
+
       {goals.length > 0 && (
         <ZAccordion
           showCount
diff --git a/src/pages/GoalsPage/MyGoals.tsx b/src/pages/GoalsPage/MyGoals.tsx
index e7d36b667..829ee5ad1 100755
--- a/src/pages/GoalsPage/MyGoals.tsx
+++ b/src/pages/GoalsPage/MyGoals.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { useState, useEffect, ChangeEvent } from "react";
 import { useRecoilState, useRecoilValue } from "recoil";
 
@@ -16,7 +14,7 @@ import { darkModeState, lastAction, searchActive } from "@src/store";
 import AppLayout from "@src/layouts/AppLayout";
 import GoalsList from "@components/GoalsComponents/GoalsList";
 import ConfigGoal from "@components/GoalsComponents/GoalConfigModal/ConfigGoal";
-import ShareGoalModal from "@components/GoalsComponents/ShareGoalModal/ShareGoalModal";
+import ShareGoalModal from "@pages/GoalsPage/components/modals/ShareGoalModal";
 import GoalsAccordion from "@components/GoalsComponents/GoalsAccordion";
 import DisplayChangesModal from "@components/GoalsComponents/DisplayChangesModal/DisplayChangesModal";
 import { TrashItem } from "@src/models/TrashItem";
@@ -29,28 +27,31 @@ import { useActiveGoalContext } from "@src/contexts/activeGoal-context";
 import RegularGoalActions from "@components/GoalsComponents/MyGoalActions/RegularGoalActions";
 import { goalCategories } from "@src/constants/myGoals";
 import { TGoalConfigMode } from "@src/types";
+import { DeletedGoalProvider } from "@src/contexts/deletedGoal-context";
+import DeletedGoals from "./components/DeletedGoals";
+import ArchivedGoals from "./components/ArchivedGoals";
 
 export const MyGoals = () => {
   let debounceTimeout: ReturnType<typeof setTimeout>;
   const [activeGoals, setActiveGoals] = useState<GoalItem[]>([]);
   const [archivedGoals, setArchivedGoals] = useState<GoalItem[]>([]);
-  const [deletedGoals, setDeletedGoals] = useState<GoalItem[]>([]);
+  const [deletedGoals, setDeletedGoals] = useState<TrashItem[]>([]);
   // const [showActions, setShowActions] = useState({ open: "root", click: 1 });
 
   const { parentId = "root" } = useParams();
 
   const [searchParams] = useSearchParams();
-  const showOptions = !!searchParams.get("showOptions");
+  const showShareModal = searchParams.get("share") === "true";
+  const showOptions = searchParams.get("showOptions") === "true";
   const goalType = (searchParams.get("type") as TGoalCategory) || "";
 
   const mode = (searchParams.get("mode") as TGoalConfigMode) || "";
 
   const { goal: activeGoal } = useActiveGoalContext();
-  console.log("🚀 ~ MyGoals ~ activeGoal:", activeGoal);
 
   const displaySearch = useRecoilValue(searchActive);
   const darkModeStatus = useRecoilValue(darkModeState);
-  const showShareModal = useRecoilValue(displayShareModal);
+
   const showChangesModal = useRecoilValue(displayChangesModal);
 
   const [action, setLastAction] = useRecoilState(lastAction);
@@ -60,7 +61,7 @@ export const MyGoals = () => {
     return { goals, delGoals };
   };
   const handleUserGoals = (goals: GoalItem[], delGoals: TrashItem[]) => {
-    setDeletedGoals([...delGoals.map(({ deletedAt, ...goal }) => goal)]);
+    setDeletedGoals([...delGoals]);
     setActiveGoals([...goals.filter((goal) => goal.archived === "false")]);
     setArchivedGoals([...goals.filter((goal) => goal.archived === "true" && goal.typeOfGoal === "myGoal")]);
   };
@@ -108,9 +109,9 @@ export const MyGoals = () => {
   return (
     <AppLayout title="myGoals" debounceSearch={debounceSearch}>
       <ParentGoalProvider>
-        {showShareModal && <ShareGoalModal goal={showShareModal} />}
         {showChangesModal && <DisplayChangesModal />}
         {showOptions && activeGoal && <RegularGoalActions goal={activeGoal} />}
+        {showShareModal && activeGoal && <ShareGoalModal goal={activeGoal} />}
         {goalCategories.includes(goalType) && (
           <ConfigGoal type={goalType} goal={activeGoal || createGoalObjectFromTags()} mode={mode} />
         )}
@@ -121,8 +122,10 @@ export const MyGoals = () => {
               <div className="d-flex f-col">
                 <GoalsList goals={activeGoals} setGoals={setActiveGoals} />
               </div>
-              {archivedGoals.length > 0 && <GoalsAccordion header="Done" goals={archivedGoals} />}
-              {deletedGoals.length > 0 && <GoalsAccordion header="Trash" goals={deletedGoals} />}
+              <DeletedGoalProvider>
+                {deletedGoals.length > 0 && <DeletedGoals goals={deletedGoals} />}
+              </DeletedGoalProvider>
+              {archivedGoals.length > 0 && <ArchivedGoals goals={archivedGoals} />}
             </div>
           ) : (
             <GoalSublist />