github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: cycles list rendering fixes

Browse Source
This commit is contained in:
sriramveeraghanta 2023-10-02 23:20:14 +05:30
parent 9c2ea8a7ae
commit b1448c947e
4 changed files with 118 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
web/components/cycles/cycles-list-item.tsx
View File

@ -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<TCyclesListItem> = (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<TCyclesListItem> = (props) => {
color: group.color,
}));
const handleAddToFavorites = () => {};
const handleRemoveFromFavorites = () => {};
const handleEditCycle = () => {};
const handleDeleteCycle = () => {};
const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
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<HTMLButtonElement>) => {
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<HTMLButtonElement>) => {
e.preventDefault();
};
const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
};
return (
<div>

11
web/components/cycles/cycles-view.tsx
View File

@ -19,20 +19,19 @@ export const CyclesView: FC<ICyclesView> = 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 ? (
<CyclesList cycles={cyclesList} filter={filter} />
) : (
<Loader className="space-y-4">
@ -45,7 +44,7 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
)}
{view === "board" && (
<>
{cyclesList ? (
{!isLoading ? (
<CyclesBoard cycles={cyclesList} filter={filter} />
) : (
<Loader className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">

8
web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
View File

@ -170,7 +170,7 @@ const ProjectCyclesPage: NextPage = observer(() => {
<Tab.Panel as="div" className="p-4 sm:p-5 h-full overflow-y-auto">
{cycleTab && cyclesView && workspaceSlug && projectId && (
<CyclesView
filter={cycleTab as ICycleAPIFilter}
filter="all"
view={cyclesView as ICycleView}
workspaceSlug={workspaceSlug?.toString()}
projectId={projectId?.toString()}
@ -183,7 +183,7 @@ const ProjectCyclesPage: NextPage = observer(() => {
<Tab.Panel as="div" className="p-4 sm:p-5 h-full overflow-y-auto">
{cycleTab && cyclesView && workspaceSlug && projectId && (
<CyclesView
filter={cycleTab as ICycleAPIFilter}
filter="upcoming"
view={cyclesView as ICycleView}
workspaceSlug={workspaceSlug?.toString()}
projectId={projectId?.toString()}
@ -193,7 +193,7 @@ const ProjectCyclesPage: NextPage = observer(() => {
<Tab.Panel as="div" className="p-4 sm:p-5 h-full overflow-y-auto">
{cycleTab && cyclesView && workspaceSlug && projectId && (
<CyclesView
filter={cycleTab as ICycleAPIFilter}
filter="completed"
view={cyclesView as ICycleView}
workspaceSlug={workspaceSlug?.toString()}
projectId={projectId?.toString()}
@ -203,7 +203,7 @@ const ProjectCyclesPage: NextPage = observer(() => {
<Tab.Panel as="div" className="p-4 sm:p-5 h-full overflow-y-auto">
{cycleTab && cyclesView && workspaceSlug && projectId && (
<CyclesView
filter={cycleTab as ICycleAPIFilter}
filter="draft"
view={cyclesView as ICycleView}
workspaceSlug={workspaceSlug?.toString()}
projectId={projectId?.toString()}

87
web/store/cycles.ts
View File

@ -12,9 +12,7 @@ export interface ICycleStore {
error: any | null;
cycles: {
[project_id: string]: {
[filter_name: string]: ICycle[];
};
[project_id: string]: ICycle[];
};
cycle_details: {
@ -26,8 +24,10 @@ export interface ICycleStore {
projectId: string,
params: "all" | "current" | "upcoming" | "draft" | "completed" | "incomplete"
) => Promise<void>;
createCycle: (workspaceSlug: string, projectId: string, data: any) => Promise<ICycle>;
createCycle: (workspaceSlug: string, projectId: string, data: any, filter: string) => Promise<ICycle>;
addCycleToFavorites: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<any>;
removeCycleFromFavorites: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<void>;
}
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;