Add history page, probably more stuff

index.tsx

@@ -2,6 +2,7 @@ import { h } from "https://deno.land/x/corfu@v2.0.1/mod.ts";
 
 import { Application, Router } from "https://deno.land/x/oak@v11.1.0/mod.ts";
 import config from "./config.ts";
+import watt from "./wattpad.ts";
 
 const app = new Application();
 //print info on listen
@@ -31,7 +32,27 @@ app.use(async (ctx) => {
                 index: `${ctx.request.url.pathname}`
             });
         } catch {
-            mod = await import("./routes/404.tsx");
+            try {
+                if (
+                    ctx.request.url.pathname === "/api/getStory" &&
+                    ctx.request.url.searchParams.get("id")
+                ) {
+                    ctx.response.body = await watt.getStory(
+                        ctx.request.url.searchParams.get("id") as string,
+                        false
+                    );
+
+                    ctx.response.headers.set(
+                        "Content-Type",
+                        "application/json"
+                    );
+                    return;
+                } else {
+                    throw "L bozo";
+                }
+            } catch {
+                mod = await import("./routes/404.tsx");
+            }
         }
     }
     let rizz;

routes/history.tsx

@@ -0,0 +1,24 @@
+import { h } from "../jsx.ts";
+import watt, { watt as originalWatt } from "../wattpad.ts";
+import Base from "../templates/Base.tsx";
+
+import Script from "../components/Script.tsx";
+import HistoryScript from "../scripts/History.ts";
+
+function search() {
+    console.log(document.getElementById("query"));
+}
+
+export default (params: URLSearchParams) => {
+    return (
+        <Base
+            title="History"
+            description="Previously read works."
+            stylepath="css/index.scss"
+        >
+            <h1>Previously-read works</h1>
+            <Script function={HistoryScript} />
+            <div id="stories" class="stories" />
+        </Base>
+    );
+};

routes/search.tsx

