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.
feat(interfaces): add API request/response interfaces
2024-06-11 16:08:57 +02:00 · 2024-06-11 16:08:34 +02:00 · 2024-06-11 16:07:59 +02:00 · 2024-06-10 11:58:40 +02:00 · 2024-06-10 11:54:25 +02:00 · 2024-06-10 11:51:23 +02:00
16 changed files with 2524 additions and 68 deletions
--- 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?.name || "?"}
 				</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.name} 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/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/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,14 @@
 "use client"
 import { createContext, useContext, useState } from 'react';
 import {IUserData} from "@/interfaces/userdata.interface";
 const UserDataContext = createContext<IUserData>({name: "Avnyr"})
 //TODO Run register task
 //TODO Run login task
 //TODO Run disconnect task
 //TODO Run update user data
--- a/src/services/apiRequest.ts
+++ b/src/services/apiRequest.ts
@@ -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	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