From 2c3480f9807c887e800ee7dd8ca7c009adb24d94 Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 8 Jun 2025 12:33:44 +0200
Subject: [PATCH] Fix use of localstorage in server side

---
 app/[slug]/dashboard/guests/page.tsx    | 7 +++++--
 app/[slug]/page.tsx                     | 8 ++++----
 app/ui/components/login-form.tsx        | 5 ++++-
 app/ui/components/registration-form.tsx | 4 +++-
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/app/[slug]/dashboard/guests/page.tsx b/app/[slug]/dashboard/guests/page.tsx
index 7915188..40bb0cb 100644
--- a/app/[slug]/dashboard/guests/page.tsx
+++ b/app/[slug]/dashboard/guests/page.tsx
@@ -15,12 +15,15 @@ import SkeletonTable from '@/app/ui/guests/skeleton-row';
 import GuestsTable from '@/app/ui/guests/table';
 import { TabPanel, TabView } from 'primereact/tabview';
 import { Toast } from 'primereact/toast';
-import { Suspense, useRef, useState } from 'react';
+import { Suspense, useEffect, useRef, useState } from 'react';
 import InvitationsBoard from '@/app/ui/invitations/board';
 import { Invitation, InvitationSerializer } from '@/app/lib/invitation';
 
 
 export default function Page() {
+  const [slug, setSlug] = useState<string | null>(null);
+  useEffect(() => { setSlug(getSlug()) }, []);
+  
   const toast = useRef<Toast>(null);
   
   function refreshGuests() {
@@ -45,7 +48,7 @@ export default function Page() {
   }
 
   function resetAffinities() {
-    fetch(`/api/${getSlug()}/groups/affinities/reset`, {
+    fetch(`/api/${slug}/groups/affinities/reset`, {
       method: 'POST',
       headers: {
       'Accept': 'application/json',
diff --git a/app/[slug]/page.tsx b/app/[slug]/page.tsx
index f189a6a..a4d9a70 100644
--- a/app/[slug]/page.tsx
+++ b/app/[slug]/page.tsx
@@ -16,11 +16,11 @@ export default async function Page() {
     if (getCsrfToken() == 'unknown') {
       retrieveCSRFToken();
     }
-  }, []);
 
-  if (typeof window !== 'undefined') {
-    localStorage.setItem('slug', await params.slug);
-  }
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('slug', params.slug);
+    }
+  }, []);
 
   return (
     <main className="flex min-h-screen flex-col p-6">
diff --git a/app/ui/components/login-form.tsx b/app/ui/components/login-form.tsx
index 7b808c2..4e3c8af 100644
--- a/app/ui/components/login-form.tsx
+++ b/app/ui/components/login-form.tsx
@@ -14,6 +14,9 @@ import { getSlug } from '@/app/lib/utils';
 export default function LoginForm() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  
+  const [slug, setSlug] = useState<string | null>(null);
+  useEffect(() => {setSlug(getSlug())}, []);
 
   const router = useRouter();
 
@@ -41,7 +44,7 @@ export default function LoginForm() {
           password: password,
           onLogin: (user) => {
             setCurrentUser(user);
-            router.push(`${getSlug()}/dashboard`)
+            router.push(`${slug}/dashboard`)
           }
         })}>
         Sign in
diff --git a/app/ui/components/registration-form.tsx b/app/ui/components/registration-form.tsx
index 3de63ea..da4745f 100644
--- a/app/ui/components/registration-form.tsx
+++ b/app/ui/components/registration-form.tsx
@@ -17,7 +17,9 @@ export default function RegistrationForm() {
   const [email, setEmail] = useState<string>("");
   const [password, setPassword] = useState<string>("");
   const [passwordConfirmation, setPasswordConfirmation] = useState<string>("");
-  const [slug, setSlug] = useState<string>(getSlug());
+
+  const [slug, setSlug] = useState<string | null>(null);
+  useEffect(() => { setSlug(getSlug()) }, []);
 
   const [captchaId, setCaptchaId] = useState<string>("");
   const [captchaUrl, setCaptchaUrl] = useState<string>("");