@@ -41,6 +41,7 @@ export default async (params: URLSearchParams) => {
             stylepath="css/index.scss"
         >
             <Script function={FavoriteSearchButtonScript} />
+            <h1>Search</h1>
             {/* TODO: impl autocomplete for tags? */}
             <form method="GET" class="search-form">
                 <div>

routes/story.tsx

@@ -85,6 +85,7 @@ export default async (params: URLSearchParams) => {
                 stylepath="css/index.scss"
                 currentHref={"/story?" + params.toString()}
             >
+                <Script function={StoryProgressSavingScript} />
                 <Script function={StoryButtonScript} />
                 <Script function={ScrollHeader} />
                 <div style="display:flex;align-items:center;justify-content:center;flex-direction:column;">

scripts/FavoriteSearch.ts

@@ -4,7 +4,11 @@ interface SavedSearch {
 }
 
 export default () => {
+    let oldOnloadHandler: Function;
+    oldOnloadHandler = window.onload ?? (() => {});
+
     window.onload = () => {
+        oldOnloadHandler();
         const button = document.getElementById("favorite");
 
         if (!button) throw "how did your button not init what";

scripts/History.ts

@@ -0,0 +1,48 @@
+/* <a href={"/story?id=" + rizz.id} class="story">
+<img src={rizz.storyJSON.cover} />
+<div>
+    <h3>{rizz.name}</h3>
+    <p>{rizz.storyJSON.description}</p>
+</div>
+</a> */
+
+export default () => {
+    const oldOnloadHandler: Function = window.onload ?? (() => {});
+
+    window.onload = async () => {
+        oldOnloadHandler();
+
+        const historyDiv = document.getElementById("stories");
+
+        const readingHistory: string[] = JSON.parse(
+            localStorage.getItem("readingHistory") ?? "[]",
+        );
+
+        for (let i = 0; i < readingHistory.length; i++) {
+            // deno-lint-ignore no-explicit-any
+            const story: Record<string, any> = await (await fetch(
+                document.location.origin +
+                    `/api/getStory?id=${readingHistory[i]}`,
+            )).json();
+
+            const searchEle = document.createElement("a");
+            searchEle.className = "story";
+            searchEle.href = "/story?id=" + story.id +
+                (localStorage.getItem(`${story.id}_progress`)
+                    ? `&chapter=${localStorage.getItem(`${story.id}_progress`)}`
+                    : "");
+            const coverEle = document.createElement("img");
+            coverEle.src = story.storyJSON.cover;
+            const div = document.createElement("div");
+            const titleEle = document.createElement("h3");
+            titleEle.textContent = story.name;
+            div.appendChild(titleEle);
+            const descEle = document.createElement("o");
+            descEle.textContent = story.storyJSON.description;
+            div.appendChild(descEle);
+            searchEle.appendChild(coverEle);
+            searchEle.appendChild(div);
+            historyDiv?.appendChild(searchEle);
+        }
+    };
+};

scripts/Index.ts

@@ -11,7 +11,11 @@ interface SavedStory {
 }
 
 export default () => {
+    let oldOnloadHandler: Function;
+    oldOnloadHandler = window.onload ?? (() => {});
+
     window.onload = () => {
+        oldOnloadHandler();
         const savedSearchesDiv = document.getElementById("saved-searches");
         const savedStoriesDiv = document.getElementById("saved-stories");
         const savedSearches: SavedSearch[] = JSON.parse(
@@ -33,7 +37,6 @@ export default () => {
         savedStories.forEach((story) => {
             const searchEle = document.createElement("a");
             searchEle.className = "story";
-            /* TODO: perhaps save story progress as well? */
             searchEle.href = "/story?id=" + story.id +
                 (localStorage.getItem(`${story.id}_progress`)
                     ? `&chapter=${localStorage.getItem(`${story.id}_progress`)}`

scripts/ScrollHeader.ts

@@ -1,5 +1,9 @@
 export default () => {
+    let oldOnloadHandler: Function;
+    oldOnloadHandler = window.onload ?? (() => {});
+
     window.onload = () => {
+        oldOnloadHandler();
         document.getElementById("selected-header-element")?.scrollIntoView({
             block: "center",
             inline: "center",

scripts/Story.ts

@@ -6,7 +6,11 @@ interface SavedStory {
 }
 
 export default () => {
+    let oldOnloadHandler: Function;
+    oldOnloadHandler = window.onload ?? (() => {});
+
     window.onload = () => {
+        oldOnloadHandler();
         // Sync to position button
         const position = localStorage.getItem(
             (new URL(document.URL)).searchParams.get(

scripts/StoryProgressSaving.ts

@@ -1,9 +1,34 @@
 export default () => {
+    let oldOnloadHandler: Function;
+    oldOnloadHandler = window.onload ?? (() => {});
+
     window.onload = () => {
+        oldOnloadHandler();
         const params = new URL(document.location.href).searchParams;
-        localStorage.setItem(
-            `${params.get("id")}_progress`,
-            params.get("chapter") as string,
+        if (params.get("chapter")) {
+            localStorage.setItem(
+                `${params.get("id")}_progress`,
+                params.get("chapter") as string,
+            );
+        }
+
+        const readingHistory: string[] = JSON.parse(
+            localStorage.getItem("readingHistory") ?? "[]",
         );
+
+        readingHistory.forEach((id, idx) => {
+            if (id === params.get("id")) {
+                readingHistory.splice(idx, 1);
+            }
+        });
+
+        readingHistory.unshift(params.get("id") as string);
+
+        //TODO: do pagination on the history page to make this un-necessary
+        if (readingHistory.length > 50) {
+            readingHistory.pop();
+        }
+
+        localStorage.setItem("readingHistory", JSON.stringify(readingHistory));
     };
 };

templates/Base.tsx

@@ -67,6 +67,10 @@ export default (props: PropsWithChildren<TemplateProps>) => (
                 {
                     name: "Search",
                     href: "/search"
+                },
+                {
+                    name: "History",
+                    href: "/history"
                 }
             ]}
             currentHref=""