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) => {
>
{
gap="2"
>
- {issue.issueTitle}
+ {issue.title}
- {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.issueTitle}
-
-
-
-
+
+
+
+
+
+
+ {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",
+});