feat: dynamic config

app/store/access.ts

@@ -1,26 +1,33 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
-import { getClientSideConfig } from "../config/client";
 
 export interface AccessControlStore {
   accessCode: string;
   token: string;
 
+  needCode: boolean;
+
   updateToken: (_: string) => void;
   updateCode: (_: string) => void;
   enabledAccessControl: () => boolean;
   isAuthorized: () => boolean;
+  fetch: () => void;
 }
 
 export const ACCESS_KEY = "access-control";
 
+let fetchState = 0; // 0 not fetch, 1 fetching, 2 done
+
 export const useAccessStore = create<AccessControlStore>()(
   persist(
     (set, get) => ({
       token: "",
       accessCode: "",
+      needCode: true,
       enabledAccessControl() {
-        return !!getClientSideConfig()?.needCode;
+        get().fetch();
+
+        return get().needCode;
       },
       updateCode(code: string) {
         set((state) => ({ accessCode: code }));
@@ -34,6 +41,25 @@ export const useAccessStore = create<AccessControlStore>()(
           !!get().token || !!get().accessCode || !get().enabledAccessControl()
         );
       },
+      fetch() {
+        if (fetchState > 0) return;
+        fetchState = 1;
+        fetch("/api/config", {
+          method: "post",
+          body: null,
+        })
+          .then((res) => res.json())
+          .then((res: DangerConfig) => {
+            console.log("[Config] got config from server", res);
+            set(() => ({ ...res }));
+          })
+          .catch(() => {
+            console.error("[Config] failed to fetch config");
+          })
+          .finally(() => {
+            fetchState = 2;
+          });
+      },
     }),
     {
       name: ACCESS_KEY,