From beeaf7d074eb14abf9a2e17dbd0f0d9a0cbb039a Mon Sep 17 00:00:00 2001
From: mrp19 <mrp19.ufpr.br>
Date: Fri, 4 Dec 2020 14:10:02 -0300
Subject: [PATCH] fix search page
---
src/Pages/Search.js | 343 +++++++++++++++++++++++---------------------
1 file changed, 182 insertions(+), 161 deletions(-)
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index f90e413e..8fbba1a8 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -18,6 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useEffect, useState, useContext } from "react";
import axios from "axios";
+import {apiDomain} from '../env';
import { Link } from "react-router-dom";
import styled from "styled-components";
import Paper from "@material-ui/core/Paper";
@@ -34,12 +35,15 @@ import { Grid } from "@material-ui/core";
import Dropdown from "react-dropdown";
import "react-dropdown/style.css";
import SearchExpansionPanel from "../Components/SearchExpansionPanel/SearchExpansionPanel";
-import ResourceCard from "../Components/ResourceCard";
+import ResourceCardFunction from "../Components/ResourceCardFunction";
import CollectionCardFunction from "../Components/CollectionCardFunction";
+import ContactCard from "../Components/ContactCard";
export default function Search(props) {
const { state, dispatch } = useContext(Store);
- const [results, setResults] = useState([]);
+ const [resultsResource, setResultsResource] = useState([]);
+ const [resultsCollection, setResultsCollection] = useState([]);
+ const [resultsUser, setResultsUser] = useState([]);
const [page] = useState(0);
const [resultsPerPage, setResultsPerPage] = useState(6);
const [order] = useState("score");
@@ -48,20 +52,23 @@ export default function Search(props) {
{ label: "Coleções", value: "Collection" },
{ label: "Usuários", value: "User" },
]);
- const [option, setOption] = useState(state.search.class);
- const ordenar = [
+ const [ordenar] = useState([
{ label: "Mais Estrelas" },
{ label: "Mais Relevante" },
{ label: "Mais Baixados" },
{ label: "Mais Favoritados" },
{ label: "Mais Recentes" },
{ label: "Ordem Alfabética" },
- ];
+ ]);
- const [defaultOption, setDefaultOption] = useState(options[0]);
- const [defaultOrder, setDefaultOrder] = useState(ordenar[0]);
+ const [option, setOption] = useState(
+ new URLSearchParams(window.location.search).get("search_class")
+ );
+ const [optionResult, setOptionResult] = useState(option);
+ console.log(option);
+ console.log(state.search.class);
- const collectStuff = (tipoBusca = state.search.class) => {
+ const collectStuff = (tipoBusca) => {
console.log(tipoBusca);
axios
@@ -69,9 +76,12 @@ export default function Search(props) {
`${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}&search_class=${tipoBusca}`
)
.then((res) => {
- setResults(res.data);
- console.log(res.data);
- console.log(tipoBusca);
+ if (tipoBusca === "LearningObject") setResultsResource(res.data);
+ else if (tipoBusca === "Collection") setResultsCollection(res.data);
+ else if (tipoBusca === "User") setResultsUser(res.data);
+ setOptionResult(tipoBusca);
+ console.log(res.data);
+ console.log(tipoBusca);
});
};
@@ -103,7 +113,7 @@ export default function Search(props) {
}, []);
useEffect(() => {
- collectStuff();
+ collectStuff(option);
}, [resultsPerPage]);
return (
@@ -118,7 +128,7 @@ export default function Search(props) {
{results.map((res) => (
<li key={res.id}> {res.name} </li>
))}
- </ul>
+ </ul>
)}
{state.search.class === "Collection" && (
<ul>
@@ -218,7 +228,6 @@ export default function Search(props) {
onChange={() => {
collectStuff(ordenar.label);
}}
- value={defaultOrder}
placeholder="Select an order "
/>
</div>
@@ -226,162 +235,174 @@ export default function Search(props) {
</Grid>
</HeaderFilters>
- {(() => {
- if (option === "Collection") {
- return (
- <GridBusca container spacing={2}>
- <Grid item md={12} xs={12}>
- <Grid container spacing={2}>
- {results.map(card => (
- <Grid item md={4} xs={6} key={card.id}>
- <CollectionCardFunction
- name={card.name}
- rating={card.score}
- author={card.owner.name}
- description={card.description}
- thumbnails={card.items_thumbnails}
- avatar={card.owner.avatar}
- />
- </Grid>
- ))}
+ {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}
+ rating={card.score}
+ author={card.owner.name}
+ description={card.description}
+ thumbnails={card.items_thumbnails}
+ avatar={card.owner.avatar}
+ />
</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={() => setResultsPerPage(resultsPerPage + 12)}
- >
- Carregar mais 12
- </button>
- </div>
- </Grid>
- </GridBusca>
- );
- }
- if (option === "LearningObject") {
- return (
- <GridBusca container spacing={2}>
- <Grid item md={3} xs={12}>
- <Paper elevation={4} square>
- <SearchExpansionPanel />
- </Paper>
- </Grid>
- <Grid item md={9} xs={12}>
- <Grid container spacing={2}>
- {results.map((card) => (
- <Grid item md={4} xs={6} key={card.id}>
- <ResourceCard
- name={card.name}
- rating={card.score}
- type={card.object_type}
- description={card.description}
- thumbnail={card.thumbnail}
- author={card.author}
- avatar={card.publisher.avatar}
- />
- </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={() => setResultsPerPage(resultsPerPage + 12)}
+ >
+ Carregar mais 12
+ </button>
+ </div>
+ </Grid>
+ </GridBuscaCollection>
+ )}
+ {optionResult === "LearningObject" && (
+ <GridBuscaResource container spacing={2}>
+ <Grid item md={3} xs={12}>
+ <Paper elevation={4} square>
+ <SearchExpansionPanel />
+ </Paper>
+ </Grid>
+ <Grid item md={9} xs={12}>
+ <Grid container spacing={2}>
+ {resultsResource.map((card) => (
+ <Grid item md={4} xs={6} key={card.id}>
+ <ResourceCardFunction
+ name={card.name}
+ rating={card.score}
+ type={card.object_type}
+ description={card.description}
+ thumbnail={card.thumbnail}
+ author={card.author}
+ avatar={card.publisher.avatar}
+ />
</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={() => setResultsPerPage(resultsPerPage + 12)}
- >
- Carregar mais 12
- </button>
- </div>
- </Grid>
- </GridBusca>
- );
- }
- if (option === "User") {
- return (
- <GridBusca container spacing={2}>
- <Grid item md={12} xs={12}>
- <Grid container spacing={2}>
- {/* {results.map((card) => (
- <Grid item md={4} xs={6} key={card.id}>
- <ResourceCard
- name={card.name}
- rating={card.score}
- type={card.object_type}
- description={card.description}
- thumbnail={card.thumbnail}
- author={card.author}
- avatar={card.publisher.avatar}
- />
- </Grid>
- ))} */}
- <ul>
- {results.map((res) => (
- <li key={res.id}> {res.name} </li>
- ))}
- </ul>
+ ))}
+ </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={() => setResultsPerPage(resultsPerPage + 12)}
+ >
+ 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>
- <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={() => setResultsPerPage(resultsPerPage + 6)}
- >
- Carregar mais 6
- </button>
- </div>
- </Grid>
- </GridBusca>
- );
- }
- })()}
+ ))}
+ </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={() => setResultsPerPage(resultsPerPage + 6)}
+ >
+ Carregar mais 6
+ </button>
+ </div>
+ </Grid>
+ </GridBuscaUser>
+ )}
</Principal>
</div>
);
}
-const GridBusca = styled(Grid)`
+const GridBuscaCollection = styled(Grid)`
+ color: #666;
+ background-color: green;
+
+ h4 {
+ padding: 0 15px;
+ font-size: 18px;
+ margin-block: 10px;
+ text-transform: uppercase;
+ }
+`;
+const GridBuscaResource = styled(Grid)`
+ color: #666;
+ background-color: red;
+
+ h4 {
+ padding: 0 15px;
+ font-size: 18px;
+ margin-block: 10px;
+ text-transform: uppercase;
+ }
+`;
+const GridBuscaUser = styled(Grid)`
color: #666;
+ background-color: blue;
h4 {
padding: 0 15px;
--
GitLab