make temporary settings page

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],
+});

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);

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],
-});