mirror of
https://github.com/ourongxing/newsnow.git
synced 2025-01-19 03:09:14 +08:00
chore: remove git cache
This commit is contained in:
Ou
parent
be19adb4bc
commit
309ab3b2e1
@ -1,49 +0,0 @@
|
||||
import { Link } from "@tanstack/react-router"
|
||||
import { useCallback } from "react"
|
||||
import { useAtomValue, useSetAtom } from "jotai"
|
||||
import logo from "~/assets/react.svg"
|
||||
import { useDark } from "~/hooks/useDark"
|
||||
import { currentSectionAtom, refetchSourcesAtom } from "~/atoms"
|
||||
|
||||
function ThemeToggle() {
|
||||
const { toggleDark } = useDark()
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
title="Toggle Dark Mode"
|
||||
className="i-ph-sun-dim-duotone dark:i-ph-moon-stars-duotone btn-pure"
|
||||
onClick={toggleDark}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function RefreshButton() {
|
||||
const currentSection = useAtomValue(currentSectionAtom)
|
||||
const setRefetchSource = useSetAtom(refetchSourcesAtom)
|
||||
const refreshAll = useCallback(() => {
|
||||
const obj = Object.fromEntries(currentSection.sourceList.map(id => [id, Date.now()]))
|
||||
setRefetchSource(prev => ({
|
||||
...prev,
|
||||
...obj,
|
||||
}))
|
||||
}, [currentSection, setRefetchSource])
|
||||
|
||||
return (
|
||||
<button type="button" className="i-ph:arrow-clockwise btn-pure" onClick={refreshAll} />
|
||||
)
|
||||
}
|
||||
|
||||
export function Header() {
|
||||
return (
|
||||
<header className="flex justify-between items-center">
|
||||
<Link className="text-6 flex gap-2 items-center" to="/">
|
||||
<img src={logo} alt="logo" className="h-8" />
|
||||
<span className="font-mono">NewsNow</span>
|
||||
</Link>
|
||||
<div className="flex gap-2">
|
||||
<RefreshButton />
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
@ -1,199 +0,0 @@
|
||||
import type { NewsItem, SourceID, SourceInfo, SourceResponse } from "@shared/types"
|
||||
import { OverlayScrollbarsComponent } from "overlayscrollbars-react"
|
||||
import type { UseQueryResult } from "@tanstack/react-query"
|
||||
import { useQuery } from "@tanstack/react-query"
|
||||
import clsx from "clsx"
|
||||
import { useInView } from "react-intersection-observer"
|
||||
import { useAtom } from "jotai"
|
||||
import { forwardRef, useCallback, useImperativeHandle, useRef } from "react"
|
||||
import { sources } from "@shared/data"
|
||||
import type { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities"
|
||||
import { focusSourcesAtom, refetchSourcesAtom } from "~/atoms"
|
||||
import { useRelativeTime } from "~/hooks/useRelativeTime"
|
||||
|
||||
export interface ItemsProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
id: SourceID
|
||||
/**
|
||||
* 是否显示透明度，拖动时原卡片的样式
|
||||
*/
|
||||
isDragged?: boolean
|
||||
isOverlay?: boolean
|
||||
handleListeners?: SyntheticListenerMap
|
||||
}
|
||||
|
||||
interface NewsCardProps {
|
||||
id: SourceID
|
||||
inView: boolean
|
||||
isOverlay?: boolean
|
||||
handleListeners?: SyntheticListenerMap
|
||||
}
|
||||
|
||||
interface Query {
|
||||
query: UseQueryResult<SourceInfo, Error>
|
||||
}
|
||||
|
||||
export const CardWrapper = forwardRef<HTMLDivElement, ItemsProps>(({ id, isDragged, isOverlay, handleListeners, style, ...props }, dndRef) => {
|
||||
const ref = useRef<HTMLDivElement>(null)
|
||||
const { ref: inViewRef, inView } = useInView({
|
||||
threshold: 0,
|
||||
})
|
||||
|
||||
useImperativeHandle(dndRef, () => ref.current!)
|
||||
useImperativeHandle(inViewRef, () => ref.current!)
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={clsx(
|
||||
"flex flex-col h-500px aspect-auto border border-gray-100 rounded-xl shadow-2xl shadow-gray-600/10 bg-base dark:( border-gray-700 shadow-none)",
|
||||
isDragged && "op-50",
|
||||
isOverlay ? "bg-glass" : "",
|
||||
)}
|
||||
style={{
|
||||
transformOrigin: "50% 50%",
|
||||
...style,
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<NewsCard id={id} inView={inView} isOverlay={isOverlay} handleListeners={handleListeners} />
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
export function NewsCard({ id, inView, isOverlay, handleListeners }: NewsCardProps) {
|
||||
const [focusSources, setFocusSources] = useAtom(focusSourcesAtom)
|
||||
const [refetchSource, setRefetchSource] = useAtom(refetchSourcesAtom)
|
||||
const query = useQuery({
|
||||
queryKey: [id, refetchSource[id]],
|
||||
queryFn: async ({ queryKey }) => {
|
||||
const [_id, _refetchTime] = queryKey as [SourceID, number]
|
||||
let url = `/api/${_id}`
|
||||
if (Date.now() - _refetchTime < 1000) {
|
||||
url = `/api/${_id}?latest`
|
||||
}
|
||||
const response: SourceResponse = await fetch(url).then(res => res.json())
|
||||
if (response.status === "error") {
|
||||
throw new Error(response.message)
|
||||
} else {
|
||||
return response.data
|
||||
}
|
||||
},
|
||||
// refetch 时显示原有的数据
|
||||
placeholderData: prev => prev,
|
||||
staleTime: 1000 * 60 * 5,
|
||||
enabled: inView,
|
||||
})
|
||||
|
||||
const addFocusList = useCallback(() => {
|
||||
setFocusSources(focusSources.includes(id) ? focusSources.filter(i => i !== id) : [...focusSources, id])
|
||||
}, [setFocusSources, focusSources, id])
|
||||
const manualRefetch = useCallback(() => {
|
||||
setRefetchSource(prev => ({
|
||||
...prev,
|
||||
[id]: Date.now(),
|
||||
}))
|
||||
}, [setRefetchSource, id])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
{...handleListeners}
|
||||
className={clsx([
|
||||
"flex justify-between p-2 items-center",
|
||||
handleListeners && "cursor-grab",
|
||||
isOverlay && "cursor-grabbing",
|
||||
])}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<img src={`/icons/${id.split("-")[0]}.png`} className="w-4 h-4 rounded" alt={id} onError={e => e.currentTarget.hidden = true} />
|
||||
<span className="text-md font-bold">
|
||||
{sources[id].name}
|
||||
</span>
|
||||
</div>
|
||||
{/* @ts-expect-error -_- */}
|
||||
<span className="text-xs">{sources[id]?.type}</span>
|
||||
</div>
|
||||
<OverlayScrollbarsComponent
|
||||
defer
|
||||
className="h-full pl-2 pr-3 mr-1"
|
||||
element="div"
|
||||
options={{ scrollbars: { autoHide: "scroll" }, overflow: { x: "hidden" } }}
|
||||
>
|
||||
<NewsList query={query} />
|
||||
</OverlayScrollbarsComponent>
|
||||
<div className="p-2 flex items-center justify-between">
|
||||
<UpdateTime query={query} />
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
type="button"
|
||||
className={clsx("i-ph:arrow-clockwise", query.isFetching && "animate-spin")}
|
||||
onClick={manualRefetch}
|
||||
/>
|
||||
<button type="button" className={clsx(focusSources.includes(id) ? "i-ph:star-fill" : "i-ph:star", "color-primary")} onClick={addFocusList} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function UpdateTime({ query }: Query) {
|
||||
const updatedTime = useRelativeTime(query.data?.updatedTime ?? "")
|
||||
if (updatedTime) return <span>{`${updatedTime}更新`}</span>
|
||||
if (query.isError) return <span>获取失败</span>
|
||||
return <span className="skeleton w-20" />
|
||||
}
|
||||
|
||||
function Num({ num }: { num: number }) {
|
||||
const color = ["bg-red-900", "bg-red-500", "bg-red-400"]
|
||||
return (
|
||||
<span className={clsx("bg-active min-w-6 flex justify-center items-center rounded-md", false && color[num - 1])}>
|
||||
{num}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
function ExtraInfo({ item }: { item: NewsItem }) {
|
||||
const relativeTime = useRelativeTime(item?.extra?.date)
|
||||
if (relativeTime) {
|
||||
return <>{relativeTime}</>
|
||||
}
|
||||
|
||||
if (item?.extra?.icon) {
|
||||
return (
|
||||
<img src={item.extra.icon} className="w-5 inline" />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function NewsList({ query }: Query) {
|
||||
const items = query.data?.items
|
||||
if (items?.length) {
|
||||
return (
|
||||
<>
|
||||
{items.slice(0, 20).map((item, i) => (
|
||||
<div key={item.title} className="flex gap-2 items-center">
|
||||
<Num num={i + 1} />
|
||||
<a href={item.url} target="_blank" className="my-1">
|
||||
<span className="mr-2">
|
||||
{item.title}
|
||||
</span>
|
||||
<span className="text-xs text-gray-4/80 truncate align-middle">
|
||||
<ExtraInfo item={item} />
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{Array.from({ length: 20 }).map((_, i) => i).map(i => (
|
||||
<div key={i} className="flex gap-2 items-center">
|
||||
<Num num={i + 1} />
|
||||
<span className="skeleton border-b border-gray-300/20 my-1"></span>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,92 +0,0 @@
|
||||
import { useCallback, useState } from "react"
|
||||
import type { DragEndEvent, DragStartEvent } from "@dnd-kit/core"
|
||||
import {
|
||||
DndContext,
|
||||
DragOverlay,
|
||||
MouseSensor,
|
||||
TouchSensor,
|
||||
closestCenter,
|
||||
useSensor,
|
||||
useSensors,
|
||||
} from "@dnd-kit/core"
|
||||
import { SortableContext, arrayMove, rectSortingStrategy, useSortable } from "@dnd-kit/sortable"
|
||||
import { useAtom } from "jotai"
|
||||
import type { SourceID } from "@shared/types"
|
||||
import { CSS } from "@dnd-kit/utilities"
|
||||
import type { ItemsProps } from "./card"
|
||||
import { CardWrapper } from "./card"
|
||||
import { focusSourcesAtom } from "~/atoms"
|
||||
|
||||
export function Dnd() {
|
||||
const [items, setItems] = useAtom(focusSourcesAtom)
|
||||
const [activeId, setActiveId] = useState<string | null>(null)
|
||||
const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor))
|
||||
|
||||
const handleDragStart = useCallback((event: DragStartEvent) => {
|
||||
setActiveId(event.active.id as string)
|
||||
}, [])
|
||||
const handleDragEnd = useCallback((event: DragEndEvent) => {
|
||||
const { active, over } = event
|
||||
|
||||
if (active.id !== over?.id) {
|
||||
setItems((items) => {
|
||||
const oldIndex = items.indexOf(active.id as any)
|
||||
const newIndex = items.indexOf(over!.id as any)
|
||||
|
||||
return arrayMove(items, oldIndex, newIndex)
|
||||
})
|
||||
}
|
||||
|
||||
setActiveId(null)
|
||||
}, [setItems])
|
||||
const handleDragCancel = useCallback(() => {
|
||||
setActiveId(null)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragStart={handleDragStart}
|
||||
onDragEnd={handleDragEnd}
|
||||
onDragCancel={handleDragCancel}
|
||||
>
|
||||
<SortableContext items={items} strategy={rectSortingStrategy}>
|
||||
{items.map(id => (
|
||||
<SortableCardWrapper key={id} id={id} />
|
||||
))}
|
||||
</SortableContext>
|
||||
<DragOverlay adjustScale style={{ transformOrigin: "0 0 " }}>
|
||||
{!!activeId && <CardWrapper id={activeId as SourceID} isOverlay />}
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
)
|
||||
}
|
||||
|
||||
function SortableCardWrapper({ id, ...props }: ItemsProps) {
|
||||
const {
|
||||
isDragging,
|
||||
attributes,
|
||||
listeners,
|
||||
setNodeRef,
|
||||
transform,
|
||||
transition,
|
||||
} = useSortable({ id })
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
}
|
||||
|
||||
return (
|
||||
<CardWrapper
|
||||
ref={setNodeRef}
|
||||
id={id}
|
||||
style={style}
|
||||
isDragged={isDragging}
|
||||
handleListeners={listeners}
|
||||
{...attributes}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user