Updated components

lib/leaderboard.ts

@@ -0,0 +1,27 @@
+import axios from 'axios';
+
+export const getScores = async (): Promise<Score[]> => {
+  const { data, status } = await axios.get(`${process.env.NEXT_PUBLIC_API_URL}/leaderboard`, {
+    insecureHTTPParser: true
+  });
+
+  const scores = data;
+
+  if (status !== 200) {
+    throw new Error('Failed to fetch scores');
+  }
+
+  if (!scores) {
+    return [] as Score[];
+  }
+
+  return scores as Score[];
+};
+
+export type Score = {
+  score: number;
+  tries: number;
+  completions: number;
+  pseudo: string;
+  group: string;
+};

lib/nav-items.ts

@@ -25,7 +25,7 @@ export const navItems: NavItem[] = [
   },
   {
     name: 'Classement',
-    slug: 'ranking',
+    slug: 'leaderboard',
     icon: 'line-chart-line',
     disabled: false
   },

ui/Select.tsx

@@ -0,0 +1,37 @@
+import { forwardRef } from 'react';
+import type { UseFormRegister } from 'react-hook-form';
+import ErrorMessage from './ErrorMessage';
+import Label from './Label';
+
+const Select = forwardRef<
+  HTMLSelectElement,
+  React.SelectHTMLAttributes<HTMLSelectElement> & {
+    label?: string;
+    error?: React.ReactNode;
+    description?: string;
+    options: { value: string; title: string }[];
+  } & Partial<ReturnType<UseFormRegister<any>>>
+>(({ options, className, label, description, error, ...props }, ref) => (
+  <>
+    <Label label={label} description={description} required={props.required} className={className}>
+      <select
+        className={
+          'w-full cursor-pointer overflow-hidden rounded-lg border-2 border-highlight-primary bg-transparent px-5 py-2.5 text-sm font-medium text-secondary opacity-80 outline-none transition-opacity hover:opacity-100 disabled:opacity-50'
+        }
+        {...props}
+        ref={ref}
+      >
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.title}
+          </option>
+        ))}
+      </select>
+    </Label>
+    {error && <ErrorMessage>{error}</ErrorMessage>}
+  </>
+));
+
+Select.displayName = 'Select';
+
+export default Select;

ui/UserAuthForm.tsx

@@ -1,19 +1,12 @@
 'use client';
 
+import axios from 'axios';
 import { usePathname, useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import AppLink from './AppLink';
 import Button from './Button';
 import Input from './Input';
 
-export default function UserAuthForm() {
-  return (
-    <>
-      <AuthForm />
-    </>
-  );
-}
-
 type FormData = {
   pseudo: string;
   email: string;
@@ -25,7 +18,7 @@ type FormData = {
   avatar: string;
 };
 
-function AuthForm() {
+export default function UserAuthForm() {
   const {
     register,
     handleSubmit,
@@ -49,27 +42,57 @@ function AuthForm() {
   const isSignIn = pathname.includes('sign-in');
 
   async function onSubmit(data: FormData) {
-    const response = await fetch(
+    const { data: response, status } = await axios.post(
       `${process.env.NEXT_PUBLIC_API_URL}/${isSignIn ? 'login' : 'register'}`,
       {
-        method: 'POST',
+        data: {
+          pseudo: data.pseudo,
+          email: data.email,
+          passwd: data.passwd,
+          firstname: data.firstname,
+          lastname: data.lastname,
+          description: data.description,
+          sgroup: data.sgroup,
+          avatar: data.avatar
+        },
         headers: {
           'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          ...data
-        })
         }
+      },
+      { insecureHTTPParser: true }
     );
 
-    const status = response.status;
-    const json = await response.json();
-
-    console.log(json, status);
+    console.log('response ', response);
 
     if (status === 200) {
       router.push('/dashboard');
     }
+
+    // const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/login`, {
+    //   method: 'POST',
+    //   headers: {
+    //     'Content-Type': 'application/json'
+    //   },
+    //   body: JSON.stringify({
+    //     pseudo: data.pseudo,
+    //     email: data.email,
+    //     passwd: data.passwd,
+    //     firstname: data.firstname,
+    //     lastname: data.lastname,
+    //     sgroup: data.sgroup,
+    //     avatar: data.avatar
+    //   })
+    // });
+
+    // const result = await response.json();
+
+    // if (response.status !== 200) {
+    //   setError('email', { message: result.message });
+    // }
+
+    // if (response.status === 200) {
+    //   router.push('/dashboard');
+    // }
   }
 
   return (