Fix additional use of localstorage in the server side

app/[slug]/dashboard/guests/page.tsx

@@ -22,28 +22,31 @@ import { Invitation, InvitationSerializer } from '@/app/lib/invitation';
 
 export default function Page() {
   const [slug, setSlug] = useState<string>("default");
-  useEffect(() => { setSlug(getSlug()) }, []);
+
+  useEffect(() => {
+    setSlug(getSlug());
+    refreshGroups();
+    refreshGuests();
+    refreshInvitations();
+  }, []);
   
   const toast = useRef<Toast>(null);
   
   function refreshGuests() {
     new AbstractApi<Guest>().getAll(new GuestSerializer(), (objects: Guest[]) => {
       setGuests(objects);
-      setGuestsLoaded(true);
     });
   }
 
   function refreshGroups() {
     new AbstractApi<Group>().getAll(new GroupSerializer(), (objects: Group[]) => {
       setGroups(objects);
-      setGroupsLoaded(true);
     });
   }
 
   function refreshInvitations() {
     new AbstractApi<Invitation>().getAll(new InvitationSerializer(), (objects: Invitation[]) => {
       setInvitations(objects);
-      setInvitationsLoaded(true);
     });
   }
 
@@ -75,23 +78,17 @@ export default function Page() {
     });
   }
 
-  const [groupsLoaded, setGroupsLoaded] = useState(false);
   const [groups, setGroups] = useState<Array<Group>>([]);
   const [groupBeingEdited, setGroupBeingEdited] = useState<Group | undefined>(undefined);
 
   const [groupAffinitiesBeingEditted, setGroupAffinitiesBeingEditted] = useState<Group | undefined>(undefined);
 
-  const [guestsLoaded, setGuestsLoaded] = useState(false);
   const [guests, setGuests] = useState<Array<Guest>>([]);
   const [guestBeingEdited, setGuestBeingEdited] = useState<Guest | undefined>(undefined);
 
-  const [invitationsLoaded, setInvitationsLoaded] = useState(false);
   const [invitations, setInvitations] = useState<Array<Invitation>>([]);
-  const [invitationBeingEdited, setInvitationBeingEdited] = useState<Invitation | undefined>(undefined);
 
-  !groupsLoaded && refreshGroups();
-  !guestsLoaded && refreshGuests();
-  !invitationsLoaded && refreshInvitations();
+
 
   return (
     <div className="w-full">

app/ui/arrangements/arrangement.tsx

@@ -5,7 +5,6 @@
 import { AbstractApi } from '@/app/api/abstract-api';
 import { TableArrangement } from '@/app/lib/definitions';
 import { TableSimulation, TableSimulationSerializer } from '@/app/lib/tableSimulation';
-import { getSlug } from '@/app/lib/utils';
 import { Table } from '@/app/ui/components/table';
 import { lusitana } from '@/app/ui/fonts';
 import { useState, useEffect } from 'react';

app/ui/dashboard/nav-links.tsx

@@ -11,19 +11,23 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import clsx from 'clsx';
 import { getSlug } from '@/app/lib/utils';
+import { useEffect, useState } from 'react';
 
 // Map of links to display in the side navigation.
 // Depending on the size of the application, this would be stored in a database.
-const links = [
-  { name: 'Guests', href: `/${getSlug()}/dashboard/guests`, icon: UserGroupIcon },
-  { name: 'Expenses', href: `/${getSlug()}/dashboard/expenses`, icon: BanknotesIcon },
-  { name: 'Table distributions', href: `/${getSlug()}/dashboard/tables`, icon: RectangleGroupIcon },
-];
-
 
 export default function NavLinks() {
   const pathname = usePathname();
 
+  const [slug, setSlug] = useState<string>("default");
+  useEffect(() => { setSlug(getSlug()) }, []);
+
+  const links = [
+    { name: 'Guests', href: `/${slug}/dashboard/guests`, icon: UserGroupIcon },
+    { name: 'Expenses', href: `/${slug}/dashboard/expenses`, icon: BanknotesIcon },
+    { name: 'Table distributions', href: `/${slug}/dashboard/tables`, icon: RectangleGroupIcon },
+  ];
+  
   return (
     <>
       {links.map((link) => {

app/ui/dashboard/sidenav.tsx

@@ -9,15 +9,23 @@ import { gloriaHallelujah } from '@/app/ui/fonts';
 import { logout } from '@/app/api/authentication';
 import { useRouter } from 'next/navigation';
 import { getSlug } from '@/app/lib/utils';
+import { useEffect, useState } from 'react';
 
 export default function SideNav() {
   const router = useRouter();
 
+  const [slug, setSlug] = useState<string>("default");
+  useEffect(() => { setSlug(getSlug()) }, []);
+
+  const [currentUser, setCurrentUser] = useState<{ email: string } | null>(null);
+  useEffect(() => { setCurrentUser(JSON.parse(localStorage.getItem('currentUser') || '{}')) }, []);
+
+
   return (
     <div className="flex h-full flex-col px-3 py-4 md:px-2">
       <Link
         className="mb-2 flex h-20 items-center justify-start rounded-md bg-blue-600 p-4 md:h-20"
-        href={`/${getSlug()}/dashboard`}
+        href={`/${slug}/dashboard`}
       >
         <div className={`${gloriaHallelujah.className} "w-32 text-white md:w-40 antialiased`}>
           <h1>Wedding Planner</h1>
@@ -26,14 +34,14 @@ export default function SideNav() {
       <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
         <NavLinks />
         <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
-        <span>Logged in as {JSON.parse(localStorage.getItem('currentUser') || '{}').email}</span>
+        <span>Logged in as {currentUser?.email}</span>
         <button
           className="flex h-[48px] w-full grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
           onClick={() => {
             logout({
               onLogout: () => {
                 localStorage.clear();
-                router.push(`/${getSlug()}`);
+                router.push(`/${slug}`);
               }
             });
           }}