Skip to content
Snippets Groups Projects
Commit cc133d53 authored by lfr20's avatar lfr20
Browse files

Passed params to collection card + add function to save tokens

parent 2f21c90b
No related branches found
No related tags found
6 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!39Update admin system,!32Homologa,!31Fix console error,!28Training materials
Hide whitespace changes
Inline Side-by-side
Showing
with 244 additions and 234 deletions
src/Pages/Search.js
+ 244
− 234
View file @ cc133d53
......@@ -39,6 +39,10 @@ import ResourceCardFunction from "../Components/ResourceCardFunction";
import CollectionCardFunction from "../Components/CollectionCardFunction";
import ContactCard from "../Components/ContactCard";
import CircularProgress from '@material-ui/core/CircularProgress';
import { getAxiosConfig } from '../Components/HelperFunctions/getAxiosConfig';
import { saveHeaders } from '../Components/HelperFunctions/saveTokens';
let order = "review_average";
let currFilter = "";
......@@ -75,179 +79,247 @@ export default function Search(props) {
const [optionResult, setOptionResult] = useState(option);
const collectStuff = (tipoBusca, filtro) => {
if(!loadingMoreData) // this line prevents resetting filter when loading more data
if (!loadingMoreData) // this line prevents resetting filter when loading more data
currFilter = filtro;
if (filtro)
setIsFiltering(true);
console.log(currFilter)
console.log(`${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}${currFilter ? currFilter : ""}&search_class=${tipoBusca}`)
axios
.get(
`${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}${currFilter ? currFilter : ""}&search_class=${tipoBusca}`
)
.then((res) => {
if (tipoBusca === "LearningObject") setResultsResource(res.data);
else if (tipoBusca === "Collection") setResultsCollection(res.data);
else if (tipoBusca === "User") setResultsUser(res.data);
setOptionResult(tipoBusca);
dispatch({
type: "SAVE_SEARCH",
newSearch: {
query: state.search.query,
class: tipoBusca,
},
});
console.log(res);
setTotalResults(res.headers["x-total-count"]);
setIsLoading(false);
setIsFiltering(false);
setLoadingMoreData(false);
});
};
const axiosConfig = getAxiosConfig();
console.log(axiosConfig);
axios({
method: 'get',
url: `${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}${currFilter ? currFilter : ""}&search_class=${tipoBusca}`,
headers: axiosConfig.headers
}).then(res => {
if (tipoBusca === "LearningObject") setResultsResource(res.data);
else if (tipoBusca === "Collection") setResultsCollection(res.data);
else if (tipoBusca === "User") setResultsUser(res.data);
setOptionResult(tipoBusca);
dispatch({
type: "SAVE_SEARCH",
newSearch: {
query: state.search.query,
class: tipoBusca,
},
});
setTotalResults(res.headers["x-total-count"]);
setIsLoading(false);
setIsFiltering(false);
setLoadingMoreData(false);
saveHeaders(res);
})
};
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");
console.log(searchClass);
if (state.search.query !== query || state.search.class !== searchClass) {
dispatch({
type: "SAVE_SEARCH",
newSearch: {
query: query,
class: searchClass,
},
});
}
useEffect(() => {
return () =>
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");
console.log(searchClass);
if (state.search.query !== query || state.search.class !== searchClass) {
dispatch({
type: "SAVE_SEARCH",
newSearch: {
query: query,
class: searchClass,
},
});
}
useEffect(() => {
collectStuff(option);
}, [resultsPerPage]);
return () =>
dispatch({
type: "HANDLE_SEARCH_BAR",
opened: false,
});
}, []);
useEffect(() => {
collectStuff(option);
}, [resultsPerPage]);
return (
<div style={{ backgroundColor: "#f4f4f4" }}>
<Principal>
<BreadCrumbsDiv>
<StyledBreadCrumbs>
<Link to="/">Página Inicial</Link>
<span>Busca</span>
</StyledBreadCrumbs>
</BreadCrumbsDiv>
<HeaderFilters elevation={4} square>
<Grid container spacing={0} style={{ height: "100%" }}>
<Grid
item
xs={4}
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
paddingLeft: 20,
}}
>
<div style={{ display: "flex", flexDirection: "row" }}>
<span style={{ alignSelf: "center", marginRight: 10 }}>
MOSTRAR:
return (
<div style={{ backgroundColor: "#f4f4f4" }}>
<Principal>
<BreadCrumbsDiv>
<StyledBreadCrumbs>
<Link to="/">Página Inicial</Link>
<span>Busca</span>
</StyledBreadCrumbs>
</BreadCrumbsDiv>
<HeaderFilters elevation={4} square>
<Grid container spacing={0} style={{ height: "100%" }}>
<Grid
item
xs={4}
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
paddingLeft: 20,
}}
>
<div style={{ display: "flex", flexDirection: "row" }}>
<span style={{ alignSelf: "center", marginRight: 10 }}>
MOSTRAR:
</span>
<Dropdown
options={options}
value={optionResult}
onChange={(e) => {
setIsLoading(true);
setOption(e.value);
collectStuff(e.value, "");
}}
placeholder="Select an type"
/>
</div>
</Grid>
<Grid
item
xs={4}
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
}}
>
<div>
Resultados encontrados: {totalResults}
</div>
</Grid>
{
optionResult === "User" ? null :
<Grid
item
xs={4}
<Dropdown
options={options}
value={optionResult}
onChange={(e) => {
setIsLoading(true);
setOption(e.value);
collectStuff(e.value, "");
}}
placeholder="Select an type"
/>
</div>
</Grid>
<Grid
item
xs={4}
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
}}
>
<div>
Resultados encontrados: {totalResults}
</div>
</Grid>
{
optionResult === "User" ? null :
<Grid
item
xs={4}
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
paddingRight: 20,
}}
>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
paddingRight: 20,
flexDirection: "row",
justifyContent: "end",
}}
>
<div
<span
style={{
display: "flex",
flexDirection: "row",
justifyContent: "end",
textAlign: "right",
alignSelf: "center",
marginRight: 10,
}}
>
<span
style={{
textAlign: "right",
alignSelf: "center",
marginRight: 10,
}}
>
ORDENAR POR:
ORDENAR POR:
</span>
<Dropdown
options={ordenar}
value={currOrder}
onChange={(e) => {
order = e.value;
setCurrOrder(e.label)
collectStuff(optionResult, currFilter);
}}
placeholder="Select an order "
/>
</div>
<Dropdown
options={ordenar}
value={currOrder}
onChange={(e) => {
order = e.value;
setCurrOrder(e.label)
collectStuff(optionResult, currFilter);
}}
placeholder="Select an order "
/>
</div>
</Grid>
}
</Grid>
</HeaderFilters>
{
isloading ? <LoadingSpinner text="Carregando..." /> :
optionResult === "Collection" ? (
<GridBuscaCollection container spacing={2}>
<Grid item md={12} xs={12}>
<Grid container spacing={2}>
{resultsCollection.map((card) => (
<Grid item md={4} xs={6} key={card.id}>
<CollectionCardFunction
name={card.name}
tags={card.tags}
rating={card.score}
id={card.id}
author={card.owner.name}
description={card.description}
thumbnails={card.items_thumbnails}
avatar={card.owner.avatar}
likeCount={card.likes_count}
followed={card.followed}
liked={card.liked}
collections={card.collection_items}
authorID={card.owner.id}
onRefresh={() => collectStuff("Collection", currFilter)}
/>
</Grid>
))}
</Grid>
}
</Grid>
</HeaderFilters>
<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>
) :
{
isloading ? <LoadingSpinner text="Carregando..." /> :
optionResult === "Collection" ? (
<GridBuscaCollection container spacing={2}>
<Grid item md={12} xs={12}>
optionResult === "LearningObject" ? (
<GridBuscaResource container spacing={2}>
<Grid item md={3} xs={12}>
<Paper elevation={4} square>
<SearchExpansionPanel onChange={collectStuff} onFiltering={isFiltering} />
</Paper>
</Grid>
<Grid item md={9} xs={12}>
<Grid container spacing={2}>
{resultsCollection.map((card) => (
{resultsResource.map((card) => (
<Grid item md={4} xs={6} key={card.id}>
<CollectionCardFunction
name={card.name}
rating={card.score}
<ResourceCardFunction
avatar={card.publisher.avatar}
id={card.id}
author={card.owner.name}
description={card.description}
thumbnails={card.items_thumbnails}
avatar={card.owner.avatar}
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.publisher.name}
tags={card.tags}
href={"/recurso/" + card.id}
downloadableLink={card.default_attachment_location}
/>
</Grid>
))}
......@@ -273,7 +345,7 @@ export default function Search(props) {
onClick={() => {
setLoadingMoreData(true);
setResultsPerPage(resultsPerPage + 12)
// collectStuff("Collection", "");
// collectStuff("LearningObject", "");
}}
>
{
......@@ -282,34 +354,24 @@ export default function Search(props) {
</button>
</div>
</Grid>
</GridBuscaCollection>
</GridBuscaResource>
) :
optionResult === "LearningObject" ? (
<GridBuscaResource container spacing={2}>
<Grid item md={3} xs={12}>
<Paper elevation={4} square>
<SearchExpansionPanel onChange={collectStuff} onFiltering={isFiltering} />
</Paper>
</Grid>
<Grid item md={9} xs={12}>
optionResult === "User" && (
<GridBuscaUser container spacing={2}>
<Grid item md={12} xs={12}>
<Grid container spacing={2}>
{resultsResource.map((card) => (
{resultsUser.map((card) => (
<Grid item md={4} xs={6} key={card.id}>
<ResourceCardFunction
avatar={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}
<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>
))}
......@@ -335,73 +397,21 @@ export default function Search(props) {
onClick={() => {
setLoadingMoreData(true);
setResultsPerPage(resultsPerPage + 12)
// collectStuff("LearningObject", "");
// collectStuff("User", "");
}}
>
{
loadingMoreData ? <CircularProgress size={24} color="inherit" /> : "Carregar mais 12"
loadingMoreData ? <CircularProgress color="inherit" size={24} /> : "Carregar mais 12"
}
</button>
</div>
</Grid>
</GridBuscaResource>
) :
optionResult === "User" && (
<GridBuscaUser container spacing={2}>
<Grid item md={12} xs={12}>
<Grid container spacing={2}>
{resultsUser.map((card) => (
<Grid item md={4} xs={6} 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>
)
}
</Principal>
</div>
);
</GridBuscaUser>
)
}
</Principal>
</div>
);
}
const GridBuscaCollection = styled(Grid)`
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment