From 6e3b032d2177fd9296beae9ef94ec9e050728ad8 Mon Sep 17 00:00:00 2001
From: chakkun1121 <99847806+chakkun1121@users.noreply.github.com>
Date: Fri, 2 Feb 2024 16:39:57 +0900
Subject: [PATCH] make temporary settings page

---
 app/(app)/_library/settings/localSettings.ts  | 14 ++++++
 .../_library/settings/useServerSettings.tsx   |  2 +-
 app/(app)/settings/main.tsx                   | 47 +++++++++++++------
 3 files changed, 48 insertions(+), 15 deletions(-)
 create mode 100644 app/(app)/_library/settings/localSettings.ts

diff --git a/app/(app)/_library/settings/localSettings.ts b/app/(app)/_library/settings/localSettings.ts
new file mode 100644
index 0000000..3391399
--- /dev/null
+++ b/app/(app)/_library/settings/localSettings.ts
@@ -0,0 +1,14 @@
+import { localSettings } from "@/@types/settings";
+import { atom } from "recoil";
+import { recoilPersist } from "recoil-persist";
+
+// recoil
+const { persistAtom } = recoilPersist({
+  key: "settings",
+  storage: typeof window === "undefined" ? undefined : localStorage,
+});
+export const localSettingsState = atom<localSettings>({
+  key: "settings",
+  default: {},
+  effects_UNSTABLE: [persistAtom],
+});
diff --git a/app/(app)/_library/settings/useServerSettings.tsx b/app/(app)/_library/settings/useServerSettings.tsx
index 36cfa52..f513da0 100644
--- a/app/(app)/_library/settings/useServerSettings.tsx
+++ b/app/(app)/_library/settings/useServerSettings.tsx
@@ -24,7 +24,7 @@ export function useServerSettings(token: string) {
       if (settingsFile) {
         setSettingsFileID(settingsFile.id);
         setServerSettings(
-          JSON.parse(await getFileContent(token, settingsFile.id)) || {}
+          JSON.parse((await getFileContent(token, settingsFile.id)) || "{}")
         );
       }
       setIsLoading(false);
diff --git a/app/(app)/settings/main.tsx b/app/(app)/settings/main.tsx
index d5c9dbf..59f068a 100644
--- a/app/(app)/settings/main.tsx
+++ b/app/(app)/settings/main.tsx
@@ -1,28 +1,47 @@
 "use client";
 
 import { customSession } from "@/@types/customSession";
-import { localSettings } from "@/@types/settings";
 import { useSession } from "next-auth/react";
-import { atom, useRecoilState } from "recoil";
-import { recoilPersist } from "recoil-persist";
 import { useServerSettings } from "../_library/settings/useServerSettings";
+import { useRecoilState } from "recoil";
+import { localSettingsState } from "../_library/settings/localSettings";
 
 export default function Settings() {
   const { data: session }: { data: customSession | null } =
     useSession() as unknown as { data: customSession };
   const token = session?.accessToken;
+  const [localSettings, setLocalSettings] = useRecoilState(localSettingsState);
   const { serverSettings, setServerSettings, isLoading, isSaving } =
     useServerSettings(token);
   if (isLoading) return <p className="text-center">loading...</p>;
-  return <div></div>;
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        const form = e.target as HTMLFormElement;
+        const serverSettings = form.serverSettings.value;
+        const localSettings = form.localSettings.value;
+        setServerSettings(serverSettings);
+        setLocalSettings(JSON.parse(localSettings));
+      }}
+    >
+      <div>
+        <h2>サーバー保存の設定</h2>
+        <textarea
+          name="serverSettings"
+          defaultValue={JSON.stringify(serverSettings, null, 2)}
+        />
+      </div>
+      <div>
+        <h2>ローカル保存の設定</h2>
+        <textarea
+          name="localSettings"
+          defaultValue={JSON.stringify(localSettings || "{}", null, 2)}
+        />
+      </div>
+      <button disabled={isSaving} type="submit">
+        保存
+      </button>
+    </form>
+  );
 }
-// recoil
-const { persistAtom } = recoilPersist({
-  key: "settings",
-  storage: typeof window === "undefined" ? undefined : localStorage,
-});
-export const localSettingsState = atom<localSettings>({
-  key: "settings",
-  default: {},
-  effects_UNSTABLE: [persistAtom],
-});