fix: concurrency

ordr-ui/app/components/NavBar.tsx

@@ -1,11 +1,29 @@
+'use client'
 import Link from "next/link"
+import { useCurrentAuthenticatedUserStore } from "../providers"
+import useAsyncEffect from "use-async-effect"
+import { Mutex } from "async-mutex"
+import { useShallow } from "zustand/shallow"
+
+const navBarMutex = new Mutex()
 
 export const NavBar = () => {
+
+    const authUserStore = useCurrentAuthenticatedUserStore(useShallow((state) => state))
+
+    useAsyncEffect(async () => {
+        if(authUserStore.Id === -1) {
+            const release = await navBarMutex.acquire()
+            await authUserStore.sync()
+            await release()
+        }
+    }, [authUserStore])
+
     return (
         <nav>
             <div className="flex items-center justify-center">
                 <Link className=" pl-7 pr-7 pt-3 pb-3 hover:bg-purple-950" href="/orders/0/0">Orders</Link>
-                <Link className=" pl-7 pr-7 pt-3 pb-3 hover:bg-purple-950" href="/users/0">Users</Link>
+                {authUserStore.Admin && (<Link className=" pl-7 pr-7 pt-3 pb-3 hover:bg-purple-950" href="/users/0">Users</Link>)}
                 <Link className=" pl-7 pr-7 pt-3 pb-3 hover:bg-purple-950" href="/items">Items</Link>
             </div>
         </nav>