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