diff --git a/src/Components/SearchExpansionPanel/SearchEPIdiomas.js b/src/Components/SearchExpansionPanel/SearchEPIdiomas.js index e9bcacf38c6cbd138fb2e6c59cc52e53c3e5fce3..b32f032cbce2efcdb4c5e791582c0a3561683560 100644 --- a/src/Components/SearchExpansionPanel/SearchEPIdiomas.js +++ b/src/Components/SearchExpansionPanel/SearchEPIdiomas.js @@ -51,7 +51,6 @@ export default function SearchEPIdiomas(props) { { value: "9", exemplo: "Japonês" }, { value: "19", exemplo: "LIBRAS" }, { value: "7", exemplo: "Mandarim" }, - { value: "18", exemplo: "Nenhum" }, { value: "10", exemplo: "Outro" }, { value: "1", exemplo: "Português" }, { value: "8", exemplo: "Russo" } diff --git a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js index ca65cb10c67872ac3d7e44c0b0f560b5cfa32a0a..7ebfc2c9e26e3ddb29e7445fe46f3df6bf090ce7 100644 --- a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js +++ b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js @@ -10,7 +10,7 @@ import SearchEPTiposRec from "./SearchEPTiposRec"; import SearchEPEtapasEns from "./SesrchEPEtapasEns"; import SearchEPIdiomas from "./SearchEPIdiomas"; import { TextField } from "@material-ui/core"; -import Grid from '@material-ui/core/Grid'; +import Grid from '@material-ui/core/Grid'; import CircularProgress from '@material-ui/core/CircularProgress'; import './ExpansionPanel.css' @@ -70,14 +70,31 @@ const ExpansionPanelDetails = withStyles(theme => ({ export default function SearchExpansionPanel(props) { const [keyWords, setKeyWords] = useState(""); + const [errorInKeyWord, setErrorInKeyWord] = useState({ + message: "", + state: false + }) const onKeyPressed = (e) => { - const filterString = "&tags[]=" + keyWords - if (e.key === "Enter") - props.onChange("LearningObject", filterString) + if (e.key === "Enter") { + const filterString = "&tags[]=" + keyWords + if (keyWords.length === 0) { + setErrorInKeyWord({ + state: true, + message: "Preencha o campo" + }) + } + else + props.onChange("LearningObject", filterString) + } } const HandleChangeText = (e) => { + if (errorInKeyWord.state) + setErrorInKeyWord({ + state: false, + message: "" + }) setKeyWords(e.target.value); } @@ -94,7 +111,7 @@ export default function SearchExpansionPanel(props) { id="panel1d-header" > <Grid - container + container direction="row" justify="space-between" > @@ -110,9 +127,9 @@ export default function SearchExpansionPanel(props) { </Typography> </Grid> <Grid item> - { - props.onFiltering ? <CircularProgress size={24} color="secondary" /> : null - } + { + props.onFiltering ? <CircularProgress size={24} color="secondary" /> : null + } </Grid> </Grid> </ExpansionPanelSummary> @@ -183,12 +200,13 @@ export default function SearchExpansionPanel(props) { </ExpansionPanelSummary> <ExpansionPanelDetails> <TextField - label="Palavra chave + ENTER" + label="Palavra chave + enter " id="outlined-margin-dense" - margin="dense" variant="outlined" onChange={e => HandleChangeText(e)} onKeyDown={e => onKeyPressed(e)} + error={errorInKeyWord.state} + helperText={errorInKeyWord.state ? errorInKeyWord.message : ""} /> </ExpansionPanelDetails> </ExpansionPanel> diff --git a/src/Pages/Search.js b/src/Pages/Search.js index 9453795c9312d425b6b624956106480d88b833b1..16b2111af2e2c9b79a580ec39d72ae9e59be8498 100644 --- a/src/Pages/Search.js +++ b/src/Pages/Search.js @@ -43,350 +43,365 @@ let currFilter = ""; let currOption; export default function Search(props) { - const history = useHistory() - - const { state, dispatch } = useContext(Store); - const [resultsResource, setResultsResource] = useState([]); - const [resultsCollection, setResultsCollection] = useState([]); - const [resultsUser, setResultsUser] = useState([]); - const [currOrder, setCurrOrder] = useState(order); - const [page] = useState(0); - const [isloading, setIsLoading] = useState(false); - 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" }, - { label: "Coleções", value: "Collection" }, - { label: "Usuários", value: "User" }, - ]); - const [ordenar] = useState([ - { label: "Mais Estrelas", value: "review_average" }, - { label: "Mais Relevante", value: "score" }, - { label: "Mais Baixados", value: "downloads" }, - { label: "Mais Favoritados", value: "likes" }, - { label: "Mais Recentes", value: "publicationdesc" }, - { label: "Ordem Alfabética", value: "title" }, - ]); - - const [option, setOption] = useState( - new URLSearchParams(window.location.search).get("search_class") - ); - const [optionResult, setOptionResult] = useState(option); - currOption = option; - - function handleSuccessfulGet(data, headers) { - if (currOption === "LearningObject") setResultsResource(data); - else if (currOption === "Collection") setResultsCollection(data); - else if (currOption === "User") setResultsUser(data); - setOptionResult(option); - dispatch({ - type: "SAVE_SEARCH", - newSearch: { - query: state.search.query, - class: currOption, - }, - }); - if (headers.has('X-Total-Count')) { - setTotalResults(headers.get('X-Total-Count')); - } - setShowingResults(data.length) - setOptionResult(currOption); - setIsLoading(false); - setIsFiltering(false); - setLoadingMoreData(false); + const history = useHistory() + + const { state, dispatch } = useContext(Store); + const [resultsResource, setResultsResource] = useState([]); + const [resultsCollection, setResultsCollection] = useState([]); + const [resultsUser, setResultsUser] = useState([]); + const [currOrder, setCurrOrder] = useState(order); + const [page] = useState(0); + const [isloading, setIsLoading] = useState(false); + 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" }, + { label: "Coleções", value: "Collection" }, + { label: "Usuários", value: "User" }, + ]); + const [ordenar] = useState([ + { label: "Mais Estrelas", value: "review_average" }, + { label: "Mais Relevante", value: "score" }, + { label: "Mais Baixados", value: "downloads" }, + { label: "Mais Favoritados", value: "likes" }, + { label: "Mais Recentes", value: "publicationdesc" }, + { label: "Ordem Alfabética", value: "title" }, + ]); + + const [option, setOption] = useState( + new URLSearchParams(window.location.search).get("search_class") + ); + const [optionResult, setOptionResult] = useState(option); + currOption = option; + + function handleSuccessfulGet(data, headers) { + if (currOption === "LearningObject") setResultsResource(data); + else if (currOption === "Collection") setResultsCollection(data); + else if (currOption === "User") setResultsUser(data); + setOptionResult(option); + dispatch({ + type: "SAVE_SEARCH", + newSearch: { + query: state.search.query, + class: currOption, + }, + }); + if (headers.has('X-Total-Count')) { + setTotalResults(headers.get('X-Total-Count')); + } + setShowingResults(data.length) + setOptionResult(currOption); + setIsLoading(false); + setIsFiltering(false); + setLoadingMoreData(false); + } + + const collectStuff = (tipoBusca, filtro) => { + if (!loadingMoreData) // this line prevents resetting filter when loading more data + currFilter = filtro; + if (filtro) + setIsFiltering(true); + const url = `/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}${currFilter ? currFilter : ""}&search_class=${tipoBusca}` + getRequest(url, handleSuccessfulGet, (error) => { console.log(error) }) + }; + + useEffect(() => { + setIsLoading(true) + + const urlParams = new URLSearchParams(window.location.search); + const query = urlParams.get("query"); + const searchClass = urlParams.get("search_class"); + + console.log(query) + console.log(searchClass) + + if (state.search.query !== query || state.search.class !== searchClass) { + dispatch({ + type: "SAVE_SEARCH", + newSearch: { + query: query, + class: searchClass, + }, + }); } - const collectStuff = (tipoBusca, filtro) => { - if (!loadingMoreData) // this line prevents resetting filter when loading more data - currFilter = filtro; - if (filtro) - setIsFiltering(true); - const url = `/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}${currFilter ? currFilter : ""}&search_class=${tipoBusca}` - getRequest(url, handleSuccessfulGet, (error) => { console.log(error) }) - }; - - useEffect(() => { - setIsLoading(true) - - const urlParams = new URLSearchParams(window.location.search); - const query = urlParams.get("query"); - const searchClass = urlParams.get("search_class"); - - console.log(query) - console.log(searchClass) - - if (state.search.query !== query || state.search.class !== searchClass) { - dispatch({ - type: "SAVE_SEARCH", - newSearch: { - query: query, - class: searchClass, - }, - }); - } - - collectStuff(searchClass) - - return () => - dispatch({ - type: "HANDLE_SEARCH_BAR", - opened: false, - }); - }, [window.history.state.key]) - - useEffect(() => { - setIsLoading(true); - collectStuff(option); - }, [resultsPerPage]); - - return ( - <div style={{ backgroundColor: "#f4f4f4" }}> - <Principal> - <BreadCrumbsDiv style={{ margin: "15px 2%", }}> - <StyledBreadCrumbs> - <Link to="/">Página Inicial</Link> - <span>Busca</span> - </StyledBreadCrumbs> - </BreadCrumbsDiv> - - <div style={{ margin: "15px 2%", }}> - <HeaderFilters elevation={4} square> - <Grid container spacing={0} style={{ height: "100%" }}> - <Grid item xs style={{ display: "flex", flexDirection: "column", justifyContent: "center", paddingLeft: 20 }}> - <div style={{ marginRight: 5, marginTop: 15 }}> - <div className="textInfo"> - <span style={{ fontWeight: "bold" }}> - MOSTRAR + collectStuff(searchClass) + + return () => + dispatch({ + type: "HANDLE_SEARCH_BAR", + opened: false, + }); + }, [window.history.state.key]) + + useEffect(() => { + setIsLoading(true); + collectStuff(option); + }, [resultsPerPage]); + + return ( + <div style={{ backgroundColor: "#f4f4f4" }}> + <Principal> + <BreadCrumbsDiv style={{ margin: "15px 2%", }}> + <StyledBreadCrumbs> + <Link to="/">Página Inicial</Link> + <span>Busca</span> + </StyledBreadCrumbs> + </BreadCrumbsDiv> + + <div style={{ margin: "15px 2%", }}> + <HeaderFilters elevation={4} square> + <Grid container spacing={0} style={{ height: "100%" }}> + <Grid item xs style={{ display: "flex", flexDirection: "column", justifyContent: "center", paddingLeft: 20 }}> + <div style={{ marginRight: 5, marginTop: 15 }}> + <div className="textInfo"> + <span style={{ fontWeight: "bold" }}> + MOSTRAR </span> + </div> + <Dropdown options={options} value={optionResult} + onChange={(e) => { + setIsLoading(true); + currOption = e.value; + history.push(`/busca?query=${state.search.query}&search_class=${currOption}`) + setOption(currOption); + // collectStuff(currOption, ""); + }} + placeholder="Selecione um tipo" + /> + </div> + </Grid> + + { + optionResult === "User" ? null : + <Grid item xs style={{ display: "flex", flexDirection: "column", justifyContent: "center", paddingRight: 20, }}> + <div style={{ marginLeft: 5, marginTop: 15 }}> + <div className="textInfo"> + <span style={{ fontWeight: "bold" }}> + ORDENAR POR + </span> + </div> + <Dropdown options={ordenar} value={currOrder} onChange={(e) => { + order = e.value; + setCurrOrder(e.label) + collectStuff(optionResult, currFilter); + }} + placeholder="Selecione uma opção" + /> + </div> + </Grid> + } + <Grid item xs={12}> + <div style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}> + <div style={{ textAlign: "center", paddingTop: 10, fontWeight: "bolder" }}> + Exibindo {showingResults === 0 ? 0 : showingResults} resultados de {totalResults} encontrados </div> - <Dropdown options={options} value={optionResult} - onChange={(e) => { - setIsLoading(true); - currOption = e.value; - history.push(`/busca?query=${state.search.query}&search_class=${currOption}`) - setOption(currOption); - // collectStuff(currOption, ""); - }} - placeholder="Selecione um tipo" - /> - </div> + </div> + </Grid> + </Grid> + </HeaderFilters> + + { + isloading ? <LoadingSpinner text="Carregando..." /> : + optionResult === "Collection" ? ( + resultsCollection.length >= 1 ? + <GridBuscaCollection container direction="row" spacing={2}> + <Grid item xs> + <Grid container justify="center" alignItems="center" spacing={2}> + {resultsCollection.map((card) => ( + <Grid item xs key={card.id}> + <CollectionCardFunction + name={card.name} + tags={card.tags} + rating={card.review_average} + id={card.id} + author={card.owner ? card.owner.name : ""} + description={card.description} + thumbnails={card.items_thumbnails} + avatar={card.owner ? card.owner.avatar : ""} + likeCount={card.likes_count} + followed={card.followed} + liked={card.liked} + collections={card.collection_items} + authorID={card.owner.id} + /> + + </Grid> + ))} + </Grid> + <div style={{ display: "flex", flexDirection: "row", justifyContent: "center", }}> + <button + style={{ + height: 36, backgroundColor: "#ff7f00", marginBottom: 50, marginTop: 50, fontSize: 14, + color: "white", borderRadius: 4, border: "none", + }} + onClick={() => { + setLoadingMoreData(true); + setResultsPerPage(resultsPerPage + 12) + }} + > + { + loadingMoreData ? <CircularProgress size={24} color="inherit" /> : "Carregar mais 12" + } + </button> + </div> + </Grid> + </GridBuscaCollection> : + <Grid container direction="row" justify="center" alignItems="center"> + <Grid item> + <img src={ColecaoVazia} alt="coleção vazia" /> + </Grid> + </Grid> + + ) : + + optionResult === "LearningObject" ? ( + resultsResource.length >= 1 ? + <GridBuscaResource container spacing={2}> + <Grid item xs={12} md={2}> + <Grid container > + <Grid item xs={12}> + <Paper elevation={4} square> + <SearchExpansionPanel onChange={collectStuff} onFiltering={isFiltering} /> + </Paper> + </Grid> + </Grid> + </Grid> + <Grid item xs> + <Grid container justify="center" spacing={3} alignItems="center" > + {resultsResource.map((card) => ( + <Grid item xs={12} sm={6} md={4} lg={3} key={card.id}> + <ResourceCardFunction + avatar={card.publisher ? card.publisher.avatar : ""} + id={card.id} + thumbnail={card.thumbnail} + type={card.object_type ? card.object_type : "Outros"} + title={card.name} + published={card.state === "published" ? true : false} + likeCount={card.likes_count} + liked={card.liked} + rating={card.review_average} + author={card.author} + tags={card.educational_stages} + href={"/recurso/" + card.id} + downloadableLink={card.default_attachment_location} + /> </Grid> - + ))} + </Grid> + <div + style={{ + display: "flex", + flexDirection: "row", + justifyContent: "center", + }} + > + <button + style={{ + height: 36, + backgroundColor: "#ff7f00", + marginBottom: 50, + marginTop: 50, + fontSize: 14, + color: "white", + borderRadius: 4, + border: "none", + }} + onClick={() => { + setLoadingMoreData(true); + setResultsPerPage(resultsPerPage + 12) + // collectStuff("LearningObject", ""); + }} + > { - optionResult === "User" ? null : - <Grid item xs style={{ display: "flex", flexDirection: "column", justifyContent: "center", paddingRight: 20, }}> - <div style={{ marginLeft: 5, marginTop: 15 }}> - <div className="textInfo"> - <span style={{ fontWeight: "bold" }}> - ORDENAR POR - </span> - </div> - <Dropdown options={ordenar} value={currOrder} onChange={(e) => { - order = e.value; - setCurrOrder(e.label) - collectStuff(optionResult, currFilter); - }} - placeholder="Selecione uma opção" - /> - </div> - </Grid> + loadingMoreData ? <CircularProgress size={24} color="inherit" /> : "Carregar mais 12" } - <Grid item xs={12}> - <div style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}> - <div style={{ textAlign: "center", paddingTop: 10, fontWeight: "bolder" }}> - Exibindo {showingResults === 0 ? 0 : showingResults} resultados de {totalResults} encontrados - </div> - </div> + </button> + </div> + </Grid> + </GridBuscaResource> + + : + + <GridBuscaResource container spacing={2}> + <Grid item xs={12} md={2}> + <Grid container > + <Grid item xs={12}> + <Paper elevation={4} square> + <SearchExpansionPanel onChange={collectStuff} onFiltering={isFiltering} /> + </Paper> + </Grid> + </Grid> + </Grid> + <Grid item xs={12} md={10}> + <Grid container direction="row" justify="center" alignItems="center" style={{height: "100%", width:"100%" }}> + <Grid> + <img src={RecursoVazio} alt="coleção vazia"/> + </Grid> + </Grid> + </Grid> + </GridBuscaResource> + ) : + optionResult === "User" && ( + <GridBuscaUser container spacing={2}> + <Grid item xs > + <Grid container spacing={2} justify="center" alignItems="center"> + {resultsUser.map((card) => ( + <Grid item xs key={card.id}> + <ContactCard + name={card.name} + avatar={card.avatar ? apiDomain + card.avatar : null} + cover={card.cover ? apiDomain + card.cover : null} + numCollections={card.collections_count} + numLearningObjects={card.learning_objects_count} + follow_count={card.follows_count} + followed={card.followed || null} + followerID={card.id} + href={'/usuario-publico/' + card.id} + /> </Grid> + ))} </Grid> - </HeaderFilters> - - { - isloading ? <LoadingSpinner text="Carregando..." /> : - optionResult === "Collection" ? ( - resultsCollection.length >= 1 ? - <GridBuscaCollection container direction="row" spacing={2}> - <Grid item xs> - <Grid container justify="center" alignItems="center" spacing={2}> - {resultsCollection.map((card) => ( - <Grid item xs key={card.id}> - <CollectionCardFunction - name={card.name} - tags={card.tags} - rating={card.review_average} - id={card.id} - author={card.owner ? card.owner.name : ""} - description={card.description} - thumbnails={card.items_thumbnails} - avatar={card.owner ? card.owner.avatar : ""} - likeCount={card.likes_count} - followed={card.followed} - liked={card.liked} - collections={card.collection_items} - authorID={card.owner.id} - /> - - </Grid> - ))} - </Grid> - <div style={{ display: "flex", flexDirection: "row", justifyContent: "center", }}> - <button - style={{ - height: 36, backgroundColor: "#ff7f00", marginBottom: 50, marginTop: 50, fontSize: 14, - color: "white", borderRadius: 4, border: "none", - }} - onClick={() => { - setLoadingMoreData(true); - setResultsPerPage(resultsPerPage + 12) - // collectStuff("Collection", ""); - }} - > - { - loadingMoreData ? <CircularProgress size={24} color="inherit" /> : "Carregar mais 12" - } - </button> - </div> - </Grid> - </GridBuscaCollection> : - <Grid container direction="row" justify="center" alignItems="center"> - <Grid item> - <img src={ColecaoVazia} alt="coleção vazia" /> - </Grid> - </Grid> - - ) : - - optionResult === "LearningObject" ? ( - resultsResource.length >= 1 ? - <GridBuscaResource container spacing={2}> - <Grid item xs={12} md={2}> - <Grid container > - <Grid item xs={12}> - <Paper elevation={4} square> - <SearchExpansionPanel onChange={collectStuff} onFiltering={isFiltering} /> - </Paper> - </Grid> - </Grid> - </Grid> - <Grid item xs> - <Grid container justify="center" spacing={3} alignItems="center" > - {resultsResource.map((card) => ( - <Grid item xs={12} sm={6} md={4} lg={3} key={card.id}> - <ResourceCardFunction - avatar={card.publisher ? card.publisher.avatar : ""} - id={card.id} - thumbnail={card.thumbnail} - type={card.object_type ? card.object_type : "Outros"} - title={card.name} - published={card.state === "published" ? true : false} - likeCount={card.likes_count} - liked={card.liked} - rating={card.review_average} - author={card.author} - tags={card.educational_stages} - href={"/recurso/" + card.id} - downloadableLink={card.default_attachment_location} - /> - </Grid> - ))} - </Grid> - <div - style={{ - display: "flex", - flexDirection: "row", - justifyContent: "center", - }} - > - <button - style={{ - height: 36, - backgroundColor: "#ff7f00", - marginBottom: 50, - marginTop: 50, - fontSize: 14, - color: "white", - borderRadius: 4, - border: "none", - }} - onClick={() => { - setLoadingMoreData(true); - setResultsPerPage(resultsPerPage + 12) - // collectStuff("LearningObject", ""); - }} - > - { - loadingMoreData ? <CircularProgress size={24} color="inherit" /> : "Carregar mais 12" - } - </button> - </div> - </Grid> - </GridBuscaResource> : - <Grid container direction="row" justify="center" alignItems="center"> - <Grid item> - <img src={RecursoVazio} alt="recurso vazio" /> - </Grid> - </Grid> - ) : - optionResult === "User" && ( - <GridBuscaUser container spacing={2}> - <Grid item xs > - <Grid container spacing={2} justify="center" alignItems="center"> - {resultsUser.map((card) => ( - <Grid item xs key={card.id}> - <ContactCard - name={card.name} - avatar={card.avatar ? apiDomain + card.avatar : null} - cover={card.cover ? apiDomain + card.cover : null} - numCollections={card.collections_count} - numLearningObjects={card.learning_objects_count} - follow_count={card.follows_count} - followed={card.followed || null} - followerID={card.id} - href={'/usuario-publico/' + card.id} - /> - </Grid> - ))} - </Grid> - <div - style={{ - display: "flex", - flexDirection: "row", - justifyContent: "center", - }} - > - <button - style={{ - height: 36, - backgroundColor: "#ff7f00", - marginBottom: 50, - marginTop: 50, - fontSize: 14, - color: "white", - borderRadius: 4, - border: "none", - }} - onClick={() => { - setLoadingMoreData(true); - setResultsPerPage(resultsPerPage + 12) - // collectStuff("User", ""); - }} - > - { - loadingMoreData ? <CircularProgress color="inherit" size={24} /> : "Carregar mais 12" - } - </button> - </div> - </Grid> - </GridBuscaUser> - ) - } - </div> - </Principal> + <div + style={{ + display: "flex", + flexDirection: "row", + justifyContent: "center", + }} + > + <button + style={{ + height: 36, + backgroundColor: "#ff7f00", + marginBottom: 50, + marginTop: 50, + fontSize: 14, + color: "white", + borderRadius: 4, + border: "none", + }} + onClick={() => { + setLoadingMoreData(true); + setResultsPerPage(resultsPerPage + 12) + // collectStuff("User", ""); + }} + > + { + loadingMoreData ? <CircularProgress color="inherit" size={24} /> : "Carregar mais 12" + } + </button> + </div> + </Grid> + </GridBuscaUser> + ) + } </div> - ); + </Principal> + </div> + ); } const GridBuscaCollection = styled(Grid)`