From b1448c947e4719d108599e32674d021b23eb1c4b Mon Sep 17 00:00:00 2001 From: sriramveeraghanta Date: Mon, 2 Oct 2023 23:20:14 +0530 Subject: [PATCH] fix: cycles list rendering fixes --- web/components/cycles/cycles-list-item.tsx | 42 +++++++-- web/components/cycles/cycles-view.tsx | 11 ++- .../projects/[projectId]/cycles/index.tsx | 8 +- web/store/cycles.ts | 87 +++++++++++++++---- 4 files changed, 118 insertions(+), 30 deletions(-) diff --git a/web/components/cycles/cycles-list-item.tsx b/web/components/cycles/cycles-list-item.tsx index c902f5147..445cdddf8 100644 --- a/web/components/cycles/cycles-list-item.tsx +++ b/web/components/cycles/cycles-list-item.tsx @@ -1,4 +1,4 @@ -import { FC } from "react"; +import { FC, MouseEvent } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; // hooks @@ -22,6 +22,7 @@ import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft import { copyTextToClipboard, truncateText } from "helpers/string.helper"; // types import { ICycle } from "types"; +import { useMobxStore } from "lib/mobx/store-provider"; type TCyclesListItem = { cycle: ICycle; @@ -61,6 +62,8 @@ const stateGroups = [ export const CyclesListItem: FC = (props) => { const { cycle } = props; + // store + const { cycle: cycleStore } = useMobxStore(); // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; @@ -91,10 +94,39 @@ export const CyclesListItem: FC = (props) => { color: group.color, })); - const handleAddToFavorites = () => {}; - const handleRemoveFromFavorites = () => {}; - const handleEditCycle = () => {}; - const handleDeleteCycle = () => {}; + const handleAddToFavorites = (e: MouseEvent) => { + e.preventDefault(); + if (!workspaceSlug || !projectId) return; + + cycleStore.addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => { + setToastAlert({ + type: "error", + title: "Error!", + message: "Couldn't add the cycle to favorites. Please try again.", + }); + }); + }; + + const handleRemoveFromFavorites = (e: MouseEvent) => { + e.preventDefault(); + if (!workspaceSlug || !projectId) return; + + cycleStore.removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => { + setToastAlert({ + type: "error", + title: "Error!", + message: "Couldn't add the cycle to favorites. Please try again.", + }); + }); + }; + + const handleEditCycle = (e: MouseEvent) => { + e.preventDefault(); + }; + + const handleDeleteCycle = (e: MouseEvent) => { + e.preventDefault(); + }; return (
diff --git a/web/components/cycles/cycles-view.tsx b/web/components/cycles/cycles-view.tsx index 72e9dd394..42e0a4272 100644 --- a/web/components/cycles/cycles-view.tsx +++ b/web/components/cycles/cycles-view.tsx @@ -19,20 +19,19 @@ export const CyclesView: FC = observer((props) => { // store const { cycle: cycleStore } = useMobxStore(); // api call to fetch cycles list - useSWR( - workspaceSlug && projectId ? `CYCLES_LIST_${projectId}` : null, + const { isLoading } = useSWR( + workspaceSlug && projectId ? `CYCLES_LIST_${projectId}_${filter}` : null, workspaceSlug && projectId ? () => cycleStore.fetchCycles(workspaceSlug, projectId, filter) : null ); - const cyclesList = cycleStore.cycles?.[projectId]?.[filter]; - console.log("cyclesList", cyclesList); + const cyclesList = cycleStore.cycles?.[projectId]; console.log("cyclesList", cyclesList); return ( <> {view === "list" && ( <> - {cyclesList ? ( + {!isLoading ? ( ) : ( @@ -45,7 +44,7 @@ export const CyclesView: FC = observer((props) => { )} {view === "board" && ( <> - {cyclesList ? ( + {!isLoading ? ( ) : ( diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx index 39df3730e..3876ffd08 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx +++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx @@ -170,7 +170,7 @@ const ProjectCyclesPage: NextPage = observer(() => { {cycleTab && cyclesView && workspaceSlug && projectId && ( { {cycleTab && cyclesView && workspaceSlug && projectId && ( { {cycleTab && cyclesView && workspaceSlug && projectId && ( { {cycleTab && cyclesView && workspaceSlug && projectId && ( Promise; + createCycle: (workspaceSlug: string, projectId: string, data: any) => Promise; - createCycle: (workspaceSlug: string, projectId: string, data: any, filter: string) => Promise; + addCycleToFavorites: (workspaceSlug: string, projectId: string, cycleId: string) => Promise; + removeCycleFromFavorites: (workspaceSlug: string, projectId: string, cycleId: string) => Promise; } class CycleStore implements ICycleStore { @@ -35,9 +35,7 @@ class CycleStore implements ICycleStore { error: any | null = null; cycles: { - [project_id: string]: { - [filter_name: string]: ICycle[]; - }; + [project_id: string]: ICycle[]; } = {}; cycle_details: { @@ -63,6 +61,9 @@ class CycleStore implements ICycleStore { // actions fetchCycles: action, createCycle: action, + + addCycleToFavorites: action, + removeCycleFromFavorites: action, }); this.rootStore = _rootStore; @@ -92,9 +93,7 @@ class CycleStore implements ICycleStore { runInAction(() => { this.cycles = { ...this.cycles, - [projectId]: { - [params]: cyclesResponse, - }, + [projectId]: cyclesResponse, }; this.loader = false; this.error = null; @@ -106,7 +105,7 @@ class CycleStore implements ICycleStore { } }; - createCycle = async (workspaceSlug: string, projectId: string, data: any, filter: string) => { + createCycle = async (workspaceSlug: string, projectId: string, data: any) => { try { const response = await this.cycleService.createCycle( workspaceSlug, @@ -118,10 +117,7 @@ class CycleStore implements ICycleStore { runInAction(() => { this.cycles = { ...this.cycles, - [projectId]: { - ...this.cycles[projectId], - [filter]: [...this.cycles[projectId][filter], response], - }, + [projectId]: [...this.cycles[projectId], response], }; }); @@ -131,6 +127,67 @@ class CycleStore implements ICycleStore { throw error; } }; + + addCycleToFavorites = async (workspaceSlug: string, projectId: string, cycleId: string) => { + try { + runInAction(() => { + this.cycles = { + ...this.cycles, + [projectId]: this.cycles[projectId].map((cycle) => { + if (cycle.id === cycleId) return { ...cycle, is_favorite: true }; + return cycle; + }), + }; + }); + // updating through api. + const response = await this.cycleService.addCycleToFavorites(workspaceSlug, projectId, { cycle: cycleId }); + return response; + } catch (error) { + console.log("Failed to add cycle to favorites in the cycles store", error); + // resetting the local state + runInAction(() => { + this.cycles = { + ...this.cycles, + [projectId]: this.cycles[projectId].map((cycle) => { + if (cycle.id === cycleId) return { ...cycle, is_favorite: false }; + return cycle; + }), + }; + }); + + throw error; + } + }; + + removeCycleFromFavorites = async (workspaceSlug: string, projectId: string, cycleId: string) => { + try { + runInAction(() => { + this.cycles = { + ...this.cycles, + [projectId]: this.cycles[projectId].map((cycle) => { + if (cycle.id === cycleId) return { ...cycle, is_favorite: false }; + return cycle; + }), + }; + }); + // updating through api + const response = await this.cycleService.removeCycleFromFavorites(workspaceSlug, projectId, cycleId); + return response; + } catch (error) { + console.log("Failed to remove cycle from favorites - Cycle Store", error); + // resetting the local state + runInAction(() => { + this.cycles = { + ...this.cycles, + [projectId]: this.cycles[projectId].map((cycle) => { + if (cycle.id === cycleId) return { ...cycle, is_favorite: true }; + return cycle; + }), + }; + }); + throw error; + } + }; } export default CycleStore;