Merge pull request #62 from Ray-D-Song/html-a

Use react-router-dom Link component to navigate
Ray-D-Song · Dec 11, 2024 · e6cb743 · e6cb743
2 parents 84308e3 + 4104f7a
commit e6cb743
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 73 deletions.
diff --git a/packages/web/src/components/list-view.tsx b/packages/web/src/components/list-view.tsx
@@ -1,22 +1,22 @@
 import type { Page } from '@web-archive/shared/types'
 import { Table, TableBody, TableCell, TableRow } from '@web-archive/shared/components/table'
-import { useState } from 'react'
+import React, { useState } from 'react'
 import { useMouse } from 'ahooks'
 import ScreenshotView from './screenshot-view'
 
 interface ListViewProps {
   pages?: Page[]
   children?: (page: Page) => React.ReactNode
   imgPreview?: boolean
-  onItemClick?: (page: Page) => void
+  onItemClick?: (page: Page, event: React.MouseEvent) => void
 }
 
 function ListView({ pages, children, imgPreview, onItemClick }: ListViewProps) {
   const mouse = useMouse()
 
   const [prevScreenshotId, setPrevScreenshotId] = useState<string | null>(null)
-  const handleClickPage = (page: Page) => {
-    onItemClick?.(page)
+  const handleClickPage = (page: Page, event: React.MouseEvent) => {
+    onItemClick?.(page, event)
   }
   const handleHoverPage = (e: React.MouseEvent, page: Page) => {
     if (imgPreview)
@@ -48,7 +48,7 @@ function ListView({ pages, children, imgPreview, onItemClick }: ListViewProps) {
       </div>
       <TableBody>
         {pages?.map(page => (
-          <TableRow key={page.id} className="cursor-pointer z-10" onClick={() => handleClickPage(page)} onMouseEnter={e => handleHoverPage(e, page)} onMouseLeave={handleLeavePage}>
+          <TableRow key={page.id} className="cursor-pointer z-10" onClick={e => handleClickPage(page, e)} onMouseEnter={e => handleHoverPage(e, page)} onMouseLeave={handleLeavePage}>
             <TableCell className="line-clamp-3">{page.title}</TableCell>
             <TableCell>{page.createdAt.toLocaleString()}</TableCell>
             {children && (

diff --git a/packages/web/src/components/page-card.tsx b/packages/web/src/components/page-card.tsx
@@ -9,14 +9,12 @@ import { useLocation } from 'react-router-dom'
 import toast from 'react-hot-toast'
 import { Badge } from '@web-archive/shared/components/badge'
 import ScreenshotView from './screenshot-view'
-import { useNavigate } from '~/router'
 import { updatePageShowcase } from '~/data/page'
 import CardEditDialog from '~/components/card-edit-dialog'
 import TagContext from '~/store/tag'
+import { Link } from '~/router'
 
 function Comp({ page, onPageDelete }: { page: Page, onPageDelete?: (page: Page) => void }) {
-  const navigate = useNavigate()
-
   const { tagCache, refreshTagCache } = useContext(TagContext)
   const bindTags = tagCache?.filter(tag => tag.pageIds.includes(page.id)) ?? []
   const tagBadgeList = bindTags.map((tag) => {
@@ -25,10 +23,7 @@ function Comp({ page, onPageDelete }: { page: Page, onPageDelete?: (page: Page)
 
   const location = useLocation()
   const isShowcased = location.pathname.startsWith('/showcase')
-
-  const handleClickPageCard = (page: Page) => {
-    navigate(isShowcased ? '/showcase/page/:slug' : '/page/:slug', { params: { slug: String(page.id) } })
-  }
+  const redirectTo = isShowcased ? `/showcase/page/:slug` : `/page/:slug`
 
   const handleClickPageUrl = (e: React.MouseEvent, page: Page) => {
     e.stopPropagation()
@@ -68,26 +63,29 @@ function Comp({ page, onPageDelete }: { page: Page, onPageDelete?: (page: Page)
           <CardEditDialog open={openCardEditDialog} onOpenChange={setOpenCardEditDialog} pageId={page.id} />
         )
       }
+
       <Card
         key={page.id}
-        onClick={() => handleClickPageCard(page)}
         className="cursor-pointer hover:shadow-lg transition-shadow flex flex-col relative group overflow-hidden"
       >
-        <CardHeader>
-          <CardTitle className="leading-8 text-lg line-clamp-2">{page.title}</CardTitle>
-          <CardDescription className="space-x-1">
-            {tagBadgeList}
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="flex-1">
-          <ScreenshotView
-            screenshotId={page.screenshotId}
-            className="w-full mb-2"
-            loadingClassName="w-full h-48"
-          >
-          </ScreenshotView>
-          <p className="h-auto text-sm text-gray-600 dark:text-gray-400 line-clamp-3">{page.pageDesc}</p>
-        </CardContent>
+        <Link to={redirectTo} params={{ slug: page.id.toString() }}>
+          <CardHeader>
+            <CardTitle className="leading-8 text-lg line-clamp-2">{page.title}</CardTitle>
+            <CardDescription className="space-x-1">
+              {tagBadgeList}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex-1">
+            <ScreenshotView
+              screenshotId={page.screenshotId}
+              className="w-full mb-2"
+              loadingClassName="w-full h-48"
+            >
+            </ScreenshotView>
+            <p className="h-auto text-sm text-gray-600 dark:text-gray-400 line-clamp-3">{page.pageDesc}</p>
+          </CardContent>
+        </Link>
+
         <CardFooter className="flex space-x-2 justify-end w-full backdrop-blur-sm py-4 absolute bottom-0 group-hover:opacity-100 sm:opacity-0 transition-opacity">
           {
             !isShowcased && (

diff --git a/packages/web/src/components/side-bar-folder-menu.tsx b/packages/web/src/components/side-bar-folder-menu.tsx
@@ -13,7 +13,7 @@ import NewFolderDialog from './new-folder-dialog'
 import EditFolderDialog from './edit-folder-dialog'
 import { deleteFolder, getAllFolder } from '~/data/folder'
 import emitter from '~/utils/emitter'
-import { useNavigate } from '~/router'
+import { Link, useNavigate } from '~/router'
 
 function getNextFolderId(folders: Array<FolderType>, index: number) {
   if (index === 0 && folders.length === 1) {
@@ -38,9 +38,6 @@ function SidebarFolderMenu({ openedFolder, setOpenedFolder, className }: Sidebar
 
   const { data: folders, refresh, mutate: setFolders, loading: foldersLoading } = useRequest(getAllFolder)
 
-  const handleFolderClick = (id: number) => {
-    setOpenedFolder(id)
-  }
   emitter.on('refreshSideBar', refresh)
 
   const handleDeleteFolder = async (folderId: number) => {
@@ -106,16 +103,19 @@ function SidebarFolderMenu({ openedFolder, setOpenedFolder, className }: Sidebar
               : (
                   folders?.map(folder => (
                     <SidebarMenuItem key={folder.id}>
-                      <SidebarMenuButton>
-                        <Folder
-                          name={folder.name}
-                          id={folder.id}
-                          isOpen={openedFolder === folder.id}
-                          onClick={handleFolderClick}
-                          onDelete={handleDeleteFolder}
-                          onEdit={handleEditFolder}
-                        />
-                      </SidebarMenuButton>
+                      <Link to="/folder/:slug" params={{ slug: folder.id.toString() }}>
+                        <SidebarMenuButton>
+                          <Folder
+                            name={folder.name}
+                            id={folder.id}
+                            isOpen={openedFolder === folder.id}
+                            onDelete={handleDeleteFolder}
+                            onEdit={handleEditFolder}
+                          />
+
+                        </SidebarMenuButton>
+                      </Link>
+
                     </SidebarMenuItem>
                   ))
                 )}

diff --git a/packages/web/src/components/side-bar.tsx b/packages/web/src/components/side-bar.tsx
@@ -7,7 +7,7 @@ import { ScrollArea } from '@web-archive/shared/components/scroll-area'
 import SettingDialog from './setting-dialog'
 import SidebarFolderMenu from './side-bar-folder-menu'
 import SidebarTagMenu from './side-bar-tag-menu'
-import { useNavigate, useParams } from '~/router'
+import { Link, useNavigate, useParams } from '~/router'
 
 interface SidebarProps {
   selectedTag: number | null
@@ -18,16 +18,13 @@ function Component({ selectedTag, setSelectedTag }: SidebarProps) {
   const navigate = useNavigate()
 
   const [openedFolder, setOpenedFolder] = useState<number | null>(null)
-  useEffect(() => {
-    if (openedFolder !== null) {
-      navigate('/folder/:slug', { params: { slug: openedFolder.toString() } })
-    }
-  }, [openedFolder])
   const { slug } = useParams('/folder/:slug')
   const { pathname } = useLocation()
   useEffect(() => {
     if (pathname.startsWith('/folder/') && isNumberString(slug))
       setOpenedFolder(Number(slug))
+    else
+      setOpenedFolder(null)
   }, [slug, pathname])
 
   const handleLogout = () => {
@@ -58,15 +55,14 @@ function Component({ selectedTag, setSelectedTag }: SidebarProps) {
           <SidebarMenu>
             <SidebarMenuButton
               className="w-full justify-between"
-              onClick={() => {
-                setOpenedFolder(null)
-                navigate('/')
-              }}
+              asChild
             >
-              <div className="flex items-center">
-                <HomeIcon className="mr-2 h-4 w-4" />
-                Home
-              </div>
+              <Link to="/">
+                <div className="flex items-center">
+                  <HomeIcon className="mr-2 h-4 w-4" />
+                  Home
+                </div>
+              </Link>
             </SidebarMenuButton>
           </SidebarMenu>
           <SidebarFolderMenu
@@ -85,13 +81,11 @@ function Component({ selectedTag, setSelectedTag }: SidebarProps) {
       <SidebarFooter>
         <SidebarMenu>
           <SidebarMenuItem>
-            <SidebarMenuButton onClick={() => {
-              setOpenedFolder(null)
-              navigate('/showcase/folder')
-            }}
-            >
-              <SquareLibrary className="mr-2 h-4 w-4" />
-              Showcase
+            <SidebarMenuButton asChild>
+              <Link to="/showcase/folder">
+                <SquareLibrary className="mr-2 h-4 w-4" />
+                Showcase
+              </Link>
             </SidebarMenuButton>
           </SidebarMenuItem>
           <SidebarMenuItem>
@@ -104,13 +98,11 @@ function Component({ selectedTag, setSelectedTag }: SidebarProps) {
             </SidebarMenuButton>
           </SidebarMenuItem>
           <SidebarMenuItem>
-            <SidebarMenuButton onClick={() => {
-              setOpenedFolder(null)
-              navigate('/trash')
-            }}
-            >
-              <Trash2 className="mr-2 h-4 w-4" />
-              Trash
+            <SidebarMenuButton asChild>
+              <Link to="/trash">
+                <Trash2 className="mr-2 h-4 w-4" />
+                Trash
+              </Link>
             </SidebarMenuButton>
           </SidebarMenuItem>
           <SidebarMenuItem>

diff --git a/packages/web/src/pages/(layout)/folder.[slug].tsx b/packages/web/src/pages/(layout)/folder.[slug].tsx
@@ -1,7 +1,7 @@
 import { isNil } from '@web-archive/shared/utils'
 import { useOutletContext } from 'react-router-dom'
 import { useInfiniteScroll, useRequest } from 'ahooks'
-import { useContext, useEffect, useRef } from 'react'
+import React, { useContext, useEffect, useRef } from 'react'
 import type { Ref } from '@web-archive/shared/components/scroll-area'
 import { ScrollArea } from '@web-archive/shared/components/scroll-area'
 import { Button } from '@web-archive/shared/components/button'
@@ -61,8 +61,11 @@ function FolderPage() {
   })
 
   const navigate = useNavigate()
-  const handleItemClick = (page: Page) => {
-    navigate(`/page/:slug`, { params: { slug: String(page.id) } })
+  const handleItemClick = (page: Page, event: React.MouseEvent) => {
+    if (event.ctrlKey || event.metaKey || event.shiftKey)
+      window.open(`/#/page/${page.id}`, '_blank')
+    else
+      navigate(`/page/:slug`, { params: { slug: String(page.id) } })
   }
 
   const { view } = useContext(AppContext)