fix(frontend): hydration mismatch errors

frontend/src/api.ts

@@ -1,6 +1,10 @@
 import { toast } from 'vue-sonner'
 
-export async function apiFetch(url: string, options: RequestInit = {}) {
+export async function apiFetch(endpoint: string, options: RequestInit = {}) {
+  return fetchJSON(`${import.meta.env.PUBLIC_PAYLOAD_URL}${endpoint}`, options)
+}
+
+export async function fetchJSON(url: string, options: RequestInit = {}) {
   const defaultOptions: RequestInit = {
     headers: {
       'Content-Type': 'application/json',
@@ -35,7 +39,7 @@ interface ILoginPayload {
 }
 
 export async function login(payload: ILoginPayload) {
-  const login = apiFetch(`/api/users/login`, {
+  const login = fetchJSON(`/api/users/login`, {
     method: 'POST',
     body: JSON.stringify(payload),
   })
@@ -64,7 +68,7 @@ export interface IRegisterPayload {
 }
 
 export async function register(payload: IRegisterPayload) {
-  const login = apiFetch(`/api/register`, {
+  const login = fetchJSON(`/api/register`, {
     method: 'POST',
     body: JSON.stringify(payload),
   })
@@ -87,7 +91,7 @@ export async function register(payload: IRegisterPayload) {
 }
 
 export async function logout() {
-  const logout = apiFetch(`/api/users/logout`, {
+  const logout = fetchJSON(`/api/users/logout`, {
     method: 'POST',
   })
 

frontend/src/components/Auth/Login.vue

@@ -1,7 +1,6 @@
 <script setup>
   import { ref } from 'vue'
   import { login } from '../../api'
-  import Button from '@/components/ui/button/Button.vue';
 
   const PAYLOAD_URL = import.meta.env.PUBLIC_PAYLOAD_URL
 
@@ -33,7 +32,7 @@
     <input class="text-slate-900" type="email" name="email" placeholder="your@email.com" required />
     <input class="text-slate-900" type="password" name="password" placeholder="password" required />
     <div class="text-center">
-      <Button type="submit">Login</Button>
+      <button type="submit">Login</button>
     </div>
   </form>
 </template>

frontend/src/components/Auth/Register.vue

@@ -1,7 +1,6 @@
 <script setup>
   import { ref } from 'vue'
   import { register } from '../../api'
-  import Button from '@/components/ui/button/Button.vue';
 
   const PAYLOAD_URL = import.meta.env.PUBLIC_PAYLOAD_URL
 
@@ -35,7 +34,7 @@
     <input class="text-slate-900" type="email" name="email" placeholder="your@email.com" required />
     <input class="text-slate-900" type="password" name="password" placeholder="password" required />
     <div class="text-center">
-      <Button type="submit">Register</Button>
+      <button type="submit">Register</button>
     </div>
   </form>
 </template>

frontend/src/components/EldenRing/Builder.vue

@@ -184,8 +184,8 @@ const onSubmit = form.handleSubmit((values) => {
       </div>
     </div>
 
-    <Button type="submit">
+    <button type="submit">
       Create
-    </Button>
+    </button>
   </form>
 </template>

frontend/src/components/EldenRing/RelationSelect.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { onMounted, ref } from 'vue';
+  import { ref } from 'vue';
   import { inMemoryCache } from '@/lib/Cache'
   import { apiFetch } from '@/api';
 
@@ -21,29 +21,24 @@
     SelectValue,
   } from '@/components/ui/select'
 
-
   const props = defineProps<{
     name: string;
     type: string;
     relations: string[];
     filter?: (item: any) => boolean;
   }>()
 
-  const loading = ref(true)
+  const loading = ref(false)
   const optionsGroups = ref([])
 
-  onMounted(() => {
-    loading.value = false;
-  })
-
   async function getOptions(relation) {
     const cached = inMemoryCache.get(relation)
 
     if (cached) {
       return cached
     }
 
-    const response = await apiFetch(`${import.meta.env.PUBLIC_PAYLOAD_URL}/api/${relation}`)
+    const response = await apiFetch(`/api/${relation}`)
     inMemoryCache.set(relation, response)
     return response
   }
@@ -55,13 +50,17 @@
   async function getAllOptions() {
     if (optionsGroups.value.length > 0) return;
 
+    loading.value = true;
+
     for (const relation of props.relations) {
       const options = await getOptions(relation)
       optionsGroups.value.push({
         relation,
         docs: options.docs
       })
     }
+
+    loading.value = false;
   }
 </script>
 

frontend/src/pages/builder.astro

@@ -11,5 +11,5 @@ import Layout from "@/layouts/Layout.astro";
     Data are fetched in the component loaded to avoid loading
     too much data
   */}
-  <ERBuilder client:load />
+  <ERBuilder client:only />
 </Layout>

frontend/src/pages/builds.astro

@@ -2,6 +2,6 @@
 import Layout from "../layouts/Layout.astro";
 ---
 
-<Layout title="Home">
+<Layout title="Builds">
   <h1>Builds</h1>
 </Layout>

frontend/src/pages/login.astro

@@ -1,11 +1,8 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import LoginForm from '@/components/Auth/Login.vue'
-
-const { user } = Astro.locals;
 ---
 
 <Layout title="Login">
-  { !user && <LoginForm client:load /> }
-  { user && <h1>You are already logged in.</h1>}
+  <LoginForm client:load />
 </Layout>

frontend/src/pages/register.astro

@@ -1,11 +1,8 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import RegisterForm from '@/components/Auth/Register.vue'
-
-const { user } = Astro.locals;
 ---
 
-<Layout title="Login">
-  { !user && <RegisterForm client:load /> }
-  { user && <h1>You are already logged in.</h1>}
+<Layout title="Register">
+  <RegisterForm client:load />
 </Layout>

frontend/src/styles/globals.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+button {
+  @apply bg-white text-slate-900 rounded-lg py-2 px-4;
+}