From cc7abaa3d00da60a616387b708a0f9526df7a75b Mon Sep 17 00:00:00 2001
From: a-eloCard <esrsc23@inf.ufpr.br>
Date: Wed, 9 Apr 2025 11:57:18 -0300
Subject: [PATCH] Issue #291: User card: update information
---
src/app/components/SearchComponent.js | 5 ++-
src/app/components/UsersPageCard.js | 45 ++++++++++++++++---
.../perfil/[id]/components/FollowersCards.js | 2 +-
3 files changed, 43 insertions(+), 9 deletions(-)
diff --git a/src/app/components/SearchComponent.js b/src/app/components/SearchComponent.js
index 05350cee..90d22296 100644
--- a/src/app/components/SearchComponent.js
+++ b/src/app/components/SearchComponent.js
@@ -155,7 +155,10 @@ export default function SearchComponent({ setFilterState, filterState, sizeWindo
id="buscar"
type="text"
placeholder="Digite aqui o que você deseja pesquisar"
- className="p-2 px-5 rounded-lg outline outline-1 font-light text-2xl placeholder:text-lightGray-HC-dark outline-ice-HC-white align-middle h-full w-full"
+ className="p-2 px-5 rounded-lg outline outline-1 font-light text-2xl
+ text-darkGray-HC-dark
+ placeholder:text-darkGray-HC-dark
+ outline-ice-HC-white align-middle h-full w-full"
onFocus={handleFocus}
onBlur={handleBlur}
onChange={(e) => {
diff --git a/src/app/components/UsersPageCard.js b/src/app/components/UsersPageCard.js
index 322e884c..5595d985 100644
--- a/src/app/components/UsersPageCard.js
+++ b/src/app/components/UsersPageCard.js
@@ -1,7 +1,10 @@
+'use client'
import { mecredURL } from "@/axiosConfig";
import { CollectionsBookmark, Person, Subject } from "@mui/icons-material"
+import { useEffect, useState } from 'react';
import { Avatar, Divider } from "@mui/material"
import Link from "next/link"
+import mecredApi from "@/axiosConfig";
/**
*
@@ -10,6 +13,20 @@ import Link from "next/link"
* @returns
*/
export default function UsersPageCard({ item }) {
+ const [achievements, setAchievements] = useState(null);
+
+ const fetchAchievements = async (id) => {
+ await mecredApi
+ .get(`/unlocked_achievements/user/${id}?limit=1000`)
+ .then(({ data }) => {
+ setAchievements(data);
+ })
+ .catch(() => setError(true))
+ }
+
+ fetchAchievements(item.id);
+
+
function getRandomBg(id) {
const colors = [
"bg-turquoise-HC-white",
@@ -30,7 +47,7 @@ export default function UsersPageCard({ item }) {
return (
item &&
<Link tabIndex="-1" href={`/perfil/${item["id"]}`}>
- <div id="conteudo" tabIndex="0" className="flex flex-col w-[300px] min-h-[270px] bg-white-HC-dark outline outline-1 outline-ice-HC-white m-4 rounded-lg hover:bg-ice-HC-dark-hover focus:bg-ice-HC-dark-hover">
+ <div id="conteudo" tabIndex="0" className="flex flex-col w-[300px] min-h-[270px] bg-ice-HC-dark outline outline-1 outline-lightGray-HC-white m-4 rounded-lg hover:bg-ice-HC-dark-hover focus:bg-ice-HC-dark-hover">
<div className="grid justify-items-center h-[200px] pt-2">
{item["avatar"] ?
<Avatar src={mecredURL + item["avatar"]} sx={{ position: "inherit" }} className=" min-h-[120px] min-w-[120px] m-2" />
@@ -42,21 +59,35 @@ export default function UsersPageCard({ item }) {
<p className=" font-bold text-darkGray-HC-white-underline text-center">{item["name"]}</p>
</div>
- <Divider className="mx-4" />
+ <hr className="border-lightGray-HC-white h-1 mx-4 "/>
<div className="flex items-center flex-col gap-1 py-3 ">
- <div className="flex flex-col justify-start gap-1">
- <div className="flex">
- <Person fontSize="small" className="text-darkGray-HC-white-underline mt-2" />
+ <div className="grid grid-cols-2 justify-start gap-1">
+ <div className="flex items-center mb-2">
+ <img className="flex h-[20px] px-1 text-mediumGray-HC-white invertLogo-HC-white"
+ src="/nivel.svg"
+ alt="Icon nivel"
+ />
+ <p className="mt-2 text-sm text-darkGray-HC-white-underline px-1">Nível: {item["level"]}</p>
+ </div>
+ <div className="flex items-center mb-2">
+ <Person fontSize="small" className="text-darkGray-HC-white mt-2" />
<p className="mt-2 text-sm text-darkGray-HC-white-underline px-1">Seguidores: {item["follows_count"]}</p>
</div>
{/* <div className="flex">
<CollectionsBookmark fontSize="small" className="text-darkGray-HC-white-underline" />
<p className="text-sm text-darkGray-HC-white-underline inline px-1">Coleções: {item["collections_count"]} </p>
</div> */}
- <div className="flex">
- <Subject fontSize="small" className="text-darkGray-HC-white-underline" />
+ <div className="flex items-center mb-2">
+ <Subject fontSize="small" className="text-darkGray-HC-white" />
<p className="text-sm text-darkGray-HC-white-underline inline px-1">Recursos: {item["learning_objects_count"]}</p>
</div>
+ <div className="flex items-center mb-2">
+ <img className="flex h-[20px] px-1 invertLogo-HC-white"
+ src="/conquistas.svg"
+ alt="Icon conquista"
+ />
+ <p className="mt-2 text-sm text-darkGray-HC-white-underline px-1">Conquistas: {achievements?.length}</p>
+ </div>
</div>
</div>
</div>
diff --git a/src/app/perfil/[id]/components/FollowersCards.js b/src/app/perfil/[id]/components/FollowersCards.js
index 33819806..f4102bea 100644
--- a/src/app/perfil/[id]/components/FollowersCards.js
+++ b/src/app/perfil/[id]/components/FollowersCards.js
@@ -61,7 +61,7 @@ export default function FollowersCards({ id, count }) {
<div className="p-3 my-5 rounded-md min-w-[200px] min-h-[180px]">
<div className="flex flex-wrap justify-center">
{followers.map((item, i) => (
- item && (
+ item.follower && (
<Fragment key={i}>
<UsersPageCard item={item.follower} />
</Fragment>
--
GitLab