update selected component in sidebar

app/dashboard/[guildId]/loading.tsx

@@ -0,0 +1,7 @@
+export default function Loading() {
+    return (
+        <div>
+            Loading...
+        </div>
+    );
+}

components/dashboard/guild/editor/appInitialiser.tsx

@@ -2,6 +2,7 @@
 import { useLeaverStore } from "@/state/leaver";
 import { useModuleNameStore } from "@/state/moduleName";
 import { useWelcomerStore } from "@/state/welcomer";
+import { ModuleName } from "@/types";
 import { Leaver, Welcomer } from "@prisma/client";
 import { useEffect } from "react";
 
@@ -12,13 +13,13 @@ export default function AppInitializer({
   children,
 }: {
   module?: Welcomer | Leaver | null;
-  moduleName: "welcomer" | "leaver";
+  moduleName: ModuleName;
   guildId: string;
   children: React.ReactNode;
 }) {
-
+  const setModuleName = useModuleNameStore((state) => state.setModuleName);
+  setModuleName(moduleName);
   if (moduleName === "welcomer") {
-    useModuleNameStore.setState({ moduleName: "welcomer" });
     const reset = useWelcomerStore((state) => state.reset);
     useEffect(() => {
       reset();
@@ -31,7 +32,6 @@ export default function AppInitializer({
       });
     }, [module, guildId, reset]);
   } else if (moduleName === "leaver") {
-    useModuleNameStore.setState({ moduleName: "leaver" });
     const reset = useLeaverStore((state) => state.reset);
     useEffect(() => {
       reset();

components/dashboard/guild/sideBar.tsx

@@ -43,6 +43,9 @@ export function Sidebar({
   useEffect(() => {
     useGuildStore.setState({ id: currentGuild.id });
   }, [currentGuild.id]);
+  useEffect(() => {
+    setActive(module ?? "dashboard");
+  }, [module]);
   return (
     <aside className="h-full z-30 sticky block">
       <nav className="h-full flex flex-col bg-slate-800 border-r border-slate-700 shadow-sm">

state/moduleName.ts

@@ -1,6 +1,5 @@
 import { ModuleName } from "@/types";
 import { create } from "zustand";
-import { persist } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 
 export interface ModuleNameParams {
@@ -9,15 +8,8 @@ export interface ModuleNameParams {
 }
 
 export const useModuleNameStore = create<ModuleNameParams>()(
-  immer(
-    persist(
-      (set, get) => ({
-        moduleName: null,
-        setModuleName: (moduleName) => set({ moduleName: moduleName }),
-      }),
-      {
-        name: "module",
-      }
-    )
-  )
+  immer((set, get) => ({
+    moduleName: null,
+    setModuleName: (moduleName) => set({ moduleName: moduleName }),
+  }))
 );