From ca5f5b6ae56906a8c3f271a8ed124ad7e4ebecd0 Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Fri, 19 Mar 2021 12:38:11 -0300
Subject: [PATCH] Try to fix search bar problem
---
src/Components/SearchBar.js | 154 ++++++++++++++++++++----------------
src/Pages/Search.js | 24 ++++--
2 files changed, 100 insertions(+), 78 deletions(-)
diff --git a/src/Components/SearchBar.js b/src/Components/SearchBar.js
index faca3453..ac1eef5e 100644
--- a/src/Components/SearchBar.js
+++ b/src/Components/SearchBar.js
@@ -17,25 +17,26 @@ 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 = {
- background: '#e0e0e0',
+ background: '#e0e0e0',
width: '1px',
content: "",
display: 'block',
top: '0',
bottom: '0',
right: '0',
- minHeight: '70px',
- margin: '0 30px'
+ minHeight: '70px',
+ margin: '0 30px'
}
const DividerVertical = () => <em style={dividerStyled}></em>
@@ -47,12 +48,12 @@ const IconSearchStyled = styled(IconSearch)`
color: #16b8dd;
`
-const TextFieldStyled = styled(TextField) `
+const TextFieldStyled = styled(TextField)`
flex-grow: 2;
margin: 0 2vw !important;
`
-const RadioGroupStyled = styled(RadioGroup) `
+const RadioGroupStyled = styled(RadioGroup)`
display: flex;
flex-direction: row;
flex-grow: 1;
@@ -84,50 +85,50 @@ const MenuItemStyled = styled(MenuItem)`
fontWeight: bolder;
`
-const Bar = styled.div `
+const Bar = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px rgba(0,0,0,.1) solid;
`
-const Flex = styled.span `
+const Flex = styled.span`
display: flex;
align-items: center;
color: #787380;
`
export default function SearchBar(props) {
- const [ query, setQuery ] = useState('')
- const [ searchClass, setSearchClass ] = useState('LearningObject')
+ const [query, setQuery] = useState('')
+ const [searchClass, setSearchClass] = useState('LearningObject')
const { state, dispatch } = useContext(Store)
- const [ goSearch, setGoSearch ] = useState(false)
+ const [goSearch, setGoSearch] = useState(false)
- useEffect(()=>{
- if(window.location.pathname.includes('busca')){
- const urlParams = new URLSearchParams(window.location.search)
- const urlQuery = urlParams.get('query')
- const urlSearchClass = urlParams.get('search_class')
- if( searchClass !== urlSearchClass || query !== urlQuery){
- setQuery(urlQuery)
- setSearchClass(urlSearchClass)
- }
+ useEffect(() => {
+ if (window.location.pathname.includes('busca')) {
+ const urlParams = new URLSearchParams(window.location.search)
+ const urlQuery = urlParams.get('query')
+ const urlSearchClass = urlParams.get('search_class')
+ if (searchClass !== urlSearchClass || query !== urlQuery) {
+ setQuery(urlQuery)
+ setSearchClass(urlSearchClass)
}
- },[])
+ }
+ }, [])
- useEffect(()=>setGoSearch(false),[goSearch])
+ useEffect(() => setGoSearch(false), [goSearch])
- const handleChange = ( event ) => {
+ const handleChange = (event) => {
setQuery(event.target.value)
}
const handleKeyDown = (event) => {
- if(event.key === 'Enter' || event.type === 'click'){
+ if (event.key === 'Enter' || event.type === 'click') {
dispatch({
type: 'SAVE_SEARCH',
newSearch: {
- query: query!==''?query:'*',
+ query: query !== '' ? query : '*',
class: searchClass
}
})
@@ -135,50 +136,63 @@ 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}`} />}
- <TextFieldStyled
- id="standard-search"
- label="O que você está buscando"
- type="search"
- margin="normal"
- value={query}
- onChange={handleChange}
- onKeyPress={handleKeyDown}
- />
- <Flex>
- <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled /></ButtonStyled>
- <Flex style={{"justifyContent": 'middle', 'flexDirection':'column'}}>
- <div>Pressione "Enter"</div>
- <div>ou click na lupa</div>
- </Flex>
- <DividerVertical />
- { state.windowSize.width >=900?
- <RadioGroupStyled row={true}
- aria-label="Tipo"
- name="types" value={searchClass}
- onChange={
- (event)=> setSearchClass(event.target.value)
- }
- >
- <FormControlLabelStyled value="LearningObject" control={<RadioStyled />} label="Recursos"/>
- <FormControlLabelStyled value="Collection" control={<RadioStyled />} label="Coleções"/>
- <FormControlLabelStyled value="User" control={<RadioStyled />} label="Usuários" />
- </RadioGroupStyled>
- :
- <FormControl>
- <SelectStyled
- value={searchClass}
- onChange={(event)=> setSearchClass(event.target.value)}
- >
- <MenuItemStyled value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled>
- <MenuItemStyled value="Collection" aria-label="Coleções">Coleções</MenuItemStyled>
- <MenuItemStyled value="User" aria-label="Usuários">Usuários</MenuItemStyled>
- </SelectStyled>
- </FormControl>
- }
- </Flex>
- </Bar>
+ <Bar>
+ {goSearch && <Redirect to={`/busca?query=${state.search.query}&search_class=${state.search.class}`} />}
+ <TextFieldStyled
+ id="standard-search"
+ label="O que você está buscando"
+ type="search"
+ margin="normal"
+ value={query}
+ onChange={handleChange}
+ 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>
+ </Flex>
+ <DividerVertical />
+ {state.windowSize.width >= 900 ?
+ <RadioGroupStyled row={true}
+ aria-label="Tipo"
+ name="types" value={searchClass}
+ onChange={
+ (event) => setSearchClass(event.target.value)
+ }
+ >
+ <FormControlLabelStyled value="LearningObject" control={<RadioStyled />} label="Recursos" />
+ <FormControlLabelStyled value="Collection" control={<RadioStyled />} label="Coleções" />
+ <FormControlLabelStyled value="User" control={<RadioStyled />} label="Usuários" />
+ </RadioGroupStyled>
+ :
+ <FormControl>
+ <SelectStyled
+ value={searchClass}
+ onChange={(event) => setSearchClass(event.target.value)}
+ >
+ <MenuItemStyled value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled>
+ <MenuItemStyled value="Collection" aria-label="Coleções">Coleções</MenuItemStyled>
+ <MenuItemStyled value="User" aria-label="Usuários">Usuários</MenuItemStyled>
+ </SelectStyled>
+ </FormControl>
+ }
+ </Flex>
+ </Bar>
)
}
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index ce755f66..0a6a8a81 100644
--- a/src/Pages/Search.js
+++ b/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>
@@ -250,7 +258,7 @@ export default function Search(props) {
</GridBuscaCollection> :
<Grid container direction="row" justify="center" alignItems="center">
<Grid item>
- <img src={ColecaoVazia} alt="coleção vazia"/>
+ <img src={ColecaoVazia} alt="coleção vazia" />
</Grid>
</Grid>
--
GitLab