Error handling and TODO

This commit is contained in:
Hieuhuy Pham 2025-01-12 22:33:53 -05:00
parent 0de96f7be0
commit a5fcffa344
4 changed files with 47 additions and 22 deletions

View File

@ -25,3 +25,13 @@ Maybe CMS is more useful to make websites for customers with no experience in CS
Site will be polish more later when/if any of the novels has traffic.
Things like shopping tiers and authentications seems like maybe something CMS would help with implementing.
We will see if then CMS is more useful later.
**TODO**
ADD MORE NOVEL SUPPORT
STANDARDIZE THE ERROR LOGS
ADS LATER
SCHEDULE POSTS FOR PATREON READAHEAD

View File

@ -1,6 +1,6 @@
import React from "react";
import NavigationButtons from "@/components/NavigationButtons";
import { Chapter } from "@/lib/types";
import { Book, Chapter } from "@/lib/types";
import { fetchBookById } from "@/lib/api";
import Head from "next/head";
export type paramsType = Promise<{ bookId: string; chapterId: string }>;
@ -9,16 +9,12 @@ export type paramsType = Promise<{ bookId: string; chapterId: string }>;
export default async function ChapterPage(props: { params: paramsType}) {
const { bookId, chapterId } = await props.params;
const book = await fetchBookById(bookId);
const chapters :Chapter[] = book.chapters;
const sorted_chapters:Chapter[] = chapters.sort((a, b) => a.number - b.number);
const current_chapter = sorted_chapters.find((chapter) => chapter.documentId === chapterId) || undefined;
const next_chapter = current_chapter ? sorted_chapters.find((chapter) => chapter.number === current_chapter.number + 1)?.documentId || "" : "";
const prev_chapter = current_chapter ? sorted_chapters.find((chapter) => chapter.number === current_chapter.number - 1)?.documentId || "" : "";
// Fetch chapter data
if (current_chapter === undefined) {
let book: Book;
try{
book = await fetchBookById(bookId);
}
catch (error) {
console.error(error);
return (
<>
<Head>
@ -27,17 +23,37 @@ export default async function ChapterPage(props: { params: paramsType}) {
</Head>
<div className="prose dark:prose-invert mx-auto p-6 bg-white dark:bg-gray-800 shadow-md rounded-lg mt-4">
<div dangerouslySetInnerHTML={{ __html: '<center><h1> Chapter not found !</h1></center>' }}></div>
<NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={prev_chapter} nextChapter={next_chapter} />
<NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={""} nextChapter={""} />
</div>
</>
)
}
const chapters :Chapter[] = book.chapters;
const sorted_chapters:Chapter[] = chapters.sort((a, b) => a.number - b.number);
const current_chapter = sorted_chapters.find((chapter) => chapter.documentId === chapterId) || null;
const next_chapter = current_chapter ? sorted_chapters.find((chapter) => chapter.number === current_chapter.number + 1)?.documentId || "" : "";
const prev_chapter = current_chapter ? sorted_chapters.find((chapter) => chapter.number === current_chapter.number - 1)?.documentId || "" : "";
if(current_chapter === null){
return (
<>
<Head>
<title>Chapter not found</title>
<meta name="description" content="Chapter not found" />
</Head>
<div className="prose dark:prose-invert mx-auto p-6 bg-white dark:bg-gray-800 shadow-md rounded-lg mt-4">
<div dangerouslySetInnerHTML={{ __html: '<center><h1> Chapter not found !</h1></center>' }}></div>
<NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={""} nextChapter={""} />
</div>
</>
)
}
return (
<>
<Head>
<title>{book.title} - Chapter {current_chapter.number}</title>
<title>{book.title} - Chapter {current_chapter?.number}</title>
<meta name="description" content={book.description} />
</Head>
<div className="prose dark:prose-invert mx-auto p-6 bg-white dark:bg-gray-800 shadow-md rounded-lg mt-4">
@ -48,5 +64,4 @@ export default async function ChapterPage(props: { params: paramsType}) {
</div>
</>
);
}

View File

@ -18,7 +18,7 @@ export default async function BookPage(props: { params: paramsType }) {
console.error(error);
return (
<div className="text-center mt-10 text-red-500">
Error fetching book data. Please try again later.
Book does not exists, are you lost?
</div>
);
}