fixed seragch

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()

src/Components/SearchPageComponents/Error.js

+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

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>

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(() => {

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(() => {

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;