fix: issues mutation on changing filters (#2485)

* chore: refetch issues on filters and display filters change * fix: issues list mutation after creating an issue * fix: module issues fetch * fix: build error
makeplane · Oct 19, 2023 · 0b8367a · 0b8367a
1 parent 85a4713
commit 0b8367a
Show file tree

Hide file tree

Showing 16 changed files with 173 additions and 181 deletions.
diff --git a/web/components/core/views/inline-issue-create-wrapper.tsx b/web/components/core/views/inline-issue-create-wrapper.tsx
@@ -176,7 +176,7 @@ export const InlineCreateIssueFormWrapper: React.FC<Props> = (props) => {
     reset({ ...defaultValues });
 
     await (!isDraftIssues
-      ? issueService.createIssues(workspaceSlug.toString(), projectId.toString(), formData, user)
+      ? issueService.createIssue(workspaceSlug.toString(), projectId.toString(), formData, user)
       : issueDraftService.createDraftIssue(workspaceSlug.toString(), projectId.toString(), formData)
     )
       .then(async (res) => {

diff --git a/web/components/gantt-chart/sidebar.tsx b/web/components/gantt-chart/sidebar.tsx
@@ -1,13 +1,11 @@
 import { useRouter } from "next/router";
-// react-beautiful-dnd
 import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd";
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+import { MoreVertical } from "lucide-react";
 // hooks
 import { useChart } from "./hooks";
 // ui
 import { Loader } from "@plane/ui";
-// icons
-import { MoreVertical } from "lucide-react";
 // helpers
 import { findTotalDaysInRange } from "helpers/date-time.helper";
 // types
@@ -124,8 +122,8 @@ export const GanttSidebar: React.FC<Props> = (props) => {
                                 className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100"
                                 {...provided.dragHandleProps}
                               >
-                                <MoreVertical className="h-4" />
-                                <MoreVertical className="h-4 -ml-5" />
+                                <MoreVertical className="h-3.5 w-3.5" />
+                                <MoreVertical className="h-3.5 w-3.5 -ml-5" />
                               </button>
                             )}
                             <div className="flex-grow truncate h-full flex items-center justify-between gap-2">

diff --git a/web/components/issues/draft-issue-modal.tsx b/web/components/issues/draft-issue-modal.tsx
@@ -304,7 +304,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = observer(
     if (!workspaceSlug || !activeProject) return;
 
     await issueService
-      .createIssues(workspaceSlug as string, activeProject ?? "", payload, user)
+      .createIssue(workspaceSlug as string, activeProject ?? "", payload, user)
       .then(async (res) => {
         mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
         if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res.id, payload.cycle);

diff --git a/web/components/issues/form.tsx b/web/components/issues/form.tsx
@@ -1,6 +1,9 @@
 import React, { FC, useState, useEffect, useRef } from "react";
 import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // services
 import { AIService } from "services/ai.service";
 import { FileService } from "services/file.service";
@@ -26,7 +29,7 @@ import { Button, Input, ToggleSwitch } from "@plane/ui";
 // icons
 import { LayoutPanelTop, Sparkle, X } from "lucide-react";
 // types
-import type { IUser, IIssue, ISearchIssueResponse } from "types";
+import type { IIssue, ISearchIssueResponse } from "types";
 // components
 import { RichTextEditorWithRef } from "@plane/rich-text-editor";
 
@@ -55,7 +58,6 @@ export interface IssueFormProps {
   setCreateMore: React.Dispatch<React.SetStateAction<boolean>>;
   handleDiscardClose: () => void;
   status: boolean;
-  user: IUser | undefined;
   handleFormDirty: (payload: Partial<IIssue> | null) => void;
   fieldsToShow: (
     | "project"
@@ -77,7 +79,7 @@ export interface IssueFormProps {
 const aiService = new AIService();
 const fileService = new FileService();
 
-export const IssueForm: FC<IssueFormProps> = (props) => {
+export const IssueForm: FC<IssueFormProps> = observer((props) => {
   const {
     handleFormSubmit,
     initialData,
@@ -87,7 +89,6 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
     setCreateMore,
     handleDiscardClose,
     status,
-    user,
     fieldsToShow,
     handleFormDirty,
   } = props;
@@ -105,6 +106,10 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const { user: userStore } = useMobxStore();
+
+  const user = userStore.currentUser;
+
   const { setToastAlert } = useToast();
 
   const {
@@ -174,7 +179,7 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
   };
 
   const handleAutoGenerateDescription = async () => {
-    if (!workspaceSlug || !projectId) return;
+    if (!workspaceSlug || !projectId || !user) return;
 
     setIAmFeelingLucky(true);
 
@@ -251,13 +256,13 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
             isOpen={stateModal}
             handleClose={() => setStateModal(false)}
             projectId={projectId}
-            user={user}
+            user={user ?? undefined}
           />
           <CreateLabelModal
             isOpen={labelModal}
             handleClose={() => setLabelModal(false)}
             projectId={projectId}
-            user={user}
+            user={user ?? undefined}
             onSuccess={(response) => {
               setValue("labels", [...watch("labels"), response.id]);
               setValue("labels_list", [...watch("labels_list"), response.id]);
@@ -605,4 +610,4 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
       </form>
     </>
   );
-};
+});
diff --git a/web/components/issues/issue-layouts/kanban/headers/priority.tsx b/web/components/issues/issue-layouts/kanban/headers/priority.tsx
@@ -1,6 +1,4 @@
-// mobx
 import { observer } from "mobx-react-lite";
-// lucide icons
 import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
@@ -44,35 +42,35 @@ const Icon = ({ priority }: any) => (
   </div>
 );
 
-export const PriorityHeader: React.FC<IPriorityHeader> = observer(
-  ({ column_id, sub_group_by, group_by, header_type, issues_count, kanBanToggle, handleKanBanToggle }) => {
-    const priority = column_id && issuePriorityByKey(column_id);
+export const PriorityHeader: React.FC<IPriorityHeader> = observer((props) => {
+  const { column_id, sub_group_by, group_by, header_type, issues_count, kanBanToggle, handleKanBanToggle } = props;
 
-    return (
-      <>
-        {priority &&
-          (sub_group_by && header_type === "sub_group_by" ? (
-            <HeaderSubGroupByCard
-              column_id={column_id}
-              icon={<Icon priority={priority?.key} />}
-              title={priority?.key || ""}
-              count={issues_count}
-              kanBanToggle={kanBanToggle}
-              handleKanBanToggle={handleKanBanToggle}
-            />
-          ) : (
-            <HeaderGroupByCard
-              sub_group_by={sub_group_by}
-              group_by={group_by}
-              column_id={column_id}
-              icon={<Icon priority={priority?.key} />}
-              title={priority?.key || ""}
-              count={issues_count}
-              kanBanToggle={kanBanToggle}
-              handleKanBanToggle={handleKanBanToggle}
-            />
-          ))}
-      </>
-    );
-  }
-);
+  const priority = column_id && issuePriorityByKey(column_id);
+
+  return (
+    <>
+      {priority &&
+        (sub_group_by && header_type === "sub_group_by" ? (
+          <HeaderSubGroupByCard
+            column_id={column_id}
+            icon={<Icon priority={priority?.key} />}
+            title={priority?.title || ""}
+            count={issues_count}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        ) : (
+          <HeaderGroupByCard
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            column_id={column_id}
+            icon={<Icon priority={priority?.key} />}
+            title={priority?.title || ""}
+            count={issues_count}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        ))}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/headers/priority.tsx b/web/components/issues/issue-layouts/list/headers/priority.tsx
@@ -1,6 +1,5 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
-// lucide icons
 import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
@@ -45,7 +44,11 @@ export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
   return (
     <>
       {priority && (
-        <HeaderGroupByCard icon={<Icon priority={priority?.key} />} title={priority?.key || ""} count={issues_count} />
+        <HeaderGroupByCard
+          icon={<Icon priority={priority?.key} />}
+          title={priority?.title || ""}
+          count={issues_count}
+        />
       )}
     </>
   );