From 3a2a329000d22ea617058648826924d75f635cad Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Tue, 12 Sep 2023 22:51:13 +0530
Subject: [PATCH] fix: view props undefined (#2160)

---
 .../profile/profile-issues-view-options.tsx   | 28 +++++++++----------
 .../profile/profile-issues-view.tsx           | 12 ++++----
 web/contexts/issue-view.context.tsx           |  1 -
 web/contexts/profile-issues-context.tsx       |  2 +-
 web/hooks/my-issues/use-my-issues-filter.tsx  | 28 +++++++++----------
 web/hooks/use-profile-issues.tsx              |  8 +++---
 web/types/view-props.d.ts                     |  4 +--
 7 files changed, 41 insertions(+), 42 deletions(-)

diff --git a/web/components/profile/profile-issues-view-options.tsx b/web/components/profile/profile-issues-view-options.tsx
index a7be9d3b6..4f36faa04 100644
--- a/web/components/profile/profile-issues-view-options.tsx
+++ b/web/components/profile/profile-issues-view-options.tsx
@@ -88,7 +88,7 @@ export const ProfileIssuesViewOptions: React.FC = () => {
             <button
               type="button"
               className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
-                displayFilters.layout === option.type
+                displayFilters?.layout === option.type
                   ? "bg-custom-sidebar-background-80"
                   : "text-custom-sidebar-text-200"
               }`}
@@ -159,25 +159,25 @@ export const ProfileIssuesViewOptions: React.FC = () => {
               <Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-200 bg-custom-background-90 p-3 shadow-lg">
                 <div className="relative divide-y-2 divide-custom-border-200">
                   <div className="space-y-4 pb-3 text-xs">
-                    {displayFilters.layout !== "calendar" &&
-                      displayFilters.layout !== "spreadsheet" && (
+                    {displayFilters?.layout !== "calendar" &&
+                      displayFilters?.layout !== "spreadsheet" && (
                         <>
                           <div className="flex items-center justify-between">
                             <h4 className="text-custom-text-200">Group by</h4>
                             <div className="w-28">
                               <CustomMenu
                                 label={
-                                  displayFilters.group_by === "project"
+                                  displayFilters?.group_by === "project"
                                     ? "Project"
                                     : GROUP_BY_OPTIONS.find(
-                                        (option) => option.key === displayFilters.group_by
+                                        (option) => option.key === displayFilters?.group_by
                                       )?.name ?? "Select"
                                 }
                                 className="!w-full"
                                 buttonClassName="w-full"
                               >
                                 {GROUP_BY_OPTIONS.map((option) => {
-                                  if (displayFilters.layout === "kanban" && option.key === null)
+                                  if (displayFilters?.layout === "kanban" && option.key === null)
                                     return null;
                                   if (
                                     option.key === "state" ||
@@ -204,7 +204,7 @@ export const ProfileIssuesViewOptions: React.FC = () => {
                               <CustomMenu
                                 label={
                                   ORDER_BY_OPTIONS.find(
-                                    (option) => option.key === displayFilters.order_by
+                                    (option) => option.key === displayFilters?.order_by
                                   )?.name ?? "Select"
                                 }
                                 className="!w-full"
@@ -212,7 +212,7 @@ export const ProfileIssuesViewOptions: React.FC = () => {
                               >
                                 {ORDER_BY_OPTIONS.map((option) => {
                                   if (
-                                    displayFilters.group_by === "priority" &&
+                                    displayFilters?.group_by === "priority" &&
                                     option.key === "priority"
                                   )
                                     return null;
@@ -262,17 +262,17 @@ export const ProfileIssuesViewOptions: React.FC = () => {
                       </div>
                     </div>
 
-                    {displayFilters.layout !== "calendar" &&
-                      displayFilters.layout !== "spreadsheet" && (
+                    {displayFilters?.layout !== "calendar" &&
+                      displayFilters?.layout !== "spreadsheet" && (
                         <>
                           <div className="flex items-center justify-between">
                             <h4 className="text-custom-text-200">Show empty states</h4>
                             <div className="w-28">
                               <ToggleSwitch
-                                value={displayFilters.show_empty_groups ?? true}
+                                value={displayFilters?.show_empty_groups ?? true}
                                 onChange={() =>
                                   setDisplayFilters({
-                                    show_empty_groups: !displayFilters.show_empty_groups,
+                                    show_empty_groups: !displayFilters?.show_empty_groups,
                                   })
                                 }
                               />
@@ -289,7 +289,7 @@ export const ProfileIssuesViewOptions: React.FC = () => {
                         if (key === "estimate" && !isEstimateActive) return null;
 
                         if (
-                          displayFilters.layout === "spreadsheet" &&
+                          displayFilters?.layout === "spreadsheet" &&
                           (key === "attachment_count" ||
                             key === "link" ||
                             key === "sub_issue_count")
@@ -297,7 +297,7 @@ export const ProfileIssuesViewOptions: React.FC = () => {
                           return null;
 
                         if (
-                          displayFilters.layout !== "spreadsheet" &&
+                          displayFilters?.layout !== "spreadsheet" &&
                           (key === "created_on" || key === "updated_on")
                         )
                           return null;
diff --git a/web/components/profile/profile-issues-view.tsx b/web/components/profile/profile-issues-view.tsx
index 23835f9d1..619c0a083 100644
--- a/web/components/profile/profile-issues-view.tsx
+++ b/web/components/profile/profile-issues-view.tsx
@@ -94,7 +94,7 @@ export const ProfileIssuesView = () => {
         !result.destination ||
         !workspaceSlug ||
         !groupedIssues ||
-        displayFilters.group_by !== "priority"
+        displayFilters?.group_by !== "priority"
       )
         return;
 
@@ -155,19 +155,19 @@ export const ProfileIssuesView = () => {
 
       let preloadedValue: string | string[] = groupTitle;
 
-      if (displayFilters.group_by === "labels") {
+      if (displayFilters?.group_by === "labels") {
         if (groupTitle === "None") preloadedValue = [];
         else preloadedValue = [groupTitle];
       }
 
-      if (displayFilters.group_by)
+      if (displayFilters?.group_by)
         setPreloadedData({
-          [displayFilters.group_by]: preloadedValue,
+          [displayFilters?.group_by]: preloadedValue,
           actionType: "createIssue",
         });
       else setPreloadedData({ actionType: "createIssue" });
     },
-    [setCreateIssueModal, setPreloadedData, displayFilters.group_by]
+    [setCreateIssueModal, setPreloadedData, displayFilters?.group_by]
   );
 
   const addIssueToDate = useCallback(
@@ -286,7 +286,7 @@ export const ProfileIssuesView = () => {
         addIssueToDate={addIssueToDate}
         addIssueToGroup={addIssueToGroup}
         disableUserActions={false}
-        dragDisabled={displayFilters.group_by !== "priority"}
+        dragDisabled={displayFilters?.group_by !== "priority"}
         emptyState={{
           title: router.pathname.includes("assigned")
             ? `Issues assigned to ${profileData?.user_data.display_name} will appear here`
diff --git a/web/contexts/issue-view.context.tsx b/web/contexts/issue-view.context.tsx
index 80b81b7d2..786d60413 100644
--- a/web/contexts/issue-view.context.tsx
+++ b/web/contexts/issue-view.context.tsx
@@ -501,7 +501,6 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> =
   }, [projectId, workspaceSlug, myViewProps]);
 
   useEffect(() => {
-    console.log("running");
     dispatch({
       type: "REHYDRATE_THEME",
       payload: {
diff --git a/web/contexts/profile-issues-context.tsx b/web/contexts/profile-issues-context.tsx
index fa8c2d2b8..39b8020d7 100644
--- a/web/contexts/profile-issues-context.tsx
+++ b/web/contexts/profile-issues-context.tsx
@@ -138,7 +138,7 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
       if (
         displayFilter.layout &&
         displayFilter.layout === "kanban" &&
-        state.display_filters.group_by === null
+        state.display_filters?.group_by === null
       ) {
         dispatch({
           type: "SET_DISPLAY_FILTERS",
diff --git a/web/hooks/my-issues/use-my-issues-filter.tsx b/web/hooks/my-issues/use-my-issues-filter.tsx
index 17cb81c6d..5bfed634c 100644
--- a/web/hooks/my-issues/use-my-issues-filter.tsx
+++ b/web/hooks/my-issues/use-my-issues-filter.tsx
@@ -91,7 +91,7 @@ const useMyIssuesFilters = (workspaceSlug: string | undefined) => {
     [myWorkspace, workspaceSlug]
   );
 
-  const groupBy = (myWorkspace?.view_props ?? initialValues).display_filters.group_by;
+  const groupBy = (myWorkspace?.view_props ?? initialValues).display_filters?.group_by;
   const filters = (myWorkspace?.view_props ?? initialValues).filters;
 
   const setDisplayFilters = useCallback(
@@ -155,19 +155,19 @@ const useMyIssuesFilters = (workspaceSlug: string | undefined) => {
   }, [myWorkspace, workspaceSlug]);
 
   const newProperties: Properties = {
-    assignee: myWorkspace?.view_props.display_properties.assignee ?? true,
-    start_date: myWorkspace?.view_props.display_properties.start_date ?? true,
-    due_date: myWorkspace?.view_props.display_properties.due_date ?? true,
-    key: myWorkspace?.view_props.display_properties.key ?? true,
-    labels: myWorkspace?.view_props.display_properties.labels ?? true,
-    priority: myWorkspace?.view_props.display_properties.priority ?? true,
-    state: myWorkspace?.view_props.display_properties.state ?? true,
-    sub_issue_count: myWorkspace?.view_props.display_properties.sub_issue_count ?? true,
-    attachment_count: myWorkspace?.view_props.display_properties.attachment_count ?? true,
-    link: myWorkspace?.view_props.display_properties.link ?? true,
-    estimate: myWorkspace?.view_props.display_properties.estimate ?? true,
-    created_on: myWorkspace?.view_props.display_properties.created_on ?? true,
-    updated_on: myWorkspace?.view_props.display_properties.updated_on ?? true,
+    assignee: myWorkspace?.view_props.display_properties?.assignee ?? true,
+    start_date: myWorkspace?.view_props.display_properties?.start_date ?? true,
+    due_date: myWorkspace?.view_props.display_properties?.due_date ?? true,
+    key: myWorkspace?.view_props.display_properties?.key ?? true,
+    labels: myWorkspace?.view_props.display_properties?.labels ?? true,
+    priority: myWorkspace?.view_props.display_properties?.priority ?? true,
+    state: myWorkspace?.view_props.display_properties?.state ?? true,
+    sub_issue_count: myWorkspace?.view_props.display_properties?.sub_issue_count ?? true,
+    attachment_count: myWorkspace?.view_props.display_properties?.attachment_count ?? true,
+    link: myWorkspace?.view_props.display_properties?.link ?? true,
+    estimate: myWorkspace?.view_props.display_properties?.estimate ?? true,
+    created_on: myWorkspace?.view_props.display_properties?.created_on ?? true,
+    updated_on: myWorkspace?.view_props.display_properties?.updated_on ?? true,
   };
 
   return {
diff --git a/web/hooks/use-profile-issues.tsx b/web/hooks/use-profile-issues.tsx
index a83af019f..263aa307c 100644
--- a/web/hooks/use-profile-issues.tsx
+++ b/web/hooks/use-profile-issues.tsx
@@ -31,9 +31,9 @@ const useProfileIssues = (workspaceSlug: string | undefined, userId: string | un
   const params: any = {
     assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
     created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
-    group_by: displayFilters.group_by,
+    group_by: displayFilters?.group_by,
     labels: filters?.labels ? filters?.labels.join(",") : undefined,
-    order_by: displayFilters.order_by,
+    order_by: displayFilters?.order_by,
     priority: filters?.priority ? filters?.priority.join(",") : undefined,
     state_group: filters?.state_group ? filters?.state_group.join(",") : undefined,
     start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
@@ -63,7 +63,7 @@ const useProfileIssues = (workspaceSlug: string | undefined, userId: string | un
         allIssues: userProfileIssues,
       };
 
-    if (displayFilters.group_by === "state_detail.group") {
+    if (displayFilters?.group_by === "state_detail.group") {
       return userProfileIssues
         ? Object.assign(
             {
@@ -79,7 +79,7 @@ const useProfileIssues = (workspaceSlug: string | undefined, userId: string | un
     }
 
     return userProfileIssues;
-  }, [displayFilters.group_by, userProfileIssues]);
+  }, [displayFilters?.group_by, userProfileIssues]);
 
   useEffect(() => {
     if (!userId || !filters) return;
diff --git a/web/types/view-props.d.ts b/web/types/view-props.d.ts
index a4dc55638..a02fc5540 100644
--- a/web/types/view-props.d.ts
+++ b/web/types/view-props.d.ts
@@ -57,7 +57,7 @@ export interface IProjectViewProps {
 }
 
 export interface IWorkspaceViewProps {
-  display_filters: IIssueDisplayFilterOptions;
-  display_properties: Properties;
+  display_filters: IIssueDisplayFilterOptions | undefined;
+  display_properties: Properties | undefined;
   filters: IIssueFilterOptions;
 }