fix: breaking cycle issues and replacing router.push with Links (#3330)

* fix cycle creation and active cycle map * minor fix in cycle store * create cycle breaking fix * replace last possible bits of router.push with Link --------- Co-authored-by: Rahul R <rahulr@Rahuls-MacBook-Pro.local>
makeplane · Jan 22, 2024 · 1257a88 · 1257a88
1 parent 12a3392
commit 1257a88
Show file tree

Hide file tree

Showing 14 changed files with 161 additions and 158 deletions.
diff --git a/web/components/command-palette/actions/workspace-settings-actions.tsx b/web/components/command-palette/actions/workspace-settings-actions.tsx
@@ -2,6 +2,7 @@ import { useRouter } from "next/router";
 import { Command } from "cmdk";
 // icons
 import { SettingIcon } from "components/icons";
+import Link from "next/link";
 
 type Props = {
   closePalette: () => void;
@@ -13,48 +14,55 @@ export const CommandPaletteWorkspaceSettingsActions: React.FC<Props> = (props) =
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const redirect = (path: string) => {
-    closePalette();
-    router.push(path);
-  };
-
   return (
     <>
-      <Command.Item onSelect={() => redirect(`/${workspaceSlug}/settings`)} className="focus:outline-none">
-        <div className="flex items-center gap-2 text-custom-text-200">
-          <SettingIcon className="h-4 w-4 text-custom-text-200" />
-          General
-        </div>
+      <Command.Item onSelect={closePalette} className="focus:outline-none">
+        <Link href={`/${workspaceSlug}/settings`}>
+          <div className="flex items-center gap-2 text-custom-text-200">
+            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+            General
+          </div>
+        </Link>
       </Command.Item>
-      <Command.Item onSelect={() => redirect(`/${workspaceSlug}/settings/members`)} className="focus:outline-none">
-        <div className="flex items-center gap-2 text-custom-text-200">
-          <SettingIcon className="h-4 w-4 text-custom-text-200" />
-          Members
-        </div>
+      <Command.Item onSelect={closePalette} className="focus:outline-none">
+        <Link href={`/${workspaceSlug}/settings/members`}>
+          <div className="flex items-center gap-2 text-custom-text-200">
+            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+            Members
+          </div>
+        </Link>
       </Command.Item>
-      <Command.Item onSelect={() => redirect(`/${workspaceSlug}/settings/billing`)} className="focus:outline-none">
-        <div className="flex items-center gap-2 text-custom-text-200">
-          <SettingIcon className="h-4 w-4 text-custom-text-200" />
-          Billing and Plans
-        </div>
+      <Command.Item onSelect={closePalette} className="focus:outline-none">
+        <Link href={`/${workspaceSlug}/settings/billing`}>
+          <div className="flex items-center gap-2 text-custom-text-200">
+            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+            Billing and Plans
+          </div>
+        </Link>
       </Command.Item>
-      <Command.Item onSelect={() => redirect(`/${workspaceSlug}/settings/integrations`)} className="focus:outline-none">
-        <div className="flex items-center gap-2 text-custom-text-200">
-          <SettingIcon className="h-4 w-4 text-custom-text-200" />
-          Integrations
-        </div>
+      <Command.Item onSelect={closePalette} className="focus:outline-none">
+        <Link href={`/${workspaceSlug}/settings/integrations`}>
+          <div className="flex items-center gap-2 text-custom-text-200">
+            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+            Integrations
+          </div>
+        </Link>
       </Command.Item>
-      <Command.Item onSelect={() => redirect(`/${workspaceSlug}/settings/imports`)} className="focus:outline-none">
-        <div className="flex items-center gap-2 text-custom-text-200">
-          <SettingIcon className="h-4 w-4 text-custom-text-200" />
-          Import
-        </div>
+      <Command.Item onSelect={closePalette} className="focus:outline-none">
+        <Link href={`/${workspaceSlug}/settings/imports`}>
+          <div className="flex items-center gap-2 text-custom-text-200">
+            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+            Import
+          </div>
+        </Link>
       </Command.Item>
-      <Command.Item onSelect={() => redirect(`/${workspaceSlug}/settings/exports`)} className="focus:outline-none">
-        <div className="flex items-center gap-2 text-custom-text-200">
-          <SettingIcon className="h-4 w-4 text-custom-text-200" />
-          Export
-        </div>
+      <Command.Item onSelect={closePalette} className="focus:outline-none">
+        <Link href={`/${workspaceSlug}/settings/exports`}>
+          <div className="flex items-center gap-2 text-custom-text-200">
+            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+            Export
+          </div>
+        </Link>
       </Command.Item>
     </>
   );

diff --git a/web/components/core/sidebar/progress-chart.tsx b/web/components/core/sidebar/progress-chart.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { eachDayOfInterval } from "date-fns";
+import { eachDayOfInterval, isValid } from "date-fns";
 // ui
 import { LineGraph } from "components/ui";
 // helpers
@@ -47,7 +47,13 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
   }));
 
   const generateXAxisTickValues = () => {
-    const dates = eachDayOfInterval({ start: new Date(startDate), end: new Date(endDate) });
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+
+    let dates: Date[] = [];
+    if (isValid(start) && isValid(end)) {
+      dates = eachDayOfInterval({ start, end });
+    }
 
     const maxDates = 4;
     const totalDates = dates.length;

diff --git a/web/components/cycles/active-cycle-details.tsx b/web/components/cycles/active-cycle-details.tsx
@@ -33,6 +33,7 @@ import { truncateText } from "helpers/string.helper";
 import { ICycle } from "@plane/types";
 import { EIssuesStoreType } from "constants/issue";
 import { ACTIVE_CYCLE_ISSUES } from "store/issue/cycle";
+import { CYCLE_ISSUES_WITH_PARAMS } from "constants/fetch-keys";
 
 const stateGroups = [
   {
@@ -73,7 +74,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
   const { workspaceSlug, projectId } = props;
 
   const {
-    issues: { issues },
+    issues: { issues, fetchActiveCycleIssues },
     issueMap,
   } = useIssues(EIssuesStoreType.CYCLE);
   // store hooks
@@ -99,13 +100,14 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
   const activeCycle = currentProjectActiveCycleId ? getActiveCycleById(currentProjectActiveCycleId) : null;
   const issueIds = issues?.[ACTIVE_CYCLE_ISSUES];
 
-  // useSWR(
-  //   workspaceSlug && projectId && cycleId ? CYCLE_ISSUES_WITH_PARAMS(cycleId, { priority: "urgent,high" }) : null,
-  //   workspaceSlug && projectId && cycleId
-  //     ? () =>
-  //     fetchActiveCycleIssues(workspaceSlug, projectId, )
-  //     : null
-  // );
+  useSWR(
+    workspaceSlug && projectId && currentProjectActiveCycleId
+      ? CYCLE_ISSUES_WITH_PARAMS(currentProjectActiveCycleId, { priority: "urgent,high" })
+      : null,
+    workspaceSlug && projectId && currentProjectActiveCycleId
+      ? () => fetchActiveCycleIssues(workspaceSlug, projectId, currentProjectActiveCycleId)
+      : null
+  );
 
   if (!activeCycle && isLoading)
     return (
@@ -382,9 +384,9 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
               {issueIds ? (
                 issueIds.length > 0 ? (
                   issueIds.map((issue: any) => (
-                    <div
+                    <Link
                       key={issue.id}
-                      onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`)}
+                      href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
                       className="flex cursor-pointer flex-wrap items-center justify-between gap-2 rounded-md border border-custom-border-200 bg-custom-background-90 px-3 py-1.5"
                     >
                       <div className="flex flex-col gap-1">
@@ -427,7 +429,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
                           )}
                         </div>
                       </div>
-                    </div>
+                    </Link>
                   ))
                 ) : (
                   <div className="grid place-items-center text-center text-sm text-custom-text-200">

diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import Link from "next/link";
 // hooks
 import {
   useApplication,
@@ -41,14 +42,11 @@ const CycleDropdownOption: React.FC<{ cycleId: string }> = ({ cycleId }) => {
   if (!cycle) return null;
 
   return (
-    <CustomMenu.MenuItem
-      key={cycle.id}
-      onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)}
-    >
-      <div className="flex items-center gap-1.5">
+    <CustomMenu.MenuItem key={cycle.id}>
+      <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`} className="flex items-center gap-1.5">
         <ContrastIcon className="h-3 w-3" />
         {truncateText(cycle.name, 40)}
-      </div>
+      </Link>
     </CustomMenu.MenuItem>
   );
 };

diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import Link from "next/link";
 // hooks
 import {
   useApplication,
@@ -41,14 +42,14 @@ const ModuleDropdownOption: React.FC<{ moduleId: string }> = ({ moduleId }) => {
   if (!moduleDetail) return null;
 
   return (
-    <CustomMenu.MenuItem
-      key={moduleDetail.id}
-      onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/modules/${moduleDetail.id}`)}
-    >
-      <div className="flex items-center gap-1.5">
+    <CustomMenu.MenuItem key={moduleDetail.id}>
+      <Link
+        href={`/${workspaceSlug}/projects/${projectId}/modules/${moduleDetail.id}`}
+        className="flex items-center gap-1.5"
+      >
         <DiceIcon className="h-3 w-3" />
         {truncateText(moduleDetail.name, 40)}
-      </div>
+      </Link>
     </CustomMenu.MenuItem>
   );
 };

diff --git a/web/components/headers/project-view-issues.tsx b/web/components/headers/project-view-issues.tsx
@@ -2,6 +2,7 @@ import { useCallback } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Plus } from "lucide-react";
+import Link from "next/link";
 // hooks
 import {
   useApplication,
@@ -154,14 +155,14 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
                   if (!view) return;
 
                   return (
-                    <CustomMenu.MenuItem
-                      key={viewId}
-                      onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/views/${viewId}`)}
-                    >
-                      <div className="flex items-center gap-1.5">
+                    <CustomMenu.MenuItem key={viewId}>
+                      <Link
+                        href={`/${workspaceSlug}/projects/${projectId}/views/${viewId}`}
+                        className="flex items-center gap-1.5"
+                      >
                         <PhotoFilterIcon height={12} width={12} />
                         {truncateText(view.name, 40)}
-                      </div>
+                      </Link>
                     </CustomMenu.MenuItem>
                   );
                 })}

diff --git a/web/components/notifications/notification-card.tsx b/web/components/notifications/notification-card.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { ArchiveRestore, Clock, MessageSquare, User2 } from "lucide-react";
+import Link from "next/link";
 // hooks
 import useToast from "hooks/use-toast";
 // icons
@@ -10,17 +11,14 @@ import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";
 import { snoozeOptions } from "constants/notification";
 // helper
 import { replaceUnderscoreIfSnakeCase, truncateText, stripAndTruncateHTML } from "helpers/string.helper";
-import {
-  calculateTimeAgo,
-  renderFormattedTime,
-  renderFormattedDate,
-} from "helpers/date-time.helper";
+import { calculateTimeAgo, renderFormattedTime, renderFormattedDate } from "helpers/date-time.helper";
 // type
 import type { IUserNotification } from "@plane/types";
 
 type NotificationCardProps = {
   notification: IUserNotification;
   isSnoozedTabOpen: boolean;
+  closePopover: () => void;
   markNotificationReadStatus: (notificationId: string) => Promise<void>;
   markNotificationReadStatusToggle: (notificationId: string) => Promise<void>;
   markNotificationArchivedStatus: (notificationId: string) => Promise<void>;
@@ -32,6 +30,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
   const {
     notification,
     isSnoozedTabOpen,
+    closePopover,
     markNotificationReadStatus,
     markNotificationReadStatusToggle,
     markNotificationArchivedStatus,
@@ -47,15 +46,14 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
   if (isSnoozedTabOpen && new Date(notification.snoozed_till!) < new Date()) return null;
 
   return (
-    <div
+    <Link
       onClick={() => {
         markNotificationReadStatus(notification.id);
-        router.push(
-          `/${workspaceSlug}/projects/${notification.project}/${
-            notification.data.issue_activity.field === "archived_at" ? "archived-issues" : "issues"
-          }/${notification.data.issue.id}`
-        );
+        closePopover();
       }}
+      href={`/${workspaceSlug}/projects/${notification.project}/${
+        notification.data.issue_activity.field === "archived_at" ? "archived-issues" : "issues"
+      }/${notification.data.issue.id}`}
       className={`group relative flex w-full cursor-pointer items-center gap-4 p-3 pl-6 ${
         notification.read_at === null ? "bg-custom-primary-70/5" : "hover:bg-custom-background-200"
       }`}
@@ -149,7 +147,8 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
             <p className="flex flex-shrink-0 items-center justify-end gap-x-1 text-custom-text-300">
               <Clock className="h-4 w-4" />
               <span>
-                Till {renderFormattedDate(notification.snoozed_till)}, {renderFormattedTime(notification.snoozed_till, '12-hour')}
+                Till {renderFormattedDate(notification.snoozed_till)},{" "}
+                {renderFormattedTime(notification.snoozed_till, "12-hour")}
               </span>
             </p>
           ) : (
@@ -195,6 +194,8 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
               type="button"
               onClick={(e) => {
                 e.stopPropagation();
+                e.preventDefault();
+
                 item.onClick();
               }}
               key={item.id}
@@ -204,7 +205,6 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
             </button>
           </Tooltip>
         ))}
-
         <Tooltip tooltipContent="Snooze">
           <CustomMenu
             className="flex items-center"
@@ -223,6 +223,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
                 key={item.label}
                 onClick={(e) => {
                   e.stopPropagation();
+                  e.preventDefault();
 
                   if (!item.value) {
                     setSelectedNotificationForSnooze(notification.id);
@@ -243,6 +244,6 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
           </CustomMenu>
         </Tooltip>
       </div>
-    </div>
+    </Link>
   );
 };
diff --git a/web/components/notifications/notification-popover.tsx b/web/components/notifications/notification-popover.tsx
@@ -119,6 +119,7 @@ export const NotificationPopover = observer(() => {
                             <NotificationCard
                               key={notification.id}
                               isSnoozedTabOpen={snoozed}
+                              closePopover={closePopover}
                               notification={notification}
                               markNotificationArchivedStatus={markNotificationArchivedStatus}
                               markNotificationReadStatus={markNotificationAsRead}