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"}>
-    <ThemeProvider
-        attribute="class"
-        defaultTheme="system"
-        enableSystem
-      >
-        <Header></Header>
-        {children}
-        <Footer/>
-      </ThemeProvider>
+      <body className={"w-full min-h-screen flex flex-col items-center justify-between"}>
+        <Providers>
+          <Header>
+            <PrimaryNavigationMenu/>
+          </Header>
+            {children}
+          <Footer/>
+        </Providers>
      </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 = {
 	}
 }

-/**
- * 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>> {
+async function doAuthenticatedJsonPostReq<ReqT, ResT>(route:string, body:ReqT): Promise<AxiosResponse<ResT>> {
 	return await axios.post(baseUrl + route, body, AxiosConfigs.authenticated.json())
 }

-/**
- * 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>> {
+async function doAuthenticatedGetReq<ResT>(route:string): Promise<AxiosResponse<ResT>> {
 	return await axios.get(baseUrl + route, AxiosConfigs.authenticated.json())
 }

-/**
- * 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>> {
+async function doAuthenticatedPatchReq<ReqT, ResT>(route:string, body: ReqT): Promise<AxiosResponse<ResT>> {
 	return await axios.patch(baseUrl + route, body, AxiosConfigs.authenticated.json())
 }

-/**
- * 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>> {
+async function doAuthenticatedDelReq<ResT>(route:string): Promise<AxiosResponse<ResT>> {
 	return await axios.delete(baseUrl + route, AxiosConfigs.authenticated.json())
 }

 //TODO form/multipart req


-/**
- * 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>> {
+async function doJsonPostReq<ReqT, ResT>(route:string, body: ReqT): Promise<AxiosResponse<ResT>> {
 	return await axios.post(baseUrl + route, body, AxiosConfigs.standard.json())
 }

-/**
- * 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>>  {
+async function doJsonGetReq<ResT>(route:string): Promise<AxiosResponse<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