From c4ce8772a46be4e3e22a1a59f9abc628cab066c3 Mon Sep 17 00:00:00 2001 From: Ou Date: Sun, 13 Oct 2024 14:35:42 +0800 Subject: [PATCH] chore: rename section to column --- shared/data.ts | 2 +- shared/types.ts | 6 ++-- src/atoms.ts | 14 ++++---- src/components/{section => column}/card.tsx | 0 src/components/{section => column}/dnd.tsx | 4 +-- src/components/{section => column}/index.tsx | 28 +++++++-------- src/components/header.tsx | 10 +++--- src/routeTree.gen.ts | 38 ++++++++++---------- src/routes/index.tsx | 4 +-- src/routes/s.$column.tsx | 28 +++++++++++++++ src/routes/s.$section.tsx | 28 --------------- 11 files changed, 81 insertions(+), 81 deletions(-) rename src/components/{section => column}/card.tsx (100%) rename src/components/{section => column}/dnd.tsx (97%) rename src/components/{section => column}/index.tsx (50%) create mode 100644 src/routes/s.$column.tsx delete mode 100644 src/routes/s.$section.tsx diff --git a/shared/data.ts b/shared/data.ts index ec2abf8..e496b8b 100644 --- a/shared/data.ts +++ b/shared/data.ts @@ -1,6 +1,6 @@ import type { Metadata } from "./types" -export const sectionIds = ["focus", "realtime", "hottest", "china", "world", "tech", "finance"] as const +export const columnIds = ["focus", "realtime", "hottest", "china", "world", "tech", "finance"] as const export const metadata: Metadata = { focus: { diff --git a/shared/types.ts b/shared/types.ts index 296e9ab..9229507 100644 --- a/shared/types.ts +++ b/shared/types.ts @@ -1,5 +1,5 @@ import type { colors } from "unocss/preset-mini" -import type { sectionIds } from "./data" +import type { columnIds } from "./data" import type { originSources } from "./sources" export type Color = Exclude @@ -14,8 +14,8 @@ export type SourceID = { } | Key : Key; }[MainSourceID] -export type SectionID = (typeof sectionIds)[number] -export type Metadata = Record +export type ColumnID = (typeof columnIds)[number] +export type Metadata = Record export interface OriginSource { name: string diff --git a/src/atoms.ts b/src/atoms.ts index ca2537d..d6f67a9 100644 --- a/src/atoms.ts +++ b/src/atoms.ts @@ -1,12 +1,12 @@ import { atom } from "jotai" -import type { SectionID, SourceID } from "@shared/types" +import type { ColumnID, SourceID } from "@shared/types" import { metadata } from "@shared/data" import { sources } from "@shared/sources" import { typeSafeObjectEntries, typeSafeObjectFromEntries } from "@shared/type.util" import { atomWithLocalStorage } from "./hooks/atomWithLocalStorage" const initialSources = typeSafeObjectFromEntries(typeSafeObjectEntries(metadata).map(([id, val]) => [id, val.sources])) -export const localSourcesAtom = atomWithLocalStorage>("localsources", () => { +export const localSourcesAtom = atomWithLocalStorage>("localsources", () => { return initialSources }, (stored) => { return typeSafeObjectFromEntries(typeSafeObjectEntries({ @@ -45,16 +45,16 @@ function initRefetchSources() { export const refetchSourcesAtom = atom(initRefetchSources()) -export const currentSectionIDAtom = atom("focus") +export const currentColumnIDAtom = atom("focus") -export const currentSectionAtom = atom((get) => { - const id = get(currentSectionIDAtom) +export const currentColumnAtom = atom((get) => { + const id = get(currentColumnIDAtom) return get(localSourcesAtom)[id] }, (get, set, update: Update) => { - const _ = update instanceof Function ? update(get(currentSectionAtom)) : update + const _ = update instanceof Function ? update(get(currentColumnAtom)) : update set(localSourcesAtom, { ...get(localSourcesAtom), - [get(currentSectionIDAtom)]: _, + [get(currentColumnIDAtom)]: _, }) }) diff --git a/src/components/section/card.tsx b/src/components/column/card.tsx similarity index 100% rename from src/components/section/card.tsx rename to src/components/column/card.tsx diff --git a/src/components/section/dnd.tsx b/src/components/column/dnd.tsx similarity index 97% rename from src/components/section/dnd.tsx rename to src/components/column/dnd.tsx index 860d10a..b5aa178 100644 --- a/src/components/section/dnd.tsx +++ b/src/components/column/dnd.tsx @@ -17,10 +17,10 @@ import { CSS } from "@dnd-kit/utilities" import { motion } from "framer-motion" import type { ItemsProps } from "./card" import { CardOverlay, CardWrapper } from "./card" -import { currentSectionAtom } from "~/atoms" +import { currentColumnAtom } from "~/atoms" export function Dnd() { - const [items, setItems] = useAtom(currentSectionAtom) + const [items, setItems] = useAtom(currentColumnAtom) return ( { - setCurrentSectionID(id) - }, [id, setCurrentSectionID]) + setCurrentColumnID(id) + }, [id, setCurrentColumnID]) return ( <> @@ -21,22 +21,22 @@ export function Section({ id }: { id: SectionID }) { "md:(z-100 mb-6)", ])} > - {sectionIds.map(section => ( + {columnIds.map(columnId => ( - {metadata[section].name} + {metadata[columnId].name} ))} - { currentSectionID === id && } + { currentColumnID === id && } ) } diff --git a/src/components/header.tsx b/src/components/header.tsx index 2924f90..7aceb6b 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -7,7 +7,7 @@ import type { SourceID } from "@shared/types" import { Homepage, Version } from "@shared/consts" import logo from "~/assets/icon.svg" import { useDark } from "~/hooks/useDark" -import { currentSectionAtom, goToTopAtom, refetchSourcesAtom } from "~/atoms" +import { currentColumnAtom, goToTopAtom, refetchSourcesAtom } from "~/atoms" function ThemeToggle() { const { toggleDark } = useDark() @@ -38,19 +38,19 @@ export function GithubIcon() { } function RefreshButton() { - const currentSection = useAtomValue(currentSectionAtom) + const currentColumn = useAtomValue(currentColumnAtom) const setRefetchSource = useSetAtom(refetchSourcesAtom) const refreshAll = useCallback(() => { - const obj = Object.fromEntries(currentSection.map(id => [id, Date.now()])) + const obj = Object.fromEntries(currentColumn.map(id => [id, Date.now()])) setRefetchSource(prev => ({ ...prev, ...obj, })) - }, [currentSection, setRefetchSource]) + }, [currentColumn, setRefetchSource]) const isFetching = useIsFetching({ predicate: (query) => { - return currentSection.includes(query.queryKey[0] as SourceID) + return currentColumn.includes(query.queryKey[0] as SourceID) }, }) diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts index ff8cbda..a255b68 100644 --- a/src/routeTree.gen.ts +++ b/src/routeTree.gen.ts @@ -12,7 +12,7 @@ import { Route as rootRoute } from './routes/__root' import { Route as IndexImport } from './routes/index' -import { Route as SSectionImport } from './routes/s.$section' +import { Route as SColumnImport } from './routes/s.$column' // Create/Update Routes @@ -21,8 +21,8 @@ const IndexRoute = IndexImport.update({ getParentRoute: () => rootRoute, } as any) -const SSectionRoute = SSectionImport.update({ - path: '/s/$section', +const SColumnRoute = SColumnImport.update({ + path: '/s/$column', getParentRoute: () => rootRoute, } as any) @@ -37,11 +37,11 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof IndexImport parentRoute: typeof rootRoute } - '/s/$section': { - id: '/s/$section' - path: '/s/$section' - fullPath: '/s/$section' - preLoaderRoute: typeof SSectionImport + '/s/$column': { + id: '/s/$column' + path: '/s/$column' + fullPath: '/s/$column' + preLoaderRoute: typeof SColumnImport parentRoute: typeof rootRoute } } @@ -51,37 +51,37 @@ declare module '@tanstack/react-router' { export interface FileRoutesByFullPath { '/': typeof IndexRoute - '/s/$section': typeof SSectionRoute + '/s/$column': typeof SColumnRoute } export interface FileRoutesByTo { '/': typeof IndexRoute - '/s/$section': typeof SSectionRoute + '/s/$column': typeof SColumnRoute } export interface FileRoutesById { __root__: typeof rootRoute '/': typeof IndexRoute - '/s/$section': typeof SSectionRoute + '/s/$column': typeof SColumnRoute } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath - fullPaths: '/' | '/s/$section' + fullPaths: '/' | '/s/$column' fileRoutesByTo: FileRoutesByTo - to: '/' | '/s/$section' - id: '__root__' | '/' | '/s/$section' + to: '/' | '/s/$column' + id: '__root__' | '/' | '/s/$column' fileRoutesById: FileRoutesById } export interface RootRouteChildren { IndexRoute: typeof IndexRoute - SSectionRoute: typeof SSectionRoute + SColumnRoute: typeof SColumnRoute } const rootRouteChildren: RootRouteChildren = { IndexRoute: IndexRoute, - SSectionRoute: SSectionRoute, + SColumnRoute: SColumnRoute, } export const routeTree = rootRoute @@ -97,14 +97,14 @@ export const routeTree = rootRoute "filePath": "__root.tsx", "children": [ "/", - "/s/$section" + "/s/$column" ] }, "/": { "filePath": "index.tsx" }, - "/s/$section": { - "filePath": "s.$section.tsx" + "/s/$column": { + "filePath": "s.$column.tsx" } } } diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 1adfb67..9a7f252 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -2,7 +2,7 @@ import { createFileRoute } from "@tanstack/react-router" import { useAtomValue } from "jotai" import { useMemo } from "react" import { localSourcesAtom } from "~/atoms" -import { Section } from "~/components/section" +import { Column } from "~/components/column" export const Route = createFileRoute("/")({ component: IndexComponent, @@ -14,5 +14,5 @@ function IndexComponent() { return focusSources.focus.length ? "focus" : "realtime" // eslint-disable-next-line react-hooks/exhaustive-deps }, []) - return
+ return } diff --git a/src/routes/s.$column.tsx b/src/routes/s.$column.tsx new file mode 100644 index 0000000..2360262 --- /dev/null +++ b/src/routes/s.$column.tsx @@ -0,0 +1,28 @@ +import { createFileRoute, redirect } from "@tanstack/react-router" +import { columnIds } from "@shared/data" +import { Column } from "~/components/column" + +export const Route = createFileRoute("/s/$column")({ + component: SectionComponent, + params: { + parse: (params) => { + const column = columnIds.find(x => x === params.column.toLowerCase()) + if (!column) + throw new Error(`"${params.column}" is not a valid column.`) + return { + column, + } + }, + stringify: params => params, + }, + onError: (error) => { + if (error?.routerCode === "PARSE_PARAMS") { + throw redirect({ to: "/" }) + } + }, +}) + +function SectionComponent() { + const { column } = Route.useParams() + return +} diff --git a/src/routes/s.$section.tsx b/src/routes/s.$section.tsx deleted file mode 100644 index 79cbbaa..0000000 --- a/src/routes/s.$section.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { createFileRoute, redirect } from "@tanstack/react-router" -import { sectionIds } from "@shared/data" -import { Section } from "~/components/section" - -export const Route = createFileRoute("/s/$section")({ - component: SectionComponent, - params: { - parse: (params) => { - const section = sectionIds.find(x => x === params.section.toLowerCase()) - if (!section) - throw new Error(`"${params.section}" is not a valid section.`) - return { - section, - } - }, - stringify: params => params, - }, - onError: (error) => { - if (error?.routerCode === "PARSE_PARAMS") { - throw redirect({ to: "/" }) - } - }, -}) - -function SectionComponent() { - const { section } = Route.useParams() - return
-}