diff --git a/src/web/components/currently-reading.tsx b/src/web/components/currently-reading.tsx index 2f4320d..d613231 100644 --- a/src/web/components/currently-reading.tsx +++ b/src/web/components/currently-reading.tsx @@ -1,18 +1,18 @@ import { ContextMenu, Flex, Text } from "@radix-ui/themes"; -import type { ReadingIssue } from "@src/shared/types"; +import type { CurrentlyReading as CurrentlyReadingType } from "@src/shared/types"; import { useRouter } from "@tanstack/react-router"; import { Check } from "lucide-react"; import { memo, useMemo } from "react"; type Props = { - issue: ReadingIssue; + issue: CurrentlyReadingType; }; const CurrentlyReading = ({ issue }: Props) => { const navigation = useRouter(); const width = useMemo( - () => (issue.pageNumber / issue.totalPages) * 100, + () => (issue.currentPage / issue.totalPages) * 100, [issue], ); @@ -24,7 +24,7 @@ const CurrentlyReading = ({ issue }: Props) => { navigation.navigate({ to: "/$issueId", params: { - issueId: issue.issueId, + issueId: issue.id, }, }) } @@ -32,7 +32,7 @@ const CurrentlyReading = ({ issue }: Props) => { > {issue.issueTitle} { gap="2" > - {issue.issueTitle} + {issue.title}
{issue.issueTitle} - {issue.issueTitle} + {issue.title} {/* TODO install moment and give a proper value */} {/* diff --git a/src/web/components/issue.tsx b/src/web/components/issue.tsx index 8f9fabf..0e1f501 100644 --- a/src/web/components/issue.tsx +++ b/src/web/components/issue.tsx @@ -1,5 +1,5 @@ import { deleteFromStoreCompletionEvent$ } from "@core/events"; -import { DropdownMenu, Flex, Text } from "@radix-ui/themes"; +import { ContextMenu, DropdownMenu, Flex, Text } from "@radix-ui/themes"; import t from "@shared/config"; import type { Issue as issue } from "@src/shared/types"; import { useRouter } from "@tanstack/react-router"; @@ -16,24 +16,39 @@ export default function Issue({ issue }: Props) { deleteFromStoreCompletionEvent$.on(() => utils.library.invalidate()); + const go = () => + navigation.navigate({ + to: "/$issueId", + params: { + issueId: issue.id, + }, + }); + return ( - - issue_thumbnail - - - {issue.issueTitle} - - - - + + + + issue_thumbnail + + + {issue.issueTitle} + + + + + + ctx menu + + ); } diff --git a/src/web/routes/$issueId.tsx b/src/web/routes/$issueId.tsx index 432ac2e..481f34f 100644 --- a/src/web/routes/$issueId.tsx +++ b/src/web/routes/$issueId.tsx @@ -1,11 +1,11 @@ import { useObservable } from "@legendapp/state/react"; import { Flex } from "@radix-ui/themes"; import t from "@shared/config"; -import { readingStateStore } from "@shared/core/stores"; import { createFileRoute } from "@tanstack/react-router"; import { motion, useMotionValue } from "framer-motion"; import { useMemo } from "react"; import { useInterval, useKeyPress, useTimeout } from "../hooks"; +import { readingState$ } from "../state"; const DRAG_BUFFER = 50; @@ -18,6 +18,10 @@ function Component() { const isEnabled = useObservable(false); + const doneReading = readingState$.doneReading.get(); + const currentlyReading = readingState$.currentlyReading.get(); + const isSaved = readingState$.currentlyReading.has(issueId); + const { data, isLoading } = t.issue.getPages.useQuery( { issueId, @@ -27,38 +31,37 @@ function Component() { }, ); - console.log({ readingStateStore }); - const contentLength = data?.pages.length || 0; - const itemIndex = useObservable(0); + const itemIndex = useObservable( + isSaved ? currentlyReading.get(issueId)?.currentPage : 0, + ); const itemIndexValue = itemIndex.get(); const dragX = useMotionValue(0); const width = useMemo( - () => (itemIndexValue / contentLength - 1) * 100, + () => Math.floor((itemIndexValue / contentLength) * 100), [contentLength, itemIndexValue], ); - console.log({ width }); - useInterval(() => { if (itemIndexValue < contentLength - 1) { console.log("saving to currently reading"); - readingStateStore.setTable("currentlyReading", { - issueId, + currentlyReading.set(issueId, { + id: issueId, + title: data?.issueTitle || "", thumbnailUrl: data?.thumbnailUrl || "", - issueTitle: data?.issueTitle || "", + currentPage: itemIndexValue, totalPages: contentLength - 1, - pageNumber: itemIndexValue, }); return; } if (itemIndexValue === contentLength - 1) { - readingStateStore.setTable("doneReading", { - issueId, - issueTitle: data?.issueTitle || "", - dateCompleted: new Date().toISOString(), + currentlyReading.delete(issueId); + doneReading.set(issueId, { + id: issueId, + title: data?.issueTitle || "", thumbnailUrl: data?.thumbnailUrl || "", + dateFinished: new Date().toISOString(), }); return; } @@ -115,14 +118,15 @@ function Component() {
))} + {/* progress indicator */}
-
diff --git a/src/web/routes/index.tsx b/src/web/routes/index.tsx index 2d9f9c2..29f8429 100644 --- a/src/web/routes/index.tsx +++ b/src/web/routes/index.tsx @@ -1,14 +1,16 @@ import { Flex, Heading, Text } from "@radix-ui/themes"; -import { readingStateStore } from "@shared/core/stores"; import { createFileRoute } from "@tanstack/react-router"; +import { DoneReading } from "../components"; +import CurrentlyReading from "../components/currently-reading"; +import { readingState$ } from "../state"; export const Route = createFileRoute("/")({ component: Index, }); function Index() { - const currentlyReading = readingStateStore.getTable("currentlyReading"); - const doneReading = readingStateStore.getTable("doneReading"); + const currentlyReading = Array.from(readingState$.currentlyReading.values()); + const doneReading = Array.from(readingState$.doneReading.values()); console.log({ currentlyReading, doneReading }); @@ -38,11 +40,19 @@ function Index() { className="w-full px-2 py-2 space-y-1" > Currently Reading - + + {currentlyReading.map((v) => ( + + ))} + Done Reading - + + {doneReading.map((v) => ( + + ))} + ); diff --git a/src/web/routes/library.tsx b/src/web/routes/library.tsx index a02059f..6c52071 100644 --- a/src/web/routes/library.tsx +++ b/src/web/routes/library.tsx @@ -2,6 +2,7 @@ import { Collection, Issue, IssueSkeleton, Spinner } from "@components"; import { useObservable } from "@legendapp/state/react"; import { Button, + Code, Flex, Heading, Popover, @@ -44,6 +45,23 @@ function Component() { } }, [createSourceDir]); + if (data?.collections.length === 0 && data?.issues.length === 0) { + return ( + + Add Issues to see them here + + use the + button or add to the Vision folder + in your documents + + + ); + } + return ( diff --git a/src/web/state/global.ts b/src/web/state/global.ts index de4bc7d..5b5d138 100644 --- a/src/web/state/global.ts +++ b/src/web/state/global.ts @@ -4,7 +4,12 @@ import { persistObservable, } from "@legendapp/state/persist"; import { ObservablePersistLocalStorage } from "@legendapp/state/persist-plugins/local-storage"; -import type { GlobalState,ReadingState,CurrentlyReading,DoneReading } from "@shared/types"; +import type { + CurrentlyReading, + DoneReading, + GlobalState, + ReadingState, +} from "@shared/types"; configureObservablePersistence({ pluginLocal: ObservablePersistLocalStorage, @@ -25,15 +30,15 @@ export const settingsState$ = observable<{ visible: false, }); -const readingState$=observable({ - doneReading:new Map(), - currentlyReading:new Map -}) +export const readingState$ = observable({ + doneReading: new Map(), + currentlyReading: new Map(), +}); persistObservable(globalState$, { local: "global_state", }); -persistObservable(readingState$,{ - local:"reading_state", -}) +persistObservable(readingState$, { + local: "reading_state", +});