refactor: Improve HeaderButtons state sync with userData (#8988)

📝 (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

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 [isDismissedDialog, setIsDismissedDialog] = useState(
-  const isDiscordJoined = userData?.optins?.discord_clicked;
+    userData?.optins?.dialog_dismissed,
-  const [isDismissedDialog, setIsDismissedDialog] =
+  );
-    useState(userDismissedDialog);
+  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!}