From 85894db30c00437dd5184e1b6c057809084b9467 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 1 Sep 2023 11:42:01 +0530
Subject: [PATCH 1/5] fix: side peek modal shaking

---
 .../issues/peek-overview/layout.tsx           | 51 +++++++++----------
 1 file changed, 24 insertions(+), 27 deletions(-)

diff --git a/apps/app/components/issues/peek-overview/layout.tsx b/apps/app/components/issues/peek-overview/layout.tsx
index 50fa5df6829..68d4913c0e2 100644
--- a/apps/app/components/issues/peek-overview/layout.tsx
+++ b/apps/app/components/issues/peek-overview/layout.tsx
@@ -81,7 +81,6 @@ export const IssuePeekOverview: React.FC<Props> = observer(
           setIsSidePeekOpen(false);
         }
       } else {
-        console.log("Triggered");
         setIsSidePeekOpen(false);
         setIsModalPeekOpen(false);
       }
@@ -90,32 +89,30 @@ export const IssuePeekOverview: React.FC<Props> = observer(
     return (
       <>
         <Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
-          <Dialog as="div" className="relative z-20" onClose={handleClose}>
-            <div className="fixed inset-0 z-20 overflow-y-auto">
-              <div className="relative h-full w-full">
-                <Transition.Child
-                  as={React.Fragment}
-                  enter="transition-transform duration-300"
-                  enterFrom="translate-x-full"
-                  enterTo="translate-x-0"
-                  leave="transition-transform duration-200"
-                  leaveFrom="translate-x-0"
-                  leaveTo="translate-x-full"
-                >
-                  <Dialog.Panel className="absolute z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-md">
-                    <SidePeekView
-                      handleClose={handleClose}
-                      handleDeleteIssue={handleDeleteIssue}
-                      handleUpdateIssue={handleUpdateIssue}
-                      issue={issue}
-                      mode={peekOverviewMode}
-                      readOnly={readOnly}
-                      setMode={(mode) => setPeekOverviewMode(mode)}
-                      workspaceSlug={workspaceSlug}
-                    />
-                  </Dialog.Panel>
-                </Transition.Child>
-              </div>
+          <Dialog as={React.Fragment} onClose={handleClose}>
+            <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
+              <Transition.Child
+                as={React.Fragment}
+                enter="transition-transform duration-300"
+                enterFrom="translate-x-full"
+                enterTo="translate-x-0"
+                leave="transition-transform duration-200"
+                leaveFrom="translate-x-0"
+                leaveTo="translate-x-full"
+              >
+                <Dialog.Panel className="fixed z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-md">
+                  <SidePeekView
+                    handleClose={handleClose}
+                    handleDeleteIssue={handleDeleteIssue}
+                    handleUpdateIssue={handleUpdateIssue}
+                    issue={issue}
+                    mode={peekOverviewMode}
+                    readOnly={readOnly}
+                    setMode={(mode) => setPeekOverviewMode(mode)}
+                    workspaceSlug={workspaceSlug}
+                  />
+                </Dialog.Panel>
+              </Transition.Child>
             </div>
           </Dialog>
         </Transition.Root>

From b80d440dee909480f7cb08050296b4a552af5746 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 1 Sep 2023 11:44:25 +0530
Subject: [PATCH 2/5] refactor: peek overview layout

---
 .../issues/peek-overview/layout.tsx           | 84 +++++++++----------
 1 file changed, 41 insertions(+), 43 deletions(-)

diff --git a/apps/app/components/issues/peek-overview/layout.tsx b/apps/app/components/issues/peek-overview/layout.tsx
index 68d4913c0e2..1f2db8bfa63 100644
--- a/apps/app/components/issues/peek-overview/layout.tsx
+++ b/apps/app/components/issues/peek-overview/layout.tsx
@@ -89,7 +89,7 @@ export const IssuePeekOverview: React.FC<Props> = observer(
     return (
       <>
         <Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
-          <Dialog as={React.Fragment} onClose={handleClose}>
+          <Dialog as="div" className="relative z-20" onClose={handleClose}>
             <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
               <Transition.Child
                 as={React.Fragment}
@@ -129,49 +129,47 @@ export const IssuePeekOverview: React.FC<Props> = observer(
             >
               <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
             </Transition.Child>
-            <div className="fixed inset-0 z-20 overflow-y-auto">
-              <div className="relative h-full w-full">
-                <Transition.Child
-                  as={React.Fragment}
-                  enter="ease-out duration-300"
-                  enterFrom="opacity-0"
-                  enterTo="opacity-100"
-                  leave="ease-in duration-200"
-                  leaveFrom="opacity-100"
-                  leaveTo="opacity-0"
+            <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
+              <Transition.Child
+                as={React.Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0"
+                enterTo="opacity-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <Dialog.Panel
+                  className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
+                    peekOverviewMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
+                  }`}
                 >
-                  <Dialog.Panel
-                    className={`absolute z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
-                      peekOverviewMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
-                    }`}
-                  >
-                    {peekOverviewMode === "modal" && (
-                      <SidePeekView
-                        handleClose={handleClose}
-                        handleDeleteIssue={handleDeleteIssue}
-                        handleUpdateIssue={handleUpdateIssue}
-                        issue={issue}
-                        mode={peekOverviewMode}
-                        readOnly={readOnly}
-                        setMode={(mode) => setPeekOverviewMode(mode)}
-                        workspaceSlug={workspaceSlug}
-                      />
-                    )}
-                    {peekOverviewMode === "full" && (
-                      <FullScreenPeekView
-                        handleClose={handleClose}
-                        handleDeleteIssue={handleDeleteIssue}
-                        handleUpdateIssue={handleUpdateIssue}
-                        issue={issue}
-                        mode={peekOverviewMode}
-                        readOnly={readOnly}
-                        setMode={(mode) => setPeekOverviewMode(mode)}
-                        workspaceSlug={workspaceSlug}
-                      />
-                    )}
-                  </Dialog.Panel>
-                </Transition.Child>
-              </div>
+                  {peekOverviewMode === "modal" && (
+                    <SidePeekView
+                      handleClose={handleClose}
+                      handleDeleteIssue={handleDeleteIssue}
+                      handleUpdateIssue={handleUpdateIssue}
+                      issue={issue}
+                      mode={peekOverviewMode}
+                      readOnly={readOnly}
+                      setMode={(mode) => setPeekOverviewMode(mode)}
+                      workspaceSlug={workspaceSlug}
+                    />
+                  )}
+                  {peekOverviewMode === "full" && (
+                    <FullScreenPeekView
+                      handleClose={handleClose}
+                      handleDeleteIssue={handleDeleteIssue}
+                      handleUpdateIssue={handleUpdateIssue}
+                      issue={issue}
+                      mode={peekOverviewMode}
+                      readOnly={readOnly}
+                      setMode={(mode) => setPeekOverviewMode(mode)}
+                      workspaceSlug={workspaceSlug}
+                    />
+                  )}
+                </Dialog.Panel>
+              </Transition.Child>
             </div>
           </Dialog>
         </Transition.Root>

From 59fd226ca7170062b2565b0450f27414b2d2bc30 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 1 Sep 2023 11:49:19 +0530
Subject: [PATCH 3/5] fix: date selector, activity mutation

---
 .../issues/peek-overview/issue-properties.tsx | 58 ++++++++-----------
 .../issues/peek-overview/layout.tsx           |  4 ++
 .../issues/sidebar-select/assignee.tsx        |  5 +-
 .../issues/sidebar-select/priority.tsx        |  2 +-
 4 files changed, 33 insertions(+), 36 deletions(-)

diff --git a/apps/app/components/issues/peek-overview/issue-properties.tsx b/apps/app/components/issues/peek-overview/issue-properties.tsx
index 2c8b4d57275..811e6474729 100644
--- a/apps/app/components/issues/peek-overview/issue-properties.tsx
+++ b/apps/app/components/issues/peek-overview/issue-properties.tsx
@@ -128,23 +128,18 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
             <span className="flex-grow truncate">Start date</span>
           </div>
           <div>
-            {issue.start_date ? (
-              <CustomDatePicker
-                placeholder="Start date"
-                value={issue.start_date}
-                onChange={(val) =>
-                  handleUpdateIssue({
-                    start_date: val,
-                  })
-                }
-                className="bg-custom-background-100"
-                wrapperClassName="w-full"
-                maxDate={maxDate ?? undefined}
-                disabled={readOnly}
-              />
-            ) : (
-              <span className="text-custom-text-200">Empty</span>
-            )}
+            <CustomDatePicker
+              placeholder="Select start date"
+              value={issue.start_date}
+              onChange={(val) =>
+                handleUpdateIssue({
+                  start_date: val,
+                })
+              }
+              className="bg-custom-background-80 border-none"
+              maxDate={maxDate ?? undefined}
+              disabled={readOnly}
+            />
           </div>
         </div>
         <div className="flex items-center gap-2 text-sm">
@@ -153,23 +148,18 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
             <span className="flex-grow truncate">Due date</span>
           </div>
           <div>
-            {issue.target_date ? (
-              <CustomDatePicker
-                placeholder="Due date"
-                value={issue.target_date}
-                onChange={(val) =>
-                  handleUpdateIssue({
-                    target_date: val,
-                  })
-                }
-                className="bg-custom-background-100"
-                wrapperClassName="w-full"
-                minDate={minDate ?? undefined}
-                disabled={readOnly}
-              />
-            ) : (
-              <span className="text-custom-text-200">Empty</span>
-            )}
+            <CustomDatePicker
+              placeholder="Select due date"
+              value={issue.target_date}
+              onChange={(val) =>
+                handleUpdateIssue({
+                  target_date: val,
+                })
+              }
+              className="bg-custom-background-80 border-none"
+              minDate={minDate ?? undefined}
+              disabled={readOnly}
+            />
           </div>
         </div>
         {/* <div className="flex items-center gap-2 text-sm">
diff --git a/apps/app/components/issues/peek-overview/layout.tsx b/apps/app/components/issues/peek-overview/layout.tsx
index 1f2db8bfa63..4894328445a 100644
--- a/apps/app/components/issues/peek-overview/layout.tsx
+++ b/apps/app/components/issues/peek-overview/layout.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
 
+import { mutate } from "swr";
 // mobx
 import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
@@ -13,6 +14,8 @@ import useUser from "hooks/use-user";
 import { FullScreenPeekView, SidePeekView } from "components/issues";
 // types
 import { IIssue } from "types";
+// fetch-keys
+import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 
 type Props = {
   handleMutation: () => void;
@@ -53,6 +56,7 @@ export const IssuePeekOverview: React.FC<Props> = observer(
       if (!issue || !user) return;
 
       await updateIssue(workspaceSlug, projectId, issue.id, formData, user);
+      mutate(PROJECT_ISSUES_ACTIVITY(issue.id));
       handleMutation();
     };
 
diff --git a/apps/app/components/issues/sidebar-select/assignee.tsx b/apps/app/components/issues/sidebar-select/assignee.tsx
index 61ece6f786f..8b9872368e2 100644
--- a/apps/app/components/issues/sidebar-select/assignee.tsx
+++ b/apps/app/components/issues/sidebar-select/assignee.tsx
@@ -51,7 +51,10 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabl
               <span className="text-custom-text-100 text-xs">{value.length} Assignees</span>
             </div>
           ) : (
-            <button type="button" className="bg-custom-background-80 px-2.5 py-0.5 text-xs rounded">
+            <button
+              type="button"
+              className="bg-custom-background-80 px-2.5 py-0.5 text-xs rounded text-custom-text-200"
+            >
               No assignees
             </button>
           )}
diff --git a/apps/app/components/issues/sidebar-select/priority.tsx b/apps/app/components/issues/sidebar-select/priority.tsx
index fd1c77f289a..67ae5133d7f 100644
--- a/apps/app/components/issues/sidebar-select/priority.tsx
+++ b/apps/app/components/issues/sidebar-select/priority.tsx
@@ -27,7 +27,7 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabl
             ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
             : value === "low"
             ? "border-green-500/20 bg-green-500/20 text-green-500"
-            : "bg-custom-background-80 border-custom-border-200"
+            : "bg-custom-background-80 border-custom-border-200 text-custom-text-200"
         }`}
       >
         <span className="grid place-items-center -my-1">

From 969694ed42b85b99350be1b64454cc9b9e02fcdd Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 1 Sep 2023 11:57:17 +0530
Subject: [PATCH 4/5] fix: delete issue handler

---
 .../app/components/issues/delete-issue-modal.tsx | 11 ++++++++++-
 .../components/issues/peek-overview/layout.tsx   | 16 ++++++++++++----
 .../components/ui/dropdowns/custom-select.tsx    |  2 +-
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/apps/app/components/issues/delete-issue-modal.tsx b/apps/app/components/issues/delete-issue-modal.tsx
index f46dae9aa7e..d847126ed41 100644
--- a/apps/app/components/issues/delete-issue-modal.tsx
+++ b/apps/app/components/issues/delete-issue-modal.tsx
@@ -33,10 +33,17 @@ type Props = {
   isOpen: boolean;
   handleClose: () => void;
   data: IIssue | null;
+  onSubmit?: () => Promise<void>;
   user: ICurrentUserResponse | undefined;
 };
 
-export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, user }) => {
+export const DeleteIssueModal: React.FC<Props> = ({
+  isOpen,
+  handleClose,
+  data,
+  onSubmit,
+  user,
+}) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const router = useRouter();
@@ -116,6 +123,8 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, u
           else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(data.project, params));
         }
 
