replace last possible bits of router.push with Link

makeplane · Jan 8, 2024 · 8c47b1f · 8c47b1f
1 parent 6cba532
commit 8c47b1f
Show file tree

Hide file tree

Showing 12 changed files with 133 additions and 133 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/cycles/active-cycle-details.tsx b/web/components/cycles/active-cycle-details.tsx
@@ -384,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">
@@ -429,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}

diff --git a/web/components/project/card.tsx b/web/components/project/card.tsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { LinkIcon, Lock, Pencil, Star } from "lucide-react";
+import Link from "next/link";
 // hooks
 import { useProject } from "hooks/store";
 import useToast from "hooks/use-toast";
@@ -74,7 +75,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
     });
   };
 
-  const projectMembersIds = project.members.map((member) => member.member_id);
+  const projectMembersIds = project.members?.map((member) => member.member_id);
 
   return (
     <>
@@ -178,7 +179,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
               }
               position="top"
             >
-              {projectMembersIds.length > 0 ? (
+              {projectMembersIds && projectMembersIds.length > 0 ? (
                 <div className="flex cursor-pointer items-center gap-2 text-custom-text-200">
                   <AvatarGroup showTooltip={false}>
                     {projectMembersIds.map((memberId) => {
@@ -195,17 +196,15 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
               )}
             </Tooltip>
             {(isOwner || isMember) && (
-              <button
+              <Link
                 className="flex items-center justify-center rounded p-1 text-custom-text-400 hover:bg-custom-background-80 hover:text-custom-text-200"
                 onClick={(e) => {
-                  e.preventDefault();
                   e.stopPropagation();
-
-                  router.push(`/${workspaceSlug}/projects/${project.id}/settings`);
                 }}
+                href={`/${workspaceSlug}/projects/${project.id}/settings`}
               >
                 <Pencil className="h-3.5 w-3.5" />
-              </button>
+              </Link>
             )}
 
             {!project.is_member ? (