feat(handler): add login, registration functionality

The login and registration functionality have been implemented using the new `IApiLoginReq`, `IApiLoginRes`, `IApiRegisterReq`, `IApiRegisterRes` interfaces. These include error handling and data storing in local storage.
feat(component): update user data references from name to firstName
2024-06-11 16:59:02 +02:00 · 2024-06-11 16:58:43 +02:00 · 2024-06-11 16:55:45 +02:00 · 2024-06-11 16:08:57 +02:00 · 2024-06-11 16:08:34 +02:00 · 2024-06-11 16:07:59 +02:00
19 changed files with 2566 additions and 315 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -38,4 +38,3 @@ next-env.d.ts
 .env.production
 .env.development
 .env*.local
 pnpm*.yaml
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
    "@radix-ui/react-hover-card": "^1.0.7",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-menubar": "^1.0.4",
    "@radix-ui/react-navigation-menu": "^1.1.4",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-progress": "^1.0.3",
    "@radix-ui/react-radio-group": "^1.1.3",
@@ -45,6 +46,7 @@
    "embla-carousel-react": "^8.1.3",
    "framer-motion": "^11.2.10",
    "input-otp": "^1.2.4",
    "lightweight-charts": "^4.1.4",
    "lucide-react": "^0.387.0",
    "next": "14.2.3",
    "next-themes": "^0.3.0",
