diff --git a/src/app/components/Cards.js b/src/app/components/Cards.js
index 4b7e3db2caf8f088c994c39032409f14d721ae05..5a3e2b6539059dd617e316744329c9f8768c546c 100644
--- a/src/app/components/Cards.js
+++ b/src/app/components/Cards.js
@@ -91,6 +91,7 @@ export default function Cards(props) {
+
return (
<Card
@@ -127,17 +128,19 @@ export default function Cards(props) {
<CardHeader
className="self-start flex-shrink"
avatar={props?.noAvatar ? null :
- <Avatar
- src={`https://api.portalmec.c3sl.ufpr.br/${props["avatar"]}`}
- alt={props["author"]}
- href="/perfil"
- sx={{
- width: 28,
- height: 28,
- marginTop: 0,
- bgcolor: "#00bacc",
- }}
+ <Link href={`/perfil/${props["authorId"]}`}>
+ <Avatar
+ src={`https://api.portalmec.c3sl.ufpr.br/${props["avatar"]}`}
+ alt={props["author"]}
+ href="/perfil"
+ sx={{
+ width: 28,
+ height: 28,
+ marginTop: 0,
+ bgcolor: "#00bacc",
+ }}
/>
+ </Link>
}
title={
<Typography variant="body2" color="" className="line-clamp-2 ">
diff --git a/src/app/components/GroupCardsCollections.js b/src/app/components/GroupCardsCollections.js
index 6b69dd792bca3d0291b9fe5feb51b8def6883764..879882b4229c1f4022f82ca77c580b9720648817 100644
--- a/src/app/components/GroupCardsCollections.js
+++ b/src/app/components/GroupCardsCollections.js
@@ -37,14 +37,14 @@ export default function GroupCardsCollections({ data, cardsPerRow, boxShadow })
<div id="contentSize" className={`flex content flex-wrap max-sm:justify-center max-sm:ml-0 md:ml-0 ml-8 ${expanded ? "" : "overflow-y-hidden h-[290px]"}`}>
{data.map((item, index) => {
-
return (
<Cards
key={index}
id={item['collectionable']['id']}
title={item["collectionable"]["name"]}
- author={item["collectionable"]["author"]}
- avatar={item["collectionable"]["avatar"]}
+ author={item["collectionable"]["publisher"]["name"]}
+ authorId={item["collectionable"]["publisher"]["id"]}
+ avatar={item["collectionable"]["publisher"]["avatar"]}
image={item["collectionable"]["thumbnail"]}
shadow={boxShadow}
updated_at={item["collectionable"]["updated_at"]}
diff --git a/src/app/components/GroupCardsLearningObjects.js b/src/app/components/GroupCardsLearningObjects.js
index 7921f30df36963d051a8a0b4d359dfe840c91aa7..b4a87da54ebf90cd9c8b5a3a7b37d4c40e5fed13 100644
--- a/src/app/components/GroupCardsLearningObjects.js
+++ b/src/app/components/GroupCardsLearningObjects.js
@@ -47,6 +47,7 @@ export default function GroupCardsLearningObjects({title, cardsPerRow, url}) {
key={index}
title={item["name"]}
author={item["publisher"]["name"]}
+ authorId={item["publisher"]["id"]}
avatar={item["publisher"]["avatar"]}
image={item["thumbnail"]}
type={item["object_type"]}
diff --git a/src/app/components/InfiniteScrollCards.js b/src/app/components/InfiniteScrollCards.js
index 75fd933aeb2e92ffce490c90df28b5cec66a1247..5996988c08ee969a8a1f226aa57d8ab8aa5a69aa 100644
--- a/src/app/components/InfiniteScrollCards.js
+++ b/src/app/components/InfiniteScrollCards.js
@@ -69,6 +69,7 @@ export default function InfiniteScrollCards({ data, type = "LearningObject", set
key={item['id']}
title={item["name"]}
author={item["publisher"]["name"]}
+ authorId={item["publisher"]["id"]}
avatar={item["publisher"]["avatar"]}
image={item["thumbnail"]}
type={item["object_type"]}
diff --git a/src/app/components/MenuProfile.js b/src/app/components/MenuProfile.js
index 05d2ee75d67e39cd89748417d4af55d0eff2751f..6e7fd8f9c4a8e0dafe2284a977b3c0b6e19e2b73 100644
--- a/src/app/components/MenuProfile.js
+++ b/src/app/components/MenuProfile.js
@@ -53,7 +53,14 @@ export default function AccountMenu() {
const [authenticated, setAuthenticated] = useState(false);
const [userData, setUserData] = useState({});
const open = Boolean(anchorEl);
+ const [id, setId] = useState(null)
+ useEffect(() => {
+ let data = JSON.parse(getStoredValue("user_data"))
+ setId(data["id"])
+
+ }, [])
+
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
@@ -109,7 +116,7 @@ export default function AccountMenu() {
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
>
<MenuItem onClick={handleClose}>
- <Link href="/perfil" className='flex'>
+ <Link href={`/perfil/${id}`} className='flex'>
<Avatar src={"https://api.portalmec.c3sl.ufpr.br/" + userData["avatar_file_name"]} className='mr-2' />
<p className='flex flex-col pt-2'> {userData["name"]} </p>
</Link>
diff --git a/src/app/perfil/components/AboutCard.js b/src/app/perfil/[id]/components/AboutCard.js
similarity index 100%
rename from src/app/perfil/components/AboutCard.js
rename to src/app/perfil/[id]/components/AboutCard.js
diff --git a/src/app/perfil/components/CardsHomologation.js b/src/app/perfil/[id]/components/CardsHomologation.js
similarity index 100%
rename from src/app/perfil/components/CardsHomologation.js
rename to src/app/perfil/[id]/components/CardsHomologation.js
diff --git a/src/app/perfil/components/Favorites.js b/src/app/perfil/[id]/components/Favorites.js
similarity index 100%
rename from src/app/perfil/components/Favorites.js
rename to src/app/perfil/[id]/components/Favorites.js
diff --git a/src/app/perfil/[id]/components/GroupButton.js b/src/app/perfil/[id]/components/GroupButton.js
new file mode 100644
index 0000000000000000000000000000000000000000..17103a1e9a2b8cd121b82a61c2ec154fb1137565
--- /dev/null
+++ b/src/app/perfil/[id]/components/GroupButton.js
@@ -0,0 +1,106 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Grid from "@mui/material/Grid"
+import PersonAddIcon from '@mui/icons-material/PersonAdd';
+import ShareIcon from '@mui/icons-material/Share';
+import ReportIcon from '@mui/icons-material/Report';
+import MessageIcon from '@mui/icons-material/Message';
+import CheckIcon from '@mui/icons-material/Check';
+import EditIcon from '@mui/icons-material/Edit';
+import { useState, useEffect } from 'react';
+import { getStoredValue } from '@/app/handlers/localStorageHandler';
+import { useLoginBarrier } from '@/app/handlers/loginHandler';
+import mecredApi from '@/axiosConfig';
+
+
+export default function GroupButton({ profileData, idLogin }) {
+ const loginBarrier = useLoginBarrier();
+ const [follow, setFollow] = useState(profileData["followed"])
+ const token = getStoredValue("access_token")
+ const client = getStoredValue("client")
+ const uid = getStoredValue("uid")
+
+ const followHandler = () => {
+ loginBarrier()
+ mecredApi.put(
+ `users/${profileData["id"]}/follow/`,
+ {},
+ {
+ headers: {
+ "access-token": token,
+ "token-type": "Bearer",
+ client: client,
+ uid: uid,
+ Expires: 0,
+ },
+ }
+ );
+ setFollow(!follow);
+
+ }
+
+ useEffect(() => {
+ setFollow(profileData["followed"])
+ }, [profileData["followed"]])
+
+
+
+
+
+ return (
+ <div className=''>
+
+ <Grid container className='px-8 pb-4 pt-3'>
+
+
+ <Grid item md={6} xl={3} xs={12}>
+ {idLogin == profileData["id"] ?
+ <button
+ className={`text-sm rounded-lg normal-case h-9 font-bold w-[90%] mt-2 text-white bg-secondary hover:bg-secondary-hover `}
+ onClick={() => followHandler()}
+ >
+ <EditIcon className='m-1' fontSize='small' />
+ Editar Perfil
+ </button>
+ :
+ <button
+ className={`text-sm rounded-lg normal-case h-9 font-bold w-[90%] mt-2 text-white ${follow ? "bg-secondary hover:bg-secondary-hover" : " bg-orange hover:bg-orange-hover"} `}
+ onClick={() => followHandler()}
+ >
+ {follow ? <CheckIcon className='m-1' fontSize='small' /> : <PersonAddIcon className='m-1' fontSize='small' />}
+ {follow ? "Seguindo" : "Seguir"}
+ </button>
+ }
+ </Grid>
+ <Grid item md={6} xl={3} xs={12}>
+ <button className="border text-sm text-gray-500 border-main rounded-lg normal-case h-9 font-bold w-[90%] mt-2 hover:bg-gray-100 ">
+ <MessageIcon className='m-1' fontSize='small' />
+ {idLogin == profileData["id"] ? "Ver mensagens" : "Enviar mensagem"}
+ </button>
+ </Grid>
+
+
+ <Grid item md={6} xl={3} xs={12}>
+ <button className="border text-sm text-gray-500 border-main rounded-lg normal-case h-9 font-bold w-[90%] mt-2 hover:bg-gray-100 ">
+ <ShareIcon fontSize='small' className='m-1' />
+ Compartilhar perfil
+ </button>
+ </Grid>
+ <Grid item md={6} xl={3} xs={12}>
+ {idLogin == profileData["id"] ?
+ <button className="border text-sm text-white border-main rounded-lg normal-case h-9 font-bold w-[90%] mt-2 bg-orange hover:bg-orange-hover">
+ +Publicar
+ </button>
+ :
+ <button className="border text-sm text-gray-500 border-main rounded-lg normal-case h-9 font-bold w-[90%] mt-2 hover:bg-gray-100 ">
+ <ReportIcon fontSize='small' className='m-1' />
+ Denunciar
+ </button>
+ }
+ </Grid>
+
+ </Grid>
+
+ </div>
+ );
+}
\ No newline at end of file
diff --git a/src/app/perfil/components/ProfileCollections.js b/src/app/perfil/[id]/components/ProfileCollections.js
similarity index 100%
rename from src/app/perfil/components/ProfileCollections.js
rename to src/app/perfil/[id]/components/ProfileCollections.js
diff --git a/src/app/perfil/components/ProfileHomologation.js b/src/app/perfil/[id]/components/ProfileHomologation.js
similarity index 98%
rename from src/app/perfil/components/ProfileHomologation.js
rename to src/app/perfil/[id]/components/ProfileHomologation.js
index 17e8c3fc7a90ef2ef42396db5eecb4afb99f1e83..133fca4f0f7ca86361e77c81cbe5998f54ebf6c2 100644
--- a/src/app/perfil/components/ProfileHomologation.js
+++ b/src/app/perfil/[id]/components/ProfileHomologation.js
@@ -54,8 +54,6 @@ export default function Favorites({ id }) {
<div className={`flex content flex-wrap justify-center ${expanded ? "" : "overflow-y-hidden"}`}>
{homologated.map((item, i) => {
- // { console.log(item) }
-
return <CardsHomologation item={item} key={i} />
})}
diff --git a/src/app/perfil/components/ProfileOptions.js b/src/app/perfil/[id]/components/ProfileOptions.js
similarity index 100%
rename from src/app/perfil/components/ProfileOptions.js
rename to src/app/perfil/[id]/components/ProfileOptions.js
diff --git a/src/app/perfil/components/ProfileResources.js b/src/app/perfil/[id]/components/ProfileResources.js
similarity index 100%
rename from src/app/perfil/components/ProfileResources.js
rename to src/app/perfil/[id]/components/ProfileResources.js
diff --git a/src/app/perfil/components/SelectionButtons.js b/src/app/perfil/[id]/components/SelectionButtons.js
similarity index 70%
rename from src/app/perfil/components/SelectionButtons.js
rename to src/app/perfil/[id]/components/SelectionButtons.js
index 5c6d8239a037889b3435a026db0c27153ee096fb..142fd3eacd9faa819c2ece62734ef3173da660ed 100644
--- a/src/app/perfil/components/SelectionButtons.js
+++ b/src/app/perfil/[id]/components/SelectionButtons.js
@@ -2,8 +2,8 @@ import * as React from 'react';
import Grid from "@mui/material/Grid"
-export default function SelectionButtons({ setOptButton }) {
- const buttons = ["Sobre", "Recursos", "Coleções", "Homologação", "Favoritos"]
+export default function SelectionButtons({ setOptButton, verifyCurator }) {
+ const buttons = verifyCurator ? ["Sobre", "Recursos", "Coleções", "Homologação", "Favoritos"] : ["Sobre", "Recursos", "Coleções", "Favoritos"]
return (
<Grid container className='' >
@@ -11,7 +11,7 @@ export default function SelectionButtons({ setOptButton }) {
buttons.map((item, index) => {
return (
- <Grid item key={index} xs={4} sm={2.4}>
+ <Grid item key={index} xs={buttons.length} sm={12 / buttons.length}>
<button
className="h-9 text-gray-500 text-base normal-case h-15 font-bold w-[100%] mt-10 hover:bg-gray-100 hover:text-secondary hover:border-b-2 hover:border-secondary focus:text-secondary focus:border-b-2 focus:border-secondary"
onClick={() => setOptButton(index)}
diff --git a/src/app/perfil/components/UserCard.js b/src/app/perfil/[id]/components/UserCard.js
similarity index 85%
rename from src/app/perfil/components/UserCard.js
rename to src/app/perfil/[id]/components/UserCard.js
index 20c69932bbebc37d3afb218d9ed6ac54c963e3fd..95ac32405a4761a03170d9975a8502612fa48102 100644
--- a/src/app/perfil/components/UserCard.js
+++ b/src/app/perfil/[id]/components/UserCard.js
@@ -9,6 +9,7 @@ import { useEffect, useState } from 'react';
import { getStoredValue } from '@/app/handlers/localStorageHandler';
import axios from 'axios';
import mecredApi from '@/axiosConfig';
+import { useLoginBarrier } from '@/app/handlers/loginHandler';
@@ -67,19 +68,20 @@ const roles = [
]
-export default function UserCard({ profileData }) {
+export default function UserCard({ profileData, idLogin }) {
const [followers, setFollowers] = useState([])
const [following, setFollowing] = useState(0)
const [translateItems, setTranslateItems] = useState([])
const [optButton, setOptButton] = useState(0)
-
+ const [verifyCurator, setVerifyCurator] = useState(false)
+
useEffect(() => {
const fetchFollowers = () => {
const token = getStoredValue("access_token")
const client = getStoredValue("client")
const uid = getStoredValue("uid")
const expiry = getStoredValue("expiry")
-
+
mecredApi.get('/users/' + profileData["id"] + "/followers", {
headers: {
'access-token': token,
@@ -88,13 +90,13 @@ export default function UserCard({ profileData }) {
'uid': uid,
'Expires': 0
}
-
+
})
.then(({ data }) => setFollowers(data))
.catch((error) => {
console.error(error)
})
-
+
mecredApi.get('/users/' + profileData["id"] + "/following/User?offset=none", {
headers: {
'access-token': token,
@@ -103,10 +105,9 @@ export default function UserCard({ profileData }) {
'uid': uid,
'Expires': 0
}
-
+
})
.then(({ headers, data }) => {
- // setFollowing(data);
setFollowing(Number(headers["x-total-count"]))
})
.catch((error) => {
@@ -115,21 +116,24 @@ export default function UserCard({ profileData }) {
}
fetchFollowers()
-
+
const itemsRoles = async () => {
let items = []
for (let i = 0; i < profileData["roles"].length; i++) {
let found = roles.find((element) => profileData["roles"][i]["name"] === element.role)
-
+
if (!items.includes(found.translate) && found.role !== "submitter") items.push(found.translate)
}
+
+ setVerifyCurator(items.includes("Curador"))
return items;
}
-
+
itemsRoles()
.then(roles => setTranslateItems(roles))
}, [profileData])
-
+
+
return (
<>
<div className='flex pt-[5%] flex-col mx-[15%] max-[940px]:mx-[5%]'>
@@ -139,7 +143,11 @@ export default function UserCard({ profileData }) {
{/* ao mudar para imagem manter proporções parecidas */}
<Grid item lg={3} md={4} xs={12} className='max-[768px]:flex max-[768px]:justify-center'>
- <Avatar src={"https://api.portalmec.c3sl.ufpr.br/" + profileData["avatar_file_name"]} sx={{ position: "inherit" }} className=" ml-10 max-[1350px]:ml-5 max-[1255px]:ml-2 mt-6 min-h-[150px] min-w-[150px] " />
+ {profileData["id"] === idLogin ?
+ <Avatar src={"https://api.portalmec.c3sl.ufpr.br/" + profileData["avatar_file_name"]} sx={{ position: "inherit" }} className=" ml-10 max-[1350px]:ml-5 max-[1255px]:ml-2 mt-4 min-h-[150px] min-w-[150px] " />
+ :
+ <Avatar src={"https://api.portalmec.c3sl.ufpr.br/" + profileData["avatar"]} sx={{ position: "inherit" }} className=" ml-10 max-[1350px]:ml-5 max-[1255px]:ml-2 mt-4 min-h-[150px] min-w-[150px] " />
+ }
</Grid>
<Grid item lg={9} md={8} xs={12}>
@@ -167,8 +175,8 @@ export default function UserCard({ profileData }) {
</div>
</Grid>
</Grid>
- <GroupButton />
- <SelectionButtons setOptButton={setOptButton} />
+ <GroupButton profileData={profileData} idLogin={idLogin}/>
+ <SelectionButtons setOptButton={setOptButton} verifyCurator={verifyCurator}/>
</Card>
<ProfileOptions title="Sobre" content={profileData["description"]} optButton={optButton} id={profileData["id"]} />
</div>
diff --git a/src/app/perfil/[id]/page.js b/src/app/perfil/[id]/page.js
new file mode 100644
index 0000000000000000000000000000000000000000..02372b3924cec89682934a1753b53404e98aee3e
--- /dev/null
+++ b/src/app/perfil/[id]/page.js
@@ -0,0 +1,57 @@
+"use client"
+import UserCard from "./components/UserCard"
+import Header from "../../components/Header"
+import { getStoredValue } from "../../handlers/localStorageHandler";
+import { useEffect, useState } from "react";
+import Overlay from "../../components/Overlay";
+import mecredApi from "@/axiosConfig";
+
+
+export default function Perfil({ params }) {
+ const[profileData, setProfileData] = useState(null);
+ const [idLogin, setIdLogin] = useState(0)
+ const token = getStoredValue("access_token")
+ const client = getStoredValue("client")
+ const uid = getStoredValue("uid")
+
+ useEffect(() => {
+ let data = getStoredValue("user_data")
+ let dataJson = JSON.parse(data);
+ if(params.id == dataJson["id"]){
+ setProfileData(dataJson);
+ }
+ else {
+ const fetchUser = async (id) => {
+ mecredApi
+ .get(`/users/${id}`, {
+ headers: {
+ 'access-token': token,
+ 'token-type': 'Bearer',
+ 'client': client,
+ 'uid': uid,
+ 'Expires': 0
+ }
+ })
+ .then(({ data }) => {
+ setProfileData(data);
+ });
+ }
+ fetchUser(params.id)
+ }
+ setIdLogin(dataJson["id"])
+ }, [params.id])
+
+
+ return (
+ <>
+ <Overlay>
+
+ <div className="bg-main h-screen">
+ {profileData && <UserCard profileData={profileData} idLogin={idLogin}/>}
+ </div>
+ </Overlay>
+
+ </>
+
+ );
+}
\ No newline at end of file
diff --git a/src/app/perfil/components/GroupButton.js b/src/app/perfil/components/GroupButton.js
deleted file mode 100644
index acaf4760284098dcceeb20a2f292c103514ff218..0000000000000000000000000000000000000000
--- a/src/app/perfil/components/GroupButton.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Grid from "@mui/material/Grid"
-import PersonAddIcon from '@mui/icons-material/PersonAdd';
-import ShareIcon from '@mui/icons-material/Share';
-import ReportIcon from '@mui/icons-material/Report';
-import MessageIcon from '@mui/icons-material/Message';
-
-
-export default function GroupButton() {
- return (
- <div className=''>
-
- <Grid container className='px-8 pb-4'>
- <Grid item md={6} xl={3} xs={12}>
- <button className="bg-orange text-sm text-white rounded-lg normal-case h-9 font-bold w-[90%] mt-2 hover:bg-orange-hover ">
- <PersonAddIcon className='m-1' fontSize='small'/>
- Seguir
- </button>
- </Grid>
- <Grid item md={6} xl={3} xs={12}>
- <button className="border text-sm text-gray-500 border-main rounded-lg normal-case h-9 font-bold w-[90%] mt-2 ">
- <MessageIcon className='m-1' fontSize='small'/>
- Enviar Mensagem
- </button>
- </Grid>
- <Grid item md={6} xl={3} xs={12}>
- <button className="border text-sm text-gray-500 border-main rounded-lg normal-case h-9 font-bold w-[90%] mt-2 ">
- <ShareIcon fontSize='small' className='m-1'/>
- Compartilhar perfil
- </button>
- </Grid>
- <Grid item md={6} xl={3} xs={12}>
- <button className="border text-sm text-gray-500 border-main rounded-lg normal-case h-9 font-bold w-[90%] mt-2 ">
- <ReportIcon fontSize='small' className='m-1'/>
- Denunciar
- </button>
- </Grid>
-
- </Grid>
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/app/perfil/page.js b/src/app/perfil/page.js
deleted file mode 100644
index 96fe2cd48e618145e2e576c040b71ea8c99b6a6c..0000000000000000000000000000000000000000
--- a/src/app/perfil/page.js
+++ /dev/null
@@ -1,32 +0,0 @@
-"use client"
-import UserCard from "./components/UserCard"
-import Header from "../components/Header"
-import { getStoredValue } from "../handlers/localStorageHandler";
-import { useEffect, useState } from "react";
-import Overlay from "../components/Overlay";
-
-
-export default function Perfil() {
- const[profileData, setProfileData] = useState(null)
- useEffect(() => {
- let data = getStoredValue("user_data")
- let dataJson = JSON.parse(data);
-
-
- setProfileData(dataJson)
- }, [])
-
-
- return (
- <>
- <Overlay>
-
- <div className="bg-main h-screen">
- {profileData && <UserCard profileData={profileData}/>}
- </div>
- </Overlay>
-
- </>
-
- );
-}
\ No newline at end of file