fix: project views bugs related to store refactor. (#3391)

* chore: remove debounce logic to fix create/ update view modal bugs.

* fix: bug in delete views not mutating the store.

* chore: replace `Project Empty State` with `Project Views Empty State`.

* chore: add issue peek overview.

* refactor: issue update, delete actions for project views layout.
fix: issue update and delete action throwing error bug.
fix: issue quick add throwing error bug.

web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx

@@ -4,33 +4,28 @@ import { observer } from "mobx-react-lite";
 import { useIssues } from "hooks/store";
 // components
 import { ProjectIssueQuickActions } from "components/issues";
+import { BaseCalendarRoot } from "../base-calendar-root";
 // types
 import { TIssue } from "@plane/types";
 import { EIssueActions } from "../../types";
-import { BaseCalendarRoot } from "../base-calendar-root";
+// constants
 import { EIssuesStoreType } from "constants/issue";
-import { useMemo } from "react";
 
-export const ProjectViewCalendarLayout: React.FC = observer(() => {
+export interface IViewCalendarLayout {
+  issueActions: {
+    [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
+    [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
+    [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
+  };
+}
+
+export const ProjectViewCalendarLayout: React.FC<IViewCalendarLayout> = observer((props) => {
+  const { issueActions } = props;
+  // store
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
+  // router
   const router = useRouter();
-  const { workspaceSlug, projectId, viewId } = router.query;
+  const { viewId } = router.query;
-
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !projectId) return;
-
-        await issues.updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, issue);
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !projectId) return;
-
-        await issues.removeIssue(workspaceSlug.toString(), projectId.toString(), issue.id);
-      },
-    }),
-    [issues, workspaceSlug, projectId]
-  );
 
   return (
     <BaseCalendarRoot

web/components/issues/issue-layouts/gantt/project-view-root.tsx

@@ -4,28 +4,34 @@ import { observer } from "mobx-react-lite";
 import { useIssues } from "hooks/store";
 // components
 import { BaseGanttRoot } from "./base-gantt-root";
+// constants
 import { EIssuesStoreType } from "constants/issue";
+// types
 import { EIssueActions } from "../types";
 import { TIssue } from "@plane/types";
 
-export const ProjectViewGanttLayout: React.FC = observer(() => {
+export interface IViewGanttLayout {
+  issueActions: {
+    [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
+    [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
+    [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
+  };
+}
+
+export const ProjectViewGanttLayout: React.FC<IViewGanttLayout> = observer((props) => {
+  const { issueActions } = props;
+  // store
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
   // router
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { viewId } = router.query;
 
-  const issueActions = {
+  return (
-    [EIssueActions.UPDATE]: async (issue: TIssue) => {
+    <BaseGanttRoot
-      if (!workspaceSlug) return;
+      issueFiltersStore={issuesFilter}
-
+      issueStore={issues}
-      await issues.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, issue);
+      issueActions={issueActions}
-    },
+      viewId={viewId?.toString()}
-    [EIssueActions.DELETE]: async (issue: TIssue) => {
+    />
-      if (!workspaceSlug) return;
+  );
-
-      await issues.removeIssue(workspaceSlug.toString(), issue.project_id, issue.id);
-    },
-  };
-
-  return <BaseGanttRoot issueFiltersStore={issuesFilter} issueStore={issues} issueActions={issueActions} />;
 });

web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx

@@ -1,38 +1,32 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 // hooks
 import { useIssues } from "hooks/store";
 // constant
+import { EIssuesStoreType } from "constants/issue";
+// types
 import { TIssue } from "@plane/types";
 import { EIssueActions } from "../../types";
-import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
 // components
 import { BaseKanBanRoot } from "../base-kanban-root";
-import { EIssuesStoreType } from "constants/issue";
+import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
 
-export interface IViewKanBanLayout {}
+export interface IViewKanBanLayout {
+  issueActions: {
+    [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
+    [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
+    [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
+  };
+}
 
-export const ProjectViewKanBanLayout: React.FC = observer(() => {
+export const ProjectViewKanBanLayout: React.FC<IViewKanBanLayout> = observer((props) => {
+  const { issueActions } = props;
+  // router
   const router = useRouter();
-  const { workspaceSlug } = router.query as { workspaceSlug: string; projectId: string };
+  const { viewId } = router.query;
 
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug) return;
-
-        await issues.updateIssue(workspaceSlug, issue.project_id, issue.id, issue);
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug) return;
-
-        await issues.removeIssue(workspaceSlug, issue.project_id, issue.id);
-      },
-    }),
-    [issues, workspaceSlug]
-  );
 
   return (
     <BaseKanBanRoot
@@ -42,6 +36,7 @@ export const ProjectViewKanBanLayout: React.FC = observer(() => {
       showLoader={true}
       QuickActions={ProjectIssueQuickActions}
       currentStore={EIssuesStoreType.PROJECT_VIEW}
+      viewId={viewId?.toString()}
     />
   );
 });

web/components/issues/issue-layouts/list/roots/project-view-root.tsx

@@ -1,43 +1,35 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // store
 import { useIssues } from "hooks/store";
 // constants
-import { useRouter } from "next/router";
+import { EIssuesStoreType } from "constants/issue";
+// types
 import { EIssueActions } from "../../types";
 import { TIssue } from "@plane/types";
 // components
 import { BaseListRoot } from "../base-list-root";
 import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
-import { EIssuesStoreType } from "constants/issue";
 
-export interface IViewListLayout {}
+export interface IViewListLayout {
+  issueActions: {
+    [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
+    [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
+    [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
+  };
+}
 
-export const ProjectViewListLayout: React.FC = observer(() => {
+export const ProjectViewListLayout: React.FC<IViewListLayout> = observer((props) => {
+  const { issueActions } = props;
   // store
   const { issuesFilter, issues } = useIssues(EIssuesStoreType.PROJECT_VIEW);
 
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
+  const { workspaceSlug, projectId, viewId } = router.query;
 
   if (!workspaceSlug || !projectId) return null;
 
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !projectId) return;
-
-        await issues.updateIssue(workspaceSlug, projectId, issue.id, issue);
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !projectId) return;
-
-        await issues.removeIssue(workspaceSlug, projectId, issue.id);
-      },
-    }),
-    [issues, workspaceSlug, projectId]
-  );
-
   return (
     <BaseListRoot
       issuesFilter={issuesFilter}
@@ -45,6 +37,7 @@ export const ProjectViewListLayout: React.FC = observer(() => {
       QuickActions={ProjectIssueQuickActions}
       issueActions={issueActions}
       currentStore={EIssuesStoreType.PROJECT_VIEW}
+      viewId={viewId?.toString()}
     />
   );
 });

web/components/issues/issue-layouts/roots/project-view-layout-root.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
@@ -6,16 +6,21 @@ import useSWR from "swr";
 import { useIssues } from "hooks/store";
 // components
 import {
-  ProjectEmptyState,
+  IssuePeekOverview,
   ProjectViewAppliedFiltersRoot,
   ProjectViewCalendarLayout,
+  ProjectViewEmptyState,
   ProjectViewGanttLayout,
   ProjectViewKanBanLayout,
   ProjectViewListLayout,
   ProjectViewSpreadsheetLayout,
 } from "components/issues";
 import { Spinner } from "@plane/ui";
+// constants
 import { EIssuesStoreType } from "constants/issue";
+// types
+import { TIssue } from "@plane/types";
+import { EIssueActions } from "../types";
 
 export const ProjectViewLayoutRoot: React.FC = observer(() => {
   // router
@@ -39,6 +44,22 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
     }
   );
 
+  const issueActions = useMemo(
+    () => ({
+      [EIssueActions.UPDATE]: async (issue: TIssue) => {
+        if (!workspaceSlug || !projectId) return;
+
+        await issues.updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, issue, viewId?.toString());
+      },
+      [EIssueActions.DELETE]: async (issue: TIssue) => {
+        if (!workspaceSlug || !projectId) return;
+
+        await issues.removeIssue(workspaceSlug.toString(), projectId.toString(), issue.id, viewId?.toString());
+      },
+    }),
+    [issues, workspaceSlug, projectId, viewId]
+  );
+
   const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
 
   if (!workspaceSlug || !projectId || !viewId) return <></>;
@@ -53,22 +74,26 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
       ) : (
         <>
           {!issues?.groupedIssueIds ? (
-            // TODO: Replace this with project view empty state
+            <ProjectViewEmptyState />
-            <ProjectEmptyState />
           ) : (
+            <>
               <div className="relative h-full w-full overflow-auto">
                 {activeLayout === "list" ? (
-                <ProjectViewListLayout />
+                  <ProjectViewListLayout issueActions={issueActions} />
                 ) : activeLayout === "kanban" ? (
-                <ProjectViewKanBanLayout />
+                  <ProjectViewKanBanLayout issueActions={issueActions} />
                 ) : activeLayout === "calendar" ? (
-                <ProjectViewCalendarLayout />
+                  <ProjectViewCalendarLayout issueActions={issueActions} />
                 ) : activeLayout === "gantt_chart" ? (
-                <ProjectViewGanttLayout />
+                  <ProjectViewGanttLayout issueActions={issueActions} />
                 ) : activeLayout === "spreadsheet" ? (
-                <ProjectViewSpreadsheetLayout />
+                  <ProjectViewSpreadsheetLayout issueActions={issueActions} />
                 ) : null}
               </div>
+
+              {/* peek overview */}
+              <IssuePeekOverview />
+            </>
           )}
         </>
       )}

web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx

@@ -1,43 +1,40 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 // mobx store
 import { useIssues } from "hooks/store";
 // components
 import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
+import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
+// types
 import { EIssueActions } from "../../types";
 import { TIssue } from "@plane/types";
-import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
+// constants
 import { EIssuesStoreType } from "constants/issue";
 
-export const ProjectViewSpreadsheetLayout: React.FC = observer(() => {
+export interface IViewSpreadsheetLayout {
+  issueActions: {
+    [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
+    [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
+    [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
+  };
+}
+
+export const ProjectViewSpreadsheetLayout: React.FC<IViewSpreadsheetLayout> = observer((props) => {
+  const { issueActions } = props;
+  // router
   const router = useRouter();
-  const { workspaceSlug } = router.query as { workspaceSlug: string };
+  const { viewId } = router.query;
 
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
 
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug) return;
-
-        await issues.updateIssue(workspaceSlug, issue.project_id, issue.id, issue);
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug) return;
-
-        await issues.removeIssue(workspaceSlug, issue.project_id, issue.id);
-      },
-    }),
-    [issues, workspaceSlug]
-  );
-
   return (
     <BaseSpreadsheetRoot
       issueStore={issues}
       issueFiltersStore={issuesFilter}
       issueActions={issueActions}
       QuickActions={ProjectIssueQuickActions}
+      viewId={viewId?.toString()}
     />
   );
 });

web/components/views/form.tsx

@@ -208,7 +208,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
         <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={4}>
           Cancel
         </Button>
-        <Button variant="primary" size="sm" type="submit" tabIndex={5}>
+        <Button variant="primary" size="sm" type="submit" tabIndex={5} disabled={isSubmitting}>
           {data
             ? isSubmitting
               ? "Updating View..."

web/components/views/modal.tsx

@@ -1,7 +1,6 @@
 import { FC, Fragment } from "react";
 import { observer } from "mobx-react-lite";
 import { Dialog, Transition } from "@headlessui/react";
-import { debounce } from "lodash";
 // hooks
 import { useProjectView } from "hooks/store";
 import useToast from "hooks/use-toast";
@@ -33,9 +32,7 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
   const handleCreateView = async (payload: IProjectView) => {
     await createView(workspaceSlug, projectId, payload)
       .then(() => {
-        // console.log("after calling store");
         handleClose();
-        // console.log("after closing");
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -68,8 +65,6 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
     else await handleUpdateView(formData);
   };
 
-  const debouncedFormSubmit = debounce(handleFormSubmit, 10, { leading: false, trailing: true });
-
   return (
     <Transition.Root show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
@@ -100,7 +95,7 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
                 <ProjectViewForm
                   data={data}
                   handleClose={handleClose}
-                  handleFormSubmit={debouncedFormSubmit as (formData: IProjectView) => Promise<void>}
+                  handleFormSubmit={handleFormSubmit}
                   preLoadedData={preLoadedData}
                 />
               </Dialog.Panel>

web/store/project-view.store.ts

@@ -1,4 +1,4 @@
-import { omit, set } from "lodash";
+import { set } from "lodash";
 import { observable, action, makeObservable, runInAction, computed } from "mobx";
 // services
 import { ViewService } from "services/view.service";
@@ -163,7 +163,7 @@ export class ProjectViewStore implements IProjectViewStore {
   deleteView = async (workspaceSlug: string, projectId: string, viewId: string): Promise<any> => {
     await this.viewService.deleteView(workspaceSlug, projectId, viewId).then(() => {
       runInAction(() => {
-        omit(this.viewMap, [viewId]);
+        delete this.viewMap[viewId];
       });
     });
   };