common get post method, and control, edit page

components/Timetable.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { get, post } from "@/common";
 
 interface Conflicts {
   [index: string]: HTMLInputElement[];
@@ -47,17 +48,12 @@ const Timetable = ({ user }) => {
       }
     }
     // post request
-    const resp = await fetch("/api/record", {
-      method: "POST",
-      headers: { "Content-Type": "appliction/json" },
-      body: JSON.stringify({
-        name: target.name,
-        checked: target.checked,
-        user,
-      }),
+    const json = await post("/api/record", {
+      name: target.name,
+      checked: target.checked,
+      user,
     });
-    if (!resp.ok) {
-      const json = await resp.json();
+    if (json.error !== undefined) {
       alert(json.error);
       // revert conflict changed input
       for (const { input, disable } of changedInputs) {
@@ -138,8 +134,7 @@ const Timetable = ({ user }) => {
   };
 
   const refresh = async () => {
-    const resp = await fetch(`/api/record?name=${user}`);
-    const json = await resp.json();
+    const json = await get(`/api/record?name=${user}`);
     const occupied: string[] = json.occupied;
     const myselect: string[] = json.myselect;
     console.log(json);
@@ -170,16 +165,13 @@ const Timetable = ({ user }) => {
   });
 
   React.useEffect(() => {
-    fetch("/api/html")
-      .then((resp) => resp.json())
-      .then((json) => {
-        console.log(ref);
-        ref.current.innerHTML = json.html;
-      })
-      .then(() => {
-        handleInput({ target: ref.current });
-        refresh();
-      });
+    const main = async () => {
+      const json = await get("/api/html");
+      ref.current.innerHTML = json.html;
+      handleInput({ target: ref.current });
+      refresh();
+    };
+    main();
   }, []);
 
   return (