Hieuhuy Pham
554a6dff45
added Markdown support for rich text for all type. Markdown support for books description page too to add Translator Notes. Added a Rendering Pipeline for specialized Glossary Popup to work. Added more info to book, from back and front end. Getting ready for ratings views and reader list.
55 lines
3.2 KiB
TypeScript
55 lines
3.2 KiB
TypeScript
import React from "react";
|
|
import NavigationButtons from "@/components/NavigationButtons";
|
|
import ChapterRenderer from "@/components/ChapterContentRenderer";
|
|
import { Chapter } from "@/lib/types";
|
|
import { fetchChapterByBookId, fetchGlossaryByBookId } from "@/lib/api";
|
|
import { markdownToHtml } from "@/lib/utils";
|
|
export type paramsType = Promise<{ bookId: string; chapterId: string }>;
|
|
|
|
export const metadata = {
|
|
title: 'Null Translation Group',
|
|
description: 'This is the chapter page default description',
|
|
};
|
|
|
|
// Dynamic page component
|
|
export default async function ChapterPage(props: { params: paramsType}) {
|
|
const { bookId, chapterId } = await props.params;
|
|
|
|
let chapters: Chapter[];
|
|
try{
|
|
chapters = await fetchChapterByBookId(bookId, chapterId);
|
|
}
|
|
catch (error) {
|
|
console.error(error);
|
|
return (
|
|
<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>
|
|
)
|
|
}
|
|
const glossary_data = await fetchGlossaryByBookId(bookId);
|
|
const english_glossary = glossary_data.english_english;
|
|
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 && new Date(chapter.release_datetime).getTime() <= new Date().getTime())?.documentId || "" : "";
|
|
const prev_chapter = current_chapter ? sorted_chapters.find((chapter) => chapter.number === current_chapter.number - 1 && new Date(chapter.release_datetime).getTime() <= new Date().getTime())?.documentId || "" : "";
|
|
const chapter_content_html = current_chapter ? await markdownToHtml(current_chapter.content) : "";
|
|
if(current_chapter === null){
|
|
return (
|
|
<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: '<NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={prev_chapter} nextChapter={next_chapter} /><center><NavigationButtons /><h1> Chapter not found !</h1></center>' }}></div>
|
|
<NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={""} nextChapter={""} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="prose dark:prose-invert mx-auto p-6 bg-white dark:bg-gray-800 shadow-md rounded-lg mt-4">
|
|
<NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={prev_chapter} nextChapter={next_chapter} />
|
|
<div className="pt-4"></div>
|
|
<ChapterRenderer content={chapter_content_html} glossary={english_glossary} />
|
|
<NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={prev_chapter} nextChapter={next_chapter}/>
|
|
</div>
|
|
);
|
|
} |