More api fixes and page fixes

src/app/books/[bookId]/page.tsx

@@ -1,5 +1,5 @@
 import { fetchBookById } from "@/lib/api";
-import { Book } from "@/lib/types";
+import { Book, Chapter } from "@/lib/types";
 import { formatDateToMonthDayYear } from "@/lib/utils";
 import ChapterDropdown from "@/components/ChapterDropdown";
 import { Ad } from "@/lib/types";
@@ -26,8 +26,10 @@ export default async function BookPage(props: { params: paramsType }) {
     }
 
     const { title, author, description, chapters, cover } = book;
+    const sorted_chapters:Chapter[] = chapters.sort((a, b) => a.number - b.number);
+
     const cover_media = cover?.at(0);
-    const recentChapters = chapters.length > 6 ? chapters.slice(chapters.length - 6, chapters.length) : chapters;
+    const recentChapters = sorted_chapters.length > 6 ? sorted_chapters.slice(sorted_chapters.length - 6, sorted_chapters.length) : sorted_chapters;
 
     return (
             <div className="max-w-6xl mx-auto py-10 px-4">
@@ -74,9 +76,9 @@ export default async function BookPage(props: { params: paramsType }) {
                 </ul>
                 <div className="flex items-center justify-between mb-4 pt-4">
                     <h2 className="text-3xl font-semibold">All Chapters</h2>
-                    <ChapterDropdown chapters={chapters} bookId={bookId} />
+                    <ChapterDropdown chapters={sorted_chapters} bookId={bookId} />
                 </div>
-                {chapters.map((chapter) => (
+                {sorted_chapters.map((chapter) => (
                     <li key={chapter.id} className="mb-2 list-none">
                         <a
                             href={`/books/${bookId}/chapters/${chapter.documentId}`}