refactor: update chapter navigation links to use buildChapterURL func…

…tion
SE-Academic-Group · Jun 8, 2024 · 1e1a9c4 · 1e1a9c4
1 parent 266889f
commit 1e1a9c4
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 11 deletions.
diff --git a/src/app/doc-truyen/_components/chapter-navigation.tsx b/src/app/doc-truyen/_components/chapter-navigation.tsx
@@ -16,10 +16,21 @@ export default function ChapterNavigation({
   nextChapterURL,
   prevChapterURL,
 }: ChapterNavigationProps) {
+  const { pluginName: currentPlugin } = usePluginName();
+
   const searchParams = useSearchParams();
   const novelURL = searchParams.get("novelUrl")!;
   const chapterIndex = Number(searchParams.get("chapterIndex")!);
-  const { pluginName: currentPlugin } = usePluginName();
+
+  const buildChapterURL = (chapterIndex: number) => {
+    const searchParams = new URLSearchParams();
+    searchParams.set("novelUrl", novelURL);
+    searchParams.set("chapterUrl", nextChapterURL!);
+    searchParams.set("currentPlugin", currentPlugin);
+    searchParams.set("chapterIndex", chapterIndex.toString());
+
+    return `/doc-truyen?${searchParams}`;
+  };
 
   return (
     <nav className="mb-6 mt-2 flex justify-center gap-2">
@@ -28,8 +39,7 @@ export default function ChapterNavigation({
           "inline-flex items-center rounded-sm bg-primary py-1.5 pe-2 ps-0.5 text-sm text-fg-900 hover:opacity-90",
           !prevChapterURL && "pointer-events-none opacity-50",
         )}
-        href={`/doc-truyen?chapterUrl=${prevChapterURL}&novelUrl=${novelURL}&
-          chapterIndex=${chapterIndex - 1}&currentPlugin=${currentPlugin}`}
+        href={buildChapterURL(chapterIndex - 1)}
       >
         <ChevronLeftIcon size={18} />
         <span className="sm:hidden">Trước</span>
@@ -41,7 +51,7 @@ export default function ChapterNavigation({
           "inline-flex items-center rounded-sm bg-primary py-1.5 pe-0.5 ps-2 text-sm text-fg-900 hover:opacity-90",
           !nextChapterURL && "pointer-events-none opacity-50",
         )}
-        href={`/doc-truyen?chapterUrl=${nextChapterURL}&novelUrl=${novelURL}&chapterIndex=${chapterIndex + 1}&currentPlugin=${currentPlugin}`}
+        href={buildChapterURL(chapterIndex + 1)}
       >
         <span className="hidden sm:inline">Chương sau</span>
         <span className="sm:hidden">Sau</span>

diff --git a/src/app/doc-truyen/_components/chapter-select.tsx b/src/app/doc-truyen/_components/chapter-select.tsx
@@ -10,7 +10,7 @@ type ChapterSelectProps = {
   fullChapterList: TStoryChapter[];
 };
 
-export default function ChapterSelect(props: ChapterSelectProps) {
+export default function ChapterSelect({ fullChapterList }: ChapterSelectProps) {
   const router = useRouter();
   const { pluginName: currentPlugin } = usePluginName();
   const searchParams = useSearchParams();
@@ -27,19 +27,27 @@ export default function ChapterSelect(props: ChapterSelectProps) {
 
       if (!newChapterURL || newChapterURL === chapterURL) return;
 
-      const chapter = props.fullChapterList.find(
-        (chapter) => chapter.url === newChapterURL,
+      const chapter = fullChapterList.find(
+        (chapter) => chapter.url === newChapterURL && chapter.index,
       )!;
-      router.push(
-        `/doc-truyen?chapterUrl=${newChapterURL}&novelUrl=${novelURL}&chapterIndex=${chapter.index}&currentPlugin=${currentPlugin}`,
-      );
+
+      const searchParams = new URLSearchParams();
+      searchParams.set("novelUrl", novelURL);
+      searchParams.set("chapterUrl", newChapterURL);
+      searchParams.set("currentPlugin", currentPlugin);
+      searchParams.set("chapterIndex", chapter.index!);
+      router.push(`/doc-truyen?${searchParams}`);
     });
   };
 
   useEffect(() => {
     setSelectValue(chapterURL);
   }, [chapterURL]);
 
+  const filtered = fullChapterList.filter(
+    (chapter) => chapter.url && chapter.index,
+  );
+
   return (
     <select
       onChange={handleChange}
@@ -50,7 +58,7 @@ export default function ChapterSelect(props: ChapterSelectProps) {
       disabled={isPending}
       value={selectValue}
     >
-      {props.fullChapterList.map((chapter) => (
+      {filtered.map((chapter) => (
         <option
           key={chapter.url}
           value={chapter.url || ""}