chore: workspace view code refactor

web/pages/[workspaceSlug]/workspace-views/[workspaceViewId].tsx

@@ -1,35 +1,73 @@
+import { useCallback, useState } from "react";
+
 import { useRouter } from "next/router";
 
-import useSWR from "swr";
+import useSWR, { mutate } from "swr";
 
 // hook
-import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
+import useToast from "hooks/use-toast";
+import useWorkspaceIssuesFilters from "hooks/use-worskpace-issue-filter";
+import useProjects from "hooks/use-projects";
 import useUser from "hooks/use-user";
+import useWorkspaceMembers from "hooks/use-workspace-members";
+// context
+import { useProjectMyMembership } from "contexts/project-member.context";
 // services
 import workspaceService from "services/workspace.service";
+import projectIssuesServices from "services/issues.service";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
-// contexts
-import { IssueViewContextProvider } from "contexts/issue-view.context";
 // components
-import { SpreadsheetView } from "components/core";
+import { FiltersList, SpreadsheetView } from "components/core";
 import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
 import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
+import { CreateUpdateViewModal } from "components/views";
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // ui
 import { EmptyState, PrimaryButton } from "components/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
+import { CheckCircle } from "lucide-react";
 // images
 import emptyView from "public/empty-state/view.svg";
 // fetch-keys
