fix: mutation for issue update on both kanban & list (#436)

* refactor: issues filter logic

* fix: removed fetch logic from hooks

* feat: filter by assignee and label

* chore: remove filter buttons

* feat: filter options

* fix: mutation for issue update on both kanban & list

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>

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

@@ -12,13 +12,13 @@ import stateService from "services/state.service";
 import projectService from "services/project.service";
 import modulesService from "services/modules.service";
 // hooks
-import useIssueView from "hooks/use-issue-view";
+import useIssuesView from "hooks/use-issues-view";
 // components
 import { AllLists, AllBoards } from "components/core";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 // icons
-import { TrashIcon } from "@heroicons/react/24/outline";
+import { PlusIcon, RectangleStackIcon, TrashIcon } from "@heroicons/react/24/outline";
 // helpers
 import { getStatesList } from "helpers/state.helper";
 // types
@@ -26,32 +26,29 @@ import { CycleIssueResponse, IIssue, ModuleIssueResponse, UserAuth } from "types
 // fetch-keys
 import {
   CYCLE_ISSUES,
+  CYCLE_ISSUES_WITH_PARAMS,
   MODULE_ISSUES,
-  PROJECT_ISSUES_LIST,
+  MODULE_ISSUES_WITH_PARAMS,
+  PROJECT_ISSUES_LIST_WITH_PARAMS,
   PROJECT_MEMBERS,
   STATE_LIST,
 } from "constants/fetch-keys";
+import { EmptySpace, EmptySpaceItem } from "components/ui";
 
 type Props = {
   type?: "issue" | "cycle" | "module";
-  issues: IIssue[];
   openIssuesListModal?: () => void;
   userAuth: UserAuth;
 };
 
-export const IssuesView: React.FC<Props> = ({
-  type = "issue",
-  issues,
-  openIssuesListModal,
-  userAuth,
-}) => {
+export const IssuesView: React.FC<Props> = ({ type = "issue", openIssuesListModal, userAuth }) => {
   // create issue modal
   const [createIssueModal, setCreateIssueModal] = useState(false);
   const [preloadedData, setPreloadedData] = useState<
     (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
   >(undefined);
 
-  // updates issue modal
+  // update issue modal
   const [editIssueModal, setEditIssueModal] = useState(false);
   const [issueToEdit, setIssueToEdit] = useState<
     (IIssue & { actionType: "edit" | "delete" }) | undefined
@@ -68,11 +65,13 @@ export const IssuesView: React.FC<Props> = ({
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
   const {
-    issueView,
     groupedByIssues,
+    issueView,
     groupByProperty: selectedGroup,
     orderBy,
-  } = useIssueView(issues);
+    filters,
+    setFilters,
+  } = useIssuesView();
 
   const { data: stateGroups } = useSWR(
     workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
@@ -101,7 +100,7 @@ export const IssuesView: React.FC<Props> = ({
     (result: DropResult) => {
       setTrashBox(false);
 
-      if (!result.destination || !workspaceSlug || !projectId) return;
+      if (!result.destination || !workspaceSlug || !projectId || !groupedByIssues) return;
 
       const { source, destination } = result;
 
@@ -156,90 +155,99 @@ export const IssuesView: React.FC<Props> = ({
           draggedItem.sort_order = newSortOrder;
         }
 
-        if (orderBy === "sort_order" || source.droppableId !== destination.droppableId) {
-          const sourceGroup = source.droppableId; // source group id
-          const destinationGroup = destination.droppableId; // destination group id
+        const destinationGroup = destination.droppableId; // destination group id
 
-          if (!sourceGroup || !destinationGroup) return;
+        if (orderBy === "sort_order" || source.droppableId !== destination.droppableId) {
+          // different group/column;
+
+          // source.droppableId !== destination.droppableId -> even if order by is not sort_order,
+          // if the issue is moved to a different group, then we will change the group of the
+          // dragged item(or issue)
 
           if (selectedGroup === "priority") draggedItem.priority = destinationGroup;
-          else if (selectedGroup === "state_detail.name") {
-            const destinationState = states?.find((s) => s.name === destinationGroup);
+          else if (selectedGroup === "state") draggedItem.state = destinationGroup;
+        }
 
-            if (!destinationState) return;
+        const sourceGroup = source.droppableId; // source group id
 
-            draggedItem.state = destinationState.id;
-            draggedItem.state_detail = destinationState;
-          }
-
-          if (cycleId)
-            mutate<CycleIssueResponse[]>(
-              CYCLE_ISSUES(cycleId as string),
-              (prevData) => {
-                if (!prevData) return prevData;
-                const updatedIssues = prevData.map((issue) => {
-                  if (issue.issue_detail.id === draggedItem.id) {
-                    return {
-                      ...issue,
-                      issue_detail: draggedItem,
-                    };
-                  }
-                  return issue;
-                });
-                return [...updatedIssues];
-              },
-              false
-            );
-
-          if (moduleId)
-            mutate<ModuleIssueResponse[]>(
-              MODULE_ISSUES(moduleId as string),
-              (prevData) => {
-                if (!prevData) return prevData;
-                const updatedIssues = prevData.map((issue) => {
-                  if (issue.issue_detail.id === draggedItem.id) {
-                    return {
-                      ...issue,
-                      issue_detail: draggedItem,
-                    };
-                  }
-                  return issue;
-                });
-                return [...updatedIssues];
-              },
-              false
-            );
-
-          mutate<IIssue[]>(
-            PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
+        // TODO: move this mutation logic to a separate function
+        if (cycleId)
+          mutate<{
+            [key: string]: IIssue[];
+          }>(
+            CYCLE_ISSUES_WITH_PARAMS(cycleId as string),
             (prevData) => {
               if (!prevData) return prevData;
 
-              const updatedIssues = prevData.map((i) => {
-                if (i.id === draggedItem.id) return draggedItem;
+              const sourceGroupArray = prevData[sourceGroup];
+              const destinationGroupArray = prevData[destinationGroup];
 
-                return i;
-              });
+              sourceGroupArray.splice(source.index, 1);
+              destinationGroupArray.splice(destination.index, 0, draggedItem);
 
-              return updatedIssues;
+              return {
+                ...prevData,
+                [sourceGroup]: sourceGroupArray,
+                [destinationGroup]: destinationGroupArray,
+              };
+            },
+            false
+          );
+        else if (moduleId)
+          mutate<{
+            [key: string]: IIssue[];
+          }>(
+            MODULE_ISSUES_WITH_PARAMS(moduleId as string),
+            (prevData) => {
+              if (!prevData) return prevData;
+
+              const sourceGroupArray = prevData[sourceGroup];
+              const destinationGroupArray = prevData[destinationGroup];
+
+              sourceGroupArray.splice(source.index, 1);
+              destinationGroupArray.splice(destination.index, 0, draggedItem);
+
+              return {
+                ...prevData,
+                [sourceGroup]: sourceGroupArray,
+                [destinationGroup]: destinationGroupArray,
+              };
+            },
+            false
+          );
+        else
+          mutate<{ [key: string]: IIssue[] }>(
+            PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string),
+            (prevData) => {
+              if (!prevData) return prevData;
+
+              const sourceGroupArray = prevData[sourceGroup];
+              const destinationGroupArray = prevData[destinationGroup];
+
+              sourceGroupArray.splice(source.index, 1);
+              destinationGroupArray.splice(destination.index, 0, draggedItem);
+
+              return {
+                ...prevData,
+                [sourceGroup]: sourceGroupArray,
+                [destinationGroup]: destinationGroupArray,
+              };
             },
             false
           );
 
-          // patch request
-          issuesService
-            .patchIssue(workspaceSlug as string, projectId as string, draggedItem.id, {
-              priority: draggedItem.priority,
-              state: draggedItem.state,
-              sort_order: draggedItem.sort_order,
-            })
-            .then((res) => {
-              if (cycleId) mutate(CYCLE_ISSUES(cycleId as string));
-              if (moduleId) mutate(MODULE_ISSUES(moduleId as string));
-
-              mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
-            });
-        }
+        // patch request
+        issuesService
+          .patchIssue(workspaceSlug as string, projectId as string, draggedItem.id, {
+            priority: draggedItem.priority,
+            state: draggedItem.state,
+            sort_order: draggedItem.sort_order,
+          })
+          .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));
+          });
       }
     },
     [
@@ -250,17 +258,15 @@ export const IssuesView: React.FC<Props> = ({
       projectId,
       selectedGroup,
       orderBy,
-      states,
       handleDeleteIssue,
     ]
   );
 
   const addIssueToState = useCallback(
-    (groupTitle: string, stateId: string | null) => {
+    (groupTitle: string) => {
       setCreateIssueModal(true);
       if (selectedGroup)
         setPreloadedData({
-          state: stateId ?? undefined,
           [selectedGroup]: groupTitle,
           actionType: "createIssue",
         });
@@ -372,69 +378,116 @@ export const IssuesView: React.FC<Props> = ({
         isOpen={deleteIssueModal}
         data={issueToDelete}
       />
-
-      <div className="relative">
-        <DragDropContext onDragEnd={handleOnDragEnd}>
-          <StrictModeDroppable droppableId="trashBox">
-            {(provided, snapshot) => (
-              <div
-                className={`${
-                  trashBox ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
-                } fixed top-9 right-9 z-20 flex h-28 w-96 items-center justify-center gap-2 rounded border-2 border-red-500 bg-red-100 p-3 text-xs font-medium italic text-red-500 ${
-                  snapshot.isDraggingOver ? "bg-red-500 text-white" : ""
-                } duration-200`}
-                ref={provided.innerRef}
-                {...provided.droppableProps}
+      <div className="flex items-center gap-2">
+        {Object.keys(filters).map((key) => {
+          if (filters[key as keyof typeof filters] !== null)
+            return (
+              <button
+                key={key}
+                type="button"
+                className="rounded bg-black p-2 text-xs text-white"
+                onClick={() =>
+                  setFilters({
+                    [key]: null,
+                  })
+                }
               >
-                <TrashIcon className="h-4 w-4" />
-                Drop issue here to delete
-              </div>
-            )}
-          </StrictModeDroppable>
-          {issueView === "list" ? (
-            <AllLists
-              type={type}
-              issues={issues}
-              states={states}
-              members={members}
-              addIssueToState={addIssueToState}
-              makeIssueCopy={makeIssueCopy}
-              handleEditIssue={handleEditIssue}
-              handleDeleteIssue={handleDeleteIssue}
-              openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
-              removeIssue={
-                type === "cycle"
-                  ? removeIssueFromCycle
-                  : type === "module"
-                  ? removeIssueFromModule
-                  : null
-              }
-              userAuth={userAuth}
-            />
-          ) : (
-            <AllBoards
-              type={type}
-              issues={issues}
-              states={states}
-              members={members}
-              addIssueToState={addIssueToState}
-              makeIssueCopy={makeIssueCopy}
-              handleEditIssue={handleEditIssue}
-              openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
-              handleDeleteIssue={handleDeleteIssue}
-              handleTrashBox={handleTrashBox}
-              removeIssue={
-                type === "cycle"
-                  ? removeIssueFromCycle
-                  : type === "module"
-                  ? removeIssueFromModule
-                  : null
-              }
-              userAuth={userAuth}
-            />
-          )}
-        </DragDropContext>
+                Remove {key} filter
+              </button>
+            );
+        })}
       </div>
+      <DragDropContext onDragEnd={handleOnDragEnd}>
+        <StrictModeDroppable droppableId="trashBox">
+          {(provided, snapshot) => (
+            <div
+              className={`${
+                trashBox ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
+              } fixed top-9 right-9 z-20 flex h-28 w-96 flex-col items-center justify-center gap-2 rounded border-2 border-red-500 bg-red-100 p-3 text-xs font-medium italic text-red-500 ${
+                snapshot.isDraggingOver ? "bg-red-500 text-white" : ""
+              } duration-200`}
+              ref={provided.innerRef}
+              {...provided.droppableProps}
+            >
+              <TrashIcon className="h-4 w-4" />
+              Drop issue here to delete
+              {provided.placeholder}
+            </div>
+          )}
+        </StrictModeDroppable>
+        {groupedByIssues ? (
+          Object.keys(groupedByIssues).length > 0 ? (
+            <>
+              {issueView === "list" ? (
+                <AllLists
+                  type={type}
+                  states={states}
+                  members={members}
+                  addIssueToState={addIssueToState}
+                  makeIssueCopy={makeIssueCopy}
+                  handleEditIssue={handleEditIssue}
+                  handleDeleteIssue={handleDeleteIssue}
+                  openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
+                  removeIssue={
+                    type === "cycle"
+                      ? removeIssueFromCycle
+                      : type === "module"
+                      ? removeIssueFromModule
+                      : null
+                  }
+                  userAuth={userAuth}
+                />
+              ) : (
+                <AllBoards
+                  type={type}
+                  states={states}
+                  addIssueToState={addIssueToState}
+                  makeIssueCopy={makeIssueCopy}
+                  handleEditIssue={handleEditIssue}
+                  openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
+                  handleDeleteIssue={handleDeleteIssue}
+                  handleTrashBox={handleTrashBox}
+                  removeIssue={
+                    type === "cycle"
+                      ? removeIssueFromCycle
+                      : type === "module"
+                      ? removeIssueFromModule
+                      : null
+                  }
+                  userAuth={userAuth}
+                />
+              )}
+            </>
+          ) : (
+            <div className="grid h-full w-full place-items-center px-4 sm:px-0">
+              <EmptySpace
+                title="You don't have any issue yet."
+                description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
+                Icon={RectangleStackIcon}
+              >
+                <EmptySpaceItem
+                  title="Create a new issue"
+                  description={
+                    <span>
+                      Use <pre className="inline rounded bg-gray-200 px-2 py-1">C</pre> shortcut to
+                      create a new issue
+                    </span>
+                  }
+                  Icon={PlusIcon}
+                  action={() => {
+                    const e = new KeyboardEvent("keydown", {
+                      key: "c",
+                    });
+                    document.dispatchEvent(e);
+                  }}
+                />
+              </EmptySpace>
+            </div>
+          )
+        ) : (
+          <p className="text-center">Loading...</p>
+        )}
+      </DragDropContext>
     </>
   );
 };