From 7074c8609db41b54823416703209ed1daaa91e6f Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Wed, 23 Jun 2021 10:49:34 -0300
Subject: [PATCH] fixed seragch
---
.../CollectionTemplate.js | 2 +-
src/Components/SearchPageComponents/Error.js | 30 +++
.../SearchPageComponents/FilterSummary.js | 2 +-
.../SearchPageComponents/ResourceTemplate.js | 2 +-
.../SearchPageComponents/UserTemplate.js | 2 +-
src/Pages/Search.js | 206 ++++++++++++------
6 files changed, 172 insertions(+), 72 deletions(-)
create mode 100644 src/Components/SearchPageComponents/Error.js
diff --git a/src/Components/SearchPageComponents/CollectionTemplate.js b/src/Components/SearchPageComponents/CollectionTemplate.js
index 4b14e6b0..c3bcb3ee 100644
--- a/src/Components/SearchPageComponents/CollectionTemplate.js
+++ b/src/Components/SearchPageComponents/CollectionTemplate.js
@@ -10,8 +10,8 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage }) {
- const totalPages = Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
const topRef = React.useRef();
+ const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
useEffect(() => {
topRef.current.scrollIntoView()
diff --git a/src/Components/SearchPageComponents/Error.js b/src/Components/SearchPageComponents/Error.js
new file mode 100644
index 00000000..7cb9d98c
--- /dev/null
+++ b/src/Components/SearchPageComponents/Error.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+import Paper from '@material-ui/core/Paper';
+
+export default function Error() {
+ return <ResourcePaper square elevation={4}>
+ <Title>
+ Houve um erro durante a obtenção de dados :(
+ </Title>
+ </ResourcePaper>
+}
+
+const ResourcePaper = styled(Paper)`
+ /* height: 150px; */
+ text-align: center;
+ background-color: #fff;
+ margin-top: 5px;
+ margin-bottom: 30px;
+ padding: 0.5em 1em;
+ color: #666;
+ width: 100%;
+`;
+
+const Title = styled.h4`
+ text-transform: uppercase;
+ font-weight: 500;
+ text-align: left;
+ color: #666;
+ text-align: center;
+`
\ No newline at end of file
diff --git a/src/Components/SearchPageComponents/FilterSummary.js b/src/Components/SearchPageComponents/FilterSummary.js
index f11e0a32..9cc1a9ae 100644
--- a/src/Components/SearchPageComponents/FilterSummary.js
+++ b/src/Components/SearchPageComponents/FilterSummary.js
@@ -10,7 +10,7 @@ export default function FilterSummary
return (
<FilterSummaryPaper square elevation={4}>
<h3 className="title">
- Resumo dos filtros colocados
+ Resumo dos filtros selecionados
</h3>
<Grid container direction='column' spacing={2}>
<Grid item>
diff --git a/src/Components/SearchPageComponents/ResourceTemplate.js b/src/Components/SearchPageComponents/ResourceTemplate.js
index 28651ca0..01f74736 100644
--- a/src/Components/SearchPageComponents/ResourceTemplate.js
+++ b/src/Components/SearchPageComponents/ResourceTemplate.js
@@ -10,7 +10,7 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage }) {
- const totalPages = Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
+ const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
const topRef = React.useRef();
useEffect(() => {
diff --git a/src/Components/SearchPageComponents/UserTemplate.js b/src/Components/SearchPageComponents/UserTemplate.js
index 45ebb66f..991a31d3 100644
--- a/src/Components/SearchPageComponents/UserTemplate.js
+++ b/src/Components/SearchPageComponents/UserTemplate.js
@@ -10,7 +10,7 @@ import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
import { apiDomain } from '../../env';
export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage }) {
- const totalPages = Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
+ const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
const topRef = React.useRef();
useEffect(() => {
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index a2783f65..15628592 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -17,7 +17,7 @@
// along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState, Fragment } from 'react';
+import React, { useEffect, useState, Fragment, useContext } from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
@@ -25,6 +25,7 @@ import HeaderFilters from '../Components/SearchPageComponents/HeaderFilters';
import ResourceTemplate from '../Components/SearchPageComponents/ResourceTemplate';
import CollectionTemplate from '../Components/SearchPageComponents/CollectionTemplate';
import UserTemplate from '../Components/SearchPageComponents/UserTemplate';
+import Error from '../Components/SearchPageComponents/Error';
import { getRequest } from '../Components/HelperFunctions/getAxiosConfig';
import { useHistory } from 'react-router-dom';
import SearchExpansionPanel from '../Components/SearchExpansionPanel/SearchExpansionPanel';
@@ -35,9 +36,17 @@ import {
filtersStages,
filtersLanguages,
} from '../Components/SearchPageComponents/filters';
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert from '@material-ui/lab/Alert';
+import { Store } from '../Store'
+
+function Alert(props) {
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
export default function Search() {
const history = useHistory();
+ const { state } = useContext(Store)
const [currOption, setCurrOption] = useState('');
const [currOrder, serCurrOrder] = useState('review_average');
@@ -49,6 +58,12 @@ export default function Search() {
const [currLanguagesValues, setCurrLanguagesValues] = useState('');
const [currTag, setCurrTag] = useState('');
const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState(false);
+ const [snackInfo, setSnackInfo] = useState({
+ open: false,
+ text: "",
+ severity: "",
+ });
const [curriculumComponents, setCurriculumComponents] = useState([]);
const [typeOfResources, setTypeOfResources] = useState([]);
@@ -80,6 +95,19 @@ export default function Search() {
{ value: 'Ordem Alfabética', name: 'title' },
];
+ function handleSnackInfo(info) {
+ setSnackInfo({ ...info })
+ }
+
+ function handleCloseSnack() {
+ const snackInfo = {
+ open: false,
+ text: "",
+ severity: "",
+ }
+ handleSnackInfo(snackInfo)
+ }
+
function onButtonClicked() {
const curriculumValues = [];
const typeOfResourcesValues = [];
@@ -127,7 +155,7 @@ export default function Search() {
if (languagesValues.length >= 1) {
url = url + `&languages=${languagesValues}`
}
- if (tag.length >= 1)
+ if (tag && tag.length >= 1)
url = url + `&tags=${tag}`
}
}
@@ -270,6 +298,13 @@ export default function Search() {
}
function handleFail() {
+ const snackInfo = {
+ open: true,
+ text: "Houve um erro ao carregar os dados!",
+ severity: "warning",
+ }
+ handleSnackInfo(snackInfo)
+ setError(true);
setIsLoading(false);
}
@@ -354,6 +389,7 @@ export default function Search() {
setCurrTeachingStageValues(educationalStages);
setCurrTypeOfResValues(objectTypes);
setCurrTag(tags);
+ setTag(tags);
handleSubjects(subjects);
handleObjectTypes(objectTypes);
@@ -388,87 +424,121 @@ export default function Search() {
handleFail,
);
- }, [window.history.state === null ? true : window.history.state.key])
-
- return (
- <MainPage>
- <StyledBreadCrumbs>
- <Link to='/'>Página Inicial</Link>
- <span>Busca</span>
- </StyledBreadCrumbs>
- <HeaderFilters
- options={options}
- orders={orders}
- currOption={currOption}
- currOrder={currOrder}
- handleChangeOption={handleChangeOption}
- handleChangeOrder={handleChangeOrder}
- />
- {
- currOption === 'LearningObject' &&
- <Fragment>
- <SearchExpansionPanel
- setTag={(tag) => setTag(tag)}
- curriculumComponents={curriculumComponents}
- setCurriculum={(array) => { setCurriculumComponents(array) }}
- typeOfResources={typeOfResources}
- setTypeRes={(array) => { setTypeOfResources(array) }}
- teachingStage={teachingStage}
- setTeachingStage={(array) => { setTeachingStage(array) }}
- languages={languages}
- setLanguages={(array) => { setLanguages(array) }}
- />
- {
- <FilterSummary
+ }, [window.history.state === null ? true : window.history.state.key, state.currentUser.id])
+
+ if (error)
+ return (
+ <MainPageError>
+ <Snackbar
+ open={snackInfo.open}
+ autoHideDuration={6000}
+ onClose={handleCloseSnack}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ >
+ <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
+ {snackInfo.text}
+ </Alert>
+ </Snackbar>
+ <Error />
+ </MainPageError>
+ )
+ else
+ return (
+ <MainPage>
+ <Snackbar
+ open={snackInfo.open}
+ autoHideDuration={6000}
+ onClose={handleCloseSnack}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ >
+ <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
+ {snackInfo.text}
+ </Alert>
+ </Snackbar>
+ <StyledBreadCrumbs>
+ <Link to='/'>Página Inicial</Link>
+ <span>Busca</span>
+ </StyledBreadCrumbs>
+ <HeaderFilters
+ options={options}
+ orders={orders}
+ currOption={currOption}
+ currOrder={currOrder}
+ handleChangeOption={handleChangeOption}
+ handleChangeOrder={handleChangeOrder}
+ />
+ {
+ currOption === 'LearningObject' &&
+ <Fragment>
+ <SearchExpansionPanel
+ setTag={(tag) => setTag(tag)}
curriculumComponents={curriculumComponents}
+ setCurriculum={(array) => { setCurriculumComponents(array) }}
typeOfResources={typeOfResources}
- languages={languages}
+ setTypeRes={(array) => { setTypeOfResources(array) }}
teachingStage={teachingStage}
- tag={tag}
- onButtonClicked={onButtonClicked}
+ setTeachingStage={(array) => { setTeachingStage(array) }}
+ languages={languages}
+ setLanguages={(array) => { setLanguages(array) }}
/>
- }
- <ResourceTemplate
+ {
+ <FilterSummary
+ curriculumComponents={curriculumComponents}
+ typeOfResources={typeOfResources}
+ languages={languages}
+ teachingStage={teachingStage}
+ tag={tag}
+ onButtonClicked={onButtonClicked}
+ />
+ }
+ <ResourceTemplate
+ handleNextPage={handleNextPage}
+ handlePreviousPage={handlePreviousPage}
+ isLoading={isLoading}
+ currPage={currPage}
+ resources={resourcesArray}
+ totalResources={totalResources}
+ />
+ </Fragment>
+ }
+ {
+ currOption === 'Collection' &&
+ <CollectionTemplate
handleNextPage={handleNextPage}
handlePreviousPage={handlePreviousPage}
isLoading={isLoading}
currPage={currPage}
- resources={resourcesArray}
- totalResources={totalResources}
+ resources={collectionsArray}
+ totalResources={totalCollections}
/>
- </Fragment>
- }
- {
- currOption === 'Collection' &&
- <CollectionTemplate
- handleNextPage={handleNextPage}
- handlePreviousPage={handlePreviousPage}
- isLoading={isLoading}
- currPage={currPage}
- resources={collectionsArray}
- totalResources={totalCollections}
- />
- }
- {
- currOption === 'User' &&
- <UserTemplate
- handleNextPage={handleNextPage}
- handlePreviousPage={handlePreviousPage}
- isLoading={isLoading}
- currPage={currPage}
- resources={usersArray}
- totalResources={totalUsers}
- />
- }
- </MainPage>
- )
+ }
+ {
+ currOption === 'User' &&
+ <UserTemplate
+ handleNextPage={handleNextPage}
+ handlePreviousPage={handlePreviousPage}
+ isLoading={isLoading}
+ currPage={currPage}
+ resources={usersArray}
+ totalResources={totalUsers}
+ />
+ }
+ </MainPage>
+ )
}
const MainPage = styled.div`
width: 90%;
margin: 1em auto;
`
-
+const MainPageError = styled.div`
+ width: 90%;
+ margin: 1em auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 1em;
+`
const StyledBreadCrumbs = styled(Breadcrumbs)`
display: flex;
justify-content: flex-start;
--
GitLab