Skip to content

Commit e6cb743

Browse files
banzhebanzhe
authored
Merge pull request #62 from Ray-D-Song/html-a
Use react-router-dom Link component to navigate
2 parents 84308e3 + 4104f7a commit e6cb743

File tree

5 files changed

+66
-73
lines changed

5 files changed

+66
-73
lines changed

‎packages/web/src/components/list-view.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
import type { Page } from '@web-archive/shared/types'
22
import { Table, TableBody, TableCell, TableRow } from '@web-archive/shared/components/table'
3-
import { useState } from 'react'
3+
import React, { useState } from 'react'
44
import { useMouse } from 'ahooks'
55
import ScreenshotView from './screenshot-view'
66

77
interface ListViewProps {
88
pages?: Page[]
99
children?: (page: Page) => React.ReactNode
1010
imgPreview?: boolean
11-
onItemClick?: (page: Page) => void
11+
onItemClick?: (page: Page, event: React.MouseEvent) => void
1212
}
1313

1414
function ListView({ pages, children, imgPreview, onItemClick }: ListViewProps) {
1515
const mouse = useMouse()
1616

1717
const [prevScreenshotId, setPrevScreenshotId] = useState<string | null>(null)
18-
const handleClickPage = (page: Page) => {
19-
onItemClick?.(page)
18+
const handleClickPage = (page: Page, event: React.MouseEvent) => {
19+
onItemClick?.(page, event)
2020
}
2121
const handleHoverPage = (e: React.MouseEvent, page: Page) => {
2222
if (imgPreview)
@@ -48,7 +48,7 @@ function ListView({ pages, children, imgPreview, onItemClick }: ListViewProps) {
4848
</div>
4949
<TableBody>
5050
{pages?.map(page => (
51-
<TableRow key={page.id} className="cursor-pointer z-10" onClick={() => handleClickPage(page)} onMouseEnter={e => handleHoverPage(e, page)} onMouseLeave={handleLeavePage}>
51+
<TableRow key={page.id} className="cursor-pointer z-10" onClick={e => handleClickPage(page, e)} onMouseEnter={e => handleHoverPage(e, page)} onMouseLeave={handleLeavePage}>
5252
<TableCell className="line-clamp-3">{page.title}</TableCell>
5353
<TableCell>{page.createdAt.toLocaleString()}</TableCell>
5454
{children && (

‎packages/web/src/components/page-card.tsx

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,12 @@ import { useLocation } from 'react-router-dom'
99
import toast from 'react-hot-toast'
1010
import { Badge } from '@web-archive/shared/components/badge'
1111
import ScreenshotView from './screenshot-view'
12-
import { useNavigate } from '~/router'
1312
import { updatePageShowcase } from '~/data/page'
1413
import CardEditDialog from '~/components/card-edit-dialog'
1514
import TagContext from '~/store/tag'
15+
import { Link } from '~/router'
1616

1717
function Comp({ page, onPageDelete }: { page: Page, onPageDelete?: (page: Page) => void }) {
18-
const navigate = useNavigate()
19-
2018
const { tagCache, refreshTagCache } = useContext(TagContext)
2119
const bindTags = tagCache?.filter(tag => tag.pageIds.includes(page.id)) ?? []
2220
const tagBadgeList = bindTags.map((tag) => {
@@ -25,10 +23,7 @@ function Comp({ page, onPageDelete }: { page: Page, onPageDelete?: (page: Page)
2523

2624
const location = useLocation()
2725
const isShowcased = location.pathname.startsWith('/showcase')
28-
29-
const handleClickPageCard = (page: Page) => {
30-
navigate(isShowcased ? '/showcase/page/:slug' : '/page/:slug', { params: { slug: String(page.id) } })
31-
}
26+
const redirectTo = isShowcased ? `/showcase/page/:slug` : `/page/:slug`
3227

3328
const handleClickPageUrl = (e: React.MouseEvent, page: Page) => {
3429
e.stopPropagation()
@@ -68,26 +63,29 @@ function Comp({ page, onPageDelete }: { page: Page, onPageDelete?: (page: Page)
6863
<CardEditDialog open={openCardEditDialog} onOpenChange={setOpenCardEditDialog} pageId={page.id} />
6964
)
7065
}
66+
7167
<Card
7268
key={page.id}
73-
onClick={() => handleClickPageCard(page)}
7469
className="cursor-pointer hover:shadow-lg transition-shadow flex flex-col relative group overflow-hidden"
7570
>
76-
<CardHeader>
77-
<CardTitle className="leading-8 text-lg line-clamp-2">{page.title}</CardTitle>
78-
<CardDescription className="space-x-1">
79-
{tagBadgeList}
80-
</CardDescription>
81-
</CardHeader>
82-
<CardContent className="flex-1">
83-
<ScreenshotView
84-
screenshotId={page.screenshotId}
85-
className="w-full mb-2"
86-
loadingClassName="w-full h-48"
87-
>
88-
</ScreenshotView>
89-
<p className="h-auto text-sm text-gray-600 dark:text-gray-400 line-clamp-3">{page.pageDesc}</p>
90-
</CardContent>
71+
<Link to={redirectTo} params={{ slug: page.id.toString() }}>
72+
<CardHeader>
73+
<CardTitle className="leading-8 text-lg line-clamp-2">{page.title}</CardTitle>
74+
<CardDescription className="space-x-1">
75+
{tagBadgeList}
76+
</CardDescription>
77+
</CardHeader>
78+
<CardContent className="flex-1">
79+
<ScreenshotView
80+
screenshotId={page.screenshotId}
81+
className="w-full mb-2"
82+
loadingClassName="w-full h-48"
83+
>
84+
</ScreenshotView>
85+
<p className="h-auto text-sm text-gray-600 dark:text-gray-400 line-clamp-3">{page.pageDesc}</p>
86+
</CardContent>
87+
</Link>
88+
9189
<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">
9290
{
9391
!isShowcased && (

‎packages/web/src/components/side-bar-folder-menu.tsx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import NewFolderDialog from './new-folder-dialog'
1313
import EditFolderDialog from './edit-folder-dialog'
1414
import { deleteFolder, getAllFolder } from '~/data/folder'
1515
import emitter from '~/utils/emitter'
16-
import { useNavigate } from '~/router'
16+
import { Link, useNavigate } from '~/router'
1717

1818
function getNextFolderId(folders: Array<FolderType>, index: number) {
1919
if (index === 0 && folders.length === 1) {
@@ -38,9 +38,6 @@ function SidebarFolderMenu({ openedFolder, setOpenedFolder, className }: Sidebar
3838

3939
const { data: folders, refresh, mutate: setFolders, loading: foldersLoading } = useRequest(getAllFolder)
4040

41-
const handleFolderClick = (id: number) => {
42-
setOpenedFolder(id)
43-
}
4441
emitter.on('refreshSideBar', refresh)
4542

4643
const handleDeleteFolder = async (folderId: number) => {
@@ -106,16 +103,19 @@ function SidebarFolderMenu({ openedFolder, setOpenedFolder, className }: Sidebar
106103
: (
107104
folders?.map(folder => (
108105
<SidebarMenuItem key={folder.id}>
109-
<SidebarMenuButton>
110-
<Folder
111-
name={folder.name}
112-
id={folder.id}
113-
isOpen={openedFolder === folder.id}
114-
onClick={handleFolderClick}
115-
onDelete={handleDeleteFolder}
116-
onEdit={handleEditFolder}
117-
/>
118-
</SidebarMenuButton>
106+
<Link to="/folder/:slug" params={{ slug: folder.id.toString() }}>
107+
<SidebarMenuButton>
108+
<Folder
109+
name={folder.name}
110+
id={folder.id}
111+
isOpen={openedFolder === folder.id}
112+
onDelete={handleDeleteFolder}
113+
onEdit={handleEditFolder}
114+
/>
115+
116+
</SidebarMenuButton>
117+
</Link>
118+
119119
</SidebarMenuItem>
120120
))
121121
)}

‎packages/web/src/components/side-bar.tsx

Lines changed: 20 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { ScrollArea } from '@web-archive/shared/components/scroll-area'
77
import SettingDialog from './setting-dialog'
88
import SidebarFolderMenu from './side-bar-folder-menu'
99
import SidebarTagMenu from './side-bar-tag-menu'
10-
import { useNavigate, useParams } from '~/router'
10+
import { Link, useNavigate, useParams } from '~/router'
1111

1212
interface SidebarProps {
1313
selectedTag: number | null
@@ -18,16 +18,13 @@ function Component({ selectedTag, setSelectedTag }: SidebarProps) {
1818
const navigate = useNavigate()
1919

2020
const [openedFolder, setOpenedFolder] = useState<number | null>(null)
21-
useEffect(() => {
22-
if (openedFolder !== null) {
23-
navigate('/folder/:slug', { params: { slug: openedFolder.toString() } })
24-
}
25-
}, [openedFolder])
2621
const { slug } = useParams('/folder/:slug')
2722
const { pathname } = useLocation()
2823
useEffect(() => {
2924
if (pathname.startsWith('/folder/') && isNumberString(slug))
3025
setOpenedFolder(Number(slug))
26+
else
27+
setOpenedFolder(null)
3128
}, [slug, pathname])
3229

3330
const handleLogout = () => {
@@ -58,15 +55,14 @@ function Component({ selectedTag, setSelectedTag }: SidebarProps) {
5855
<SidebarMenu>
5956
<SidebarMenuButton
6057
className="w-full justify-between"
61-
onClick={() => {
62-
setOpenedFolder(null)
63-
navigate('/')
64-
}}
58+
asChild
6559
>
66-
<div className="flex items-center">
67-
<HomeIcon className="mr-2 h-4 w-4" />
68-
Home
69-
</div>
60+
<Link to="/">
61+
<div className="flex items-center">
62+
<HomeIcon className="mr-2 h-4 w-4" />
63+
Home
64+
</div>
65+
</Link>
7066
</SidebarMenuButton>
7167
</SidebarMenu>
7268
<SidebarFolderMenu
@@ -85,13 +81,11 @@ function Component({ selectedTag, setSelectedTag }: SidebarProps) {
8581
<SidebarFooter>
8682
<SidebarMenu>
8783
<SidebarMenuItem>
88-
<SidebarMenuButton onClick={() => {
89-
setOpenedFolder(null)
90-
navigate('/showcase/folder')
91-
}}
92-
>
93-
<SquareLibrary className="mr-2 h-4 w-4" />
94-
Showcase
84+
<SidebarMenuButton asChild>
85+
<Link to="/showcase/folder">
86+
<SquareLibrary className="mr-2 h-4 w-4" />
87+
Showcase
88+
</Link>
9589
</SidebarMenuButton>
9690
</SidebarMenuItem>
9791
<SidebarMenuItem>
@@ -104,13 +98,11 @@ function Component({ selectedTag, setSelectedTag }: SidebarProps) {
10498
</SidebarMenuButton>
10599
</SidebarMenuItem>
106100
<SidebarMenuItem>
107-
<SidebarMenuButton onClick={() => {
108-
setOpenedFolder(null)
109-
navigate('/trash')
110-
}}
111-
>
112-
<Trash2 className="mr-2 h-4 w-4" />
113-
Trash
101+
<SidebarMenuButton asChild>
102+
<Link to="/trash">
103+
<Trash2 className="mr-2 h-4 w-4" />
104+
Trash
105+
</Link>
114106
</SidebarMenuButton>
115107
</SidebarMenuItem>
116108
<SidebarMenuItem>

‎packages/web/src/pages/(layout)/folder.[slug].tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { isNil } from '@web-archive/shared/utils'
22
import { useOutletContext } from 'react-router-dom'
33
import { useInfiniteScroll, useRequest } from 'ahooks'
4-
import { useContext, useEffect, useRef } from 'react'
4+
import React, { useContext, useEffect, useRef } from 'react'
55
import type { Ref } from '@web-archive/shared/components/scroll-area'
66
import { ScrollArea } from '@web-archive/shared/components/scroll-area'
77
import { Button } from '@web-archive/shared/components/button'
@@ -61,8 +61,11 @@ function FolderPage() {
6161
})
6262

6363
const navigate = useNavigate()
64-
const handleItemClick = (page: Page) => {
65-
navigate(`/page/:slug`, { params: { slug: String(page.id) } })
64+
const handleItemClick = (page: Page, event: React.MouseEvent) => {
65+
if (event.ctrlKey || event.metaKey || event.shiftKey)
66+
window.open(`/#/page/${page.id}`, '_blank')
67+
else
68+
navigate(`/page/:slug`, { params: { slug: String(page.id) } })
6669
}
6770

6871
const { view } = useContext(AppContext)

0 commit comments

Comments
 (0)