Try to fix search bar problem

src/Components/SearchBar.js

@@ -17,13 +17,14 @@ You should have received a copy of the GNU Affero General Public License
 along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
 
 import React, { useState, useEffect, useContext } from 'react'
-import { Redirect } from 'react-router-dom'
+import { Redirect, useHistory } from 'react-router-dom'
 
 import IconSearch from '@material-ui/icons/Search'
 
-import { RadioGroup, Radio, FormControl, Select, MenuItem, Button, FormControlLabel, TextField } from '@material-ui/core'
+import { RadioGroup, Radio, FormControl, Select, MenuItem, Button, FormControlLabel, TextField, Link } from '@material-ui/core'
 import styled from 'styled-components'
 import { Store } from '../Store';
+import { v4 as uuidv4 } from 'uuid'
 
 
 const dividerStyled = {
@@ -135,6 +136,14 @@ export default function SearchBar(props) {
     }
   }
 
+  const linkTarget = {
+    pathname: `/busca?query=${state.search.query}&search_class=${state.search.class}`,
+    key: uuidv4(), // we could use Math.random, but that's not guaranteed unique.
+    state: {
+      applied: true
+    }
+  };
+
   return (
     <Bar>
       {goSearch && <Redirect to={`/busca?query=${state.search.query}&search_class=${state.search.class}`} />}
@@ -148,7 +157,12 @@ export default function SearchBar(props) {
         onKeyPress={handleKeyDown}
       />
       <Flex>
+        <Link
+          to={linkTarget}
+        >
           <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled /></ButtonStyled>
+        </Link>
+
         <Flex style={{ "justifyContent": 'middle', 'flexDirection': 'column' }}>
           <div>Pressione "Enter"</div>
           <div>ou click na lupa</div>

src/Pages/Search.js

@@ -53,6 +53,7 @@ export default function Search(props) {
     const [loadingMoreData, setLoadingMoreData] = useState(false);
     const [isFiltering, setIsFiltering] = useState(false);
     const [resultsPerPage, setResultsPerPage] = useState(12);
+    const [showingResults, setShowingResults] = useState(0);
     const [totalResults, setTotalResults] = useState(0);
     const [options] = React.useState([
         { label: "Recursos", value: "LearningObject" },
@@ -86,13 +87,10 @@ export default function Search(props) {
                 class: currOption,
             },
         });
-        console.log(data);
         if (headers.has('X-Total-Count')) {
             setTotalResults(headers.get('X-Total-Count'));
         }
-        else {
-            setTotalResults(data.length);
-        }
+        setShowingResults(data.length)
         setOptionResult(currOption);
         setIsLoading(false);
         setIsFiltering(false);
@@ -108,15 +106,26 @@ export default function Search(props) {
         getRequest(url, handleSuccessfulGet, (error) => { console.log(error) })
     };
 
+(function(history){
+    const pushState = history.pushState;
+    history.pushState = function(state) {
+        if (typeof history.onpushstate == "function") {
+            history.onpushstate({state: state});
+        }
+        // Call your custom function here
+        return pushState.apply(history, arguments);
+    }
+})(window.history);
+
     useEffect(() => {
         dispatch({
             type: "HANDLE_SEARCH_BAR",
             opened: false,
         });
-
         const urlParams = new URLSearchParams(window.location.search);
         const query = urlParams.get("query");
         const searchClass = urlParams.get("search_class");
+
         if (state.search.query !== query || state.search.class !== searchClass) {
             dispatch({
                 type: "SAVE_SEARCH",
@@ -193,8 +202,7 @@ export default function Search(props) {
                             <Grid item xs={12}>
                                 <div style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
                                     <div style={{ textAlign: "center", paddingTop: 10, fontWeight: "bolder" }}>
-                                        Exibindo {totalResults === 0 ? 0 : resultsPerPage} resultados de {totalResults} encontrados
-                                        {/*Exibindo {totalResults === 0 ? 0 : resultsPerPage} resultados*/}
+                                        Exibindo {showingResults === 0 ? 0 : showingResults} resultados de {totalResults} encontrados
                                     </div>
                                 </div>
                             </Grid>