refactor: clean code for novel chapter

src/components/Reading/ChapterInfo.tsx

@@ -0,0 +1,27 @@
+import { Link } from "react-router-dom";
+import GuideText from "./GuideText";
+import { HiUser } from "react-icons/hi2";
+import { IChapter } from "../../types/novel";
+
+const ChapterInfo = ({ chapter, server }: { chapter: IChapter; server: string }) => {
+  return (
+    <>
+      <Link
+        to={`/truyen/${chapter.novelId}`}
+        className="font-bold text-gray-900 text-lg md:text-xl capitalize hover:text-amber-700 dark:text-stone-300 text-center"
+      >
+        {chapter.novelName}
+      </Link>
+      <Link
+        to={`/tac-gia/${chapter.author.authorId || chapter.author.id}?server=${server}`}
+        className="mt-1 text-gray-500 dark:text-gray-300 flex gap-1 items-center hover:underline"
+      >
+        <HiUser />
+        {chapter.author.name}
+      </Link>
+      <GuideText />
+    </>
+  );
+};
+
+export default ChapterInfo;

src/components/Reading/Content.tsx

@@ -0,0 +1,27 @@
+import { useContext } from "react";
+import { AppState } from "../../store";
+import { useSelector } from "react-redux";
+import { SettingsContext } from "../../contexts/SettingsContext";
+
+const Content = ({ content }: { content: string }) => {
+  const { color } = useContext(SettingsContext)!;
+  const settings = useSelector((state: AppState) => state.settings);
+
+  return (
+    <div
+      className="mt-8 mb-4 px-2"
+      style={{
+        fontSize: settings.fontSize,
+        color: color,
+        fontFamily: settings.fontStyle,
+        lineHeight: settings.leading,
+        textAlign: settings.align,
+      }}
+      dangerouslySetInnerHTML={{
+        __html: content,
+      }}
+    ></div>
+  );
+};
+
+export default Content;

src/components/Reading/GroupButtonControl.tsx

@@ -0,0 +1,39 @@
+import { Dispatch, SetStateAction } from "react";
+import ButtonBookmark from "../Button/ButtonBookmark";
+import ButtonUtils from "../Button/ButtonUtils";
+
+import { IoSettingsOutline } from "react-icons/io5";
+import { MdOutlineFormatListBulleted } from "react-icons/md";
+import { IChapter } from "../../types/novel";
+
+interface Props {
+  setOpenSettingPopup: Dispatch<SetStateAction<boolean>>;
+  setOpenChapterPopup: Dispatch<SetStateAction<boolean>>;
+  chapter: IChapter;
+}
+
+const GroupButtonControl = (props: Props) => {
+  return (
+    <div className="mt-6 flex md:gap-5 gap-3 mb-4 flex-wrap justify-center">
+      <ButtonUtils func={() => props.setOpenSettingPopup(true)}>
+        <IoSettingsOutline />
+        Cấu hình
+      </ButtonUtils>
+
+      <ButtonUtils func={() => props.setOpenChapterPopup(true)}>
+        <MdOutlineFormatListBulleted />
+        Mục lục
+      </ButtonUtils>
+
+      <ButtonBookmark
+        novelId={props.chapter.novelId}
+        novelName={props.chapter.novelName}
+        chapterId={props.chapter.chapterId}
+        chapterName={props.chapter.name}
+        time={new Date().toString()}
+      />
+    </div>
+  );
+};
+
+export default GroupButtonControl;

src/components/Reading/GroupHandleChapterBottom.tsx

@@ -0,0 +1,35 @@
+import ButtonChangeChapter from "../Button/ButtonChangeChapter";
+
+import { RiSkipLeftLine } from "react-icons/ri";
+import { RiSkipRightLine } from "react-icons/ri";
+
+const GroupHandleChapterBottom = ({
+  isShowPrevButton,
+  isShowNextButton,
+  handlePrevChapter,
+  handleNextChapter,
+}: {
+  isShowPrevButton: boolean;
+  isShowNextButton: boolean;
+  handlePrevChapter: () => void;
+  handleNextChapter: () => void;
+}) => {
+  return (
+    <div className="mt-6 flex gap-14 items-center justify-center">
+      {isShowPrevButton && (
+        <ButtonChangeChapter func={handlePrevChapter}>
+          <RiSkipLeftLine className="text-2xl" />
+          TRƯỚC
+        </ButtonChangeChapter>
+      )}
+      {isShowNextButton && (
+        <ButtonChangeChapter func={handleNextChapter}>
+          <RiSkipRightLine className="text-2xl" />
+          SAU
+        </ButtonChangeChapter>
+      )}
+    </div>
+  );
+};
+
+export default GroupHandleChapterBottom;

src/components/Reading/GroupHandleChapterTop.tsx

@@ -0,0 +1,32 @@
+import { GrNext } from "react-icons/gr";
+import { GrPrevious } from "react-icons/gr";
+
+const GroupHandleChapterTop = ({
+  handlePrevChapter,
+  handleNextChapter,
+  chapterName,
+}: {
+  handlePrevChapter: () => void;
+  handleNextChapter: () => void;
+  chapterName: string;
+}) => {
+  return (
+    <div className="flex mt-2 items-center gap-4 text-sm md:text-base">
+      <button
+        onClick={handlePrevChapter}
+        className="border flex items-center justify-center rounded-full p-1 text-amber-600 border-amber-600 hover:bg-amber-600 hover:text-white focus:outline-none"
+      >
+        <GrPrevious />
+      </button>
+      <div className="text-gray-700 dark:text-stone-300 text-center">{chapterName}</div>
+      <button
+        onClick={handleNextChapter}
+        className="border flex items-center justify-center rounded-full p-1 text-amber-600 border-amber-600 hover:bg-amber-600 hover:text-white focus:outline-none"
+      >
+        <GrNext />
+      </button>
+    </div>
+  );
+};
+
+export default GroupHandleChapterTop;

src/hooks/useChangeChapter.tsx

@@ -0,0 +1,55 @@
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import { IChapter } from "../types/novel";
+import { useKeyboardShortcut } from "./useKeyboardShortcut";
+
+interface Props {
+  chapter: IChapter | null;
+  chapterId: string | undefined;
+  novelId: string | undefined;
+  isActive: boolean;
+}
+
+const useChangeChapter = ({ chapter, chapterId, novelId, isActive }: Props) => {
+  const navigate = useNavigate();
+
+  const handleNextChapter = () => {
+    if (chapter == null || chapterId == null) return;
+    if (!chapter.nextChapterId || chapter.nextChapterId.length <= 0) {
+      toast.error("Hiện tại đây đã là chương cuối", {
+        toastId: "last-chapter",
+      });
+      return;
+    }
+    toast.dismiss();
+    navigate(`/truyen/${novelId}/${chapter.nextChapterId}`);
+  };
+
+  const handlePrevChapter = () => {
+    if (chapter == null || chapterId == null) return;
+    if (!chapter.preChapterId || chapter.preChapterId.length <= 0) {
+      toast.error("Đây đã là chương đầu tiên", {
+        toastId: "first-chapter",
+      });
+      return;
+    }
+    toast.dismiss();
+    navigate(`/truyen/${novelId}/${chapter.preChapterId}`);
+  };
+
+  useKeyboardShortcut({
+    isActive,
+    key: "ArrowLeft",
+    onKeyPressed: handlePrevChapter,
+  });
+
+  useKeyboardShortcut({
+    isActive,
+    key: "ArrowRight",
+    onKeyPressed: handleNextChapter,
+  });
+
+  return { handleNextChapter, handlePrevChapter };
+};
+
+export default useChangeChapter;