From f8b7be604d1cc47499f39b518fac906d6bb5478a Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Fri, 11 Jul 2025 11:24:20 -0300
Subject: [PATCH] refactor: Improve HeaderButtons state sync with userData
 (#8988)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

📝 (header-buttons.tsx): Add useEffect hook to update state variables based on userData changes
🔧 (header-buttons.tsx): Refactor useState calls to initialize state variables with userData values and update them on userData changes using useEffect
---
 .../components/header-buttons.tsx             | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/components/header-buttons.tsx b/src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/components/header-buttons.tsx
index ee5e9702c..c80c0e393 100644
--- a/src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/components/header-buttons.tsx
+++ b/src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/components/header-buttons.tsx
@@ -5,7 +5,7 @@ import { useUpdateUser } from "@/controllers/API/queries/auth";
 import CustomGetStartedProgress from "@/customization/components/custom-get-started-progress";
 import useAuthStore from "@/stores/authStore";
 import { Separator } from "@radix-ui/react-separator";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { AddFolderButton } from "./add-folder-button";
 import { UploadFolderButton } from "./upload-folder-button";
 
@@ -21,14 +21,27 @@ export const HeaderButtons = ({
   addNewFolder: () => void;
 }) => {
   const userData = useAuthStore((state) => state.userData);
-  const userDismissedDialog = userData?.optins?.dialog_dismissed;
-  const isGithubStarred = userData?.optins?.github_starred;
-  const isDiscordJoined = userData?.optins?.discord_clicked;
-  const [isDismissedDialog, setIsDismissedDialog] =
-    useState(userDismissedDialog);
+
+  const [isDismissedDialog, setIsDismissedDialog] = useState(
+    userData?.optins?.dialog_dismissed,
+  );
+  const [isGithubStarred, setIsGithubStarred] = useState(
+    userData?.optins?.github_starred,
+  );
+  const [isDiscordJoined, setIsDiscordJoined] = useState(
+    userData?.optins?.discord_clicked,
+  );
 
   const { mutate: updateUser } = useUpdateUser();
 
+  useEffect(() => {
+    if (userData) {
+      setIsDismissedDialog(userData.optins?.dialog_dismissed);
+      setIsGithubStarred(userData.optins?.github_starred);
+      setIsDiscordJoined(userData.optins?.discord_clicked);
+    }
+  }, [userData]);
+
   const handleDismissDialog = () => {
     setIsDismissedDialog(true);
     updateUser({
@@ -44,7 +57,7 @@ export const HeaderButtons = ({
 
   return (
     <>
-      {!isDismissedDialog && (
+      {!isDismissedDialog && userData && (
         <>
           <CustomGetStartedProgress
             userData={userData!}