From 0fb9a14f151b8787a07582bde7b8758de94117e2 Mon Sep 17 00:00:00 2001 From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com> Date: Thu, 16 Mar 2023 18:15:08 +0530 Subject: [PATCH] refractor: added params to fetch key (#465) --- .../core/board-view/single-issue.tsx | 14 +++---- apps/app/components/core/issues-view.tsx | 10 +++-- .../core/list-view/single-issue.tsx | 16 ++++---- apps/app/constants/fetch-keys.ts | 41 ++++++++++++++++--- apps/app/contexts/issue-view.context.tsx | 28 ++++++++++--- apps/app/hooks/use-issues-view.tsx | 6 +-- 6 files changed, 81 insertions(+), 34 deletions(-) diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx index 60e02648e..6384e87dc 100644 --- a/apps/app/components/core/board-view/single-issue.tsx +++ b/apps/app/components/core/board-view/single-issue.tsx @@ -82,7 +82,7 @@ export const SingleBoardIssue: React.FC = ({ const [contextMenu, setContextMenu] = useState(false); const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 }); - const { orderBy } = useIssuesView(); + const { orderBy, params } = useIssuesView(); const router = useRouter(); const { workspaceSlug, projectId, cycleId, moduleId } = router.query; @@ -100,7 +100,7 @@ export const SingleBoardIssue: React.FC = ({ } | IIssue[] >( - CYCLE_ISSUES_WITH_PARAMS(cycleId as string), + CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params), (prevData) => handleIssuesMutation(formData, groupTitle ?? "", selectedGroup, index, prevData), false @@ -125,7 +125,7 @@ export const SingleBoardIssue: React.FC = ({ } | IIssue[] >( - PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string), + PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params), (prevData) => handleIssuesMutation(formData, groupTitle ?? "", selectedGroup, index, prevData), false @@ -134,15 +134,15 @@ export const SingleBoardIssue: React.FC = ({ issuesService .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData) .then((res) => { - if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string)); - if (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string)); - mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string)); + if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params)); + if (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params)); + mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params)); }) .catch((error) => { console.log(error); }); }, - [workspaceSlug, projectId, cycleId, moduleId, issue, groupTitle, index, selectedGroup] + [workspaceSlug, projectId, cycleId, moduleId, issue, groupTitle, index, selectedGroup, params] ); const getStyle = ( diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx index e05e4148b..af5a4356e 100644 --- a/apps/app/components/core/issues-view.tsx +++ b/apps/app/components/core/issues-view.tsx @@ -81,6 +81,7 @@ export const IssuesView: React.FC = ({ type = "issue", openIssuesListModa orderBy, filters, setFilters, + params, } = useIssuesView(); const { data: stateGroups } = useSWR( @@ -185,7 +186,7 @@ export const IssuesView: React.FC = ({ type = "issue", openIssuesListModa mutate<{ [key: string]: IIssue[]; }>( - CYCLE_ISSUES_WITH_PARAMS(cycleId as string), + CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params), (prevData) => { if (!prevData) return prevData; @@ -207,7 +208,7 @@ export const IssuesView: React.FC = ({ type = "issue", openIssuesListModa mutate<{ [key: string]: IIssue[]; }>( - MODULE_ISSUES_WITH_PARAMS(moduleId as string), + MODULE_ISSUES_WITH_PARAMS(moduleId as string, params), (prevData) => { if (!prevData) return prevData; @@ -227,7 +228,7 @@ export const IssuesView: React.FC = ({ type = "issue", openIssuesListModa ); else mutate<{ [key: string]: IIssue[] }>( - PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string), + PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params), (prevData) => { if (!prevData) return prevData; @@ -256,7 +257,7 @@ export const IssuesView: React.FC = ({ type = "issue", openIssuesListModa .then(() => { if (cycleId) mutate(CYCLE_ISSUES(cycleId as string)); if (moduleId) mutate(MODULE_ISSUES(moduleId as string)); - mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string)); + mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params)); }); } }, @@ -269,6 +270,7 @@ export const IssuesView: React.FC = ({ type = "issue", openIssuesListModa selectedGroup, orderBy, handleDeleteIssue, + params, ] ); diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx index e8900f432..e1b5fa9ed 100644 --- a/apps/app/components/core/list-view/single-issue.tsx +++ b/apps/app/components/core/list-view/single-issue.tsx @@ -73,7 +73,7 @@ export const SingleListIssue: React.FC = ({ const { setToastAlert } = useToast(); - const { groupByProperty: selectedGroup } = useIssueView(); + const { groupByProperty: selectedGroup, params } = useIssueView(); const partialUpdateIssue = useCallback( (formData: Partial) => { @@ -86,7 +86,7 @@ export const SingleListIssue: React.FC = ({ } | IIssue[] >( - CYCLE_ISSUES_WITH_PARAMS(cycleId as string), + CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params), (prevData) => handleIssuesMutation(formData, groupTitle ?? "", selectedGroup, index, prevData), false @@ -99,7 +99,7 @@ export const SingleListIssue: React.FC = ({ } | IIssue[] >( - MODULE_ISSUES_WITH_PARAMS(moduleId as string), + MODULE_ISSUES_WITH_PARAMS(moduleId as string, params), (prevData) => handleIssuesMutation(formData, groupTitle ?? "", selectedGroup, index, prevData), false @@ -111,7 +111,7 @@ export const SingleListIssue: React.FC = ({ } | IIssue[] >( - PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string), + PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params), (prevData) => handleIssuesMutation(formData, groupTitle ?? "", selectedGroup, index, prevData), false @@ -120,15 +120,15 @@ export const SingleListIssue: React.FC = ({ issuesService .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData) .then((res) => { - if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string)); - if (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string)); - mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string)); + if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params)); + if (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params)); + mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params)); }) .catch((error) => { console.log(error); }); }, - [workspaceSlug, projectId, cycleId, moduleId, issue, groupTitle, index, selectedGroup] + [workspaceSlug, projectId, cycleId, moduleId, issue, groupTitle, index, selectedGroup, params] ); const handleCopyText = () => { diff --git a/apps/app/constants/fetch-keys.ts b/apps/app/constants/fetch-keys.ts index d7ce1a5be..8592a22c0 100644 --- a/apps/app/constants/fetch-keys.ts +++ b/apps/app/constants/fetch-keys.ts @@ -1,4 +1,17 @@ -import { IIssueFilterOptions } from "types"; +const paramsToKey = (params: any) => { + const { state, priority, assignees } = params; + + let stateKey = state ? state.split(",").join(" ") : ""; + let priorityKey = priority ? priority.split(",").join(" ") : ""; + let assigneesKey = assignees ? assignees.split(",").join(" ") : ""; + + // sorting each keys in ascending order + stateKey = stateKey.split(" ").sort().join(""); + priorityKey = priorityKey.split(" ").sort().join(""); + assigneesKey = assigneesKey.split(" ").sort().join(""); + + return `${stateKey}_${priorityKey}_${assigneesKey}`; +}; export const CURRENT_USER = "CURRENT_USER"; export const USER_WORKSPACE_INVITATIONS = "USER_WORKSPACE_INVITATIONS"; @@ -26,8 +39,13 @@ export const PROJECT_INVITATIONS = "PROJECT_INVITATIONS"; export const PROJECT_ISSUES_LIST = (workspaceSlug: string, projectId: string) => `PROJECT_ISSUES_LIST_${workspaceSlug}_${projectId}`; -export const PROJECT_ISSUES_LIST_WITH_PARAMS = (projectId: string) => - `PROJECT_ISSUES_LIST_WITH_PARAMS_${projectId}`; +export const PROJECT_ISSUES_LIST_WITH_PARAMS = (projectId: string, params?: any) => { + if (!params) return `PROJECT_ISSUES_LIST_WITH_PARAMS_${projectId}`; + + const paramsKey = paramsToKey(params); + + return `PROJECT_ISSUES_LIST_WITH_PARAMS_${projectId}_${paramsKey}`; +}; export const PROJECT_ISSUES_DETAILS = (issueId: string) => `PROJECT_ISSUES_DETAILS_${issueId}`; export const PROJECT_ISSUES_PROPERTIES = (projectId: string) => `PROJECT_ISSUES_PROPERTIES_${projectId}`; @@ -40,7 +58,13 @@ export const PROJECT_GITHUB_REPOSITORY = (projectId: string) => export const CYCLE_LIST = (projectId: string) => `CYCLE_LIST_${projectId}`; export const CYCLE_ISSUES = (cycleId: string) => `CYCLE_ISSUES_${cycleId}`; -export const CYCLE_ISSUES_WITH_PARAMS = (cycleId: string) => `CYCLE_ISSUES_WITH_PARAMS_${cycleId}`; +export const CYCLE_ISSUES_WITH_PARAMS = (cycleId: string, params?: any) => { + if (!params) return `CYCLE_ISSUES_WITH_PARAMS_${cycleId}`; + + const paramsKey = paramsToKey(params); + + return `CYCLE_ISSUES_WITH_PARAMS_${cycleId}_${paramsKey}`; +}; export const CYCLE_DETAILS = (cycleId: string) => `CYCLE_DETAILS_${cycleId}`; export const CYCLE_CURRENT_AND_UPCOMING_LIST = (projectId: string) => `CYCLE_CURRENT_AND_UPCOMING_LIST_${projectId}`; @@ -56,8 +80,13 @@ export const USER_PROJECT_VIEW = (projectId: string) => `USER_PROJECT_VIEW_${pro export const MODULE_LIST = (projectId: string) => `MODULE_LIST_${projectId}`; export const MODULE_ISSUES = (moduleId: string) => `MODULE_ISSUES_${moduleId}`; -export const MODULE_ISSUES_WITH_PARAMS = (moduleId: string) => - `MODULE_ISSUES_WITH_PARAMS_${moduleId}`; +export const MODULE_ISSUES_WITH_PARAMS = (moduleId: string, params?: any) => { + if (!params) return `MODULE_ISSUES_WITH_PARAMS_${moduleId}`; + + const paramsKey = paramsToKey(params); + + return `MODULE_ISSUES_WITH_PARAMS_${moduleId}_${paramsKey}`; +}; export const MODULE_DETAILS = (moduleId: string) => `MODULE_DETAILS_${moduleId}`; export const VIEWS_LIST = (projectId: string) => `VIEWS_LIST_${projectId}`; diff --git a/apps/app/contexts/issue-view.context.tsx b/apps/app/contexts/issue-view.context.tsx index 8cb43fb0d..2713b3245 100644 --- a/apps/app/contexts/issue-view.context.tsx +++ b/apps/app/contexts/issue-view.context.tsx @@ -425,19 +425,35 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> = }, [myViewProps, viewDetails]); useEffect(() => { + const params: any = { + order_by: state.orderBy, + group_by: state.groupByProperty, + assignees: state.filters?.assignees ? state.filters?.assignees.join(",") : undefined, + state: state.filters?.state ? state.filters?.state.join(",") : undefined, + priority: state.filters?.priority ? state.filters?.priority.join(",") : undefined, + type: state.filters?.type ? state.filters?.type : undefined, + labels: state.filters?.labels ? state.filters?.labels.join(",") : undefined, + issue__assignees__id: state.filters?.issue__assignees__id + ? state.filters?.issue__assignees__id.join(",") + : undefined, + issue__labels__id: state.filters?.issue__labels__id + ? state.filters?.issue__labels__id.join(",") + : undefined, + }; + // TODO: think of a better way to do this if (cycleId) { - mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string), {}, false); - mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string)); + mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params), {}, false); + mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params)); } else if (moduleId) { - mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string), {}, false); - mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string)); + mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params), {}, false); + mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params)); } else if (viewId) { mutate(VIEW_ISSUES(viewId as string), {}, false); mutate(VIEW_ISSUES(viewId as string)); } else { - mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string), {}, false); - mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string)); + mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params), {}, false); + mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params)); } }, [state, projectId, cycleId, moduleId, viewId]); diff --git a/apps/app/hooks/use-issues-view.tsx b/apps/app/hooks/use-issues-view.tsx index e7cf4f851..31355b895 100644 --- a/apps/app/hooks/use-issues-view.tsx +++ b/apps/app/hooks/use-issues-view.tsx @@ -58,7 +58,7 @@ const useIssuesView = () => { const { data: projectIssues } = useSWR( workspaceSlug && projectId && params - ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string) + ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params) : null, workspaceSlug && projectId && params ? () => @@ -76,7 +76,7 @@ const useIssuesView = () => { const { data: cycleIssues } = useSWR( workspaceSlug && projectId && cycleId && params - ? CYCLE_ISSUES_WITH_PARAMS(cycleId as string) + ? CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params) : null, workspaceSlug && projectId && cycleId && params ? () => @@ -91,7 +91,7 @@ const useIssuesView = () => { const { data: moduleIssues } = useSWR( workspaceSlug && projectId && moduleId && params - ? MODULE_ISSUES_WITH_PARAMS(moduleId as string) + ? MODULE_ISSUES_WITH_PARAMS(moduleId as string, params) : null, workspaceSlug && projectId && moduleId && params ? () =>