From 0685262c1ae7e59b1675b13cc45ec71d0d76cb0e Mon Sep 17 00:00:00 2001
From: Gustavo S Frehse <gsf20@inf.ufpr.br>
Date: Tue, 15 Apr 2025 15:03:55 -0300
Subject: [PATCH] isloggedin fix for zustand store
---
src/app/colecao/[id]/page.js | 19 +++-----
src/app/components/AcessibilityBar.js | 8 ++--
src/app/components/Header.js | 26 +++++------
src/app/components/MenuProfile.js | 9 ++--
src/app/components/NavigationBar.js | 20 ++++-----
src/app/components/Notifications.js | 10 ++---
src/app/components/Overlay.js | 3 +-
src/app/components/SideBar.js | 17 +++----
src/app/components/loginModal.js | 44 +++++++++++++++++++
src/app/components/needLoginModal.js | 6 +--
src/app/editar/[id]/page.js | 4 +-
src/app/handlers/loginHandler.js | 15 +++----
src/app/layout.js | 2 +
.../[id]/components/ReportProfileModal.js | 3 --
.../[id]/components/SelectionButtons.js | 4 +-
src/app/perfil/[id]/components/UserCard.js | 7 +--
src/app/perfil/[id]/page.js | 5 ++-
.../recurso/[id]/components/actionButtons.js | 30 +++++++------
.../recurso/[id]/components/collectModal.js | 5 ++-
.../recurso/[id]/components/collectionInfo.js | 6 ++-
src/app/recurso/[id]/components/comments.js | 8 ++--
.../[id]/components/complaintsModal.js | 7 ++-
.../recurso/[id]/components/createComments.js | 24 +++++-----
.../[id]/components/relatedResources.js | 2 +-
.../recurso/[id]/components/reportModal.js | 6 ++-
src/app/recurso/[id]/page.js | 32 ++++----------
src/app/stores/loginModalStore.js | 10 +++++
src/app/stores/userStore.js | 11 ++++-
28 files changed, 190 insertions(+), 153 deletions(-)
create mode 100644 src/app/components/loginModal.js
create mode 100644 src/app/stores/loginModalStore.js
diff --git a/src/app/colecao/[id]/page.js b/src/app/colecao/[id]/page.js
index 4ef56f1b..b533af3d 100644
--- a/src/app/colecao/[id]/page.js
+++ b/src/app/colecao/[id]/page.js
@@ -1,11 +1,9 @@
"use client";
import { useEffect, useState } from "react";
import Overlay from "@/app/components/Overlay";
-import { isLoggedIn } from "@/app/handlers/loginHandler";
import mecredApi from "@/axiosConfig";
import { getStoredValue } from "@/app/handlers/localStorageHandler";
import Loading from "@/app/components/Loading";
-import NeedLoginModal from "@/app/components/needLoginModal";
import ErrorComponent from "@/app/components/ErrorComponent";
import CollectionPreview from "@/app/components/collectionPreview";
import Tags from "@/app/components/tags";
@@ -13,13 +11,15 @@ import CollectionItems from "./components/collectionItems";
import PublisherInfoCollection from "./components/publisherInfoCollection";
import DownloadButton from "@/app/components/DownloadButton";
import ShareButton from "@/app/components/ShareButton";
+import { useUserStore } from "@/app/stores/userStore";
export default function Colecao({ params }) {
const [collection, setCollection] = useState(undefined);
- const [needLoginOpen, setNeedLoginOpen] = useState(false);
const [error, setError] = useState(false);
const [isSmallScreen, setIsSmallScreen] = useState(false);
+ const userStore = useUserStore();
+
const token = getStoredValue("access_token");
const client = getStoredValue("client");
const uid = getStoredValue("uid");
@@ -29,14 +29,8 @@ export default function Colecao({ params }) {
try {
let headers = {};
- if (isLoggedIn()) {
- headers = {
- "access-token": token,
- "token-type": "Bearer",
- client: client,
- uid: uid,
- Expires: 0,
- };
+ if (userStore.isLoggedIn()) {
+ headers = userStore.headers();
}
const response = await mecredApi.get(`collections/${params.id}`);
@@ -48,7 +42,7 @@ export default function Colecao({ params }) {
};
fetchData();
- }, [params.id, client, token, uid]);
+ }, [params.id, client, token, uid, userStore]);
useEffect(() => {
// Função para checar o tamanho da tela
@@ -73,7 +67,6 @@ export default function Colecao({ params }) {
)
) : (
<>
- <NeedLoginModal open={needLoginOpen} setOpen={setNeedLoginOpen} />
<div className="mb-5 overflow-y-auto scrollbar-none">
<div className="bg-ice-HC-dark p-3 w-full">
<div className=" flex justify-center">
diff --git a/src/app/components/AcessibilityBar.js b/src/app/components/AcessibilityBar.js
index f16f511b..93c8c2d8 100644
--- a/src/app/components/AcessibilityBar.js
+++ b/src/app/components/AcessibilityBar.js
@@ -6,7 +6,7 @@ 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 { useUserStore } from '../stores/userStore';
export default function AcessibilityBar() {
@@ -16,6 +16,7 @@ export default function AcessibilityBar() {
const router = useRouter();
const pathname = usePathname()
+ const userStore = useUserStore();
function goHeader() {
window.scrollTo({
@@ -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() &&
+ {!userStore.isLoggedIn() &&
<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() &&
+ {!userStore.isLoggedIn() &&
<button onClick={() => router.push("/entrar")}>
2- Ir para login.
</button>
diff --git a/src/app/components/Header.js b/src/app/components/Header.js
index 7ae1eaf4..ebb74533 100644
--- a/src/app/components/Header.js
+++ b/src/app/components/Header.js
@@ -8,33 +8,32 @@ import MenuIcon from "@mui/icons-material/Menu";
import SearchIcon from "@mui/icons-material/Search";
import AccountMenu from "./MenuProfile";
import SearchComponent from "./SearchComponent";
-import NeedLoginModal from "./needLoginModal";
-import { isLoggedIn, useLoginBarrier } from "@/app/handlers/loginHandler";
import { usePathname } from "next/navigation";
import { useRouter } from "next/navigation";
import { ImArrowLeft } from "react-icons/im";
import Notifications from "./Notifications";
import { toggleContrast } from './themeUtils';
import ContrastTwoToneIcon from '@mui/icons-material/ContrastTwoTone';
+import { useUserStore } from "../stores/userStore";
+import { useLoginBarrier } from "../handlers/loginHandler";
+import { useLoginModalStore } from "../stores/loginModalStore";
function DefaultContent({
handleToggleMobileSearch,
- setNeedLoginOpen,
setFilterState,
filterState
}) {
const pathname = usePathname();
const router = useRouter();
+ const userStore = useUserStore();
const loginBarrier = useLoginBarrier();
- const [loggedIn, setLoggedIn] = useState(false);
+ const loginModalStore = useLoginModalStore();
- useEffect(() => {
- setLoggedIn(isLoggedIn());
- }, [])
+ console.log("user store header", userStore);
const handleOpenSubmit = () => {
- if (!isLoggedIn()) {
- setNeedLoginOpen(true);
+ if (!userStore.isLoggedIn()) {
+ loginModalStore.setOpen(true);
} else {
const params = new URLSearchParams();
params.set("redirect", pathname);
@@ -94,7 +93,7 @@ function DefaultContent({
<ContrastTwoToneIcon
className=" text-darkGray-HC-white md:hidden w-[25px] h-[25px]"/>
</button>
- {loggedIn ? (
+ {userStore.isLoggedIn() ? (
<>
<Notifications />
@@ -104,7 +103,9 @@ function DefaultContent({
<button
type="button"
className="group bg-orange-HC-white hover:bg-darkOrange-HC-dark px-4 h-10 mr-14 max-sm:ml-2 rounded text-white-HC-dark-underline flex items-center font-bold flex-shrink-0 hover:text-white-HC-underline outline outline-1 outline-ice-HC-white"
- onClick={loginBarrier}
+ onClick={() => {
+ loginBarrier()
+ }}
>
Entrar
</button>
@@ -140,7 +141,6 @@ export function MobileSearch({ setFilterState, filterState, handleToggleMobileSe
* @returns header
*/
export default function Header({ setFilterState, filterState, mobileSearch }) {
- const [needLoginOpen, setNeedLoginOpen] = useState(false);
const [mobileSearchOpen, setMobileSearchOpen] = useState(false);
// Função para alternar a exibição da pesquisa no mobile
@@ -158,13 +158,11 @@ export default function Header({ setFilterState, filterState, mobileSearch }) {
) : (
<DefaultContent
handleToggleMobileSearch={handleToggleMobileSearch}
- setNeedLoginOpen={setNeedLoginOpen}
setFilterState={setFilterState}
filterState={filterState}
/>
)}
</div>
- <NeedLoginModal open={needLoginOpen} setOpen={setNeedLoginOpen} />
</div>
);
}
diff --git a/src/app/components/MenuProfile.js b/src/app/components/MenuProfile.js
index a4fa7f39..a8403805 100644
--- a/src/app/components/MenuProfile.js
+++ b/src/app/components/MenuProfile.js
@@ -11,7 +11,6 @@ import {
getStoredValue,
removeFromLocalStorage,
} from "../handlers/localStorageHandler";
-import { isLoggedIn } from "../handlers/loginHandler";
import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded';
import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
import PrivacyTipRoundedIcon from '@mui/icons-material/PrivacyTipRounded';
@@ -20,6 +19,7 @@ import AccessibilityNewRoundedIcon from '@mui/icons-material/AccessibilityNewRou
import FeedbackRoundedIcon from '@mui/icons-material/FeedbackRounded';
import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
import { mecredURL } from "@/axiosConfig";
+import { useUserStore } from "../stores/userStore";
const items = [
// {
@@ -82,17 +82,16 @@ export default function AccountMenu() {
const [anchorEl, setAnchorEl] = useState(null);
const [userData, setUserData] = useState({});
const [id, setId] = useState(null);
- const [logged, setLogged] = useState(false);
const open = Boolean(anchorEl);
+ const userStore = useUserStore();
const router = useRouter();
useEffect(() => {
- if (isLoggedIn()) {
+ if (userStore.isLoggedIn()) {
let data = JSON.parse(getStoredValue("user_data"));
setId(data["id"]);
}
- setLogged(isLoggedIn());
}, []);
const handleClick = (event) => {
@@ -123,7 +122,7 @@ export default function AccountMenu() {
return (
<>
- {logged ? (
+ {userStore.isLoggedIn() ? (
<Box className="mr-14 flex align-center">
<IconButton
onClick={handleClick}
diff --git a/src/app/components/NavigationBar.js b/src/app/components/NavigationBar.js
index 47b0a794..c87cbdb2 100644
--- a/src/app/components/NavigationBar.js
+++ b/src/app/components/NavigationBar.js
@@ -1,7 +1,5 @@
import * as React from 'react';
import { useState, useEffect } from 'react';
-import NeedLoginModal from './needLoginModal';
-import { isLoggedIn } from "../handlers/loginHandler";
import FileUploadIcon from '@mui/icons-material/FileUpload';
import CollectionsBookmarkIcon from "@mui/icons-material/CollectionsBookmark";
import SubjectIcon from "@mui/icons-material/Subject";
@@ -16,18 +14,20 @@ import {
getStoredValue,
removeFromLocalStorage,
} from "../handlers/localStorageHandler";
+import { useLoginModalStore } from '../stores/loginModalStore';
+import { useUserStore } from '../stores/userStore';
export default function NavigationBar({ mobileSearch}) {
-
- const [needLoginOpen, setNeedLoginOpen] = useState(false);
const pathname = usePathname();
let searchParams = useSearchParams();
const page = searchParams.get('page');
const [id, setId] = useState(null);
+ const loginModalStore = useLoginModalStore();
+ const userStore = useUserStore();
useEffect(() => {
- if (isLoggedIn()) {
+ if (userStore.isLoggedIn()) {
let data = JSON.parse(getStoredValue("user_data"));
setId(data["id"]);
}
@@ -35,9 +35,9 @@ export default function NavigationBar({ mobileSearch}) {
const handleOpenLoggin = (e) => {
- if (!isLoggedIn()) {
+ if (!userStore.isLoggedIn()) {
e.preventDefault();
- setNeedLoginOpen(true);
+ loginModalStore.setOpen(true);
}
};
@@ -70,8 +70,6 @@ export default function NavigationBar({ mobileSearch}) {
return (
<>
- <NeedLoginModal open={needLoginOpen} setOpen={setNeedLoginOpen} />
-
<nav className="bg-lightGray h-50 outline outline-1 outline-ice-HC-white text-darkGray-HC-white font-light fixed bottom-0 left-0 w-full z-10">
<ul className="flex justify-between overflow-x-auto no-scrollbar animate-scrollHint">
{navItems.map((item, index) => {
@@ -89,8 +87,8 @@ export default function NavigationBar({ mobileSearch}) {
<li key={index} className="flex w-20 flex-col items-center justify-center p-3">
<a
href={isLogout ? "#" : (
- isPublishRoute ? (isLoggedIn() ? "/publicar" : "") :
- isPerfilRoute ? (isLoggedIn() ? `/perfil/${id}` : "") :
+ isPublishRoute ? (userStore.isLoggedIn() ? "/publicar" : "") :
+ isPerfilRoute ? (userStore.isLoggedIn() ? `/perfil/${id}` : "") :
item.href
)}
onClick={
diff --git a/src/app/components/Notifications.js b/src/app/components/Notifications.js
index 080fb428..1d665542 100644
--- a/src/app/components/Notifications.js
+++ b/src/app/components/Notifications.js
@@ -1,22 +1,22 @@
import mecredApi from "@/axiosConfig";
-import { useLoginBarrier } from "@/app/handlers/loginHandler";
import { getStoredValue } from "@/app/handlers/localStorageHandler";
import { useEffect, useState } from 'react'
import ModalNotifications from "./ModalNotifications";
+import { useUserStore } from "../stores/userStore";
export default function Notifications() {
const [notifications, setNotifications] = useState([]);
const [countNotifications, setCountNotifications] = useState(null);
-
- const loginBarrier = useLoginBarrier()
+ const userStore = useUserStore();
const token = getStoredValue("access_token")
const client = getStoredValue("client")
const uid = getStoredValue("uid")
useEffect(() => {
- if (!loginBarrier())
+ if (!userStore.isLoggedIn())
return
+
const url = `/feed?offset=0&limit=30`
const getNotifications = async (url) => {
@@ -43,7 +43,7 @@ export default function Notifications() {
//chama funcao
getNotifications(url)
- }, [loginBarrier, uid, client, token])
+ }, [userStore, uid, client, token])
const postViewNotification = async (payload) => {
diff --git a/src/app/components/Overlay.js b/src/app/components/Overlay.js
index 610bb3dc..e75d2414 100644
--- a/src/app/components/Overlay.js
+++ b/src/app/components/Overlay.js
@@ -2,12 +2,13 @@
import * as React from "react";
import Header from "./Header";
import SideBar from "./SideBar";
-import { Suspense, useEffect, useLayoutEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
import theme from "@/app/theme";
import { ThemeProvider } from "@emotion/react";
import Loading from "./Loading";
import AcessibilityBar from "./AcessibilityBar";
import NavigationBar from "./NavigationBar";
+import { useUserStore } from "../stores/userStore";
/**
* @param {Object} props
diff --git a/src/app/components/SideBar.js b/src/app/components/SideBar.js
index c49cc1dd..2d4d9e52 100644
--- a/src/app/components/SideBar.js
+++ b/src/app/components/SideBar.js
@@ -10,11 +10,11 @@ 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 NeedLoginModal from "./needLoginModal";
import {
getStoredValue,
} from "../handlers/localStorageHandler";
+import { useLoginModalStore } from "../stores/loginModalStore";
+import { useUserStore } from "../stores/userStore";
/**
* @param {Object} props
@@ -108,20 +108,16 @@ export default function SideBar({ setFilterState, filterState }) {
}
};
- const [needLoginOpen, setNeedLoginOpen] = useState(false);
-
+ const userStore = useUserStore();
+ const setOpenLoginModal = useLoginModalStore(store => store.setOpen);
const handleOpenLogin = () => {
-
- if (!isLoggedIn()) {
- setNeedLoginOpen(true);
- }
};
const [id, setId] = useState(null);
useEffect(() => {
- if (isLoggedIn()) {
+ if (false) {
let data = JSON.parse(getStoredValue("user_data"));
setId(data["id"]);
}
@@ -129,7 +125,6 @@ export default function SideBar({ setFilterState, filterState }) {
return (
<>
- <NeedLoginModal open={needLoginOpen} setOpen={setNeedLoginOpen} />
<div className="max-md:hidden min-h-0 overflow-y-auto flex flex-col text-darkGray-HC-white-underline font-light">
<div className="flex flex-col justify-start items-center gap-3 w-full ">
@@ -137,7 +132,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" ? (userStore.isLoggedIn() ? "/publicar" : "") : getHref(item.href)}
key={index}
alt={item.title}
title={item.title}
diff --git a/src/app/components/loginModal.js b/src/app/components/loginModal.js
new file mode 100644
index 00000000..20ac89c7
--- /dev/null
+++ b/src/app/components/loginModal.js
@@ -0,0 +1,44 @@
+"use client"
+import { Button } from "@mui/material"
+import { useLoginModalStore } from "../stores/loginModalStore"
+import { useUserStore } from "../stores/userStore";
+
+export default function LoginModal() {
+ const loginModalStore = useLoginModalStore();
+ const userStore = useUserStore();
+
+ console.log(loginModalStore);
+
+ if (!loginModalStore.open) {
+ return null;
+ }
+
+
+ return (
+ <div className="fixed inset-16">
+ <div className="flex flex-col rounded-lg bg-white-HC-dark p-3">
+ <div className="text-xl text-darkGray-HC-white-underline font-bold ">Entrar</div>
+ <div className="p-3">
+ <div className="text-base text-darkGray-HC-white-underline">
+ Você precisa entrar ou se cadastrar para executar essa ação.
+ </div>
+ <div className="flex flex-wrap justify-center gap-1 items-stretch">
+ <Button
+ variant="contained"
+ className="bg-turquoise hover:bg-[#1d1d1d1c] disabled:bg-red mt-3 text-white-HC-dark-underline hover:text-turquoise-HC-underline shadow-none rounded normal-case text-base font-bold flex-shrink-0 flex-grow"
+ >
+ Ir para página de Login
+ </Button>
+ <Button
+ variant="contained"
+ className="bg-white-HC-dark hover:bg-[#1d1d1d1c] disabled:bg-red mt-3 text-turquoise-HC-underline hover:text-turquoise-HC-underline shadow-none rounded normal-case text-base font-bold flex-shrink-0 flex-grow"
+ onClick={() => loginModalStore.setOpen(false)}
+ >
+ Cancelar
+ </Button>
+ </div>
+ </div>
+ </div>
+ </div>
+ )
+}
\ No newline at end of file
diff --git a/src/app/components/needLoginModal.js b/src/app/components/needLoginModal.js
index adf5c7e5..9082c586 100644
--- a/src/app/components/needLoginModal.js
+++ b/src/app/components/needLoginModal.js
@@ -1,13 +1,13 @@
import { Button, Modal } from "@mui/material";
-import { isLoggedIn, useLoginBarrier } from "@/app/handlers/loginHandler";
+import { useUserStore } from "../stores/userStore";
export default function NeedLoginModal({ open, setOpen }) {
- const loginBarrier = useLoginBarrier();
+ const userStore = useUserStore();
return (
<>
<Modal
- open={open && isLoggedIn}
+ open={open && userStore.isLoggedIn()}
className="grid h-screen place-items-center m-5"
onClose={() => setOpen(false)}
slotProps={{
diff --git a/src/app/editar/[id]/page.js b/src/app/editar/[id]/page.js
index a9a984d5..e437c053 100644
--- a/src/app/editar/[id]/page.js
+++ b/src/app/editar/[id]/page.js
@@ -16,8 +16,8 @@ export default function Edit({ params }) {
const [got, setGot] = useState(false)
useEffect(() => {
- if (!loginBarrier())
- return
+ loginBarrier();
+
const fetchUser = async (id) => {
await mecredApi
.get(`/users/${id}`, {
diff --git a/src/app/handlers/loginHandler.js b/src/app/handlers/loginHandler.js
index 95813076..d881556d 100644
--- a/src/app/handlers/loginHandler.js
+++ b/src/app/handlers/loginHandler.js
@@ -1,10 +1,10 @@
import { redirect, usePathname, useSearchParams } from "next/navigation";
import { useRouter } from "next/navigation";
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
import { getStoredValue } from "./localStorageHandler";
+import { useUserStore } from "../stores/userStore";
export function isLoggedIn() {
- return false;
if (typeof window === "undefined") return undefined;
return getStoredValue("access_token") ? true : false;
@@ -12,18 +12,17 @@ export function isLoggedIn() {
/**
* React Hook for forcing login. Redirects to login page and when user logs in redirects back to the original page.
- * For example, doing `const loginBarrier = useLoginBarrier()` then calling `loginBarrier()` will redirect to login page if
- * the user is not logged in.
*
- * @returns Function that will force login.
+ * @returns Hook that will force login.
*/
-export function useLoginBarrier(originalPath) {
+export function useLoginBarrier() {
const pathname = usePathname();
const searchParams = useSearchParams();
const router = useRouter();
+ const userStore = useUserStore();
return useCallback(() => {
- if (isLoggedIn()) return true;
+ if (userStore.isLoggedIn()) return true;
const params = new URLSearchParams();
params.set("redirect", pathname);
@@ -31,5 +30,5 @@ export function useLoginBarrier(originalPath) {
router.push(`/entrar?${params.toString()}`);
return false;
- }, [router, pathname, searchParams]);
+ }, [router, pathname, searchParams, userStore]);
}
\ No newline at end of file
diff --git a/src/app/layout.js b/src/app/layout.js
index 20faac14..38e91ef1 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -1,6 +1,7 @@
import { Suspense } from "react";
import "./globals.css";
import Loading from "./components/Loading";
+import LoginModal from "./components/loginModal";
export const metadata = {
title: 'MECRED',
@@ -19,6 +20,7 @@ export default function RootLayout({ children }) {
<body>
<Suspense fallback={<Loading />}>
{children}
+ <LoginModal />
</Suspense>
</body>
</html>
diff --git a/src/app/perfil/[id]/components/ReportProfileModal.js b/src/app/perfil/[id]/components/ReportProfileModal.js
index d56afb51..3db76c64 100644
--- a/src/app/perfil/[id]/components/ReportProfileModal.js
+++ b/src/app/perfil/[id]/components/ReportProfileModal.js
@@ -2,7 +2,6 @@ import {
Button,
FormControl,
FormControlLabel,
- FormLabel,
Modal,
Radio,
RadioGroup,
@@ -12,8 +11,6 @@ import {
import { useState, useEffect } from "react";
import { getStoredValue } from "@/app/handlers/localStorageHandler";
import mecredApi from "@/axiosConfig";
-import { isLoggedIn } from "@/app/handlers/loginHandler";
-import { useRouter } from "next/navigation";
const options = [
{ value: "6", text: 'Esta pessoa está fingindo ser eu ou alguém que eu conheço.' },
diff --git a/src/app/perfil/[id]/components/SelectionButtons.js b/src/app/perfil/[id]/components/SelectionButtons.js
index e4cfa8e8..dcadf62a 100644
--- a/src/app/perfil/[id]/components/SelectionButtons.js
+++ b/src/app/perfil/[id]/components/SelectionButtons.js
@@ -1,6 +1,4 @@
-import Grid from "@mui/material/Grid"
-import { isLoggedIn } from '@/app/handlers/loginHandler';
-import { Divider, Tab, Tabs } from "@mui/material";
+import { Tab, Tabs } from "@mui/material";
import { useState } from "react";
/**
diff --git a/src/app/perfil/[id]/components/UserCard.js b/src/app/perfil/[id]/components/UserCard.js
index a5251ea8..b1beddd5 100644
--- a/src/app/perfil/[id]/components/UserCard.js
+++ b/src/app/perfil/[id]/components/UserCard.js
@@ -7,7 +7,6 @@ import { Avatar } from '@mui/material';
import { useEffect, useState } from 'react';
import { getStoredValue } from '@/app/handlers/localStorageHandler';
import mecredApi, { mecredURL } from '@/axiosConfig';
-import { isLoggedIn } from '@/app/handlers/loginHandler';
import Stats from './Stats';
import MedalAchievements from './MedalAchievements';
import AboutCard from "./AboutCard";
@@ -18,6 +17,7 @@ import FollowingCards from "./FollowingCards";
import FollowersCards from "./FollowersCards";
import ProfileComplaints from "./ProfileComplaints";
import ProfileAchievementsMenu from "./ProfileAchievementsMenu";
+import { useUserStore } from '@/app/stores/userStore';
const roles = [
{
@@ -106,13 +106,14 @@ export default function UserCard({ profileData, idLogin, achievements, progresse
const [translateItems, setTranslateItems] = useState("")
const [optButton, setOptButton] = useState(0)
const [verifyCurator, setVerifyCurator] = useState(false)
+ const userStore = useUserStore();
/**
* faz fetch dos seguidores e seguindo, se não estiver logado não aparece essa informação
*/
useEffect(() => {
- if (!isLoggedIn)
+ if (!userStore.isLoggedIn())
return;
const fetchFollowers = async () => {
const token = getStoredValue("access_token")
@@ -184,7 +185,7 @@ export default function UserCard({ profileData, idLogin, achievements, progresse
*/
let options = [{ name: "Sobre", component: <AboutCard content={profileData["description"]} /> }]
- if (isLoggedIn() && profileData["id"] == idLogin) {
+ if (userStore.isLoggedIn() && profileData["id"] == idLogin) {
options.push({ name: "Conquistas", component: <ProfileAchievementsMenu profileData={profileData} achievements={achievements} progresses={progresses} setItems={setItems} items={items} store={store} /> },
{ name: "Meus Recursos", component: <ProfileResources id={profileData["id"]} idLogin={idLogin} /> },
diff --git a/src/app/perfil/[id]/page.js b/src/app/perfil/[id]/page.js
index 431cb8d6..a6bf80d0 100644
--- a/src/app/perfil/[id]/page.js
+++ b/src/app/perfil/[id]/page.js
@@ -4,8 +4,8 @@ import { getStoredValue } from "../../handlers/localStorageHandler";
import { useEffect, useState } from "react";
import Overlay from "../../components/Overlay";
import mecredApi from "@/axiosConfig";
-import { isLoggedIn } from "@/app/handlers/loginHandler";
import ErrorComponent from "@/app/components/ErrorComponent";
+import { useUserStore } from "@/app/stores/userStore";
export default function Perfil({ params }) {
const [profileData, setProfileData] = useState(null);
@@ -15,6 +15,7 @@ export default function Perfil({ params }) {
const [progresses, setProgresses] = useState(null);
const [error, setError] = useState(false)
const [idLogin, setIdLogin] = useState(0)
+ const userStore = useUserStore();
const token = getStoredValue("access_token")
const client = getStoredValue("client")
const uid = getStoredValue("uid")
@@ -64,7 +65,7 @@ export default function Perfil({ params }) {
fetchItems(params.id)
- if (isLoggedIn()) {
+ if (userStore.isLoggedIn()) {
let data = getStoredValue("user_data")
let dataJson = JSON.parse(data);
diff --git a/src/app/recurso/[id]/components/actionButtons.js b/src/app/recurso/[id]/components/actionButtons.js
index 4ee38dc5..39ca6c65 100644
--- a/src/app/recurso/[id]/components/actionButtons.js
+++ b/src/app/recurso/[id]/components/actionButtons.js
@@ -9,15 +9,16 @@ import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import FlagOutlinedIcon from "@mui/icons-material/FlagOutlined";
import FlagIcon from "@mui/icons-material/Flag";
import mecredApi, { mecredURL } from "@/axiosConfig";
-import { isLoggedIn, useLoginBarrier } from "@/app/handlers/loginHandler";
import { getStoredValue } from "@/app/handlers/localStorageHandler";
-import { useState, useEffect, useLayoutEffect } from "react";
+import { useState, useEffect } from "react";
import ShareModal from "../../../components/ShareModal";
import ReportModal from "./reportModal";
import CollectModal from "./collectModal";
import HomologationModal from "./homologationModal";
import DeleteModal from "./deleteModal";
import { usePathname } from "next/navigation";
+import { useLoginModalStore } from "@/app/stores/loginModalStore";
+import { useUserStore } from "@/app/stores/userStore";
function ChangeOnHover({ text, textOnHover }) {
return (
@@ -28,7 +29,7 @@ function ChangeOnHover({ text, textOnHover }) {
);
}
-export default function ActionButtons({ learningObject, setNeedLoginOpen, state }) {
+export default function ActionButtons({ learningObject, state }) {
const [liked, setLiked] = useState(learningObject.liked);
const [shareOpen, setShareOpen] = useState(false);
const [reportOpen, setReportOpen] = useState(false);
@@ -39,13 +40,16 @@ export default function ActionButtons({ learningObject, setNeedLoginOpen, state
const [deleteOpen, setDeleteOpen] = useState(false)
const [submitted, setSubmitted] = useState(state)
+ const loginModalStore = useLoginModalStore();
+ const userStore = useUserStore();
+
const token = getStoredValue("access_token");
const client = getStoredValue("client");
const uid = getStoredValue("uid");
const pathname = usePathname();
useEffect(() => {
- if (!isLoggedIn()) return;
+ if (!userStore.isLoggedIn()) return;
const data = JSON.parse(getStoredValue("user_data"));
setUserData(data);
@@ -56,7 +60,7 @@ export default function ActionButtons({ learningObject, setNeedLoginOpen, state
}, [learningObject.liked, userData]);
useEffect(() => {
- if(!isLoggedIn() || !learningObject?.id) return;
+ if(!userStore.isLoggedIn() || !learningObject?.id) return;
setReported(learningObject.complained);
}, [learningObject])
@@ -101,8 +105,8 @@ export default function ActionButtons({ learningObject, setNeedLoginOpen, state
),
icon: liked ? <FavoriteOutlinedIcon /> : <FavoriteBorderOutlinedIcon />,
action: () => {
- if (!isLoggedIn()) {
- setNeedLoginOpen(true);
+ if (!userStore.isLoggedIn()) {
+ loginModalStore.setOpen(true);
return;
}
@@ -127,8 +131,8 @@ export default function ActionButtons({ learningObject, setNeedLoginOpen, state
// Botão de Colecionar
{
name: "Colecionar", icon: <BookmarkBorderOutlinedIcon />, action: () => {
- if (!isLoggedIn()) {
- setNeedLoginOpen(true);
+ if (!userStore.isLoggedIn()) {
+ loginModalStore.setOpen(true);
return;
}
setCollectOpen(true)
@@ -148,8 +152,8 @@ export default function ActionButtons({ learningObject, setNeedLoginOpen, state
name: reported ? "Reportado" : "Reportar",
icon: reported ? <FlagIcon /> : <FlagOutlinedIcon />,
action: () => {
- if (!isLoggedIn()) {
- setNeedLoginOpen(true);
+ if (!userStore.isLoggedIn()) {
+ loginModalStore.setOpen(true);
return;
}
if (reported) return;
@@ -163,8 +167,8 @@ export default function ActionButtons({ learningObject, setNeedLoginOpen, state
name: "Deletar",
icon: <DeleteOutlinedIcon />,
action: () => {
- if (!isLoggedIn()) {
- setNeedLoginOpen(true);
+ if (!userStore.isLoggedIn()) {
+ loginModalStore.setOpen(true);
return;
}
diff --git a/src/app/recurso/[id]/components/collectModal.js b/src/app/recurso/[id]/components/collectModal.js
index 0e594d2e..5f0dae7e 100644
--- a/src/app/recurso/[id]/components/collectModal.js
+++ b/src/app/recurso/[id]/components/collectModal.js
@@ -4,8 +4,8 @@ import { useEffect, useState } from "react"
import { getStoredValue } from "@/app/handlers/localStorageHandler"
import LockIcon from '@mui/icons-material/Lock';
import LockOpenIcon from '@mui/icons-material/LockOpen';
-import { isLoggedIn } from "@/app/handlers/loginHandler";
import CreateCollectionModal from "@/app/perfil/[id]/components/CreateCollectionModal";
+import { useUserStore } from "@/app/stores/userStore";
/**
*
@@ -22,13 +22,14 @@ export default function CollectModal({ open, onClose, idLogin, resourceId }) {
const [repeatedOpen, setRepeatedOpen] = useState(false)
const [sucessOpen, setSucessOpen] = useState(false)
const [collectionOpen, setCollectionOpen] = useState(false)
+ const userStore = useUserStore();
const token = getStoredValue("access_token");
const client = getStoredValue("client");
const uid = getStoredValue("uid");
useEffect(() => {
- if (!isLoggedIn()) return;
+ if (!userStore.isLoggedIn()) return;
/**
* Fetch do número total de coleções do usuário
diff --git a/src/app/recurso/[id]/components/collectionInfo.js b/src/app/recurso/[id]/components/collectionInfo.js
index 62d25ab6..2a1c696e 100644
--- a/src/app/recurso/[id]/components/collectionInfo.js
+++ b/src/app/recurso/[id]/components/collectionInfo.js
@@ -1,15 +1,17 @@
import { useEffect, useRef, useState } from "react";
import { getStoredValue } from "@/app/handlers/localStorageHandler";
import { useMediaQuery } from "@mui/material";
-import { isLoggedIn } from "@/app/handlers/loginHandler";
import Loading from "@/app/components/Loading";
import mecredApi from "@/axiosConfig";
import Cards from "@/app/components/Cards";
import Link from "next/link";
+import { useUserStore } from "@/app/stores/userStore";
export default function CollectionInfo({ resourceId, collectionId }) {
const [collection, setCollection] = useState(null);
+ const userStore = useUserStore();
+
const token = getStoredValue("access_token");
const client = getStoredValue("client");
const uid = getStoredValue("uid");
@@ -18,7 +20,7 @@ export default function CollectionInfo({ resourceId, collectionId }) {
const fetchData = async () => {
let headers = {};
- if (isLoggedIn()) {
+ if (userStore.isLoggedIn()) {
headers = {
"access-token": token,
"token-type": "Bearer",
diff --git a/src/app/recurso/[id]/components/comments.js b/src/app/recurso/[id]/components/comments.js
index fb956258..1ab035d8 100644
--- a/src/app/recurso/[id]/components/comments.js
+++ b/src/app/recurso/[id]/components/comments.js
@@ -4,14 +4,14 @@ import mecredApi from "@/axiosConfig";
import { getStoredValue } from "@/app/handlers/localStorageHandler";
import PrintComments from "./printComments";
import CreateComments from "./createComments";
-import { isLoggedIn } from "@/app/handlers/loginHandler";
-import { setConfig } from "next/config";
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import { useUserStore } from "@/app/stores/userStore";
export default function Comments({ learningObjectId }) {
const [comments, setComments] = useState(null)
const [newComment, setNewComment] = useState("");
+ const userStore = useUserStore();
const token = getStoredValue("access_token")
const client = getStoredValue("client")
@@ -21,12 +21,12 @@ export default function Comments({ learningObjectId }) {
const [logged, setLogged] = useState(false);
useEffect(() => {
- if (!isLoggedIn()) return;
+ if (!userStore.isLoggedIn()) return;
const data = JSON.parse(getStoredValue("user_data"));
setUserData(data);
setLogged(true);
- }, [token])
+ }, [token, userStore])
const handleSubmitComment = async () => {
diff --git a/src/app/recurso/[id]/components/complaintsModal.js b/src/app/recurso/[id]/components/complaintsModal.js
index b76bef23..86fa428e 100644
--- a/src/app/recurso/[id]/components/complaintsModal.js
+++ b/src/app/recurso/[id]/components/complaintsModal.js
@@ -3,14 +3,17 @@ import { getStoredValue } from "@/app/handlers/localStorageHandler";
import mecredApi from "@/axiosConfig";
import { Alert, FormControlLabel, Modal, Radio, RadioGroup, TextField } from "@mui/material";
import { useEffect, useState } from "react";
-import { isLoggedIn } from "@/app/handlers/loginHandler";
import CloseIcon from '@mui/icons-material/Close';
+import { useUserStore } from "@/app/stores/userStore";
export default function ComplaintModal({ open, onClose, name, id, setSubmitted }) {
const [questions, setQuestions] = useState([])
const [payload, setPayload] = useState([])
const [myId, setMyId] = useState(null);
const [message, setMessage] = useState("")
+
+ const userStore = useUserStore();
+
const token = getStoredValue("access_token");
const client = getStoredValue("client");
const uid = getStoredValue("uid");
@@ -26,7 +29,7 @@ export default function ComplaintModal({ open, onClose, name, id, setSubmitted }
}, [])
useEffect(() => {
- if (isLoggedIn()) {
+ if (userStore.isLoggedIn()) {
let data = JSON.parse(getStoredValue("user_data"));
setMyId(data["id"]);
}
diff --git a/src/app/recurso/[id]/components/createComments.js b/src/app/recurso/[id]/components/createComments.js
index d3e1aafe..13b2f12c 100644
--- a/src/app/recurso/[id]/components/createComments.js
+++ b/src/app/recurso/[id]/components/createComments.js
@@ -1,11 +1,10 @@
import { Avatar, TextareaAutosize } from "@mui/material"
import PersonIcon from '@mui/icons-material/Person';
-import { useEffect, useState } from "react";
-import mecredApi, { mecredURL } from "@/axiosConfig";
-import { getStoredValue } from "@/app/handlers/localStorageHandler";
-import NeedLoginModal from "../../../components/needLoginModal";
+import { mecredURL } from "@/axiosConfig";
import SendIcon from '@mui/icons-material/Send';
+import { useUserStore } from "@/app/stores/userStore";
+import { useLoginModalStore } from "@/app/stores/loginModalStore";
function getRandomBg(id) {
const colors = [
@@ -27,13 +26,11 @@ function getRandomBg(id) {
return colors[id % colors.length];
}
-
-
-
export default function CreateComments({ user, logged, handleSubmitComment, newComment, setNewComment, comments, setComments }) {
- const handleInputChange = (e) => setNewComment(e.target.value);
- const [needLoginOpen, setNeedLoginOpen] = useState(false)
+ const handleInputChange = (e) => setNewComment(e.target.value);
+ const userStore = useUserStore();
+ const loginModalStore = useLoginModalStore();
return (
<div>
@@ -73,7 +70,8 @@ export default function CreateComments({ user, logged, handleSubmitComment, newC
<div className="flex justify-end gap-2 mt-2">
<button className="w-24 h-8 border-black rounded-lg text-darkGray-HC-white-underline text-sm hover:text-white-HC-dark-underline hover:bg-ice-HC-white outline outline-1 outline-ice-HC-white" onClick={() => setNewComment("")}> cancelar </button>
<button className="bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark hover:text-white w-24 h-8 rounded-lg text-white-HC-dark-underline text-sm hover:bg-turquoise-hover outline outline-1 outline-ice-HC-white" onClick={() => {
- if (!logged) setNeedLoginOpen(true)
+ if (!userStore.isLoggedIn())
+ loginModalStore.setOpen(true);
handleSubmitComment()
}}> comentar </button>
</div>
@@ -96,14 +94,12 @@ export default function CreateComments({ user, logged, handleSubmitComment, newC
}}
/>
<button onClick={() => {
- if (!logged) setNeedLoginOpen(true)
+ if (!userStore.isLoggedIn())
+ loginModalStore.setOpen(true);
handleSubmitComment()
-
}}><SendIcon className="text-turquoise-HC-underline " /></button>
</div>
</div>
- <NeedLoginModal open={needLoginOpen} setOpen={setNeedLoginOpen} />
-
</div >
)
}
\ No newline at end of file
diff --git a/src/app/recurso/[id]/components/relatedResources.js b/src/app/recurso/[id]/components/relatedResources.js
index 6a96b0e6..922e42c0 100644
--- a/src/app/recurso/[id]/components/relatedResources.js
+++ b/src/app/recurso/[id]/components/relatedResources.js
@@ -46,7 +46,7 @@ export default function RelatedResources({ learningObject }) {
- const isSm = useMediaQuery((theme) => theme.breakpoints.down('sm'));
+ const isSm = false;// useMediaQuery((theme) => theme.breakpoints.down('sm'));
return (
<Loading loaded={got}>
diff --git a/src/app/recurso/[id]/components/reportModal.js b/src/app/recurso/[id]/components/reportModal.js
index d03444bc..95ac68ae 100644
--- a/src/app/recurso/[id]/components/reportModal.js
+++ b/src/app/recurso/[id]/components/reportModal.js
@@ -10,7 +10,7 @@ import {
import { useState, useEffect } from "react";
import { getStoredValue } from "@/app/handlers/localStorageHandler";
import mecredApi from "@/axiosConfig";
-import { isLoggedIn } from "@/app/handlers/loginHandler";
+import { useUserStore } from "@/app/stores/userStore";
const ModalSucess = ({ open, onClose, modalOnClose }) => {
@@ -43,12 +43,14 @@ export default function ReportModal({ open, onClose, learningObject, setReported
const [user, setUser] = useState({});
const [submitOpen, setSubmitOpen] = useState(false);
+ const userStore = useUserStore();
+
const token = getStoredValue("access_token");
const client = getStoredValue("client");
const uid = getStoredValue("uid");
useEffect(() => {
- if (!isLoggedIn())
+ if (!userStore.isLoggedIn())
return;
const userData = JSON.parse(getStoredValue("user_data"));
diff --git a/src/app/recurso/[id]/page.js b/src/app/recurso/[id]/page.js
index 7e49c096..a60f765c 100644
--- a/src/app/recurso/[id]/page.js
+++ b/src/app/recurso/[id]/page.js
@@ -6,22 +6,19 @@ import PublisherInfo from "../../components/publisherInfo";
import Overlay from "../../components/Overlay";
import ResourceInfo from "./components/resourceInfo";
import RelatedResources from "./components/relatedResources";
-import { isLoggedIn } from "@/app/handlers/loginHandler";
import mecredApi from "@/axiosConfig";
-import { getStoredValue } from "@/app/handlers/localStorageHandler";
import Loading from "@/app/components/Loading";
import ResourcePreview from "./components/resourcePreview";
-import NeedLoginModal from "../../components/needLoginModal";
import ErrorComponent from "@/app/components/ErrorComponent";
import HomologationModal from "./components/homologationModal";
import ComplaintModal from "./components/complaintsModal";
import Comments from "./components/comments";
import { useSearchParams } from "next/navigation";
import CollectionInfo from "./components/collectionInfo";
+import { useUserStore } from "@/app/stores/userStore";
export default function Recurso({ params }) {
const [learningObject, setLearningObject] = useState(undefined);
- const [needLoginOpen, setNeedLoginOpen] = useState(false);
const [error, setError] = useState(false);
const [state, setState] = useState();
const [submitOpen, setSubmitOpen] = useState(false);
@@ -29,30 +26,20 @@ export default function Recurso({ params }) {
const [complained, setComplained] = useState();
const [isSmallScreen, setIsSmallScreen] = useState(false);
const searchParams = useSearchParams();
+ const userStore = useUserStore();
const collectionId = searchParams.get("collectionId");
- const token = getStoredValue("access_token");
- const client = getStoredValue("client");
- const uid = getStoredValue("uid");
-
useEffect(() => {
const fetchData = async () => {
try {
- let headers = {};
-
- if (isLoggedIn()) {
- headers = {
- "access-token": token,
- "token-type": "Bearer",
- client: client,
- uid: uid,
- Expires: 0,
- };
+ let response = null;
+ if (userStore.isLoggedIn()) {
+ response = await mecredApi.get(`api/resource/${params.id}`, { headers: userStore.headers() });
+ } else {
+ response = await mecredApi.get(`public/resource/${params.id}`);
}
- const response = await mecredApi.get(`learning_objects/${params.id}`, { headers });
-
setLearningObject(response.data);
setState(response.data.state === "submitted");
setComplained(response.data.state === "suspended");
@@ -62,7 +49,7 @@ export default function Recurso({ params }) {
};
fetchData();
- }, [params.id, client, token, uid]);
+ }, [params.id]);
useEffect(() => {
setComplained(learningObject?.state === "suspended");
@@ -92,7 +79,6 @@ export default function Recurso({ params }) {
<>
<HomologationModal open={submitOpen} onClose={() => setSubmitOpen(false)} name={learningObject.name} id={learningObject.submission_id} setSubmitted={setState} />
<ComplaintModal open={submitComplaintOpen} onClose={() => setSubmitComplaintOpen(false)} name={learningObject.name} id={learningObject.id} setSubmitted={setComplained} />
- <NeedLoginModal open={needLoginOpen} setOpen={setNeedLoginOpen} />
<div className="flex flex-col bg-ice-HC-dark p-3 flex-shrink-0 min-height-0 overflow-y-auto scrollbar-none scroll-container">
<div className=" flex justify-center">
<ResourcePreview learningObject={learningObject} />
@@ -128,7 +114,7 @@ export default function Recurso({ params }) {
</div>
)}
</div>
- <ActionButtons learningObject={learningObject} setNeedLoginOpen={setNeedLoginOpen} state={state} />
+ <ActionButtons learningObject={learningObject} state={state} />
<PublisherInfo publisher={learningObject?.publisher} />
<ResourceInfo learningObject={learningObject} />
<Comments learningObjectId={params.id} />
diff --git a/src/app/stores/loginModalStore.js b/src/app/stores/loginModalStore.js
new file mode 100644
index 00000000..0f108121
--- /dev/null
+++ b/src/app/stores/loginModalStore.js
@@ -0,0 +1,10 @@
+import { create } from 'zustand';
+
+const useLoginModalStore = create((set) => ({
+ open: false,
+ setOpen: (open) => {
+ set({ open })
+ }
+}))
+
+export { useLoginModalStore };
diff --git a/src/app/stores/userStore.js b/src/app/stores/userStore.js
index 26be6a4b..21ec96a4 100644
--- a/src/app/stores/userStore.js
+++ b/src/app/stores/userStore.js
@@ -1,7 +1,8 @@
+import mecredApi from '@/axiosConfig';
import { create } from 'zustand';
const useUserStore = create((set, get) => ({
- token: localStorage.getItem('token') || null,
+ token: null,
data: null,
error: null,
setToken: (token) => {
@@ -10,10 +11,16 @@ const useUserStore = create((set, get) => ({
},
clearToken: () => {
localStorage.removeItem('token');
- set({ token: null })
+ set({ token: null });
},
headers: () => {
return { 'Authorization': `Bearer ${get().token}` };
+ },
+ fetchUser: () => {
+ mecredApi.get('/api', get().headers());
+ },
+ isLoggedIn: () => {
+ return get().token !== null;
}
}))
--
GitLab