REMOVE userstores, use loginhandlers

src/app/components/MenuProfile.js

@@ -11,7 +11,7 @@ import {
   getStoredValue,
   removeFromLocalStorage,
 } from "../handlers/localStorageHandler";
-import { isLoggedIn } from "../handlers/loginHandler";
+import { isLoggedIn, useLoggedIn, userData } from "../handlers/loginHandler";
 import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded';
 import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
 import PrivacyTipRoundedIcon from '@mui/icons-material/PrivacyTipRounded';
@@ -80,20 +80,17 @@ function getRandomBg(id) {
  */
 export default function AccountMenu() {
   const [anchorEl, setAnchorEl] = useState(null);
-  const [userData, setUserData] = useState({});
+  const [dataUser, setDataUser] = useState({});
   const [id, setId] = useState(null);
-  const [logged, setLogged] = useState(false);
   const open = Boolean(anchorEl);
-
-  const router = useRouter();
+  const loggedIn = useLoggedIn();
 
   useEffect(() => {
-    if (isLoggedIn()) {
-      let data = JSON.parse(getStoredValue("user_data"));
-      setId(data["id"]);
+    if (loggedIn) {
+      let data = userData();
+      setId(data?.user?.id);
     }
-    setLogged(isLoggedIn());
-  }, []);
+  }, [loggedIn]);
 
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -117,13 +114,13 @@ export default function AccountMenu() {
     let token = getStoredValue("access_token");
     if (token) {
       let user = getStoredValue("user_data");
-      setUserData(JSON.parse(user));
+      setDataUser(JSON.parse(user));
     }
   }, []);
 
   return (
     <>
-      {logged ? (
+      {loggedIn ? (
         <Box className="mr-14 flex align-center">
           <IconButton
             onClick={handleClick}
@@ -134,13 +131,13 @@ export default function AccountMenu() {
             title="Meu Perfil"
             alt="Acessar meu perfil"
           >
-            {(userData["avatar_file_name"] === "") || (userData["avatar_file_name"] === null) ? (
-              <div className={`flex items-center max-sm:-ml-px justify-center text-xl font-bold text-ice-HC-dark bg-turquoise-HC-white rounded-full h-[38px] w-[38px] ${getRandomBg(userData["id"])}`} >{userData["name"][0]}</div>
+            {(dataUser["avatar_file_name"] === "") || (dataUser["avatar_file_name"] === null) ? (
+              <div className={`flex items-center max-sm:-ml-px justify-center text-xl font-bold text-ice-HC-dark bg-turquoise-HC-white rounded-full h-[38px] w-[38px] ${getRandomBg(dataUser["id"])}`} >{dataUser["name"][0]}</div>
             ) : (
               <Avatar
                 src={
                   mecredURL +
-                  userData["avatar_file_name"]
+                  dataUser["avatar_file_name"]
                 }
                 sx={{ width: 38, height: 38 }}
               />
@@ -175,20 +172,20 @@ export default function AccountMenu() {
       }}
       >
         <MenuItem className="ml-1" sx={{ 'pointer-events': 'none' }} >
-          {(userData["avatar_file_name"] === "") || (userData["avatar_file_name"] === null) ? (
-            <div className={`flex items-center justify-center pt-1 text-xl font-bold text-ice-HC-dark bg-turquoise-HC-white rounded-full h-[38px] w-[38px] ${getRandomBg(userData["id"])}`} >{userData["name"][0]}</div>
+          {(dataUser["avatar_file_name"] === "") || (dataUser["avatar_file_name"] === null) ? (
+            <div className={`flex items-center justify-center pt-1 text-xl font-bold text-ice-HC-dark bg-turquoise-HC-white rounded-full h-[38px] w-[38px] ${getRandomBg(dataUser["id"])}`} >{dataUser["name"][0]}</div>
           ) : (
             <Avatar
               src={
                 mecredURL +
-                userData["avatar_file_name"]
+                dataUser["avatar_file_name"]
               }
               sx={{ width: 38, height: 38 }}
             />
           )}
           <div className="grid grid-rows-2 text-darkGray-HC-white ml-4 mt-2 grid-flow-row">
-            <p className="row-span-1"> {userData["name"]} </p>
-            <p className="row-span-2 text-xs"> {userData["uid"]} </p>
+            <p className="row-span-1"> {dataUser["name"]} </p>
+            <p className="row-span-2 text-xs"> {dataUser["uid"]} </p>
           </div>
         </MenuItem>
         <hr className="border-mediumGray-HC-white h-1 my-2 "/>

src/app/components/SideBar.js

@@ -10,7 +10,7 @@ import VerifiedIcon from "@mui/icons-material/Verified";
 import { usePathname, useSearchParams } from "next/navigation";
 import { Person } from "@mui/icons-material";
 import FileUploadIcon from '@mui/icons-material/FileUpload';
-import { isLoggedIn } from "../handlers/loginHandler";
+import { isLoggedIn, useLoggedIn, userData } from "../handlers/loginHandler";
 import NeedLoginModal from "./needLoginModal";
 import {
   getStoredValue,
@@ -92,6 +92,7 @@ export default function SideBar({ setFilterState, filterState }) {
   let searchParams = useSearchParams();
   const page = searchParams.get('page')
   const pathname = usePathname();
+  const loggedIn = useLoggedIn();
 
   const getHref = (href) => {
     switch (href) {
@@ -110,10 +111,9 @@ export default function SideBar({ setFilterState, filterState }) {
 
   const [needLoginOpen, setNeedLoginOpen] = useState(false);
 
-
   const handleOpenLogin = () => {
 
-    if (!isLoggedIn()) {
+    if (!loggedIn) {
       setNeedLoginOpen(true);
     }
   };
@@ -121,11 +121,12 @@ export default function SideBar({ setFilterState, filterState }) {
   const [id, setId] = useState(null);
 
   useEffect(() => {
-    if (isLoggedIn()) {
-      let data = JSON.parse(getStoredValue("user_data"));
-      setId(data["id"]);
+    if (loggedIn) {
+      let data = userData();
+      console.log(data, "ALKSDJLAKSJD");
+      setId(data?.["id"]);
     }
-  }, []);
+  }, [loggedIn]);
 
   return (
     <>
@@ -137,7 +138,7 @@ export default function SideBar({ setFilterState, filterState }) {
             return (
               <Link
                 onClick={item.href === "/publicar" ? handleOpenLogin : () => { }}
-                href={item.href === "/publicar" ? (isLoggedIn() ? "/publicar" : "") : getHref(item.href)}
+                href={item.href === "/publicar" ? (loggedIn ? "/publicar" : "") : getHref(item.href)}
                 key={index}
                 alt={item.title}
                 title={item.title}

src/app/handlers/loginHandler.js

@@ -73,11 +73,14 @@ export function userData() {
     return undefined;
 
   const data = JSON.parse(dataString);
+  console.log("USER DATA", data);
   return data;
 }
 
 export async function fetchUser() {
-  const response = await mecredApi.get('/api/user/me');
+  const response = await mecredApi.get('/api/user/me',
+    { headers: authHeaders() }
+  );
   const dataString = JSON.stringify(response.data);
   localStorage.setItem('user_data', dataString);
 }
\ No newline at end of file