update

pages/novel/[slug]/[chapter].tsx

@@ -2,28 +2,28 @@ import clsx from "clsx";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { GetServerSideProps } from "next";
-import { ReactElement, useState } from "react";
+import { ReactElement, useEffect, useState } from "react";
 
 import { get } from "../../../utils/http";
-import useGet from "../../../utils/hooks/useGet";
+// import useGet from "../../../utils/hooks/useGet";
 import Toc from "../../../components/novel/Toc";
 import Toolbar from "../../../components/novel/Toolbar";
 import Settings from "../../../components/novel/Settings";
 
 import type { NextPageWithLayout } from "../../_app";
-import type { /* ChapterData,  */ ChapterListData } from "../../../types/http";
+// import type { ChapterData } from "../../../types/http";
 
 import styles from "../../../styles/chapter.module.scss";
 import useSWR from "swr";
 
 interface ChapterData {
-  chapter: "";
-  content: "";
-  errmsg: "ok";
-  errno: 10000;
-  next: "";
-  pre: "";
-  title: "";
+  chapter: string;
+  content: string;
+  errmsg: string;
+  errno: number;
+  next: string;
+  pre: string;
+  title: string;
 }
 
 const Chapter: NextPageWithLayout = () => {
@@ -39,23 +39,9 @@ const Chapter: NextPageWithLayout = () => {
 
   const [open, setOpen] = useState(false);
   const [menu, setMenu] = useState("");
-  const [isSerif, setIsSerif] = useState(
-    JSON.parse(
-      typeof localStorage !== "undefined" &&
-        localStorage.getItem("novelIsSerif")
-        ? localStorage.getItem("novelIsSerif") || "false"
-        : "false"
-    ) as boolean
-  );
+  const [isSerif, setIsSerif] = useState(false);
 
-  const [fontSize, setFontSize] = useState(
-    Number(
-      typeof localStorage !== "undefined" &&
-        localStorage.getItem("novelFontSize")
-        ? localStorage.getItem("novelFontSize")
-        : "3"
-    )
-  );
+  const [fontSize, setFontSize] = useState(3);
 
   const handleOpenToolbar = () => {
     if (open) {
@@ -83,11 +69,25 @@ const Chapter: NextPageWithLayout = () => {
     localStorage.setItem("novelIsSerif", JSON.stringify(isSerif));
     setIsSerif(isSerif);
   };
+
   const handleSetFontSize = (size: number) => {
     localStorage.setItem("novelFontSize", `${size}`);
     setFontSize(size);
   };
 
+  useEffect(() => {
+    if (typeof localStorage !== "undefined") {
+      const fs = localStorage.getItem("novelFontSize");
+      const isSerif = localStorage.getItem("novelIsSerif");
+      if (fs) {
+        setFontSize(Number(fs));
+      }
+      if (isSerif) {
+        setIsSerif(JSON.parse(isSerif));
+      }
+    }
+  }, []);
+
   if (!chapterData) {
     return null;
   }
@@ -127,7 +127,7 @@ const Chapter: NextPageWithLayout = () => {
       <main className={styles["chapter-main"]} onClick={handleOpenToolbar}>
         <div
           className={clsx(styles["chapter-page"], {
-            [styles["serif"]]: isSerif,
+            ["font-serif"]: isSerif,
             "text-sm": fontSize === 1,
             "text-base": fontSize === 2,
             "text-lg": fontSize === 3,

styles/chapter.module.scss

@@ -1,12 +1,9 @@
 .chapter-page {
-  @apply font-sans w-full flex-1 py-5 px-5 border-x border-x-gray-200 bg-white;
+  @apply w-full flex-1 py-5 px-5 border-x border-x-gray-200 bg-white;
   @apply lg:w-0 lg:max-w-3xl lg:px-10;
   :global(.dark) & {
     @apply bg-gray-800 border-x-gray-700;
   }
-  &.serif {
-    @apply font-serif;
-  }
 }
 .chapter-header {
   @apply flex px-5 items-center relative;