refractor: added params to fetch key (#465)

apps/app/components/core/board-view/single-issue.tsx

@@ -82,7 +82,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
   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<Props> = ({
             }
           | 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<Props> = ({
           }
         | 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<Props> = ({
       issuesService
         .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
         .then((res) => {
-          if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string));
+          if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
-          if (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string));
+          if (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
-          mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string));
+          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 = (

apps/app/components/core/issues-view.tsx

@@ -81,6 +81,7 @@ export const IssuesView: React.FC<Props> = ({ type = "issue", openIssuesListModa
     orderBy,
     filters,
     setFilters,
+    params,
   } = useIssuesView();
 
   const { data: stateGroups } = useSWR(
@@ -185,7 +186,7 @@ export const IssuesView: React.FC<Props> = ({ 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<Props> = ({ 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<Props> = ({ 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<Props> = ({ 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<Props> = ({ type = "issue", openIssuesListModa
       selectedGroup,
       orderBy,
       handleDeleteIssue,
+      params,
     ]
   );
 

apps/app/components/core/list-view/single-issue.tsx

@@ -73,7 +73,7 @@ export const SingleListIssue: React.FC<Props> = ({
 
   const { setToastAlert } = useToast();
 
-  const { groupByProperty: selectedGroup } = useIssueView();
+  const { groupByProperty: selectedGroup, params } = useIssueView();
 
   const partialUpdateIssue = useCallback(
     (formData: Partial<IIssue>) => {
@@ -86,7 +86,7 @@ export const SingleListIssue: React.FC<Props> = ({
             }
           | 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<Props> = ({
             }
           | 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<Props> = ({
           }
         | 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<Props> = ({
       issuesService
         .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
         .then((res) => {
-          if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string));
+          if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
-          if (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string));
+          if (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
-          mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string));
+          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 = () => {

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) =>
+export const PROJECT_ISSUES_LIST_WITH_PARAMS = (projectId: string, params?: any) => {
-  `PROJECT_ISSUES_LIST_WITH_PARAMS_${projectId}`;
+  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) =>
+export const MODULE_ISSUES_WITH_PARAMS = (moduleId: string, params?: any) => {
-  `MODULE_ISSUES_WITH_PARAMS_${moduleId}`;
+  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}`;

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, params), {}, false);
-      mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string));
+      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, params), {}, false);
-      mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string));
+      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, params), {}, false);
-      mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string));
+      mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
     }
   }, [state, projectId, cycleId, moduleId, viewId]);
 

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
       ? () =>