Fix: user not having icon when id starts with a letter

src/frontend/src/components/headerComponent/index.tsx

@@ -1,4 +1,4 @@
-import { useContext } from "react";
+import { useContext, useEffect, useState } from "react";
 import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import AlertDropdown from "../../alerts/alertDropDown";
@@ -27,7 +27,7 @@ export default function Header(): JSX.Element {
   const { notificationCenter } = useContext(alertContext);
   const location = useLocation();
   const { logout, autoLogin, isAdmin, userData } = useContext(AuthContext);
-  const { stars } = useContext(darkContext);
+  const { stars, gradientIndex } = useContext(darkContext);
   const navigate = useNavigate();
 
   return (
@@ -140,7 +140,7 @@ export default function Header(): JSX.Element {
                     className={
                       "h-7 w-7 rounded-full focus-visible:outline-0 " +
                       gradients[
-                        parseInt(userData?.id ?? "", 10) % gradients.length
+                        gradientIndex
                       ]
                     }
                   />

src/frontend/src/contexts/darkContext.tsx

@@ -7,6 +7,8 @@ const initialValue = {
   setDark: () => {},
   stars: 0,
   setStars: (stars) => 0,
+  gradientIndex: 0,
+  setGradientIndex: () => 0,
 };
 
 export const darkContext = createContext<darkContextType>(initialValue);
@@ -16,6 +18,7 @@ export function DarkProvider({ children }) {
     JSON.parse(window.localStorage.getItem("isDark")!) ?? false
   );
   const [stars, setStars] = useState<number>(0);
+  const [gradientIndex, setGradientIndex] = useState<number>(0);
 
   useEffect(() => {
     async function fetchStars() {
@@ -23,6 +26,11 @@ export function DarkProvider({ children }) {
       setStars(starsCount);
     }
     fetchStars();
+    const min = 0;
+    const max = 30;
+    setGradientIndex(
+      Math.floor(Math.random() * (max - min + 1)) + min
+    )
   }, []);
 
   useEffect(() => {
@@ -41,6 +49,8 @@ export function DarkProvider({ children }) {
         stars,
         dark,
         setDark,
+        setGradientIndex,
+        gradientIndex,
       }}
     >
       {children}

src/frontend/src/types/typesContext/index.ts

@@ -48,6 +48,8 @@ export type darkContextType = {
   setDark: (newState: {}) => void;
   stars: number;
   setStars: (stars: number) => void;
+  gradientIndex: number;
+  setGradientIndex: (index: number) => void;
 };
 
 export type locationContextType = {