From bb96d89c131e57f89bfe6cb257f94bcc7c075d53 Mon Sep 17 00:00:00 2001 From: Gustavo S Frehse <gsf20@inf.ufpr.br> Date: Wed, 23 Apr 2025 10:17:46 -0300 Subject: [PATCH] Remove user store, add helper functions. --- src/app/components/AcessibilityBar.js | 8 +-- src/app/entrar/page.js | 16 ++---- src/app/handlers/loginHandler.js | 70 ++++++++++++++++++++++----- src/app/stores/userStore.js | 20 -------- 4 files changed, 66 insertions(+), 48 deletions(-) delete mode 100644 src/app/stores/userStore.js diff --git a/src/app/components/AcessibilityBar.js b/src/app/components/AcessibilityBar.js index f16f511b..6c6ffd33 100644 --- a/src/app/components/AcessibilityBar.js +++ b/src/app/components/AcessibilityBar.js @@ -6,13 +6,14 @@ import { useRef, useLayoutEffect } from 'react'; import { useRouter } from 'next/navigation'; import { FaArrowCircleUp } from "react-icons/fa"; import { toggleContrast } from './themeUtils'; -import { isLoggedIn } from "@/app/handlers/loginHandler"; +import { useLoggedIn } from "@/app/handlers/loginHandler"; export default function AcessibilityBar() { const sizes = ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl']; const [defaultSizes, setDefaultSizes] = useState({}); const [sizeProperties, setSizeProperties] = useState({}); + const loggedIn = useLoggedIn(); const router = useRouter(); const pathname = usePathname() @@ -24,7 +25,6 @@ export default function AcessibilityBar() { }); } - function changeFont(action) { sizes.forEach(size => { @@ -178,7 +178,7 @@ export default function AcessibilityBar() { 3- Ir para a busca. </button> - {!isLoggedIn() && + {!loggedIn && <button onClick={() => router.push("/entrar")}> 4- Ir para login. </button> @@ -223,7 +223,7 @@ export default function AcessibilityBar() { 1- Ir para o conteúdo. </button> - {!isLoggedIn() && + {!loggedIn && <button onClick={() => router.push("/entrar")}> 2- Ir para login. </button> diff --git a/src/app/entrar/page.js b/src/app/entrar/page.js index 87966bdf..0703538a 100644 --- a/src/app/entrar/page.js +++ b/src/app/entrar/page.js @@ -13,7 +13,7 @@ import { ThemeProvider } from "@emotion/react"; import theme from "../theme"; import LoginInfo from "./components/LoginInfo"; import AcessibilityBar from "../components/AcessibilityBar"; -import { useUserStore } from "@/app/stores/userStore" +import { logIn } from "../handlers/loginHandler"; function Login() { const [userEmail, setUserEmail] = useState(""); @@ -22,7 +22,6 @@ function Login() { const [suggestionMessage, setSuggestionMessage] = useState(""); const [isFirstLetterUpperCase, setIsFirstLetterUpperCase] = useState(false); const searchParams = useSearchParams(); - const userStore = useUserStore(); const access_token = getStoredValue("access_token"); // Obtendo os parâmetros de busca @@ -48,18 +47,9 @@ function Login() { setUserPassword(e.target.value); }; - const userLogin = async (event, email, password) => { + const userLogin = async (event) => { event.preventDefault(); - await mecredApi - .post("/public/auth/signin", { - email: userEmail, - password: userPassword, - }) - .then((response) => { - const token = response.data['token']; - userStore.setToken(token); - router.push(redirectUrl); - }) + await logIn(userEmail, userPassword) .catch((error) => { console.log(error); setErrorMessage(error['response']['data']['error']['message']); diff --git a/src/app/handlers/loginHandler.js b/src/app/handlers/loginHandler.js index 95813076..a0392f08 100644 --- a/src/app/handlers/loginHandler.js +++ b/src/app/handlers/loginHandler.js @@ -1,14 +1,7 @@ -import { redirect, usePathname, useSearchParams } from "next/navigation"; +import { usePathname, useSearchParams } from "next/navigation"; import { useRouter } from "next/navigation"; -import { useCallback } from "react"; -import { getStoredValue } from "./localStorageHandler"; - -export function isLoggedIn() { - return false; - if (typeof window === "undefined") return undefined; - - return getStoredValue("access_token") ? true : false; -} +import { useCallback, useEffect, useState } from "react"; +import mecredApi from "@/axiosConfig"; /** * React Hook for forcing login. Redirects to login page and when user logs in redirects back to the original page. @@ -17,7 +10,7 @@ export function isLoggedIn() { * * @returns Function that will force login. */ -export function useLoginBarrier(originalPath) { +export function useLoginBarrier() { const pathname = usePathname(); const searchParams = useSearchParams(); const router = useRouter(); @@ -32,4 +25,59 @@ export function useLoginBarrier(originalPath) { return false; }, [router, pathname, searchParams]); +} + +export function authHeaders() { + const token = localStorage.getItem('token'); + return { + 'Authorization': `Bearer ${token}` + }; +} + +export function useLoggedIn() { + const [loggedIn, setLoggedIn] = useState(false); + + useEffect(() => { + setLoggedIn(isLoggedIn()); + }, [setLoggedIn]); + + return loggedIn; +} + +export function isLoggedIn() { + return localStorage.getItem('token') ? true : false; +} + +export function logIn(email, password) { + return mecredApi + .post("/public/auth/signin", { + email: email, + password: password, + }) + .then((response) => { + const token = response.data['token']; + localStorage.setItem('token', token); + fetchUser(); + }); +} + +export function logOut() { + localStorage.removeItem('token'); + localStorage.removeItem('user_data'); +} + +export function userData() { + const dataString = localStorage.getItem('user_data'); + + if (!dataString) + return undefined; + + const data = JSON.parse(dataString); + return data; +} + +export async function fetchUser() { + const response = await mecredApi.get('/api/user/me'); + const dataString = JSON.stringify(response.data); + localStorage.setItem('user_data', dataString); } \ No newline at end of file diff --git a/src/app/stores/userStore.js b/src/app/stores/userStore.js deleted file mode 100644 index 26be6a4b..00000000 --- a/src/app/stores/userStore.js +++ /dev/null @@ -1,20 +0,0 @@ -import { create } from 'zustand'; - -const useUserStore = create((set, get) => ({ - token: localStorage.getItem('token') || null, - data: null, - error: null, - setToken: (token) => { - localStorage.setItem('token', token); - set({ token, data: null, error: null }); - }, - clearToken: () => { - localStorage.removeItem('token'); - set({ token: null }) - }, - headers: () => { - return { 'Authorization': `Bearer ${get().token}` }; - } -})) - -export { useUserStore }; -- GitLab