From 90b3166b9a60aec3e7bfdd4ddd588747996ed1bf Mon Sep 17 00:00:00 2001
From: Enthusiast-AD <anshdeep00.dev@gmail.com>
Date: Mon, 8 Dec 2025 23:55:38 +0530
Subject: [PATCH] fix(ui): resolve hydration errors

---
 src/components/Footer/Footer.jsx |  9 +++++----
 src/components/Header/Header.jsx | 31 +++++++++++++++++++++++++------
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index a5d78c266..ce57c6088 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -21,9 +21,7 @@ import { getFossologyVersion } from "@/services/info";
 import { getSessionStorage, setSessionStorage } from "@/shared/storageHelper";
 
 const Footer = () => {
-  const [version, setVersion] = useState(
-    getSessionStorage("fossologyVersion") || null
-  );
+  const [version, setVersion] = useState(null);
 
   const fetchVersion = () => {
     return getFossologyVersion()
@@ -36,7 +34,10 @@ const Footer = () => {
   };
 
   useEffect(() => {
-    if (!version) {
+    const storedVersion = getSessionStorage("fossologyVersion");
+    if (storedVersion) {
+      setVersion(storedVersion);
+    } else {
       fetchVersion();
     }
   }, []);
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index da4db86ec..0b9b36022 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -56,6 +56,10 @@ export default function Header() {
   const [isHelpOpen, setIsHelpOpen] = useState(false);
   const [isGroupOpen, setIsGroupOpen] = useState(false);
   const [isGroupSelectOpen, setIsGroupSelectOpen] = useState(false);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [userIsAdmin, setUserIsAdmin] = useState(false);
+  const [userName, setUserName] = useState("");
+  const [groups, setGroups] = useState([]);
 
   const isHomeActive = pathname === routes.home;
 
@@ -74,6 +78,21 @@ export default function Header() {
   const isHelpActive = (isHelpOpen || pathname.startsWith("/help"));
 
   useEffect(() => {
+    const authStatus = isAuth();
+    setIsAuthenticated(authStatus);
+    setUserIsAdmin(isAdmin());
+    if (authStatus) {
+      try {
+        setUserName(getUserName());
+        const groupsData = getAllGroups();
+        if (groupsData) {
+          setGroups(groupsData);
+        }
+      } catch (error) {
+        console.error("Failed to get user name:", error);
+      }
+    }
+
     const defaultGroup =
       getLocalStorage("currentGroup") ||
       getLocalStorage("user")?.default_group;
@@ -94,7 +113,7 @@ export default function Header() {
         {/* Navigation Menu */}
         <nav className="hidden md:flex">
           <Link href={routes.home} className={clsx("flex items-center h-13 p-4 justify-between", !isHomeActive ? "hover:border-b-2 hover:border-[#C31730] hover:font-medium" : "border-b-2 border-[#C31730] font-medium")}>Home</Link>
-          {isAuth() && (
+          {isAuthenticated && (
             <>
               <Link href={routes.search} className={clsx("flex items-center h-13 p-4 justify-between", !isSearchActive ? "hover:border-b-2 hover:border-[#C31730] hover:font-medium" : "border-b-2 border-[#C31730] font-medium")}>Search</Link>
               <Link href={routes.browse} className={clsx("flex items-center h-13 p-4 justify-between", !isBrowseActive ? "hover:border-b-2 hover:border-[#C31730] hover:font-medium" : "border-b-2 border-[#C31730] font-medium")}>Browse</Link>
@@ -158,7 +177,7 @@ export default function Header() {
                   <DropdownMenuItem asChild className="focus:bg-[#EDEDED] focus:text-gray-900 focus:font-bold">
                     <Link href={routes.jobs.myRecentJobs}>My Recent Jobs</Link>
                   </DropdownMenuItem>
-                  {isAdmin() && (
+                  {userIsAdmin && (
                     <DropdownMenuItem asChild className="focus:bg-[#EDEDED] focus:text-gray-900 focus:font-bold">
                       <Link href={routes.jobs.allRecentJobs}>All Recent Jobs</Link>
                     </DropdownMenuItem>
@@ -241,7 +260,7 @@ export default function Header() {
               </DropdownMenu>
 
               {/* Admin Dropdown */}
-              {isAdmin() && (
+              {userIsAdmin && (
                 <DropdownMenu open={isAdminOpen} onOpenChange={setIsAdminOpen}>
                   <DropdownMenuTrigger
                     onClick={(e) => {
@@ -473,7 +492,7 @@ export default function Header() {
       {/* Right Side Icons */}
       <div className="flex items-center gap-6 text-sm text-gray-800">
         {/* Group Dropdown */}
-        {getAllGroups() && (
+        {groups.length > 0 && (
           <DropdownMenu open={isGroupOpen} onOpenChange={setIsGroupOpen}>
             <DropdownMenuTrigger
               onClick={(e) => {
@@ -537,7 +556,7 @@ export default function Header() {
 
                     {isGroupSelectOpen && (
                       <div className="mt-1 border rounded-[4px] border-[#CECECE] shadow bg-white overflow-hidden">
-                        {getAllGroups().map((group) => (
+                        {groups.map((group) => (
                           <div
                             key={group.id}
                             onClick={() => {
@@ -558,7 +577,7 @@ export default function Header() {
 
                 {/* User Info */}
                 <div className="text-sm mt-2">
-                  <span className="font-semibold">User:</span> {getUserName()}
+                  <span className="font-semibold">User:</span> {userName}
                 </div>
 
                 {/* Logout Button */}