diff --git a/src/app/components/About.js b/src/app/components/About.js
index 3f4ca35c60cd790551833a444d50aa1cc8f5e794..4a6ced00a341634a51c490c6c5ca2355d1039fe7 100644
--- a/src/app/components/About.js
+++ b/src/app/components/About.js
@@ -4,6 +4,10 @@ import Title from "./Title";
import Image from "next/image";
import SubjectOutlinedIcon from '@mui/icons-material/SubjectOutlined';
+/**
+ *
+ * @returns tela de sobre
+ */
export default function AboutComponent() {
const [statistics, setStatistics] = useState({});
diff --git a/src/app/components/Cards.js b/src/app/components/Cards.js
index 516a8cbb721bc776c9c736283ac51f61a63be0c3..c3443126b01e034fb4b70aab4df65d5ab3b0308f 100644
--- a/src/app/components/Cards.js
+++ b/src/app/components/Cards.js
@@ -6,19 +6,24 @@ import Avatar from "@mui/material/Avatar";
import Typography from "@mui/material/Typography";
import Link from "next/link";
-/*
-props do card:
-id: id do recurso
-title: titulo do recurso
-author: autor do recurso
-avatar: link avatar autor
-image: link imagem recurso
-shadow: sombra caso o card tenha sombra, exemplo: recursos do mec
-updated_at: data da ultima modificaçao do recurso
-*/
+
+/**
+ * Funçao que monta os cards dos recursos
+ * @param {Number} id id do recurso
+ * @param {string} title título do recurso
+ * @param {string} author autor do recurso
+ * @param {string} avatar link avatar autor
+ * @param {string} image link imagem recurso
+ * @param {String} updated_at data da ultima modificação do recurso
+ */
export default function Cards(props) {
+ /**
+ *
+ * @param {String} type tipo de recurso
+ * @returns caso o recurso não tenha retorna uma thumbnail padrão
+ */
const getDefaultThumbnail = (type) => {
let thumbnail_url;
@@ -57,7 +62,11 @@ export default function Cards(props) {
return thumbnail_url;
};
-
+ /**
+ *
+ * @param {String} updated_time
+ * @returns função responsável por cálcular o tempo percorrido desde a publicação do recurso na plataforma
+ */
const timeFunction = (updated_time) => {
let data = new Date(updated_time)
let dataAtual = new Date();
@@ -79,7 +88,6 @@ export default function Cards(props) {
}
return (
-
<Card
className={"active:bg-black-hover active:rounded-3xl transition ease-in-out items-center "}
sx={{
@@ -100,7 +108,6 @@ export default function Cards(props) {
sx={{
width: props?.thumbWidth ?? 400,
height: props?.thumbHeight ?? 225,
- boxShadow: props?.shadow ?? "none,"
}}
component="img"
image={
diff --git a/src/app/components/Content.js b/src/app/components/Content.js
index 452f8abe9cf6e21b78a657ccec8be73bd7a66502..baa46b1ec19e0e346544272eb06a577c810e722e 100644
--- a/src/app/components/Content.js
+++ b/src/app/components/Content.js
@@ -18,6 +18,10 @@ function tradutor(name) {
}
}
+/**
+ * @param {Object} props
+ * @param {string} props.name informna se é recursos, coleções ou MEC
+ */
export default function Content({ name }) {
const [selectFilter, setSelectFilter] = useState("publicationdesc");
const [titlePage, setTitlePage] = useState("Recentes");
@@ -25,6 +29,8 @@ export default function Content({ name }) {
const [query, setQuery] = useState("*");
const [filterSubject, setFilterSubject] = useState("");
+ {/* GroupButtonsFilters: Botões para seleção do tipo de filtro usado (selectFilter) */ }
+ //caso MEC não apresenta o GroupButtonsFilters pois não há conteudo suficiente para ser filtrado
return (
<Overlay filterSubject={filterSubject} setFilterSubject={setFilterSubject} setQuery={setQuery} setSelectFilter={setSelectFilter} selectFilter={selectFilter} setTitlePage={setTitlePage} setNewSize={setNewSize} newSize={newSize}>
{name != "MEC" ?
diff --git a/src/app/components/DownloadButton.js b/src/app/components/DownloadButton.js
index 8c46b5ceffc7e0ace7f731ce479b97f9d97e224c..c3681141fc5b036bd2cc4abc85bf751a5ad027f7 100644
--- a/src/app/components/DownloadButton.js
+++ b/src/app/components/DownloadButton.js
@@ -2,6 +2,12 @@ import * as React from 'react';
import Button from '@mui/material/Button';
import DownloadIcon from '@mui/icons-material/Download';
+/**
+ * Responsável pelo Download dos recursos de uma coleção
+ * @param {Object} props
+ * @param {Number} props.id id do elemento
+ * @param {Array.<Object>} props.objects recursos de uma coleção
+ */
export default function DownloadButton({ id, objects }) {
const handleDowloadCollection = (e) => {
@@ -29,7 +35,6 @@ export default function DownloadButton({ id, objects }) {
}
return (
-
<>
<Button
className=" border-secondary w-32 rounded-xl hover:bg-secondary-hover bg-secondary text-white max-md:my-3 font-bold normal-case flex "
@@ -38,12 +43,6 @@ export default function DownloadButton({ id, objects }) {
startIcon={<DownloadIcon className='text-white' />}>
Baixar
</Button>
-
</>
-
-
)
-
-
-
}
\ No newline at end of file
diff --git a/src/app/components/FiltersModal.js b/src/app/components/FiltersModal.js
index 00e17f75574e4699a33c6dba3c29e8b6efdb3f8e..4df1b0b729081da5ebe6a8efabe3d1e19289863d 100644
--- a/src/app/components/FiltersModal.js
+++ b/src/app/components/FiltersModal.js
@@ -6,6 +6,10 @@ import TuneIcon from '@mui/icons-material/Tune';
import { Divider } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
+/**
+ *
+ * @returns modal de filtros
+ */
export default function FiltersModal() {
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true);
diff --git a/src/app/components/GroupButtonsFilters.js b/src/app/components/GroupButtonsFilters.js
index 59789301cf49c0985247bf02ca5d1de60a4bb852..bc87e33389953b6eb4bf4380846cbdc04cb8b6ef 100644
--- a/src/app/components/GroupButtonsFilters.js
+++ b/src/app/components/GroupButtonsFilters.js
@@ -31,7 +31,14 @@ const atalhos = [
-
+/**
+ *
+ * @param {Object} props
+ * @param {Function} props.setTitlePage
+ * @param {Function} props.setSelectFilter
+ * @param {String} props.selectFilter filtro selecionado (ex:score)
+ * @returns grupo de botões de filtros
+ */
export default function GroupButtonsFilters({ setTitlePage, setSelectFilter, selectFilter }) {
return (
<div className="flex justify-between pb-5 px-4 overflow-x-scroll no-scrollbar">
diff --git a/src/app/components/GroupCardsCollections.js b/src/app/components/GroupCardsCollections.js
index 91e89fb4cf007560621334f7a096280371bc24be..d2bce764f7a5b2e4b555705a3d27db18dbd39ddb 100644
--- a/src/app/components/GroupCardsCollections.js
+++ b/src/app/components/GroupCardsCollections.js
@@ -3,7 +3,12 @@ import { useEffect, useState } from "react";
import Cards from "./Cards";
import { Button } from "@mui/material";
-export default function GroupCardsCollections({ data, cardsPerRow, boxShadow }) {
+/**
+ * Retorna na tela uma coleção
+ * @param {Array.<Object>} data - recursos da coleção
+ * @param {number} cardsPerRow - quantidade de cards que cabem na linha
+ */
+export default function GroupCardsCollections({ data, cardsPerRow }) {
const [expanded, setExpanded] = useState(false);
const [showButton, setShowButton] = useState(false);
@@ -34,7 +39,6 @@ export default function GroupCardsCollections({ data, cardsPerRow, boxShadow })
authorId={item["collectionable"]["publisher"]["id"]}
avatar={item["collectionable"]["publisher"]["avatar"]}
image={item["collectionable"]["thumbnail"]}
- shadow={boxShadow}
updated_at={item["collectionable"]["updated_at"]}
/>
@@ -49,6 +53,7 @@ export default function GroupCardsCollections({ data, cardsPerRow, boxShadow })
</div>
</div>
<>
+ {/*mostra botão de ver mais caso os recursos de uma coleção cabem em mais de uma linha */}
{showButton ?
(
<Button
diff --git a/src/app/components/GroupCardsLearningObjects.js b/src/app/components/GroupCardsLearningObjects.js
deleted file mode 100644
index 0994785b5434c2d75e69b480117c7ccd74faffcb..0000000000000000000000000000000000000000
--- a/src/app/components/GroupCardsLearningObjects.js
+++ /dev/null
@@ -1,73 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-import Cards from "./Cards";
-import mecredApi from "@/axiosConfig";
-import { Button, Divider } from "@mui/material";
-
-export default function GroupCardsLearningObjects({ title, cardsPerRow, url }) {
- const [expanded, setExpanded] = useState(false);
- const [showButton, setShowButton] = useState(false);
- const [learningObjects, setLearningObjects] = useState([]);
-
- useEffect(() => {
- const handleResize = (length) => {
- if (length > cardsPerRow) {
- setShowButton(true);
- }
- };
- const fetchlearningObjects = async (url) => {
- const { data } = await mecredApi.get(url);
- setLearningObjects(data);
- handleResize(data.length);
- };
- if (cardsPerRow > 0) {
- fetchlearningObjects(url);
- }
- }, [cardsPerRow, url]);
-
- const toggleContent = () => {
- setExpanded(!expanded);
- };
-
- return (
- <div className="flex flex-col">
- <div className=" mx-1 mt-2 flex flex-col ">
- <div className=" ml-6 inline-block">
- <h1 className="text-xl font-bold mb-4 text-gray-600">
- Recursos mais {title}
- </h1>
- </div>
- <div className={`flex content flex-wrap justify-center ${expanded ? "" : "overflow-y-hidden h-[300px]"}`}>
- {learningObjects.map((item, index) => {
- return (
- <Cards
- id={item['id']}
- key={index}
- title={item["name"]}
- author={item["publisher"]["name"]}
- authorId={item["publisher"]["id"]}
- avatar={item["publisher"]["avatar"]}
- image={item["thumbnail"]}
- type={item["object_type"]}
- />
- );
- })}
- </div>
- </div>
- <Divider className="mr-8 max-md:mr-0 ">
- {showButton ?
- (
- <Button
- fullWidth
- disableElevation
- variant="outlined"
- className="mt-2 border-secondary rounded-xl hover:border-secondary-hover text-gray-700 normal-case flex gap-2"
- onClick={toggleContent}
- >
- {expanded ? "Fechar" : "Carregar mais"}
- </Button>
- ) : null}
- </Divider>
- </div>
- );
-}
diff --git a/src/app/components/Header.js b/src/app/components/Header.js
index 1187d1e06d9f579a1c6c64194406bbb22fa11067..6e2ab06197b9ea3f7c28b03d4d59073684c2f5c2 100644
--- a/src/app/components/Header.js
+++ b/src/app/components/Header.js
@@ -20,6 +20,12 @@ import NotificationsActiveSharpIcon from "@mui/icons-material/NotificationsActiv
import AccountMenu from "./MenuProfile";
import SearchComponent from "./SearchComponent";
+/**
+ * @param {Object} props
+ * @param {Function} props.setQuery - seta o query
+ * @param {Function} props.handleOpenMenu - abre/fecha sidebar
+ * @returns header
+ */
export default function Header({ setQuery, handleOpenMenu }) {
const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
@@ -38,6 +44,7 @@ export default function Header({ setQuery, handleOpenMenu }) {
setOpenSearch(!openSearch);
};
+ //componentes da header para celular
const renderMobileMenu = (
<Menu
anchorEl={mobileMoreAnchorEl}
diff --git a/src/app/components/InfiniteScroll.js b/src/app/components/InfiniteScroll.js
index a40499fe081fabe100490841afe25e64ea1cdf5c..2dbf0ec2824d7cd4050fe037ad0dd2b45f28f9ee 100644
--- a/src/app/components/InfiniteScroll.js
+++ b/src/app/components/InfiniteScroll.js
@@ -3,7 +3,18 @@ import InfiniteScrollCards from "./InfiniteScrollCards";
import mecredApi from "@/axiosConfig";
import Loading from "./Loading";
-export default function InfiniteScroll({ filterSubject, subject, query, type, filter, setNewSize, newSize }) {
+
+/**
+ * @param {Object} props
+ * @param {String} props.filterSubject matérias selecionadas - string de números inteiros, cada um correspondendo a uma máteria
+ * @param {String} props.query query digitanda na barra de busca do site
+ * @param {String} props.type nome em inglês da página (ex:collections)
+ * @param {String} props.filter nome do filtro selecionado (ex:publicationdesc)
+ * @param {Function} props.setNewSize
+ * @param {Boolean} props.newSize boolean que verifica se o tamanho da tela foi alterado
+ * @returns faz a chamada dos recursos/coleções conforme a tela é scrollada ou os filtros alterados
+ */
+export default function InfiniteScroll({ filterSubject, query, type, filter, setNewSize, newSize }) {
const [items, setItems] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [page, setPage] = useState(0);
@@ -40,6 +51,7 @@ export default function InfiniteScroll({ filterSubject, subject, query, type, fi
}
}, [setItems, setPage, setIsLoading, filter, type, query, filterSubject]);
+ //verifica se o usuário chegou no final da página
const handleScroll = useCallback(() => {
if (
window.innerHeight + document.documentElement.scrollTop !==
@@ -51,11 +63,13 @@ export default function InfiniteScroll({ filterSubject, subject, query, type, fi
fetchData(page);
}, [fetchData, isLoading, page]);
+ //caso o filtro seja alterado, seta o site para o topo da tela
useEffect(() => {
fetchData(0).then(() => { window.scrollTo(0, 0) });
setIsScroll(true);
}, [type, filter, fetchData]);
+ //controle do scroll da página
useEffect(() => {
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
diff --git a/src/app/components/InfiniteScrollCards.js b/src/app/components/InfiniteScrollCards.js
index fc231f70263a478cfdf5400eac5819b3422f70f4..4b6258ad3bee007cb89b2ad08b050644293f1c25 100644
--- a/src/app/components/InfiniteScrollCards.js
+++ b/src/app/components/InfiniteScrollCards.js
@@ -5,14 +5,29 @@ import Link from "next/link";
import mecredApi from "@/axiosConfig";
import DownloadButton from "./DownloadButton";
+ /**
+ *
+ * @param {Object} props
+ * @param {Array.<Object>} props.data dados obtidos apartir do get do InfiniteScroll.js
+ * @param {string} props.type informa se é recursos ou coleções, caso vazia retorna Collection
+ * @param {Function} props.setNewSize
+ * @param {boolean} props.newSize verifica se a tela teve o tamanho alterado
+ * @returns renderixa na tela o conteúdo obtido pelo InfiniteScroll.js
+ */
export default function InfiniteScrollCards({ data, type = "Collection", setNewSize, newSize }) {
const [cardsPerRow, setCardsPerRow] = useState(0);
const [mecCollection, setMecCollection] = useState([]);
+ /**
+ *pega o tamanho da div de id "contentSize"
+ */
const getWidth = async () => {
return document.getElementById('contentSize').scrollWidth;
};
+ /**
+ * pega o tamanho da tela caso esse seja alterado
+ */
useEffect(() => {
getWidth().then((res) => {
setCardsPerRow(Math.floor(res / 300));
@@ -20,6 +35,9 @@ export default function InfiniteScrollCards({ data, type = "Collection", setNewS
});
}, [newSize, setNewSize]);
+ /**
+ * get das coleções Oficiais do MEC
+ */
const fetchCollections = async () => {
try {
const { data } = await mecredApi
@@ -34,6 +52,9 @@ export default function InfiniteScrollCards({ data, type = "Collection", setNewS
fetchCollections();
}, []);
+ /**
+ * função que conta o tempo decorrido desde a publicação do recurso
+ */
const timeFunction = (updated_time) => {
let data = new Date(updated_time)
let dataAtual = new Date();
diff --git a/src/app/components/Loading.js b/src/app/components/Loading.js
index 5af5e91c21961c027eef54f50e71f048bf63b38f..8941738c0ea6209d140c5ec2a8c4529de18ba25c 100644
--- a/src/app/components/Loading.js
+++ b/src/app/components/Loading.js
@@ -1,3 +1,9 @@
+/**
+ *
+ * @param {boolean} scroll - verifica se é o Loading de scrollar
+ * @returns um componente de loading
+ */
+
export default function Loading({ scroll }) {
return (
<>
diff --git a/src/app/components/MenuProfile.js b/src/app/components/MenuProfile.js
index 8ddcc3e203989719b88af2e2e402ef08791be37b..1baa2c98b5e89625e3333b46d6bb78cab84f315f 100644
--- a/src/app/components/MenuProfile.js
+++ b/src/app/components/MenuProfile.js
@@ -16,6 +16,11 @@ import { isLoggedIn } from "../handlers/loginHandler";
const items = [];
+
+/**
+ *
+ * @returns menu do usuário
+ */
export default function AccountMenu() {
const [anchorEl, setAnchorEl] = useState(null);
const [userData, setUserData] = useState({});
diff --git a/src/app/components/Overlay.js b/src/app/components/Overlay.js
index cd626885b9cf9468e0b0105ce093a8675475bd5d..142663e69f43ca54cb0f1c0011c974c450a6084b 100644
--- a/src/app/components/Overlay.js
+++ b/src/app/components/Overlay.js
@@ -7,6 +7,16 @@ import theme from "@/app/theme";
import { ThemeProvider } from "@emotion/react";
import Loading from "./Loading";
+/**
+ * @param {Object} props
+ * @param {Function} props.setFilterSubject
+ * @param {Function} props.setQuery
+ * @param {Function} props.setSelectFilter
+ * @param {string} props.selectFilter
+ * @param {Function} props.setTitlePage
+ * @param {Function} props.setNewSize
+ * @returns componente que engloba header/sidebar/suspense e ThemeProvider
+ */
export default function Overlay({
children,
filterSubject,
diff --git a/src/app/components/SearchComponent.js b/src/app/components/SearchComponent.js
index 4f5793924486e66e8bcbe964fb6550275646a8ee..42387b49fbe84f412b9f9c9f91f8dd32a4f76c75 100644
--- a/src/app/components/SearchComponent.js
+++ b/src/app/components/SearchComponent.js
@@ -43,6 +43,13 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
},
}));
+/**
+ *
+ * @param {Object} props
+ * @param {Function} props.setQuery
+ * @param {Boolean} props.sizeWindow
+ * @returns searchComponent na header
+ */
export default function SearchComponent({ setQuery, sizeWindow }) {
const pathname = usePathname();
const [input, setInput] = useState("");
diff --git a/src/app/components/ShareModal.js b/src/app/components/ShareModal.js
index 46d45af0c386b2a1e93f9e58f792b5f75c8c0ac9..3fb1556d00d9c75e96a3f08a0440fe5778fd3e8b 100644
--- a/src/app/components/ShareModal.js
+++ b/src/app/components/ShareModal.js
@@ -3,6 +3,11 @@ import Image from "next/image";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import { usePathname } from "next/navigation";
+/**
+ * @param {Object} props
+ * @param {Boolean} props.open
+ * @param {Function} props.onClose
+ */
export default function ShareModal({ open, onClose }) {
const pathname = usePathname();
let url = "";
diff --git a/src/app/components/SideBar.js b/src/app/components/SideBar.js
index 645cca15e7455bc9b4557d87d859c8a97a3a4388..18b9a29005fd53f6297482573f41a9395b0937c3 100644
--- a/src/app/components/SideBar.js
+++ b/src/app/components/SideBar.js
@@ -44,6 +44,11 @@ function handleStringSubject(array) {
return string.substring(0, string.length - 1);
}
+/**
+ * @param {Object} props
+ * @param {Function} props.setFilterSubject
+ * @param {Boolean} props.openMenu
+ */
export default function SideBar({ setFilterSubject, openMenu }) {
const [subjects, setSubjects] = useState([]);
const [selectedSubject, setSelectedSubject] = useState([]);
diff --git a/src/app/components/Title.js b/src/app/components/Title.js
index f34d4a782180a9bcae18f846f836a8564338b3b8..073322b2460382f7a0f1c1ce80f0fb5676ad88bb 100644
--- a/src/app/components/Title.js
+++ b/src/app/components/Title.js
@@ -12,3 +12,4 @@ export default function Title() {
</div>
);
}
+
diff --git a/src/app/entrar/components/SignupModal.js b/src/app/entrar/components/SignupModal.js
index 0caf1de24120275848220925a9a9b2950d6c3c34..63d0a542d81e4573da4d21f8ff5536409ab01383 100644
--- a/src/app/entrar/components/SignupModal.js
+++ b/src/app/entrar/components/SignupModal.js
@@ -3,9 +3,9 @@ import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Modal from "@mui/material/Modal";
import Image from "next/image";
-import { TextField, Divider, Alert } from "@mui/material";
import { useState } from "react";
import mecredApi from "@/axiosConfig";
+import { TextField, Divider, Alert } from "@mui/material";
import { removeFromLocalStorage } from "@/app/handlers/localStorageHandler";
export default function SignupModal({ open, handleClose }) {
diff --git a/src/app/recurso/[id]/components/metrics.js b/src/app/recurso/[id]/components/metrics.js
index 37451ea33c233aa3eb610fa7ca82309529d3463c..f01f8de344f88bc7f7575ae167e91bdba8909db6 100644
--- a/src/app/recurso/[id]/components/metrics.js
+++ b/src/app/recurso/[id]/components/metrics.js
@@ -2,25 +2,25 @@ import StarHalfOutlinedIcon from "@mui/icons-material/StarHalfOutlined";
const genMetric = ({ icon, name, data }) => {
return (
- <div key={name} className="p-0 flex items-center">
- <div className="p-2 text-main-text">
- {icon}
- </div>
- <div className="text-main-text font-bold">
- {name}:
- </div>
- <div className="m-1 text-main-text">
- {data}
+ <div key={name} className="p-0 flex items-center">
+ <div className="p-2 text-main-text">
+ {icon}
+ </div>
+ <div className="text-main-text font-bold">
+ {name}:
+ </div>
+ <div className="m-1 text-main-text">
+ {data}
+ </div>
</div>
- </div>
);
}
export default function Specifications({ learningObject }) {
const metricInfo = [
- {icon: <StarHalfOutlinedIcon/>, name: "Visualizações", data: learningObject.views_count},
- {icon: <StarHalfOutlinedIcon/>, name: "Curtidas", data: learningObject.likes_count},
- {icon: <StarHalfOutlinedIcon/>, name: "Compartilhamentos", data: learningObject.shares_count},
+ { icon: <StarHalfOutlinedIcon />, name: "Visualizações", data: learningObject.views_count },
+ { icon: <StarHalfOutlinedIcon />, name: "Curtidas", data: learningObject.likes_count },
+ { icon: <StarHalfOutlinedIcon />, name: "Compartilhamentos", data: learningObject.shares_count },
];
return (
<div className="flex flex-col p-1 text-main-text">