From 7d29a89eed4da2280b0699454afd66e16cbe0382 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 21 Jun 2023 17:10:52 +0530
Subject: [PATCH] fix: inbox mutation fixes (#1324)

* chore: inbox status update mutation

* fix: inbox issue activity mutation

* refactor: code structure

* chore: snoozed status message

* chore: disable older dates for snoozing

* chore: extend snooze time

* chore: hide copy link from inbox
---
 .../components/inbox/delete-issue-modal.tsx   |  3 +-
 .../components/inbox/inbox-action-headers.tsx | 24 +++++++-
 .../app/components/inbox/inbox-issue-card.tsx |  8 ++-
 .../components/inbox/inbox-main-content.tsx   | 24 ++++++--
 .../app/components/inbox/select-duplicate.tsx |  2 +-
 apps/app/components/issues/sidebar.tsx        | 16 +++---
 .../projects/[projectId]/inbox/[inboxId].tsx  | 56 +++++++++++--------
 apps/app/styles/react-datepicker.css          | 10 +++-
 8 files changed, 101 insertions(+), 42 deletions(-)

diff --git a/apps/app/components/inbox/delete-issue-modal.tsx b/apps/app/components/inbox/delete-issue-modal.tsx
index 46ba1ebdd..c6f5320a2 100644
--- a/apps/app/components/inbox/delete-issue-modal.tsx
+++ b/apps/app/components/inbox/delete-issue-modal.tsx
@@ -130,7 +130,8 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
                       <span className="break-all font-medium text-brand-base">
                         {data?.project_detail?.identifier}-{data?.sequence_id}
                       </span>
-                      {""}? This action cannot be undone.
+                      {""}? The issue will only be deleted from the inbox and this action cannot be
+                      undone.
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
diff --git a/apps/app/components/inbox/inbox-action-headers.tsx b/apps/app/components/inbox/inbox-action-headers.tsx
index 8be550d98..5ceaa8f2c 100644
--- a/apps/app/components/inbox/inbox-action-headers.tsx
+++ b/apps/app/components/inbox/inbox-action-headers.tsx
@@ -76,6 +76,11 @@ export const InboxActionHeader: React.FC<Props> = (props) => {
   const issueStatus = issue?.issue_inbox[0].status;
   const isAllowed = memberRole.isMember || memberRole.isOwner;
 
+  const today = new Date();
+  const tomorrow = new Date(today);
+
+  tomorrow.setDate(today.getDate() + 1);
+
   return (
     <div className="grid grid-cols-4 border-b border-brand-base divide-x divide-brand-base">
       <div className="col-span-1 flex justify-between p-4">
@@ -142,12 +147,20 @@ export const InboxActionHeader: React.FC<Props> = (props) => {
           </div>
           <div className="flex items-center gap-3 flex-wrap">
             {isAllowed && (
-              <div className={`flex gap-3 flex-wrap ${issueStatus !== -2 ? "opacity-70" : ""}`}>
+              <div
+                className={`flex-shrink-0 ${
+                  issueStatus === 0 || issueStatus === -2 ? "" : "opacity-70"
+                }`}
+              >
                 <Popover className="relative">
-                  <Popover.Button as="button" type="button" disabled={issueStatus !== -2}>
+                  <Popover.Button
+                    as="button"
+                    type="button"
+                    disabled={!(issueStatus === 0 || issueStatus === -2)}
+                  >
                     <SecondaryButton
                       className={`flex gap-x-1 items-center ${
-                        issueStatus !== -2 ? "cursor-not-allowed" : ""
+                        issueStatus === 0 || issueStatus === -2 ? "" : "cursor-not-allowed"
                       }`}
                       size="sm"
                     >
@@ -165,6 +178,7 @@ export const InboxActionHeader: React.FC<Props> = (props) => {
                             setDate(val);
                           }}
                           dateFormat="dd-MM-yyyy"
+                          minDate={tomorrow}
                           inline
                         />
                         <PrimaryButton
@@ -180,6 +194,10 @@ export const InboxActionHeader: React.FC<Props> = (props) => {
                     )}
                   </Popover.Panel>
                 </Popover>
+              </div>
+            )}
+            {isAllowed && (
+              <div className={`flex gap-3 flex-wrap ${issueStatus !== -2 ? "opacity-70" : ""}`}>
                 <SecondaryButton
                   size="sm"
                   className="flex gap-2 items-center"
diff --git a/apps/app/components/inbox/inbox-issue-card.tsx b/apps/app/components/inbox/inbox-issue-card.tsx
index 682c305a7..814f221a5 100644
--- a/apps/app/components/inbox/inbox-issue-card.tsx
+++ b/apps/app/components/inbox/inbox-issue-card.tsx
@@ -101,7 +101,13 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
                 </div>
               </Tooltip>
               {issue.issue_inbox[0].snoozed_till && (
-                <div className="text-xs flex items-center gap-1 text-brand-accent">
+                <div
+                  className={`text-xs flex items-center gap-1 ${
+                    new Date(issue.issue_inbox[0].snoozed_till ?? "") < new Date()
+                      ? "text-red-500"
+                      : "text-blue-500"
+                  }`}
+                >
                   <ClockIcon className="h-3.5 w-3.5" />
                   <span>
                     Snoozed till {renderShortNumericDateFormat(issue.issue_inbox[0].snoozed_till)}
diff --git a/apps/app/components/inbox/inbox-main-content.tsx b/apps/app/components/inbox/inbox-main-content.tsx
index 1bf330e5e..83948495c 100644
--- a/apps/app/components/inbox/inbox-main-content.tsx
+++ b/apps/app/components/inbox/inbox-main-content.tsx
@@ -36,7 +36,7 @@ import { renderShortNumericDateFormat } from "helpers/date-time.helper";
 // types
 import type { IInboxIssue, IIssue } from "types";
 // fetch-keys
-import { INBOX_ISSUES, INBOX_ISSUE_DETAILS } from "constants/fetch-keys";
+import { INBOX_ISSUES, INBOX_ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 
 const defaultValues = {
   name: "",
@@ -129,6 +129,7 @@ export const InboxMainContent: React.FC = () => {
         .then(() => {
           mutateIssueDetails();
           mutate(INBOX_ISSUES(inboxId.toString(), params));
+          mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
         });
     },
     [
@@ -157,7 +158,9 @@ export const InboxMainContent: React.FC = () => {
                   : issueStatus === -1
                   ? "text-red-500 border-red-500 bg-red-500/10"
                   : issueStatus === 0
-                  ? "text-blue-500 border-blue-500 bg-blue-500/10"
+                  ? new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date()
+                    ? "text-red-500 border-red-500 bg-red-500/10"
+                    : "text-blue-500 border-blue-500 bg-blue-500/10"
                   : issueStatus === 1
                   ? "text-green-500 border-green-500 bg-green-500/10"
                   : issueStatus === 2
@@ -178,10 +181,19 @@ export const InboxMainContent: React.FC = () => {
               ) : issueStatus === 0 ? (
                 <>
                   <ClockIcon className="h-5 w-5" />
-                  <p>
-                    This issue has been snoozed till{" "}
-                    {renderShortNumericDateFormat(issueDetails.issue_inbox[0].snoozed_till ?? "")}.
-                  </p>
+                  {new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date() ? (
+                    <p>
+                      This issue was snoozed till{" "}
+                      {renderShortNumericDateFormat(issueDetails.issue_inbox[0].snoozed_till ?? "")}
+                      .
+                    </p>
+                  ) : (
+                    <p>
+                      This issue has been snoozed till{" "}
+                      {renderShortNumericDateFormat(issueDetails.issue_inbox[0].snoozed_till ?? "")}
+                      .
+                    </p>
+                  )}
                 </>
               ) : issueStatus === 1 ? (
                 <>
diff --git a/apps/app/components/inbox/select-duplicate.tsx b/apps/app/components/inbox/select-duplicate.tsx
index fdf7034df..74409a57f 100644
--- a/apps/app/components/inbox/select-duplicate.tsx
+++ b/apps/app/components/inbox/select-duplicate.tsx
@@ -76,7 +76,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
-      <div className="flex flex-wrap items-start py-2">
+      <div className="flex flex-wrap items-start">
         <div className="space-y-1 sm:basis-1/2">
           <Dialog as="div" className="relative z-20" onClose={handleClose}>
             <Transition.Child
diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx
index ae0e5ad57..cdc815d3c 100644
--- a/apps/app/components/issues/sidebar.tsx
+++ b/apps/app/components/issues/sidebar.tsx
@@ -287,13 +287,15 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
             {issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id}
           </h4>
           <div className="flex flex-wrap items-center gap-2">
-            <button
-              type="button"
-              className="rounded-md border border-brand-base p-2 shadow-sm duration-300 hover:bg-brand-surface-1 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent"
-              onClick={handleCopyText}
-            >
-              <LinkIcon className="h-3.5 w-3.5" />
-            </button>
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
+              <button
+                type="button"
+                className="rounded-md border border-brand-base p-2 shadow-sm duration-300 hover:bg-brand-surface-1 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent"
+                onClick={handleCopyText}
+              >
+                <LinkIcon className="h-3.5 w-3.5" />
+              </button>
+            )}
             {!isNotAllowed && (fieldsToShow.includes("all") || fieldsToShow.includes("delete")) && (
               <button
                 type="button"
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
index e733d8b5c..c47e79d06 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
@@ -10,6 +10,7 @@ import projectService from "services/project.service";
 // hooks
 import useInboxView from "hooks/use-inbox-view";
 import useUserAuth from "hooks/use-user-auth";
+import useToast from "hooks/use-toast";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // contexts
@@ -47,6 +48,7 @@ const ProjectInbox: NextPage = () => {
 
   const { user } = useUserAuth();
   const { issues: inboxIssues, mutate: mutateInboxIssues } = useInboxView();
+  const { setToastAlert } = useToast();
 
   const { data: projectDetails } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
@@ -103,6 +105,28 @@ const ProjectInbox: NextPage = () => {
   const markInboxStatus = async (data: TInboxStatus) => {
     if (!workspaceSlug || !projectId || !inboxId || !inboxIssueId) return;
 
+    mutate<IInboxIssueDetail>(
+      INBOX_ISSUE_DETAILS(inboxId as string, inboxIssueId as string),
+      (prevData) => {
+        if (!prevData) return prevData;
+
+        return {
+          ...prevData,
+          issue_inbox: [{ ...prevData.issue_inbox[0], ...data }],
+        };
+      },
+      false
+    );
+    mutateInboxIssues(
+      (prevData) =>
+        (prevData ?? []).map((i) =>
+          i.bridge_id === inboxIssueId
+            ? { ...i, issue_inbox: [{ ...i.issue_inbox[0], ...data }] }
+            : i
+        ),
+      false
+    );
+
     await inboxServices
       .markInboxStatus(
         workspaceSlug.toString(),
@@ -112,28 +136,16 @@ const ProjectInbox: NextPage = () => {
         data,
         user
       )
-      .then(() => {
-        mutate<IInboxIssueDetail>(
-          INBOX_ISSUE_DETAILS(inboxId as string, inboxIssueId as string),
-          (prevData) => {
-            if (!prevData) return prevData;
-
-            return {
-              ...prevData,
-              issue_inbox: [{ ...prevData.issue_inbox[0], ...data }],
-            };
-          },
-          false
-        );
-        mutateInboxIssues(
-          (prevData) =>
-            (prevData ?? []).map((i) =>
-              i.bridge_id === inboxIssueId
-                ? { ...i, issue_inbox: [{ ...i.issue_inbox[0], ...data }] }
-                : i
-            ),
-          false
-        );
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Something went wrong while updating inbox status. Please try again.",
+        })
+      )
+      .finally(() => {
+        mutate(INBOX_ISSUE_DETAILS(inboxId as string, inboxIssueId as string));
+        mutateInboxIssues();
       });
   };
 
diff --git a/apps/app/styles/react-datepicker.css b/apps/app/styles/react-datepicker.css
index 59ce4d9d9..918f4ed66 100644
--- a/apps/app/styles/react-datepicker.css
+++ b/apps/app/styles/react-datepicker.css
@@ -104,11 +104,19 @@
   color: rgba(var(--color-text-base)) !important;
 }
 
-.react-datepicker__day--selected {
+.react-datepicker__day--selected,
+.react-datepicker__day--selected:hover {
   background-color: #216ba5 !important;
   color: white !important;
 }
 
+.react-datepicker__day--disabled,
+.react-datepicker__day--disabled:hover {
+  background: transparent !important;
+  color: rgba(var(--color-text-secondary)) !important;
+  cursor: default;
+}
+
 .react-datepicker__day--today {
   font-weight: 800;
 }