+        if (onSubmit) onSubmit();
+
         handleClose();
         setToastAlert({
           title: "Success",
diff --git a/apps/app/components/issues/peek-overview/layout.tsx b/apps/app/components/issues/peek-overview/layout.tsx
index 4894328445a..40737b6e878 100644
--- a/apps/app/components/issues/peek-overview/layout.tsx
+++ b/apps/app/components/issues/peek-overview/layout.tsx
@@ -11,7 +11,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // hooks
 import useUser from "hooks/use-user";
 // components
-import { FullScreenPeekView, SidePeekView } from "components/issues";
+import { DeleteIssueModal, FullScreenPeekView, SidePeekView } from "components/issues";
 // types
 import { IIssue } from "types";
 // fetch-keys
@@ -31,6 +31,7 @@ export const IssuePeekOverview: React.FC<Props> = observer(
     const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
     const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
     const [peekOverviewMode, setPeekOverviewMode] = useState<TPeekOverviewModes>("side");
+    const [deleteIssueModal, setDeleteIssueModal] = useState(false);
 
     const router = useRouter();
     const { peekIssue } = router.query;
@@ -92,6 +93,13 @@ export const IssuePeekOverview: React.FC<Props> = observer(
 
     return (
       <>
+        <DeleteIssueModal
+          isOpen={deleteIssueModal}
+          handleClose={() => setDeleteIssueModal(false)}
+          data={issue ? { ...issue } : null}
+          onSubmit={handleDeleteIssue}
+          user={user}
+        />
         <Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
           <Dialog as="div" className="relative z-20" onClose={handleClose}>
             <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
@@ -107,7 +115,7 @@ export const IssuePeekOverview: React.FC<Props> = observer(
                 <Dialog.Panel className="fixed z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-md">
                   <SidePeekView
                     handleClose={handleClose}
-                    handleDeleteIssue={handleDeleteIssue}
+                    handleDeleteIssue={() => setDeleteIssueModal(true)}
                     handleUpdateIssue={handleUpdateIssue}
                     issue={issue}
                     mode={peekOverviewMode}
@@ -151,7 +159,7 @@ export const IssuePeekOverview: React.FC<Props> = observer(
                   {peekOverviewMode === "modal" && (
                     <SidePeekView
                       handleClose={handleClose}
-                      handleDeleteIssue={handleDeleteIssue}
+                      handleDeleteIssue={() => setDeleteIssueModal(true)}
                       handleUpdateIssue={handleUpdateIssue}
                       issue={issue}
                       mode={peekOverviewMode}
@@ -163,7 +171,7 @@ export const IssuePeekOverview: React.FC<Props> = observer(
                   {peekOverviewMode === "full" && (
                     <FullScreenPeekView
                       handleClose={handleClose}
-                      handleDeleteIssue={handleDeleteIssue}
+                      handleDeleteIssue={() => setDeleteIssueModal(true)}
                       handleUpdateIssue={handleUpdateIssue}
                       issue={issue}
                       mode={peekOverviewMode}
diff --git a/apps/app/components/ui/dropdowns/custom-select.tsx b/apps/app/components/ui/dropdowns/custom-select.tsx
index 4e495a21062..ae814dccb7b 100644
--- a/apps/app/components/ui/dropdowns/custom-select.tsx
+++ b/apps/app/components/ui/dropdowns/custom-select.tsx
@@ -41,7 +41,7 @@ const CustomSelect = ({
   >
     <>
       {customButton ? (
-        <Listbox.Button as="div">{customButton}</Listbox.Button>
+        <Listbox.Button as={React.Fragment}>{customButton}</Listbox.Button>
       ) : (
         <Listbox.Button
           type="button"

From 87be0d926ef16f20a03ae3e706386f000480e3cb Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 1 Sep 2023 12:06:19 +0530
Subject: [PATCH 5/5] fix: assignees mutation

---
 .../app/components/issues/peek-overview/issue-properties.tsx | 2 +-
 apps/app/store/issues.ts                                     | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/app/components/issues/peek-overview/issue-properties.tsx b/apps/app/components/issues/peek-overview/issue-properties.tsx
index 811e6474729..1f2d618ac58 100644
--- a/apps/app/components/issues/peek-overview/issue-properties.tsx
+++ b/apps/app/components/issues/peek-overview/issue-properties.tsx
@@ -103,7 +103,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
           </div>
           <div className="w-3/4">
             <SidebarAssigneeSelect
-              value={issue.assignees_list}
+              value={issue.assignees}
               onChange={(val: string[]) => handleUpdateIssue({ assignees_list: val })}
               disabled={readOnly}
             />
diff --git a/apps/app/store/issues.ts b/apps/app/store/issues.ts
index 538c5e2a9a2..286d985343e 100644
--- a/apps/app/store/issues.ts
+++ b/apps/app/store/issues.ts
@@ -116,11 +116,12 @@ class IssuesStore {
     const originalIssue = { ...this.issues[issueId] };
 
     // immediately update the issue in the store
-    const updatedIssue = { ...originalIssue, ...issueForm };
+    const updatedIssue = { ...this.issues[issueId], ...issueForm };
+    if (updatedIssue.assignees_list) updatedIssue.assignees = updatedIssue.assignees_list;
 
     try {
       runInAction(() => {
-        this.issues[issueId] = updatedIssue;
+        this.issues[issueId] = { ...updatedIssue };
       });
 
       // make a patch request to update the issue