Merge pull request #2 from sardinedev/feat/story-arcs

feat: Story arcs
sardinedev · Mar 29, 2024 · 0b52001 · 0b52001
2 parents c0cfa59 + 28d07c4
commit 0b52001
Show file tree

Hide file tree

Showing 14 changed files with 100 additions and 42 deletions.
diff --git a/src/components/IssueGrid/IssueGrid.tsx b/src/components/IssueGrid/IssueGrid.tsx
@@ -2,10 +2,7 @@ import { useEffect, useState } from "preact/hooks";
 import { useStore } from "@nanostores/preact";
 import { $sort } from "../../stores/sort.store";
 import { PageNavigator } from "../PageNavigator";
-import type {
-  ComicvineImage,
-  ShortIssue,
-} from "../../pages/api/comicvine.types";
+import type { ComicvineImage, ShortIssue } from "../../util/comicvine.types";
 import type { Sort } from "../../stores/sort.store";
 
 export type Props = {
@@ -37,10 +34,12 @@ function clampIssuesPerPage({
       (a, b) => parseInt(a.issue_number) - parseInt(b.issue_number)
     );
   }
-  return issueList.slice(
+  const trimmedList = issueList.slice(
     (currentPage - 1) * issuesPerPage,
     currentPage * issuesPerPage
   );
+
+  return trimmedList;
 }
 
 function Issue({ id, name, image, issue_number }: ShortIssue) {
@@ -54,9 +53,9 @@ function Issue({ id, name, image, issue_number }: ShortIssue) {
     }
     if (!image) {
       getIssue();
-      console.warn("Issue", id, "is missing an image");
     }
-  }, [image]);
+  }, []);
+
   return (
     <li>
       <a href={"/comic/" + id}>
@@ -83,7 +82,6 @@ export function IssueGrid({
   issuesPerPage = 50,
 }: Props) {
   const $sortDirection = useStore($sort);
-
   const [issues, setIssues] = useState<ShortIssue[] | undefined>(
     clampIssuesPerPage({
       issuesPerPage,
@@ -103,6 +101,7 @@ export function IssueGrid({
       })
     );
   }, [issueList, currentPage, issuesPerPage, $sortDirection]);
+
   return (
     <>
       <ul class="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-5 mt-8">

diff --git a/src/components/PageNavigator.tsx b/src/components/PageNavigator.tsx
@@ -1,10 +1,15 @@
+import { $sort } from "../stores/sort.store";
+
 type Props = {
+  /** The series ID is used to compose the URL on the link navigation */
   id: number | string;
   numberOfPages: number;
   currentPage: number;
 };
 export function PageNavigator({ id, numberOfPages, currentPage }: Props) {
+  const sort = $sort.get();
   let pagesArray: (string | number)[] = [];
+
   if (numberOfPages > 8) {
     if (currentPage < 5) {
       pagesArray = [1, 2, 3, 4, 5, "...", numberOfPages];
@@ -41,7 +46,7 @@ export function PageNavigator({ id, numberOfPages, currentPage }: Props) {
               <span>{page}</span>
             ) : (
               <a
-                href={`/series/${id}/${page}`}
+                href={`/series/${id}/${page}?sort=${sort}`}
                 class={page === currentPage ? "underline" : ""}
               >
                 {page}

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,4 +1,5 @@
 ---
+import { ViewTransitions } from "astro:transitions";
 import Header from "../components/Header.astro";
 interface Props {
   title: string;
@@ -16,6 +17,7 @@ const { title } = Astro.props;
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
+    <ViewTransitions />
   </head>
   <body class="bg-slate-900 font-sans text-slate-50">
     <Header />
@@ -25,10 +27,10 @@ const { title } = Astro.props;
     <footer class="p-4 text-center text-xs">
       <p>&copy; 2024 Sardines Reading Comics</p>
     </footer>
+    <style is:global>
+      .hide-scrollbar {
+        scrollbar-width: none;
+      }
+    </style>
   </body>
-  <style is:global>
-    .hide-scrollbar {
-      scrollbar-width: none;
-    }
-  </style>
 </html>
diff --git a/src/pages/api/followSeries.ts b/src/pages/api/followSeries.ts
@@ -1,5 +1,5 @@
 import type { APIRoute, APIContext } from "astro";
-import { kvAddFollowSeries, kvGetFollowSeries } from "./kv";
+import { kvAddFollowSeries, kvGetFollowSeries } from "../../util/kv";
 
 export const GET: APIRoute = async ({ locals }: APIContext) => {
   const kv = locals.runtime.env.COMICS;

diff --git a/src/pages/api/issue/[id].ts b/src/pages/api/issue/[id].ts
@@ -1,4 +1,4 @@
-import { kvGetComicIssue } from "../kv";
+import { kvGetComicIssue } from "../../../util/kv";
 
 import type { APIContext } from "astro";
 

diff --git a/src/pages/comic/[id]/index.astro b/src/pages/comic/[id]/index.astro
@@ -1,9 +1,9 @@
 ---
 import IssueSlider from "../../../components/IssueSlider.astro";
 import Layout from "../../../layouts/Layout.astro";
-import { kvGetComicIssue, kvGetVolume } from "../../api/kv";
+import { kvGetComicIssue, kvGetVolume } from "../../../util/kv";
 
-import type { ComicvineSingleIssueResponse } from "../../api/comicvine.types";
+import type { ComicvineSingleIssueResponse } from "../../../util/comicvine.types";
 import type { SingleIssuePreview } from "../../../components/IssueSlider.astro";
 
 const kv = Astro.locals.runtime.env.COMICS;

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -2,7 +2,7 @@
 import Layout from "../layouts/Layout.astro";
 import IssueSlider from "../components/IssueSlider.astro";
 import { thisWeekBookendsDates } from "../util/date";
-import { kvGetFollowSeries, kvGetWeeklyComics } from "./api/kv";
+import { kvGetFollowSeries, kvGetWeeklyComics } from "../util/kv";
 
 import type { SingleIssuePreview } from "../components/IssueSlider.astro";
 
@@ -68,5 +68,3 @@ try {
     )
   }
 </Layout>
-
-<style></style>
diff --git a/src/pages/series/[id]/[...slug].astro b/src/pages/series/[id]/[...slug].astro
@@ -3,15 +3,20 @@ import Layout from "../../../layouts/Layout.astro";
 import CoverStack from "../../../components/CoverStack.astro";
 import { IssueGrid } from "../../../components/IssueGrid/IssueGrid";
 import { SortButton } from "../../../components/SortButton";
-import { kvGetVolume, kvGetFollowSeries } from "../../api/kv";
+import { kvGetVolume, kvGetFollowSeries } from "../../../util/kv";
+import { $sort } from "../../../stores/sort.store";
 
-import type { ComicvineVolumeResponse } from "../../api/comicvine.types";
+import type { ComicvineVolumeResponse } from "../../../util/comicvine.types";
+
+const sort = Astro.url.searchParams.get("sort") === "asc" ? "asc" : "desc";
+$sort.set(sort);
 
 const kv = Astro.locals.runtime.env.COMICS;
 const { id, slug } = Astro.params;
 let volume: ComicvineVolumeResponse | undefined;
 let currentPage = 1;
 let isFollowing = false;
+
 if (slug) {
   currentPage = parseInt(slug);
 }

diff --git a/src/pages/story-arc/[storyArcId].astro b/src/pages/story-arc/[storyArcId].astro
@@ -0,0 +1,2 @@
+---
+---
diff --git a/src/stores/sort.store.ts b/src/stores/sort.store.ts
@@ -1,12 +1,32 @@
-import { persistentAtom } from "@nanostores/persistent";
+import { atom } from "nanostores";
 export type Sort = "asc" | "desc";
 
-export const $sort = persistentAtom<Sort>("sortIssues", "asc");
+function getSortfromURL() {
+  if (typeof document === "undefined") {
+    return "desc";
+  }
+  const url = new URL(document.location.href);
+  const sort = url.searchParams.get("sort");
+
+  if (sort === "asc") {
+    return "asc";
+  }
+  return "desc";
+}
+
+function setSortInURL(sort: Sort) {
+  const url = new URL(document.location.href);
+  url.searchParams.set("sort", sort);
+  history.pushState({}, "", url.href);
+}
+
+export const $sort = atom<Sort>(getSortfromURL());
 
 export function toggleSort(sort: Sort) {
   if (sort === "asc") {
     $sort.set("desc");
   } else {
     $sort.set("asc");
   }
+  setSortInURL($sort.get());
 }
diff --git a/src/util/clampIssuesPerPage.ts b/src/util/clampIssuesPerPage.ts
@@ -0,0 +1,31 @@
+import type { Sort } from "../stores/sort.store";
+import type { ShortIssue } from "./comicvine.types";
+
+export function clampIssuesPerPage({
+  issuesPerPage,
+  currentPage,
+  issueList,
+  sortDirection,
+}: {
+  issuesPerPage: number;
+  currentPage: number;
+  issueList: ShortIssue[];
+  sortDirection: Sort;
+}) {
+  // sort the issues by issue number
+  if (sortDirection === "desc") {
+    issueList.sort(
+      (a, b) => parseInt(b.issue_number) - parseInt(a.issue_number)
+    );
+  } else {
+    issueList.sort(
+      (a, b) => parseInt(a.issue_number) - parseInt(b.issue_number)
+    );
+  }
+  const trimmedList = issueList.slice(
+    (currentPage - 1) * issuesPerPage,
+    currentPage * issuesPerPage
+  );
+
+  return trimmedList;
+}
diff --git a/src/pages/api/comicvine.ts → src/util/comicvine.ts b/src/pages/api/comicvine.ts → src/util/comicvine.ts
diff --git a/src/pages/api/comicvine.types.ts → src/util/comicvine.types.ts b/src/pages/api/comicvine.types.ts → src/util/comicvine.types.ts
diff --git a/src/pages/api/kv.ts → src/util/kv.ts b/src/pages/api/kv.ts → src/util/kv.ts
@@ -67,35 +67,31 @@ export async function kvGetVolume(
     } else {
       const response = await getVolumeDetails(id);
       if (response) {
-        const issuesFromVolume = await kvGetIssuesFromVolume(id, kv);
         let cover_image: string[] = [];
-        if (issuesFromVolume) {
-          cover_image = issuesFromVolume
-            .reverse()
-            .slice(0, 5)
-            .map((issue) => issue.image.medium_url);
 
-          // sort by issue number
-          response.issues.sort(
-            (a, b) => parseInt(a.issue_number) - parseInt(b.issue_number)
-          );
+        // sort by issue number
+        response.issues.sort(
+          (a, b) => parseInt(a.issue_number) - parseInt(b.issue_number)
+        );
 
-          for (const responseIssue of response.issues) {
-            const issue = issuesFromVolume.find(
-              (issue) => issue.id === responseIssue.id
-            );
-            if (issue) {
-              responseIssue.image = issue.image;
-            }
+        const firstFiveIssues = response.issues.slice(0, 5);
+
+        for (const issue of firstFiveIssues) {
+          const issueDetails = await kvGetComicIssue(issue.id, kv);
+          if (issueDetails) {
+            cover_image.push(issueDetails.image.medium_url);
           }
         }
+
         const fullResponse = {
           ...response,
           cover_image,
         };
+
         await kv.put(`4050-${id}`, JSON.stringify(fullResponse), {
           expirationTtl: 60 * 60 * 24 * 7, // 7 days
         });
+
         return fullResponse;
       }
     }