Skip to content

Commit

Permalink
transitioning: state -> url params in mygoals
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tushar-4781
Tushar-4781 committed Jul 19, 2024
1 parent c614042 commit 7d58c70
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 62 deletions.
61 changes: 26 additions & 35 deletions src/components/GoalsComponents/GoalSublist/GoalSublist.tsx
View file
Original file line number Diff line number Diff line change
@@ -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(() => {
Expand All @@ -60,44 +50,45 @@ 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">
<GoalHistory />
<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}
setGoals={(orderedGoals: GoalItem[]) => {
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>
Expand Down
0 ...alsComponents/GoalSublist/GoalHistory.tsx → ...ts/GoalSublist/components/GoalHistory.tsx
View file
File renamed without changes.
26 changes: 10 additions & 16 deletions src/components/GoalsComponents/GoalsAccordion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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
Expand Down
25 changes: 14 additions & 11 deletions src/pages/GoalsPage/MyGoals.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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";
Expand All @@ -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);
Expand All @@ -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")]);
};
Expand Down Expand Up @@ -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} />
)}
Expand All @@ -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 />
Expand Down

0 comments on commit 7d58c70

Please sign in to comment.