@@ -60,9 +62,11 @@
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@types/jest": "^29.5.12",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "jest": "^29.7.0",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,6 +5,8 @@ import {ThemeProvider} from "@/components/providers/theme-provider";
 import type React from "react";
 import {Footer} from "@/components/footer";
 import {Header} from "@/components/header";
 import {PrimaryNavigationMenu} from "@/components/primary-nav";
 import {Providers} from "@/components/providers/providers";
 export const metadata: Metadata = {
  title: "YeloBit",
@@ -21,16 +23,14 @@ export default function RootLayout({
    <head>
      <link rel="icon" href="/public/favicon.ico" sizes="any"/>
    </head>
-    <body className={"w-full min-h-screen flex flex-col items-center justify-between"}>
+      <body className={"w-full min-h-screen flex flex-col items-center justify-between"}>
-    <ThemeProvider
+        <Providers>
-        attribute="class"
+          <Header>
-        defaultTheme="system"
+            <PrimaryNavigationMenu/>
-        enableSystem
+          </Header>
-      >
+            {children}
-        <Header></Header>
+          <Footer/>
-        {children}
+        </Providers>
        <Footer/>
      </ThemeProvider>
      </body>
    </html>
  );
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,7 +2,7 @@ import Image from "next/image";
 export default function Home() {
  return (
-    <main className="flex flex-col items-center justify-between p-24">
+    <main className="flex flex-col items-center justify-end h-full w-2/4">
      <h1>Hello world !</h1>
    </main>
  );
--- a/src/components/account-dialog.tsx
+++ b/src/components/account-dialog.tsx
@@ -0,0 +1,22 @@
 "use client"
 import {useContext} from "react";
 import {UserDataContext} from "@/components/providers/userdata-provider";
 import {AccountInfo} from "@/components/account-info";
 export function AccountDialog() {
 	const userContext = useContext(UserDataContext)
 	if (!userContext?.userData) {
 		userContext?.setUserData({name: "Mathis"})
 		return (<p>Loading...</p>)
 	}
 	//TODO No account context
 	//TODO Loading context
 	//TODO Account context
 	return (<AccountInfo userData={userContext.userData}/>)
 }
--- a/src/components/account-info.tsx
+++ b/src/components/account-info.tsx
@@ -0,0 +1,58 @@
 "use client"
 import {IUserData} from "@/interfaces/userdata.interface";
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import {
 	Sheet,
 	SheetClose,
 	SheetContent,
 	SheetDescription,
 	SheetFooter,
 	SheetHeader,
 	SheetTitle,
 	SheetTrigger,
 } from "@/components/ui/sheet"
 import {User} from "lucide-react";
 export function AccountInfo({userData}: {userData: IUserData}) {
 	return (
 		<Sheet>
 			<SheetTrigger asChild>
 				<Button variant="outline" className={"gap-1"}>
 					<User />
 					{userData?.firstName || "?"}
 				</Button>
 			</SheetTrigger>
 			<SheetContent>
 				<SheetHeader>
 					<SheetTitle>Edit profile</SheetTitle>
 					<SheetDescription>
 						Make changes to your profile here. Click save when you're done.
 					</SheetDescription>
 				</SheetHeader>
 				<div className="grid gap-4 py-4">
 					<div className="grid grid-cols-4 items-center gap-4">
 						<Label htmlFor="name" className="text-right">
 							Name
 						</Label>
 						<Input id="name" placeholder={userData.firstName} className="col-span-3" onChange={(event)=>{console.log(event.target.value)}} />
 					</div>
 					<div className="grid grid-cols-4 items-center gap-4">
 						<Label htmlFor="username" className="text-right">
 							Username
 						</Label>
 						<Input id="username" value="@peduarte" className="col-span-3" />
 					</div>
 				</div>
 				<SheetFooter>
 					<SheetClose asChild>
 						<Button type="submit">Save changes</Button>
 					</SheetClose>
 				</SheetFooter>
 			</SheetContent>
 		</Sheet>
 	)
 }
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,6 +1,7 @@
 import Image from "next/image";
 import React from "react";
 import {ThemeBtnSelector} from "@/components/theme-btn-selector";
 import {AccountDialog} from "@/components/account-dialog";
 export function Header({title, children}: {title?: string, children?: React.ReactNode}) {
@@ -16,7 +17,8 @@ export function Header({title, children}: {title?: string, children?: React.Reac
 			<div className={"w-1/3 flex flex-row justify-center items-center"}>
 				{children}
 			</div>
-			<div className={"w-1/3 flex flex-row justify-end items-center"}>
+			<div className={"w-1/3 flex flex-row justify-end gap-2 items-center"}>
 				<AccountDialog/>
 				<ThemeBtnSelector/>
 			</div>
 		</header>
--- a/src/components/hero.tsx
+++ b/src/components/hero.tsx
@@ -1,117 +0,0 @@
 "use client";
 import React from "react";
 import { calsans } from "@/fonts/calsans";
 import Image from "next/image";
 import { twMerge } from "tailwind-merge";
 import { TracingBeam } from "@/components/ui/tracing-beam";
 export function TracingBeamDemo() {
  return (
    <TracingBeam className="px-6">
      <div className="max-w-2xl mx-auto antialiased pt-4 relative">
        {dummyContent.map((item, index) => (
          <div key={`content-${index}`} className="mb-10">
            <h2 className="bg-black text-white rounded-full text-sm w-fit px-4 py-1 mb-4">
              {item.badge}
            </h2>
            <p className={twMerge(calsans.className, "text-xl mb-4")}>
              {item.title}
            </p>
            <div className="text-sm  prose prose-sm dark:prose-invert">
              {item?.image && (
                <Image
                  src={item.image}
                  alt="blog thumbnail"
                  height="1000"
                  width="1000"
                  className="rounded-lg mb-10 object-cover"
                />
              )}
              {item.description}
            </div>
          </div>
        ))}
      </div>
    </TracingBeam>
  );
 }
 const dummyContent = [
  {
    title: "Lorem Ipsum Dolor Sit Amet",
    description: (
      <>
        <p>
          Sit duis est minim proident non nisi velit non consectetur. Esse
          adipisicing laboris consectetur enim ipsum reprehenderit eu deserunt
          Lorem ut aliqua anim do. Duis cupidatat qui irure cupidatat incididunt
          incididunt enim magna id est qui sunt fugiat. Laboris do duis pariatur
          fugiat Lorem aute sit ullamco. Qui deserunt non reprehenderit dolore
          nisi velit exercitation Lorem qui do enim culpa. Aliqua eiusmod in
          occaecat reprehenderit laborum nostrud fugiat voluptate do Lorem culpa
          officia sint labore. Tempor consectetur excepteur ut fugiat veniam
          commodo et labore dolore commodo pariatur.
        </p>
        <p>
          Dolor minim irure ut Lorem proident. Ipsum do pariatur est ad ad
          veniam in commodo id reprehenderit adipisicing. Proident duis
          exercitation ad quis ex cupidatat cupidatat occaecat adipisicing.
        </p>
        <p>
          Tempor quis dolor veniam quis dolor. Sit reprehenderit eiusmod
          reprehenderit deserunt amet laborum consequat adipisicing officia qui
          irure id sint adipisicing. Adipisicing fugiat aliqua nulla nostrud.
          Amet culpa officia aliquip deserunt veniam deserunt officia
          adipisicing aliquip proident officia sunt.
        </p>
      </>
    ),
    badge: "React",
    image:
      "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },
  {
    title: "Lorem Ipsum Dolor Sit Amet",
    description: (
      <>
        <p>
          Ex irure dolore veniam ex velit non aute nisi labore ipsum occaecat
          deserunt cupidatat aute. Enim cillum dolor et nulla sunt exercitation
          non voluptate qui aliquip esse tempor. Ullamco ut sunt consectetur
          sint qui qui do do qui do. Labore laborum culpa magna reprehenderit ea
          velit id esse adipisicing deserunt amet dolore. Ipsum occaecat veniam
          commodo proident aliqua id ad deserunt dolor aliquip duis veniam sunt.
        </p>
        <p>
          In dolore veniam excepteur eu est et sunt velit. Ipsum sint esse
          veniam fugiat esse qui sint ad sunt reprehenderit do qui proident
          reprehenderit. Laborum exercitation aliqua reprehenderit ea sint
          cillum ut mollit.
        </p>
      </>
    ),
    badge: "Changelog",
    image:
      "https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },
  {
    title: "Lorem Ipsum Dolor Sit Amet",
    description: (
      <>
        <p>
          Ex irure dolore veniam ex velit non aute nisi labore ipsum occaecat
          deserunt cupidatat aute. Enim cillum dolor et nulla sunt exercitation
          non voluptate qui aliquip esse tempor. Ullamco ut sunt consectetur
          sint qui qui do do qui do. Labore laborum culpa magna reprehenderit ea
          velit id esse adipisicing deserunt amet dolore. Ipsum occaecat veniam
          commodo proident aliqua id ad deserunt dolor aliquip duis veniam sunt.
        </p>
      </>
    ),
    badge: "Launch Week",
    image:
      "https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&q=80&w=3506&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },
 ];
--- a/src/components/providers/providers.tsx
+++ b/src/components/providers/providers.tsx
@@ -0,0 +1,23 @@
 "use client"
 import React from "react";
 import {Header} from "@/components/header";
 import {Footer} from "@/components/footer";
 import {ThemeProvider} from "@/components/providers/theme-provider";
 import {UserDataProvider} from "@/components/providers/userdata-provider";
 export function Providers({children}: { children: React.ReactNode }) {
 	return (
 		<ThemeProvider
 			attribute="class"
 			defaultTheme="system"
 			enableSystem
 		>
 			<UserDataProvider>
 				{children}
 			</UserDataProvider>
 		</ThemeProvider>
 	)
 }
--- a/src/components/providers/userdata-provider.tsx
+++ b/src/components/providers/userdata-provider.tsx
@@ -0,0 +1,21 @@
 import React from 'react';
 import {IUserData} from "@/interfaces/userdata.interface";
 import {useEncodedLocalStorage} from "@/services/localStorage";
 export interface IUserDataProvider {
 	userData: IUserData | undefined;
 	setUserData: React.Dispatch<React.SetStateAction<IUserData | undefined>>
 }
 export const UserDataContext = React.createContext<IUserDataProvider | undefined>(undefined);
 export const UserDataProvider = ({children}: {children: React.ReactNode}) => {
 	const [userData, setUserData] = useEncodedLocalStorage<IUserData | undefined>("user_data", undefined);
 	return (
 		<UserDataContext.Provider value={{userData, setUserData}}>
 			{children}
 		</UserDataContext.Provider>
 	);
 };
--- a/src/components/ui/tracing-beam.tsx
+++ b/src/components/ui/tracing-beam.tsx
@@ -1,128 +0,0 @@
 "use client";
 import React, { useEffect, useRef, useState } from "react";
 import {
  motion,
  useTransform,
  useScroll,
  useVelocity,
  useSpring,
 } from "framer-motion";
 import { cn } from "@/lib/utils";
 export const TracingBeam = ({
  children,
  className,
 }: {
  children: React.ReactNode;
  className?: string;
 }) => {
  const ref = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start start", "end start"],
  });
  const contentRef = useRef<HTMLDivElement>(null);
  const [svgHeight, setSvgHeight] = useState(0);
  useEffect(() => {
    if (contentRef.current) {
      setSvgHeight(contentRef.current.offsetHeight);
    }
  }, []);
  const y1 = useSpring(
    useTransform(scrollYProgress, [0, 0.8], [50, svgHeight]),
    {
      stiffness: 500,
      damping: 90,
    }
  );
  const y2 = useSpring(
    useTransform(scrollYProgress, [0, 1], [50, svgHeight - 200]),
    {
      stiffness: 500,
      damping: 90,
    }
  );
  return (
    <motion.div
      ref={ref}
      className={cn("relative w-full max-w-4xl mx-auto h-full", className)}
    >
      <div className="absolute -left-4 md:-left-20 top-3">
        <motion.div
          transition={{
            duration: 0.2,
            delay: 0.5,
          }}
          animate={{
            boxShadow:
              scrollYProgress.get() > 0
                ? "none"
                : "rgba(0, 0, 0, 0.24) 0px 3px 8px",
          }}
          className="ml-[27px] h-4 w-4 rounded-full border border-netural-200 shadow-sm flex items-center justify-center"
        >
          <motion.div
            transition={{
              duration: 0.2,
              delay: 0.5,
            }}
            animate={{
              backgroundColor:
                scrollYProgress.get() > 0 ? "white" : "var(--emerald-500)",
              borderColor:
                scrollYProgress.get() > 0 ? "white" : "var(--emerald-600)",
            }}
            className="h-2 w-2  rounded-full border border-neutral-300 bg-white"
          />
        </motion.div>
        <svg
          viewBox={`0 0 20 ${svgHeight}`}
          width="20"
          height={svgHeight} // Set the SVG height
          className=" ml-4 block"
          aria-hidden="true"
        >
          <motion.path
            d={`M 1 0V -36 l 18 24 V ${svgHeight * 0.8} l -18 24V ${svgHeight}`}
            fill="none"
            stroke="#9091A0"
            strokeOpacity="0.16"
            transition={{
              duration: 10,
            }}
          ></motion.path>
          <motion.path
            d={`M 1 0V -36 l 18 24 V ${svgHeight * 0.8} l -18 24V ${svgHeight}`}
            fill="none"
            stroke="url(#gradient)"
            strokeWidth="1.25"
            className="motion-reduce:hidden"
            transition={{
              duration: 10,
            }}
          ></motion.path>
          <defs>
            <motion.linearGradient
              id="gradient"
              gradientUnits="userSpaceOnUse"
              x1="0"
              x2="0"
              y1={y1} // set y1 for gradient
              y2={y2} // set y2 for gradient
            >
              <stop stopColor="#18CCFC" stopOpacity="0"></stop>
              <stop stopColor="#18CCFC"></stop>
              <stop offset="0.325" stopColor="#6344F5"></stop>
              <stop offset="1" stopColor="#AE48FF" stopOpacity="0"></stop>
            </motion.linearGradient>
          </defs>
        </svg>
      </div>
      <div ref={contentRef}>{children}</div>
    </motion.div>
  );
 };
--- a/src/interfaces/api.interface.ts
+++ b/src/interfaces/api.interface.ts
@@ -0,0 +1,36 @@
 import {IUserData} from "@/interfaces/userdata.interface";
 // -----   Request    -----
 export interface IApiRegisterReq {
 	firstName: string;
 	lastName: string;
  pseudo: string;
  city: string;
  email: string;
  password: string;
  age: number;
 }
 export interface IApiLoginReq {
 	email: string;
 	password: string;
 }
 // -----   Response   -----
 export interface IAbstractApiResponse {
 	message?: Array<string>;
 	error?: string;
 	statusCode?: number
 }
 export interface IApiRegisterRes extends IAbstractApiResponse {
 	access_token?: string;
 	user?: IUserData
 }
 export interface IApiLoginRes extends IAbstractApiResponse {
 	access_token?: string
 }
--- a/src/interfaces/userdata.interface.ts
+++ b/src/interfaces/userdata.interface.ts
@@ -0,0 +1,14 @@
 export interface IUserData {
 	id: string;
 	firstName: string;
  lastName: string;
  pseudo: string;
  email: string;
  roleId: string;
  isActive: boolean;
  city: string;
  dollarAvailables: number;
  age: number;
  created_at: string;
  updated_at: string;
 }
--- a/src/services/account.handler.ts
+++ b/src/services/account.handler.ts
@@ -0,0 +1,55 @@
 "use client"
 import { createContext, useContext, useState } from 'react';
 import {IUserData} from "@/interfaces/userdata.interface";
 import {IApiLoginReq, IApiLoginRes, IApiRegisterReq, IApiRegisterRes} from "@/interfaces/api.interface";
 import ApiRequest from "@/services/apiRequest";
 import {useEncodedLocalStorage} from "@/services/localStorage";
 const UserDataContext = createContext<IUserData | null>(null)
 const [userData, setUserData] = useEncodedLocalStorage<IUserData | null>("user_data", null)
 //TODO Run register task
 export async function doRegister(registerData: IApiRegisterReq): Promise<IApiRegisterRes | null> {
 	console.trace(registerData)
 	try {
 		const ReqRes = await ApiRequest.standard.post.json<IApiRegisterReq, IApiRegisterRes>("auth/signup", registerData)
 		console.trace(ReqRes.data)
 		if (ReqRes.data.user) {
 			setUserData(ReqRes.data.user)
 		}
 		ReqRes.data.message?.forEach((err)=> console.warn(err))
 		return ReqRes.data
 	} catch (error) {
 		console.error('Error during registration:', error);
 		return null
 	}
 }
 //TODO Run login task
 export async function doLogin(loginData: IApiLoginReq) {
 	try {
 		const ReqRes = await ApiRequest.standard.post.json<IApiLoginReq, IApiLoginRes>("auth/login", loginData)
 		console.trace(ReqRes.data)
 		//if (ReqRes.data.user) {
 		//  setUserData(ReqRes.data.user)
 		//}
 		ReqRes.data.message?.forEach((err)=> console.warn(err))
 		return ReqRes.data
 	} catch (err) {
 		console.error('Error during login:', err);
 		return null
 	}
 }
 //TODO Run disconnect task
 export function doDisconnect() {
 	if (typeof window !== 'undefined') {
 		window.localStorage.removeItem('sub')
 		return true
 	}
 	console.log('Whut ? Why trying to remove an item from the localStorage when runner in SSR ?')
 	return false
 }
 //TODO Run update user data
--- a/src/services/apiRequest.ts
+++ b/src/services/apiRequest.ts
@@ -2,7 +2,7 @@
 import axios, {type AxiosResponse} from "axios";
-const baseUrl = ""
+const baseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3333'
 const AxiosConfigs = {
 	authenticated: {
@@ -10,7 +10,7 @@ const AxiosConfigs = {
 			return {
 				headers: {
 					'content-type': 'application/json',
-					Authorization: `Bearer ${localStorage.getItem('sub')}`,
+					Authorization: `Bearer ${typeof window !== 'undefined' ? window.localStorage.getItem('sub') : "not-ssr"}`,
 				},
 				validateStatus: function (status: number) {
 					return status < 500; // Resolve only if the status code is less than 500
@@ -32,72 +32,30 @@ const AxiosConfigs = {
 	}
 }
-/**
+async function doAuthenticatedJsonPostReq<ReqT, ResT>(route:string, body:ReqT): Promise<AxiosResponse<ResT>> {
 * Makes an authenticated JSON POST request using axios.
 * @param {string} route - The route to send the request to.
 * @param {object} body - The request body.
 * @returns {Promise<AxiosResponse<ReqT, ResT>>} - The promise that resolves to the response from the server.
 */
 async function doAuthenticatedJsonPostReq<ReqT, ResT>(route:string, body:object): Promise<AxiosResponse<ReqT, ResT>> {
 	return await axios.post(baseUrl + route, body, AxiosConfigs.authenticated.json())
 }
-/**
+async function doAuthenticatedGetReq<ResT>(route:string): Promise<AxiosResponse<ResT>> {
 * Makes an authenticated GET request to the specified route using Axios.
 *
 * @param {string} route - The route to which the GET request is sent.
 * @returns {Promise<AxiosResponse>} - A promise that resolves to the Axios response object containing the request data and response details.
 */
 async function doAuthenticatedGetReq<ReqT, ResT>(route:string): Promise<AxiosResponse<ReqT, ResT>> {
 	return await axios.get(baseUrl + route, AxiosConfigs.authenticated.json())
 }
-/**
+async function doAuthenticatedPatchReq<ReqT, ResT>(route:string, body: ReqT): Promise<AxiosResponse<ResT>> {
 * Performs an authenticated PATCH request to the specified route with the given body.
 *
 * @param {string} route - The route to send the PATCH request to.
 * @param {object} body - The body of the request.
 * @returns {Promise<AxiosResponse<ReqT, ResT>>} - A Promise that resolves to the AxiosResponse object containing the response data.
 */
 async function doAuthenticatedPatchReq<ReqT, ResT>(route:string, body: object): Promise<AxiosResponse<ReqT, ResT>> {
 	return await axios.patch(baseUrl + route, body, AxiosConfigs.authenticated.json())
 }
-/**
+async function doAuthenticatedDelReq<ResT>(route:string): Promise<AxiosResponse<ResT>> {
 * Sends an authenticated DELETE request to the specified route.
 *
 * @param {string} route - The route to send the request to.
 *
 * @return {Promise<AxiosResponse<ReqT, ResT>>} A Promise that resolves to the AxiosResponse object containing the response data.
 */
 async function doAuthenticatedDelReq<ReqT, ResT>(route:string): Promise<AxiosResponse<ReqT, ResT>> {
 	return await axios.delete(baseUrl + route, AxiosConfigs.authenticated.json())
 }
 //TODO form/multipart req
-/**
+async function doJsonPostReq<ReqT, ResT>(route:string, body: ReqT): Promise<AxiosResponse<ResT>> {
 * Perform a JSON POST request.
 *
 * @param {string} route - The route to send the request to.
 * @param {object} body - The JSON object to send in the request body.
 *
 * @return {Promise<AxiosResponse<ReqT, ResT>>} - A promise that resolves with the response from the server.
 *
 * @throws {Error} - If an error occurs during the request.
 */
 async function doJsonPostReq<ReqT, ResT>(route:string, body: object): Promise<AxiosResponse<ReqT, ResT>> {
 	return await axios.post(baseUrl + route, body, AxiosConfigs.standard.json())
 }
-/**
+async function doJsonGetReq<ResT>(route:string): Promise<AxiosResponse<ResT>>  {
 * Perform a JSON GET request using Axios.
 *
 * @param {string} route - The route URL to make the GET request to.
 * @returns {Promise<AxiosResponse<ReqT, ResT>>} - A promise that resolves to the AxiosResponse object.
 */
 async function doJsonGetReq<ReqT, ResT>(route:string): Promise<AxiosResponse<ReqT, ResT>>  {
 	return await axios.get(baseUrl + route, AxiosConfigs.standard.json());
 }
--- a/src/services/exchange.handler.ts
+++ b/src/services/exchange.handler.ts
--- a/src/services/localStorage.ts
+++ b/src/services/localStorage.ts
@@ -1,6 +1,6 @@
 'use client'
-import React, {useEffect, useState} from "react";
+import React, {useEffect, useRef, useState} from "react";
 /**
 * A custom React hook that allows you to store and retrieve data in the browser's localStorage.
@@ -48,12 +48,20 @@ export function useLocalStorage<T>(key: string, initial: T): [T, React.Dispatch<
 * @return {readonly [T,  React.Dispatch<React.SetStateAction<T>>]} - An array containing the encoded value and a function to update the encoded value.
 */
 export function useEncodedLocalStorage<T>(key: string, fallbackValue: T): readonly [T, React.Dispatch<React.SetStateAction<T>>] {
 	console.log("Pong !")
 	const [encodedValue, setEncodedValue] = useState<T>(() => {
 		const stored = localStorage.getItem(key);
 		return stored ? safelyParse(stored, fallbackValue) : fallbackValue;
 	});
 	const prevValue = useRef(encodedValue);
 	useEffect(() => {
-		localStorage.setItem(key, safelyStringify(encodedValue));
+		console.log({encodedValue})
 		if (!b64ValEqual(prevValue.current, encodedValue)) {
 			localStorage.setItem(key, safelyStringify(encodedValue));
 		}
 		prevValue.current = encodedValue; // Set ref to current value
 	}, [key, encodedValue]);
 	return [encodedValue, setEncodedValue] as const;
@@ -64,6 +72,12 @@ export function useEncodedLocalStorage<T>(key: string, fallbackValue: T): readon
 			return fallback;
 		}
 	}
 	function b64ValEqual<T>(v1: T, v2: T): boolean {
 		return btoa(JSON.stringify(v1)) === btoa(JSON.stringify(v2));
 	}
 	function safelyStringify(value: T): string {
 		try {
 			return btoa(JSON.stringify(value));
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,5 +1,8 @@
 import type { Config } from "tailwindcss"
 // @ts-ignore
 import {default as flattenColorPalette} from "tailwindcss/lib/util/flattenColorPalette";
 const config = {
  darkMode: ["class"],
  content: [
@@ -74,7 +77,19 @@ const config = {
      },
    },
  },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require("tailwindcss-animate"), addVariablesForColors],
 } satisfies Config
 // This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200).
 function addVariablesForColors({ addBase, theme }: any) {
  let allColors = flattenColorPalette(theme("colors"));
  let newVars = Object.fromEntries(
    Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
  );
  addBase({
    ":root": newVars,
  });
 }
 export default config
Author	SHA1	Message	Date
Mathis	4d00d4b936	feat(handler): add login, registration functionality The login and registration functionality have been implemented using the new `IApiLoginReq`, `IApiLoginRes`, `IApiRegisterReq`, `IApiRegisterRes` interfaces. These include error handling and data storing in local storage.	2024-06-11 16:59:02 +02:00
Mathis	2c333d9c00	feat(component): update user data references from name to firstName The changes replace the "name" property references with "firstName" in the account-info component. The user interface buttons' labels and input field placeholders now utilize "firstName" for user data. This adjustment provides clearer and more accurate data presentation to the users.	2024-06-11 16:58:43 +02:00
Mathis	697dcbf4b8	feat(services): update baseUrl in apiRequest This commit updates the baseUrl value in the apiRequest service. It now uses the API_URL from the environment variables, or defaults to "http://localhost:3333" if the environment variable is not set.	2024-06-11 16:55:45 +02:00
Mathis	278cf844c2	feat(services): update apiRequest module Updated the apiRequest module with refinements in authorization and removal of redundant comments. The changes allow handling server-side rendering and type enforcement in request body.	2024-06-11 16:08:57 +02:00
Mathis	e9048ca7eb	feat(interfaces): add API request/response interfaces Created new typescript interfaces for API. They include IApiRegisterReq, IApiLoginReq, IAbstractApiResponse, IApiRegisterRes, and IApiLoginRes. These interfaces will be used to properly structure the data for API requests and responses, thus enhancing type safety and maintainability.	2024-06-11 16:08:34 +02:00
Mathis	950cb9137f	feat(interface): extend IUserData properties This commit enriches the IUserData interface by adding a series of new properties for a more comprehensive representation of a user. These additional properties include id, firstName, lastName, pseudo, email, roleId, isActive, city, dollarAvailables, age, created_at, and updated_at.	2024-06-11 16:07:59 +02:00
Mathis	882729ffc9	Revert "feat: Implement new auto-form components and fields" This reverts commit `dc17e4a8f7`.	2024-06-10 11:58:40 +02:00
Mathis	dfa443d373	feat: update and remove specific dependencies Details: This update makes three major changes in dependency tree. Firstly, packages '@react-three/drei', '@react-three/fiber', 'three', 'three-globe', '@types/three', '@types/jest' and 'jest' have been removed. Secondly, the '@babel/core' package has been added as a new dependency. Thirdly, version of the 'next' package has been updated. Please review compatibility before upgrading.	2024-06-10 11:54:25 +02:00
Mathis	dc17e4a8f7	feat: Implement new auto-form components and fields This commit includes the creation of new react components and fields for auto-form functionality. The components include AutoFormLabel, AutoFormTooltip, and specific field components for data types such as AutoFormObject, AutoFormArray, AutoFormDate, AutoFormCheckbox, and others. Added tests to ensure the correct rendering of fields, labels generation, among other behaviors.	2024-06-10 11:51:23 +02:00
Mathis	036acfce23	feat(services): update default value in UserDataContext The default value in the UserDataContext has been updated. Previously, it was set to false and now it has been changed to an object with the name property set to "Avnyr".	2024-06-10 11:50:05 +02:00
Mathis	606f37e78f	feat: Add new packages to pnpm-lock This commit consists of adding new packages to the `pnpm-lock.yaml` file. Packages include '@radix-ui/react-navigation-menu', '@react-three/drei', 'lightweight-charts', 'three', 'three-globe', '@types/three', among others. Also, it includes the addition of new package versions and their integrity hashes. Verify the diff for full changes.	2024-06-10 11:35:54 +02:00
Mathis	1dd0384857	feat(components, services): Add user data management and account handling This commit introduces user data management with the addition of new interfaces and services. User data interface which defines the structure of user data was created. Account handler service for registering, logging in, updating user data and disconnecting was also added. User data provider component was created for managing user data state. The account info component for displaying and editing the user account was introduced too. Finally, updates were made in the existing components and services for accommodating these new elements.	2024-06-07 16:57:37 +02:00
Mathis	d624ac6ab2	feat(page): update layout styling The structure of the main component in page.tsx has been adjusted to better accommodate its content. The div styling has been updated from full width with padding to half-width, full height, and content justified to the end.	2024-06-07 14:34:31 +02:00
Mathis	409926a97b	feat(tailwind.config): add global CSS variables for colors A new function, `addVariablesForColors`, has been added into the Tailwind configuration file to map each Tailwind color into a global CSS variable. This allows usage such as `var(--gray-200)` throughout the application for all Tailwind colors.	2024-06-07 14:26:48 +02:00