-import { WORKSPACE_VIEW_DETAILS, WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
-import { CheckCircle } from "lucide-react";
+import {
+  WORKSPACE_LABELS,
+  WORKSPACE_VIEWS_LIST,
+  WORKSPACE_VIEW_DETAILS,
+  WORKSPACE_VIEW_ISSUES,
+} from "constants/fetch-keys";
+// constant
+import { STATE_GROUP } from "constants/project";
+// types
+import { IIssue, IIssueFilterOptions, IView } from "types";
 
 const WorkspaceView: React.FC = () => {
+  const [createViewModal, setCreateViewModal] = useState<any>(null);
+
+  // create issue modal
+  const [createIssueModal, setCreateIssueModal] = useState(false);
+  const [preloadedData, setPreloadedData] = useState<
+    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
+  >(undefined);
+
+  // update issue modal
+  const [editIssueModal, setEditIssueModal] = useState(false);
+  const [issueToEdit, setIssueToEdit] = useState<
+    (IIssue & { actionType: "edit" | "delete" }) | undefined
+  >(undefined);
+
+  // delete issue modal
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
+
   const router = useRouter();
   const { workspaceSlug, workspaceViewId } = router.query;
 
+  const { memberRole } = useProjectMyMembership();
+
   const { user } = useUser();
+  const { setToastAlert } = useToast();
 
   const { data: viewDetails, error } = useSWR(
     workspaceSlug && workspaceViewId ? WORKSPACE_VIEW_DETAILS(workspaceViewId.toString()) : null,
@@ -38,29 +76,15 @@ const WorkspaceView: React.FC = () => {
       : null
   );
 
-  const { displayFilters } = useMyIssuesFilters(workspaceSlug?.toString());
+  const { params, filters, setFilters } = useWorkspaceIssuesFilters(
+    workspaceSlug?.toString(),
+    workspaceViewId?.toString()
+  );
 
-  const params: any = {
-    assignees: viewDetails?.query_data?.assignees
-      ? viewDetails?.query_data?.assignees.join(",")
-      : undefined,
-    state: viewDetails?.query_data?.state ? viewDetails?.query_data?.state.join(",") : undefined,
-    priority: viewDetails?.query_data?.priority
-      ? viewDetails.query_data?.priority.join(",")
-      : undefined,
-    labels: viewDetails?.query_data?.labels ? viewDetails?.query_data?.labels.join(",") : undefined,
-    created_by: viewDetails?.query_data?.created_by
-      ? viewDetails?.query_data?.created_by.join(",")
-      : undefined,
-    start_date: viewDetails?.query_data?.start_date
-      ? viewDetails?.query_data?.start_date.join(",")
-      : undefined,
-    target_date: viewDetails?.query_data?.target_date
-      ? viewDetails?.query_data?.target_date.join(",")
-      : undefined,
-    sub_issue: displayFilters?.sub_issue,
-    type: displayFilters?.type ? displayFilters?.type : undefined,
-  };
+  const { isGuest, isViewer } = useWorkspaceMembers(
+    workspaceSlug?.toString(),
+    Boolean(workspaceSlug)
+  );
 
   const { data: viewIssues, mutate: mutateIssues } = useSWR(
     workspaceSlug && viewDetails ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
@@ -69,68 +93,229 @@ const WorkspaceView: React.FC = () => {
       : null
   );
 
-  return (
-    <IssueViewContextProvider>
-      <WorkspaceAuthorizationLayout
-        breadcrumbs={
-          <div className="flex gap-2 items-center">
-            <CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
-            <span className="text-sm font-medium">
-              {viewDetails ? `${viewDetails.name} Issues` : "Workspace Issues"}
-            </span>
-          </div>
-        }
-        right={
-          <div className="flex items-center gap-2">
-            <WorkspaceIssuesViewOptions />
+  const { projects: allProjects } = useProjects();
+  const joinedProjects = allProjects?.filter((p) => p.is_member);
 
-            <PrimaryButton
-              className="flex items-center gap-2"
-              onClick={() => {
-                const e = new KeyboardEvent("keydown", { key: "c" });
-                document.dispatchEvent(e);
-              }}
-            >
-              <PlusIcon className="h-4 w-4" />
-              Add Issue
-            </PrimaryButton>
-          </div>
-        }
-      >
-        <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
-          <div className="h-full w-full border-b border-custom-border-300">
-            <WorkspaceViewsNavigation user={user} />
-            {error ? (
-              <EmptyState
-                image={emptyView}
-                title="View does not exist"
-                description="The view you are looking for does not exist or has been deleted."
-                primaryButton={{
-                  text: "View other views",
-                  onClick: () => router.push(`/${workspaceSlug}/workspace-views`),
-                }}
-              />
-            ) : (
-              <div className="h-full w-full flex flex-col">
-                <SpreadsheetView
-                  spreadsheetIssues={viewIssues}
-                  mutateIssues={mutateIssues}
-                  handleIssueAction={(...args) => {}}
-                  disableUserActions={false}
-                  user={user}
-                  userAuth={{
-                    isGuest: false,
-                    isMember: false,
-                    isOwner: false,
-                    isViewer: false,
-                  }}
-                />
-              </div>
-            )}
-          </div>
+  const { data: workspaceLabels } = useSWR(
+    workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => projectIssuesServices.getWorkspaceLabels(workspaceSlug.toString()) : null
+  );
+
+  const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
+
+  const updateView = async (payload: IIssueFilterOptions) => {
+    const payloadData = {
+      query_data: payload,
+    };
+
+    await workspaceService
+      .updateView(workspaceSlug as string, workspaceViewId as string, payloadData)
+      .then((res) => {
+        mutate<IView[]>(
+          WORKSPACE_VIEWS_LIST(workspaceSlug as string),
+          (prevData) =>
+            prevData?.map((p) => {
+              if (p.id === res.id) return { ...p, ...payloadData };
+
+              return p;
+            }),
+          false
+        );
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "View updated successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "View could not be updated. Please try again.",
+        });
+      });
+  };
+
+  const makeIssueCopy = useCallback(
+    (issue: IIssue) => {
+      setCreateIssueModal(true);
+
+      setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
+    },
+    [setCreateIssueModal, setPreloadedData]
+  );
+
+  const handleEditIssue = useCallback(
+    (issue: IIssue) => {
+      setEditIssueModal(true);
+      setIssueToEdit({
+        ...issue,
+        actionType: "edit",
+        cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
+        module: issue.issue_module ? issue.issue_module.module : null,
+      });
+    },
+    [setEditIssueModal, setIssueToEdit]
+  );
+
+  const handleDeleteIssue = useCallback(
+    (issue: IIssue) => {
+      setDeleteIssueModal(true);
+      setIssueToDelete(issue);
+    },
+    [setDeleteIssueModal, setIssueToDelete]
+  );
+
+  const handleIssueAction = useCallback(
+    (issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
+      if (action === "copy") makeIssueCopy(issue);
+      else if (action === "edit") handleEditIssue(issue);
+      else if (action === "delete") handleDeleteIssue(issue);
+    },
+    [makeIssueCopy, handleEditIssue, handleDeleteIssue]
+  );
+
+  const nullFilters =
+    filters &&
+    Object.keys(filters).filter((key) => filters[key as keyof IIssueFilterOptions] === null);
+
+  const areFiltersApplied =
+    filters &&
+    Object.keys(filters).length > 0 &&
+    nullFilters.length !== Object.keys(filters).length;
+
+  const isNotAllowed = isGuest || isViewer;
+
+  return (
+    <WorkspaceAuthorizationLayout
+      breadcrumbs={
+        <div className="flex gap-2 items-center">
+          <CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
+          <span className="text-sm font-medium">
+            {viewDetails ? `${viewDetails.name} Issues` : "Workspace Issues"}
+          </span>
         </div>
-      </WorkspaceAuthorizationLayout>
-    </IssueViewContextProvider>
+      }
+      right={
+        <div className="flex items-center gap-2">
+          <WorkspaceIssuesViewOptions />
+          <PrimaryButton
+            className="flex items-center gap-2"
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", { key: "c" });
+              document.dispatchEvent(e);
+            }}
+          >
+            <PlusIcon className="h-4 w-4" />
+            Add Issue
+          </PrimaryButton>
+        </div>
+      }
+    >
+      <CreateUpdateIssueModal
+        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
+        handleClose={() => setCreateIssueModal(false)}
+        prePopulateData={{
+          ...preloadedData,
+        }}
+        onSubmit={async () => {
+          mutateIssues();
+        }}
+      />
+      <CreateUpdateIssueModal
+        isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
+        handleClose={() => setEditIssueModal(false)}
+        data={issueToEdit}
+        onSubmit={async () => {
+          mutateIssues();
+        }}
+      />
+      <DeleteIssueModal
+        handleClose={() => setDeleteIssueModal(false)}
+        isOpen={deleteIssueModal}
+        data={issueToDelete}
+        user={user}
+        onSubmit={async () => {
+          mutateIssues();
+        }}
+      />
+      <CreateUpdateViewModal
+        isOpen={createViewModal !== null}
+        handleClose={() => setCreateViewModal(null)}
+        viewType="workspace"
+        preLoadedData={createViewModal}
+        user={user}
+      />
+      <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
+        <div className="h-full w-full border-b border-custom-border-300">
+          <WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
+          {error ? (
+            <EmptyState
+              image={emptyView}
+              title="View does not exist"
+              description="The view you are looking for does not exist or has been deleted."
+              primaryButton={{
+                text: "View other views",
+                onClick: () => router.push(`/${workspaceSlug}/workspace-views`),
+              }}
+            />
+          ) : (
+            <div className="h-full w-full flex flex-col">
+              {areFiltersApplied && (
+                <>
+                  <div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
+                    <FiltersList
+                      filters={filters}
+                      setFilters={(updatedFilter) => setFilters(updatedFilter)}
+                      labels={workspaceLabels}
+                      members={workspaceMembers?.map((m) => m.member)}
+                      stateGroup={STATE_GROUP}
+                      project={joinedProjects}
+                      clearAllFilters={() =>
+                        setFilters({
+                          assignees: null,
+                          created_by: null,
+                          labels: null,
+                          priority: null,
+                          state_group: null,
+                          start_date: null,
+                          target_date: null,
+                          subscriber: null,
+                          project: null,
+                        })
+                      }
+                    />
+                    <PrimaryButton
+                      onClick={() => {
+                        if (workspaceViewId) {
+                          updateView(filters);
+                        } else
+                          setCreateViewModal({
+                            query: filters,
+                          });
+                      }}
+                      className="flex items-center gap-2 text-sm"
+                    >
+                      {!workspaceViewId && <PlusIcon className="h-4 w-4" />}
+                      {workspaceViewId ? "Update" : "Save"} view
+                    </PrimaryButton>
+                  </div>
+                  {<div className="mt-3 border-t border-custom-border-200" />}
+                </>
+              )}
+              <SpreadsheetView
+                spreadsheetIssues={viewIssues}
+                mutateIssues={mutateIssues}
+                handleIssueAction={handleIssueAction}
+                disableUserActions={isNotAllowed ?? false}
+                user={user}
+                userAuth={memberRole}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </WorkspaceAuthorizationLayout>
   );
 };
 

web/pages/[workspaceSlug]/workspace-views/all-issues.tsx

@@ -5,17 +5,21 @@ import useSWR from "swr";
 
 // hook
 import useUser from "hooks/use-user";
+import useWorkspaceMembers from "hooks/use-workspace-members";
+import useProjects from "hooks/use-projects";
 import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
+// context
+import { useProjectMyMembership } from "contexts/project-member.context";
 // services
 import workspaceService from "services/workspace.service";
+import projectIssuesServices from "services/issues.service";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 // components
-import { SpreadsheetView } from "components/core";
+import { FiltersList, SpreadsheetView } from "components/core";
 import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
-import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
 import { CreateUpdateViewModal } from "components/views";
-import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+import { CreateUpdateIssueModal, DeleteIssueModal, MyIssuesViewOptions } from "components/issues";
 // ui
 import { EmptyState, PrimaryButton } from "components/ui";
 // icons
@@ -24,9 +28,15 @@ import { CheckCircle } from "lucide-react";
 // images
 import emptyView from "public/empty-state/view.svg";
 // fetch-keys
-import { WORKSPACE_VIEW_DETAILS, WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
+import {
+  WORKSPACE_LABELS,
+  WORKSPACE_VIEW_DETAILS,
+  WORKSPACE_VIEW_ISSUES,
+} from "constants/fetch-keys";
+// constants
+import { STATE_GROUP } from "constants/project";
 // types
-import { IIssue } from "types";
+import { IIssue, IIssueFilterOptions } from "types";
 
 const WorkspaceViewAllIssue: React.FC = () => {
   const [createViewModal, setCreateViewModal] = useState<any>(null);
@@ -50,7 +60,12 @@ const WorkspaceViewAllIssue: React.FC = () => {
   const router = useRouter();
   const { workspaceSlug, workspaceViewId } = router.query;
 
+  const { filters, setFilters } = useMyIssuesFilters(workspaceSlug?.toString());
+
   const { user } = useUser();
+  const { memberRole } = useProjectMyMembership();
+
+  const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
 
   const { data: viewDetails, error } = useSWR(
     workspaceSlug && workspaceViewId ? WORKSPACE_VIEW_DETAILS(workspaceViewId.toString()) : null,
@@ -58,20 +73,20 @@ const WorkspaceViewAllIssue: React.FC = () => {
       ? () => workspaceService.getViewDetails(workspaceSlug.toString(), workspaceViewId.toString())
       : null
   );
-  const { displayFilters } = useMyIssuesFilters(workspaceSlug?.toString());
 
   const params: any = {
-    assignees: undefined,
-    state: undefined,
-    state_group: undefined,
-    subscriber: undefined,
-    priority: undefined,
-    labels: undefined,
-    created_by: undefined,
-    start_date: undefined,
-    target_date: undefined,
+    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
+    subscriber: filters?.subscriber ? filters?.subscriber.join(",") : undefined,
+    state: filters?.state ? filters?.state.join(",") : undefined,
+    state_group: filters?.state_group ? filters?.state_group.join(",") : undefined,
+    priority: filters?.priority ? filters?.priority.join(",") : undefined,
+    labels: filters?.labels ? filters?.labels.join(",") : undefined,
+    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
+    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
+    target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
+    project: filters?.project ? filters?.project.join(",") : undefined,
     sub_issue: false,
-    type: displayFilters?.type ? displayFilters?.type : undefined,
+    type: undefined,
   };
 
   const { data: viewIssues, mutate: mutateIssues } = useSWR(
@@ -118,6 +133,23 @@ const WorkspaceViewAllIssue: React.FC = () => {
     [makeIssueCopy, handleEditIssue, handleDeleteIssue]
   );
 
+  const nullFilters =
+    filters &&
+    Object.keys(filters).filter((key) => filters[key as keyof IIssueFilterOptions] === null);
+
+  const areFiltersApplied =
+    filters &&
+    Object.keys(filters).length > 0 &&
+    nullFilters.length !== Object.keys(filters).length;
+
+  const { projects: allProjects } = useProjects();
+  const joinedProjects = allProjects?.filter((p) => p.is_member);
+
+  const { data: workspaceLabels } = useSWR(
+    workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => projectIssuesServices.getWorkspaceLabels(workspaceSlug.toString()) : null
+  );
+
   return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
@@ -130,7 +162,7 @@ const WorkspaceViewAllIssue: React.FC = () => {
       }
       right={
         <div className="flex items-center gap-2">
-          <WorkspaceIssuesViewOptions />
+          <MyIssuesViewOptions />
           <PrimaryButton
             className="flex items-center gap-2"
             onClick={() => {
@@ -193,18 +225,52 @@ const WorkspaceViewAllIssue: React.FC = () => {
             />
           ) : (
             <div className="h-full w-full flex flex-col">
+              {areFiltersApplied && (
+                <>
+                  <div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
+                    <FiltersList
+                      filters={filters}
+                      setFilters={(updatedFilter) => setFilters(updatedFilter)}
+                      labels={workspaceLabels}
+                      members={workspaceMembers?.map((m) => m.member)}
+                      stateGroup={STATE_GROUP}
+                      project={joinedProjects}
+                      clearAllFilters={() =>
+                        setFilters({
+                          assignees: null,
+                          created_by: null,
+                          labels: null,
+                          priority: null,
+                          state_group: null,
+                          start_date: null,
+                          target_date: null,
+                          subscriber: null,
+                          project: null,
+                        })
+                      }
+                    />
+                    <PrimaryButton
+                      onClick={() => {
+                        setCreateViewModal({
+                          query: filters,
+                        });
+                      }}
+                      className="flex items-center gap-2 text-sm"
+                    >
+                      {!workspaceViewId && <PlusIcon className="h-4 w-4" />}
+                      {workspaceViewId ? "Update" : "Save"} view
+                    </PrimaryButton>
+                  </div>
+                  {<div className="mt-3 border-t border-custom-border-200" />}
+                </>
+              )}
               <SpreadsheetView
                 spreadsheetIssues={viewIssues}
                 mutateIssues={mutateIssues}
                 handleIssueAction={handleIssueAction}
                 disableUserActions={false}
                 user={user}
-                userAuth={{
-                  isGuest: false,
-                  isMember: false,
-                  isOwner: false,
-                  isViewer: false,
-                }}
+                userAuth={memberRole}
               />
             </div>
           )}

web/pages/[workspaceSlug]/workspace-views/assigned.tsx

@@ -5,7 +5,8 @@ import useSWR from "swr";
 
 // hook
 import useUser from "hooks/use-user";
-import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
+// context
+import { useProjectMyMembership } from "contexts/project-member.context";
 // services
 import workspaceService from "services/workspace.service";
 // layouts
@@ -52,27 +53,19 @@ const WorkspaceViewAssignedIssue: React.FC = () => {
 
   const { user } = useUser();
 
+  const { memberRole } = useProjectMyMembership();
+
+  const params: any = {
+    assignees: user?.id ?? undefined,
+    sub_issue: false,
+  };
+
   const { data: viewDetails, error } = useSWR(
     workspaceSlug && workspaceViewId ? WORKSPACE_VIEW_DETAILS(workspaceViewId.toString()) : null,
     workspaceSlug && workspaceViewId
       ? () => workspaceService.getViewDetails(workspaceSlug.toString(), workspaceViewId.toString())
       : null
   );
-  const { displayFilters } = useMyIssuesFilters(workspaceSlug?.toString());
-
-  const params: any = {
-    assignees: user?.id ?? undefined,
-    state: undefined,
-    state_group: undefined,
-    subscriber: undefined,
-    priority: undefined,
-    labels: undefined,
-    created_by: undefined,
-    start_date: undefined,
-    target_date: undefined,
-    sub_issue: false,
-    type: displayFilters?.type ? displayFilters?.type : undefined,
-  };
 
   const { data: viewIssues, mutate: mutateIssues } = useSWR(
     workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
@@ -199,12 +192,7 @@ const WorkspaceViewAssignedIssue: React.FC = () => {
                 handleIssueAction={handleIssueAction}
                 disableUserActions={false}
                 user={user}
-                userAuth={{
-                  isGuest: false,
-                  isMember: false,
-                  isOwner: false,
-                  isViewer: false,
-                }}
+                userAuth={memberRole}
               />
             </div>
           )}

web/pages/[workspaceSlug]/workspace-views/created.tsx

@@ -6,7 +6,8 @@ import useSWR from "swr";
 
 // hook
 import useUser from "hooks/use-user";
-import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
+// context
+import { useProjectMyMembership } from "contexts/project-member.context";
 // services
 import workspaceService from "services/workspace.service";
 // layouts
@@ -52,6 +53,12 @@ const WorkspaceViewCreatedIssue: React.FC = () => {
   const { workspaceSlug, workspaceViewId } = router.query;
 
   const { user } = useUser();
+  const { memberRole } = useProjectMyMembership();
+
+  const params: any = {
+    created_by: user?.id ?? undefined,
+    sub_issue: false,
+  };
 
   const { data: viewDetails, error } = useSWR(
     workspaceSlug && workspaceViewId ? WORKSPACE_VIEW_DETAILS(workspaceViewId.toString()) : null,
@@ -59,21 +66,6 @@ const WorkspaceViewCreatedIssue: React.FC = () => {
       ? () => workspaceService.getViewDetails(workspaceSlug.toString(), workspaceViewId.toString())
       : null
   );
-  const { displayFilters } = useMyIssuesFilters(workspaceSlug?.toString());
-
-  const params: any = {
-    assignees: undefined,
-    state: undefined,
-    state_group: undefined,
-    subscriber: undefined,
-    priority: undefined,
-    labels: undefined,
-    created_by: user?.id ?? undefined,
-    start_date: undefined,
-    target_date: undefined,
-    sub_issue: false,
-    type: displayFilters?.type ? displayFilters?.type : undefined,
-  };
 
   const { data: viewIssues, mutate: mutateIssues } = useSWR(
     workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
@@ -200,12 +192,7 @@ const WorkspaceViewCreatedIssue: React.FC = () => {
                 handleIssueAction={handleIssueAction}
                 disableUserActions={false}
                 user={user}
-                userAuth={{
-                  isGuest: false,
-                  isMember: false,
-                  isOwner: false,
-                  isViewer: false,
-                }}
+                userAuth={memberRole}
               />
             </div>
           )}

web/pages/[workspaceSlug]/workspace-views/index.tsx

@@ -32,27 +32,19 @@ import { WORKSPACE_VIEWS_LIST } from "constants/fetch-keys";
 import { truncateText } from "helpers/string.helper";
 
 const WorkspaceViews: NextPage = () => {
+  const [query, setQuery] = useState("");
+
   const [createUpdateViewModal, setCreateUpdateViewModal] = useState(false);
   const [selectedViewToUpdate, setSelectedViewToUpdate] = useState<IView | null>(null);
 
   const [deleteViewModal, setDeleteViewModal] = useState(false);
   const [selectedViewToDelete, setSelectedViewToDelete] = useState<IView | null>(null);
 
-  const handleEditView = (view: IView) => {
-    setSelectedViewToUpdate(view);
-    setCreateUpdateViewModal(true);
-  };
-
-  const handleDeleteView = (view: IView) => {
-    setSelectedViewToDelete(view);
-    setDeleteViewModal(true);
-  };
-
-  const [query, setQuery] = useState("");
-
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const { user } = useUser();
+
   const { data: workspaceViews } = useSWR(
     workspaceSlug ? WORKSPACE_VIEWS_LIST(workspaceSlug as string) : null,
     workspaceSlug ? () => workspaceService.getAllViews(workspaceSlug as string) : null
@@ -93,7 +85,15 @@ const WorkspaceViews: NextPage = () => {
       ? workspaceViews
       : workspaceViews?.filter((option) => option.name.toLowerCase().includes(query.toLowerCase()));
 
-  const { user } = useUser();
+  const handleEditView = (view: IView) => {
+    setSelectedViewToUpdate(view);
+    setCreateUpdateViewModal(true);
+  };
+
+  const handleDeleteView = (view: IView) => {
+    setSelectedViewToDelete(view);
+    setDeleteViewModal(true);
+  };
 
   return (
     <WorkspaceAuthorizationLayout
@@ -197,10 +197,12 @@ const WorkspaceViews: NextPage = () => {
             />
           )
         ) : (
-          <Loader className="space-y-2 p-5">
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
+          <Loader className="space-y-1.5">
+            <Loader.Item height="72px" />
+            <Loader.Item height="72px" />
+            <Loader.Item height="72px" />
+            <Loader.Item height="72px" />
+            <Loader.Item height="72px" />
           </Loader>
         )}
       </div>

web/pages/[workspaceSlug]/workspace-views/subscribed.tsx

@@ -6,7 +6,8 @@ import useSWR from "swr";
 
 // hook
 import useUser from "hooks/use-user";
-import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
+// context
+import { useProjectMyMembership } from "contexts/project-member.context";
 // services
 import workspaceService from "services/workspace.service";
 // layouts
@@ -52,6 +53,12 @@ const WorkspaceViewSubscribedIssue: React.FC = () => {
   const { workspaceSlug, workspaceViewId } = router.query;
 
   const { user } = useUser();
+  const { memberRole } = useProjectMyMembership();
+
+  const params: any = {
+    subscriber: user?.id ?? undefined,
+    sub_issue: false,
+  };
 
   const { data: viewDetails, error } = useSWR(
     workspaceSlug && workspaceViewId ? WORKSPACE_VIEW_DETAILS(workspaceViewId.toString()) : null,
@@ -59,21 +66,6 @@ const WorkspaceViewSubscribedIssue: React.FC = () => {
       ? () => workspaceService.getViewDetails(workspaceSlug.toString(), workspaceViewId.toString())
       : null
   );
-  const { displayFilters } = useMyIssuesFilters(workspaceSlug?.toString());
-
-  const params: any = {
-    assignees: undefined,
-    state: undefined,
-    state_group: undefined,
-    subscriber: user?.id ?? undefined,
-    priority: undefined,
-    labels: undefined,
-    created_by: undefined,
-    start_date: undefined,
-    target_date: undefined,
-    sub_issue: false,
-    type: displayFilters?.type ? displayFilters?.type : undefined,
-  };
 
   const { data: viewIssues, mutate: mutateIssues } = useSWR(
     workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
@@ -200,12 +192,7 @@ const WorkspaceViewSubscribedIssue: React.FC = () => {
                 handleIssueAction={handleIssueAction}
                 disableUserActions={false}
                 user={user}
-                userAuth={{
-                  isGuest: false,
-                  isMember: false,
-                  isOwner: false,
-                  isViewer: false,
-                }}
+                userAuth={memberRole}
               />
             </div>
           )}