diff --git a/src/app/components/Cards.js b/src/app/components/Cards.js
index e7a94f86c41b977a508886c15ed4d96125bc38f0..38917a8ef91e9473ed401f9e143ca6bdf3feaf63 100644
--- a/src/app/components/Cards.js
+++ b/src/app/components/Cards.js
@@ -202,7 +202,6 @@ export default function Cards(props) {
{
props.page === "recurso" ?
<>
-
<div className="flex flex-col ml-4 max-sm:ml-0 max-sm:justify-stretch">
<div
href={`/recurso/${props["id"]}` + (props.collectionSource ? `?collectionId=${props.collectionSource}` : "")}
@@ -255,7 +254,7 @@ export default function Cards(props) {
</div>
</div>
</Link>
- {userProfile ?
+ {userProfile && props.profilePage === "recurso" ?
<div className="flex justify-end w-full">
<DeleteModal setUniqueResources={props.setUniqueResources} userProfile open={deleteOpen} onClose={() => setDeleteOpen(false)} idLogin={userData["id"]} resourceId={props["id"]} />
<EditResourceModal open={editOpen} onClose={() => setEditOpen(false)} setEditOpen={setEditOpen} resource={props.resource} />
diff --git a/src/app/components/GroupCardsCollections.js b/src/app/components/GroupCardsCollections.js
index b32e6c459ba162124806de0d63d117cb42fb427a..b60b8ee38e6112efd0b347975b3626ac435f8232 100644
--- a/src/app/components/GroupCardsCollections.js
+++ b/src/app/components/GroupCardsCollections.js
@@ -12,6 +12,7 @@ export default function GroupCardsCollections({ data, cardsPerRow, collectionId
const [showButton, setShowButton] = useState(false);
const router = useRouter()
+
const handleResize = (data) => {
setShowButton(data?.length > cardsPerRow);
};
@@ -28,6 +29,7 @@ export default function GroupCardsCollections({ data, cardsPerRow, collectionId
<div className="flex flex-col">
<div className="mx-1 flex flex-col">
+
<div id="contentSize" className={`flex content flex-wrap max-sm:justify-center mb-4 max-sm:ml-0 md:ml-0 gap-6 pb-1 pl-1 ${expanded ? "" : "overflow-y-hidden h-[270px]"}`}>
{data?.length !== 0 ? data?.sort((a,b) => a.position - b.position).map((item, index) => {
diff --git a/src/app/perfil/[id]/components/CreateCollectionModal.js b/src/app/perfil/[id]/components/CreateCollectionModal.js
index 51a7d6c5068b0c3bef7235eac104d0dd9993bbc0..c21c4d3d84edc96a909b4aaab5b51394beae6a83 100644
--- a/src/app/perfil/[id]/components/CreateCollectionModal.js
+++ b/src/app/perfil/[id]/components/CreateCollectionModal.js
@@ -21,20 +21,25 @@ const ModalSuccess = ({ open, onClose, modalOnClose }) => {
},
},
}}>
- <div className="flex flex-col justify-center items-center bg-ice-HC-dark gap-3 px-4 py-10 pt-12 rounded">
- <p className="text-xl justify-center flex text-darkGray-HC-white-underline">Coleção criada com Successo!</p>
+ <div className="flex flex-col border border-ice-HC-white justify-center items-center bg-ice-HC-dark gap-3 px-4 py-10 pt-12 rounded">
+ <p className="text-xl justify-center flex text-darkGray-HC-white">
+ Coleção criada com Sucesso!
+ </p>
<div className="flex flex-row mt-5">
<button
- className=" text-sm p-2 mr-1 text-white-HC-dark-underline border-main rounded-lg normal-case h-9 w-24 font-bold bg-turquoise hover:bg-turquoise-hover"
- onClick={() => { onClose(); modalOnClose() }}
+ className="text-sm p-2 mr-1 text-white-HC-dark-underline border border-ice-HC-white rounded-lg normal-case h-9 w-24 font-bold bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark hover:text-white-HC-underline"
+ onClick={() => {
+ onClose();
+ modalOnClose();
+ }}
>
Fechar
</button>
</div>
</div>
</Modal>
- )
-}
+ );
+};
export default function CreateCollectionModal({ open, onClose, idLogin }) {
const [name, setName] = useState("")
@@ -97,9 +102,9 @@ export default function CreateCollectionModal({ open, onClose, idLogin }) {
},
}}
>
- <div className="flex flex-col bg-ice-HC-dark p-5 rounded-lg w-[40%] max-sm:w-[85%]">
- <div className="text-2xl items-center font-bold text-darkGray-HC-white-underline">Criar Coleção</div>
- <p className="text-lg text-darkGray-HC-white-underline font-bold mb-1 mt-4">Nome da Coleção*</p>
+ <div className="border flex flex-col border-ice-HC-white bg-ice-HC-dark p-5 rounded-lg w-[40%] max-sm:w-[85%]">
+ <div className="text-2xl items-center font-bold text-darkGray-HC-white">Criar Coleção</div>
+ <p className="text-lg text-darkGray-HC-white font-bold mb-1 mt-4">Nome da Coleção*</p>
<form
onSubmit={(e) => {
e.preventDefault();
@@ -119,31 +124,81 @@ export default function CreateCollectionModal({ open, onClose, idLogin }) {
: `${name.length}/150`
}
required
+ sx={{
+ // Cor do texto digitado
+ input: {
+ color: 'var(--darkGray-HC-white)',
+ },
+ // Cor do label quando não focado
+ label: {
+ color: 'var(--darkGray-HC-white)',
+ },
+ // Cor do label quando focado
+ '& label.Mui-focused': {
+ color: 'var(--turquoise-HC-white)',
+ },
+ // Cor da borda
+ '& .MuiOutlinedInput-root': {
+ '& fieldset': {
+ borderColor: 'var(--darkGray-HC-white)',
+ },
+ '&:hover fieldset': {
+ borderColor: 'var(--turquoise-HC-white)',
+ },
+ '&.Mui-focused fieldset': {
+ borderColor: 'var(--turquoise-HC-white)',
+ },
+ },
+ // Cor do helper text
+ '& .MuiFormHelperText-root': {
+ color: name.length > 150 ? 'var(--red-HC-white)' : 'var(--darkGray-HC-white)',
+ },
+ }}
/>
- <p className="text-lg text-darkGray-HC-white-underline font-bold mb-3 mt-4">Esta coleção é:</p>
- <FormLabel>
+ <p className="text-lg text-darkGray-HC-white font-bold mb-3 mt-4">Esta coleção é:</p>
+ <FormLabel >
<RadioGroup name="privacy-radio-group">
<FormControlLabel
value="public"
- control={<Radio />}
+ control={<Radio
+ sx={{
+ color: 'var(--darkGray-HC-white)',
+ '&.Mui-checked': {
+ color: 'var(--turquoise-HC-white)',
+ },
+ }}
+ />}
label="Coleção Pública"
+ sx={{
+ color: 'var(--darkGray-HC-white)', // muda a cor da fonte do rótulo
+ }}
/>
<FormControlLabel
value="private"
- control={<Radio />}
+ control={<Radio
+ sx={{
+ color: 'var(--darkGray-HC-white)',
+ '&.Mui-checked': {
+ color: 'var(--turquoise-HC-white)',
+ },
+ }}
+ />}
label="Coleção Privada"
+ sx={{
+ color: 'var(--darkGray-HC-white)', // muda a cor da fonte do rótulo
+ }}
/>
</RadioGroup>
</FormLabel>
- <div className="flex flex-row-reverse justify-center space-x-2">
+ <div className="flex flex-row-reverse justify-center gap-2 space-x-2">
<button
- className="border text-sm p-2 text-ice-HC-dark border-main rounded-lg normal-case h-9 font-bold bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark hover:text-white"
+ className=" border text-sm p-2 text-ice-HC-dark border-ice-HC-white rounded-lg normal-case h-9 font-bold bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark hover:text-white"
type="submit"
>
Criar Coleção
</button>
<button
- className="border- text-sm p-2 text-darkGray-HC-white-underline border-main rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-ice-HC-dark-hover"
+ className="border text-sm p-2 text-darkGray-HC-white-underline border-ice-HC-white rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-lightGray-HC-white hover:text-darkGray-HC-dark"
onClick={onClose}
type="button"
>
diff --git a/src/app/perfil/[id]/components/EditCollectionButton.js b/src/app/perfil/[id]/components/EditCollectionButton.js
index 7b0907ea8a0382b5046cbcd2bbd0d73bd8cddb62..da8da03f1829bb202854586e62fcb86d5227e058 100644
--- a/src/app/perfil/[id]/components/EditCollectionButton.js
+++ b/src/app/perfil/[id]/components/EditCollectionButton.js
@@ -8,14 +8,14 @@ import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
* @param {Number} collectionId ID da coleção a ser editada
* @param {Number} CollectionData Dados da coleção
*/
-export default function EditCollectionButton({ collectionId, collectionData }) {
+export default function EditCollectionButton({ collectionId, collectionData, collection, onUpdate }) {
const [editOpen, setEditOpen] = useState(false);
return (
<>
<button
className="p-2 text-sm outline outline-1 outline-ice-HC-white
- text-darkGray-HC-white-underline bg-ice-HC-dark hover:bg-lightGray-HC-white
+ text-darkGray-HC-white-underline bg-ice-HC-dark hover:bg-lightGray-HC-white hover:text-darkGray-HC-dark-underline
rounded-xl font-bold normal-case flex items-center justify-center gap-2 md:w-32"
onClick={() => setEditOpen(true)}
aria-label="Editar"
@@ -29,6 +29,7 @@ export default function EditCollectionButton({ collectionId, collectionData }) {
onClose={() => setEditOpen(false)}
collectionId={collectionId}
collectionData={collectionData}
+ onUpdate={onUpdate}
/>
</>
);
diff --git a/src/app/perfil/[id]/components/EditCollectionModal.js b/src/app/perfil/[id]/components/EditCollectionModal.js
index bdeb4160002653fd887df51051a13073cf9f8d6c..3ef150fa060c1ad1f82e65fed741eb3c1c263f03 100644
--- a/src/app/perfil/[id]/components/EditCollectionModal.js
+++ b/src/app/perfil/[id]/components/EditCollectionModal.js
@@ -1,6 +1,7 @@
import { useState } from "react";
import { Modal, TextField, RadioGroup, FormControlLabel, Radio, FormLabel } from "@mui/material";
import { getStoredValue } from "@/app/handlers/localStorageHandler";
+import Checkbox from '@mui/material/Checkbox';
import mecredApi from "@/axiosConfig";
/**
@@ -12,15 +13,44 @@ import mecredApi from "@/axiosConfig";
* @returns Modal de edição de uma coleção
*/
-export default function EditCollectionModal({ open, onClose, collectionId, collectionData }) {
+export default function EditCollectionModal({ open, onClose, collectionId, collectionData, onUpdate }) {
const [name, setName] = useState(collectionData?.name || "");
const [privacy, setPrivacy] = useState(collectionData?.privacy || "public");
const [openSuccess, setOpenSuccess] = useState(false);
+ const [selectedResources, setSelectedResources] = useState([]); // Recursos para remover das coleções
-
+
const token = getStoredValue("access_token");
const client = getStoredValue("client");
const uid = getStoredValue("uid");
+
+ const deleteResourceCollection = async () => {
+ const url = `/collections/${collectionId}/items`
+
+ const payload = {
+ collection: {items: selectedResources.map(id => ({ id }))}
+ };
+
+ const headers = {
+ "access-token": token,
+ "token-type": "Bearer",
+ client: client,
+ uid: uid,
+ Expires: 0,
+ };
+
+ try {
+ const response = await mecredApi.delete(url, {
+ headers: headers,
+ data: payload,
+ });
+
+ setSelectedResources([]);
+ } catch (error) {
+ console.error("Erro ao remover recursos da coleção:", error);
+ }
+
+}
const handleSubmit = async (e) => {
e.preventDefault();
@@ -33,7 +63,7 @@ export default function EditCollectionModal({ open, onClose, collectionId, colle
privacy,
},
};
-
+
try {
const response = await mecredApi.put(`/collections/${collectionId}`, payload, {
headers: {
@@ -45,12 +75,20 @@ export default function EditCollectionModal({ open, onClose, collectionId, colle
},
});
+ await deleteResourceCollection();
setOpenSuccess(true);
+ onUpdate();
} catch (error) {
console.error("Erro ao atualizar a coleção:", error);
}
};
+ const handleToggle = (id) => {
+ setSelectedResources((prev) =>
+ prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+ );
+ };
+
const ModalSuccess = ({ open, onClose, modalOnClose }) => {
return (
<Modal open={open} onClose={onClose} className="grid place-items-center" slotProps={{
@@ -60,13 +98,13 @@ export default function EditCollectionModal({ open, onClose, collectionId, colle
},
},
}}>
- <div className="flex flex-col justify-center items-center bg-ice-HC-dark gap-3 px-4 py-10 pt-12 rounded">
- <p className="text-xl justify-center flex text-darkGray-HC-white-underline">Coleção atualizada com Successo!</p>
+ <div className="flex flex-col justify-center items-center bg-ice-HC-dark gap-3 px-4 py-10 pt-12 rounded border border-white">
+ <p className="text-xl justify-center flex text-darkGray-HC-white">Coleção atualizada com Successo!</p>
<div className="flex flex-row mt-5">
<button
- className=" text-sm p-2 mr-1 text-white-HC-dark-underline border-main rounded-lg normal-case h-9 w-24 font-bold bg-turquoise hover:bg-turquoise-hover"
+ className=" text-sm p-2 mr-1 text-white-HC-dark-underline border border-ice-HC-white rounded-lg normal-case h-9 w-24 font-bold bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark hover:text-white"
onClick={() => { onClose(); modalOnClose() }}
- >
+ >
Fechar
</button>
</div>
@@ -77,120 +115,144 @@ export default function EditCollectionModal({ open, onClose, collectionId, colle
return (
- <Modal
- open={open}
- onClose={onClose}
- className="grid place-items-center m-5"
- slotProps={{
- backdrop: {
- sx: {
- backgroundColor: "rgba(0, 0, 0, 0.3)", // Ajuste a opacidade conforme necessário
- },
- },
- }}
- >
- <div className="flex flex-col bg-ice-HC-dark p-5 rounded-lg w-[40%] max-sm:w-[85%] outline outline-1 outline-ice-HC-white">
- <div className="text-2xl font-bold text-darkGray-HC-white">Editar Coleção</div>
- <p className="text-lg text-darkGray-HC-white font-bold mb-1 mt-4">Nome da Coleção*</p>
-
- <form
- onSubmit={(e) => {
- e.preventDefault();
- if (name.length > 150) return; // bloqueia envio
- handleSubmit();
- }}
- >
- <TextField
- size="small"
- fullWidth
- onChange={(e) => setName(e.target.value)}
- value={name}
- required
- error={name.length > 150}
- helperText={
- name.length > 150
- ? `O nome excede o limite de 150 caracteres (${name.length}/150)`
- : `${name.length}/150`
- }
- sx={{
- '& .MuiOutlinedInput-root': {
- '& fieldset': {
- borderColor: 'var(--mediumGray-HC-white)',
- },
- '&:hover fieldset': {
- borderColor: 'var(--turquoise-HC-white)',
- },
- '&.Mui-focused fieldset': {
- borderColor: 'var(--turquoise-HC-white)',
- },
- '& input': {
- color: 'var(--darkGray-HC-white)',
- },
- },
- '& .MuiFormHelperText-root': {
- color: name.length > 150 ? '#f44336' : 'var(--darkGray-HC-white)', // vermelho ou padrão
- fontWeight: 'bold',
- },
- }}
- />
-
- <p className="text-lg text-darkGray-HC-white font-bold mb-3 mt-4">Esta coleção é:</p>
-
- <FormLabel>
- <RadioGroup
- value={privacy}
- onChange={(e) => setPrivacy(e.target.value)}
- sx={{
- '& .MuiRadio-root': {
- color: 'var(--darkGray-HC-white)',
- '&.Mui-checked': {
- color: 'var(--turquoise-HC-white)',
+ <Modal open={open}
+ onClose={() => {
+ setSelectedResources([]);
+ onClose();
+ }}
+ className="grid place-items-center m-5" slotProps={{
+ backdrop: {
+ sx: {
+ backgroundColor: "rgba(0, 0, 0, 0.3)", // Ajuste a opacidade conforme necessário
},
},
}}
+ >
+ <div className="flex flex-col bg-ice-HC-dark p-5 rounded-lg w-[40%] max-sm:w-[85%] outline outline-1 outline-ice-HC-white max-h-[50vh]">
+ <div className="text-2xl font-bold text-darkGray-HC-white">Editar Coleção</div>
+ <form onSubmit={(e) => {
+ e.preventDefault();
+ if (name.length > 150) return; // bloqueia envio
+ handleSubmit();
+ }}
+ className="flex flex-col flex-grow overflow-y-auto max-h-full"
>
- <FormControlLabel
- value="public"
- control={<Radio />}
- label="Coleção Pública"
- sx={{
- '& .MuiFormControlLabel-label': {
- color: 'var(--darkGray-HC-white)',
- },
- }}
- />
- <FormControlLabel
- value="private"
- control={<Radio />}
- label="Coleção Privada"
- sx={{
- '& .MuiFormControlLabel-label': {
- color: 'var(--darkGray-HC-white)',
- },
- }}
- />
- </RadioGroup>
- </FormLabel>
-
- <div className="flex flex-row-reverse justify-center space-x-2">
- <button
- type="submit"
- className="border text-sm p-2 text-white-HC-dark-underline border-ice-HC-dark hover:border-ice-HC-white hover:text-white rounded-lg normal-case h-9 font-bold bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark"
- >
- Salvar Alterações
- </button>
- <button
- type="button"
- className="border text-sm p-2 text-darkGray-HC-white-underline border-main rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-lightGray-HC-dark"
- onClick={onClose}
- >
- Cancelar
- </button>
- <ModalSuccess open={openSuccess} onClose={() => setOpenSuccess(false)} modalOnClose={onClose} />
- </div>
- </form>
- </div>
- </Modal>
-
+ <div className="overflow-y-auto max-h-[50vh] mr-2 pr-2">
+ <p className="text-lg text-darkGray-HC-white font-bold mb-1 mt-4">Nome da Coleção*</p>
+ <TextField
+ size="small"
+ fullWidth
+ onChange={(e) => setName(e.target.value)}
+ value={name}
+ required
+ error={name.length > 150}
+ helperText={
+ name.length > 150
+ ? `O nome excede o limite de 150 caracteres (${name.length}/150)`
+ : `${name.length}/150`
+ }
+ sx={{
+ '& .MuiOutlinedInput-root': {
+ '& fieldset': {
+ borderColor: 'var(--mediumGray-HC-white)',
+ },
+ '&:hover fieldset': {
+ borderColor: 'var(--turquoise-HC-white)',
+ },
+ '&.Mui-focused fieldset': {
+ borderColor: 'var(--turquoise-HC-white)',
+ },
+ '& input': {
+ color: 'var(--darkGray-HC-white)',
+ },
+ },
+ '& .MuiFormHelperText-root': {
+ color: name.length > 150 ? 'var(--red-HC-white)' : 'var(--darkGray-HC-white)', // vermelho ou padrão
+ fontWeight: 'bold',
+ },
+ }}
+ />
+ <p className="text-lg text-darkGray-HC-white font-bold mb-3 mt-4">Esta coleção é:</p>
+ <FormLabel>
+ <RadioGroup
+ value={privacy}
+ onChange={(e) => setPrivacy(e.target.value)}
+ sx={{
+ '& .MuiRadio-root': {
+ color: 'var(--darkGray-HC-white)',
+ '&.Mui-checked': {
+ color: 'var(--turquoise-HC-white)',
+ },
+ },
+ }}
+ >
+ <FormControlLabel
+ value="public"
+ control={<Radio />}
+ label="Coleção Pública"
+ sx={{
+ '& .MuiFormControlLabel-label': {
+ color: 'var(--darkGray-HC-white)',
+ },
+ }}
+ />
+ <FormControlLabel
+ value="private"
+ control={<Radio />}
+ label="Coleção Privada"
+ sx={{
+ '& .MuiFormControlLabel-label': {
+ color: 'var(--darkGray-HC-white)',
+ },
+ }}
+ />
+ </RadioGroup>
+ </FormLabel>
+ {collectionData.collection_items.length ? (
+ <>
+ <p className="text-lg text-darkGray-HC-white font-bold mb-3 mt-4">Remover da coleção:</p>
+ <div className="flex flex-col gap-2">
+ {collectionData?.collection_items?.map((item) => (
+ <label
+ key={item.id}
+ className="flex items-center gap-2 cursor-pointer text-darkGray-HC-white"
+ >
+ <input
+ type="checkbox"
+ checked={selectedResources.includes(item.id)}
+ onChange={() => handleToggle(item.id)}
+ className="w-4 h-4 border border-darkGray-HC-white bg-white-hc-dark accent-darkTurquoise-HC-white"
+ />
+ <span>{item.collectionable?.name}</span>
+ </label>
+ ))}
+ </div>
+ </>
+ ) : null}
+ </div>
+ <div className="sticky bottom-0 bg-ice-HC-dark pt-2">
+ <div className="flex flex-row-reverse gap-2 justify-center space-x-2">
+ <button
+ className="border text-sm p-2 text-white-HC-dark-underline border-ice-HC-dark hover:border-ice-HC-white hover:text-white rounded-lg normal-case h-9 font-bold bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark"
+ type="button" // Alterado para "button"
+ onClick={handleSubmit} // Chama a função diretamente no onClick
+ >
+ Salvar Alterações
+ </button>
+ <button
+ className="border text-sm p-2 mr-3 text-darkGray-HC-white-underline border-ice-HC-white rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-lightGray-HC-white hover:text-darkGray-HC-dark-underline"
+ onClick={() => {
+ setSelectedResources([]);
+ onClose();
+ }}
+ >
+ Cancelar
+ </button>
+ </div>
+ <ModalSuccess open={openSuccess} onClose={() => setOpenSuccess(false)} modalOnClose={onClose} />
+ </div>
+ </form>
+ </div>
+ </Modal>
);
}
diff --git a/src/app/perfil/[id]/components/ProfileCollections.js b/src/app/perfil/[id]/components/ProfileCollections.js
index ae1bbc2cad6dba4ba183c5ac321c834a3efa7ff3..7b12466427890ee18c0c05b8a6db6faeb560eb05 100644
--- a/src/app/perfil/[id]/components/ProfileCollections.js
+++ b/src/app/perfil/[id]/components/ProfileCollections.js
@@ -13,6 +13,7 @@ import EditCollectionModal from "./EditCollectionModal";
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import ShareButton from "@/app/components/ShareButton";
import EditCollectionButton from "./EditCollectionButton";
+import { useCallback } from "react";
const ModalSucess = ({ open, onClose, modalOnClose }) => {
return (
@@ -68,47 +69,36 @@ export default function ProfileCollections({ id, idLogin }) {
}, [got]);
- useEffect(() => {
- /**
- * @param {Number} id
- * Verifica se o usuário está no seu perfil.
- * Se sim, faz fecth das coleções públicas e privadas.
- * Se não, só das privadas.
- */
- const fetchCollections = async (id) => {
- if (idLogin === id) {
+ const fetchCollections = useCallback(async (idParam = id) => {
+ if (idLogin === idParam) {
+ const { data, headers } = await mecredApi.get(
+ `/users/${idParam}/collections?limit=${numberCards}`,
+ {
+ headers: {
+ "access-token": token,
+ "token-type": "Bearer",
+ client: client,
+ uid: uid,
+ Expires: 0,
+ },
+ }
+ );
+ setTotalCount(headers["x-total-count"]);
+ setCollections(data);
+ setGot(true);
+ } else {
+ const { data, headers } = await mecredApi.get(
+ `/users/${idParam}/collections?limit=${numberCards}`
+ );
+ setTotalCount(headers["x-total-count"]);
+ setCollections(data);
+ setGot(true);
+ }
+ }, [id, idLogin, numberCards, token, client, uid]);
- await mecredApi
- .get(`/users/${id}/collections?limit=${numberCards}`, {
- headers: {
- "access-token": token,
- "token-type": "Bearer",
- client: client,
- uid: uid,
- Expires: 0,
- },
- })
- /**
- * Além de setar as coleções, indica o número total de coleções
- * Isso facilita na verificação
- */
- .then(({ data, headers }) => {
- setTotalCount(headers["x-total-count"])
- setCollections(data)
- setGot(true)
- });
- } else {
- await mecredApi
- .get(`/users/${id}/collections?limit=${numberCards}`)
- .then(({ data, headers }) => {
- setTotalCount(headers["x-total-count"])
- setCollections(data)
- setGot(true)
- });
- }
- };
+ useEffect(() => {
fetchCollections(id);
- }, [id, client, uid, token, numberCards, idLogin, deleted]);
+ }, [fetchCollections, id]);
/**
* Inicialmente sempre vai aparecer 4 coleções para o usuário (se ele tiver mais que 4).
@@ -217,7 +207,11 @@ export default function ProfileCollections({ id, idLogin }) {
{id === idLogin && (
<div className="flex gap-2">
{/* Botão de Editar */}
- <EditCollectionButton collectionId={item.id} collectionData={item} />
+ <EditCollectionButton
+ collectionId={item.id}
+ collectionData={item}
+ onUpdate={fetchCollections}
+ />
{/* Botão de Excluir */}
<button
diff --git a/src/app/perfil/[id]/components/ProfileResources.js b/src/app/perfil/[id]/components/ProfileResources.js
index 7b66a69182a2e7428007e41ae3e67ae58a74a494..70bec0bb6ccc19a763a3704c776db88da747f9d1 100644
--- a/src/app/perfil/[id]/components/ProfileResources.js
+++ b/src/app/perfil/[id]/components/ProfileResources.js
@@ -157,6 +157,7 @@ export default function ProfileResources({ id, idLogin }) {
homologa={resource?.status}
setUniqueResources={setUniqueResources}
resource={resource}
+ profilePage="recurso"
/>
))}
</div>
diff --git a/src/app/recurso/[id]/components/collectModal.js b/src/app/recurso/[id]/components/collectModal.js
index 0e594d2eff13526504332ce02f49cd667e06e18e..b33957b74064f2635f7000663e0812022ba95d5f 100644
--- a/src/app/recurso/[id]/components/collectModal.js
+++ b/src/app/recurso/[id]/components/collectModal.js
@@ -140,10 +140,10 @@ export default function CollectModal({ open, onClose, idLogin, resourceId }) {
},
},
}}>
- <div className="flex flex-col justify-items-center bg-ice-HC-dark p-3 rounded mx-2">
- <p className="text-xl text-darkGray-HC-white-underline mb-2">Você já guardou esse recurso nessa coleção!</p>
+ <div className="border border-ice-HC-white flex flex-col justify-items-center bg-ice-HC-dark p-3 rounded mx-2">
+ <p className="text-xl text-darkGray-HC-white mb-2">Você já guardou esse recurso nessa coleção!</p>
<button
- className=" text-sm p-2 w-[20%] text-darkGray-HC-white-underline border-main rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-ice-HC-dark-hover"
+ className=" text-sm p-2 w-[20%] border text-darkGray-HC-white-underline border-ice-HC-white rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:text-darkGray-HC-dark hover:bg-lightGray-HC-white"
onClick={() => onClose()}
>
Ok
@@ -162,10 +162,10 @@ export default function CollectModal({ open, onClose, idLogin, resourceId }) {
},
},
}}>
- <div className="flex flex-col justify-items-center bg-ice-HC-dark p-3 rounded">
- <p className="text-xl text-darkGray-HC-white-underline mb-2">Recurso guardado com sucesso!</p>
+ <div className="flex flex-col border border-ice-HC-white justify-items-center bg-ice-HC-dark p-3 rounded">
+ <p className="text-xl text-darkGray-HC-white mb-2">Recurso guardado com sucesso!</p>
<button
- className=" text-sm p-2 w-[20%] text-darkGray-HC-white-underline border-main rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-ice-HC-dark-hover"
+ className=" text-sm p-2 w-[20%] text-darkGray-HC-white-underline border border-ice-HC-white rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:text-darkGray-HC-dark-underline hover:bg-lightGray-HC-white"
onClick={() => onClose()}
>
Ok
@@ -214,7 +214,7 @@ export default function CollectModal({ open, onClose, idLogin, resourceId }) {
)
})
:
- <div className="text-lg text-darkGray-HC-white-underline mb-2 flex justify-center p-2 mt-5">Você ainda não possui coleções...</div>
+ <div className="text-lg text-darkGray-HC-white mb-2 flex justify-center p-2 mt-5">Você ainda não possui coleções...</div>
}
</div>
@@ -228,7 +228,7 @@ export default function CollectModal({ open, onClose, idLogin, resourceId }) {
Criar Coleção
</button>
<button
- className="text-sm p-2 w-[20%] text-darkGray-HC-white-underline border-main rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-ice-HC-dark-hover"
+ className="text-sm p-2 w-[20%] text-darkGray-HC-white-underline border-ice-HC-white rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-lightGray-HC-white hover:text-darkGray-HC-dark-underline"
onClick={() => onClose()}
>
Fechar