Search.js

/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana

This file is part of Plataforma Integrada MEC.

Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

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, { useEffect, useState, useContext } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import styled from "styled-components";
import Paper from "@material-ui/core/Paper";

// import ResourceCard from '../Components/ResourceCard'
// import CollectionCard from '../Components/CollectionCard'
// import UserCard from '../Components/UserCard'
import Breadcrumbs from "@material-ui/core/Breadcrumbs";
import { apiUrl } from "../env";
import "./Styles/Home.css";
import { Store } from "../Store";
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";

export default function Search(props) {
  const { state, dispatch } = useContext(Store);
  const [results, setResults] = useState([]);
  const [page] = useState(0);
  const [resultsPerPage, setResultsPerPage] = useState(12);
  const [order] = useState("score");
  const options = [
    { value: "LearningObject", label: "Recursos" },
    { value: "Collection", label: "Coleções" },
    { value: "User", label: "Usuários" },
  ];
  const ordenar = [
    { 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 collectStuff = (tipoBusca = state.search.class, option = undefined) => {
    axios
      .get(
        `${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}&search_class=${tipoBusca}`
      )
      .then((res) => {
        setResults(res.data);
        if (option != undefined) {
          let aux = undefined;
          for (let i = 0; i < options.length; i = i + 1) {
            console.log("Vamo dale0");
            if (options[i].label == option) {
              console.log("Vamo dale");
              setDefaultOption(options[i]);
            }
          }
        }
        console.log(res.data);
        console.log(tipoBusca);
      });
  };

  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,
        },
      });
    }

    return () =>
      dispatch({
        type: "HANDLE_SEARCH_BAR",
        opened: false,
      });
  }, []);

  useEffect(() => {
    collectStuff();
  }, [state.search, resultsPerPage]);

  return (
    <div style={{ backgroundColor: "#f4f4f4" }}>
      <React.Fragment>
        <h1>
          Search for {state.search.query !== "*" ? state.search.query : "all"}{" "}
          in {state.search.class}
        </h1>
        {state.search.class === "LearningObject" && (
          <ul>
            {results.map((res) => (
              <li key={res.id}> {res.name} </li>
            ))}
          </ul>
        )}
        {state.search.class === "Collection" && (
          <ul>
            {results.map((res) => (
              <li key={res.id}> {res.name} </li>
            ))}
          </ul>
        )}
        {state.search.class === "User" && (
          <ul>
            {results.map((res) => (
              <li key={res.id}> {res.name} </li>
            ))}
          </ul>
        )}
      </React.Fragment>

      <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}
                  onChange={() => {
                    collectStuff(options.value, options.label);
                  }}
                  value={defaultOption}
                  placeholder="Select an option"
                />
              </div>
            </Grid>
            <Grid
              item
              xs={4}
              style={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
              }}
            >
              <div>Número</div>
            </Grid>
            <Grid
              item
              xs={4}
              style={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                paddingRight: 20,
              }}
            >
              <div
                style={{
                  display: "flex",
                  flexDirection: "row",
                  justifyContent: "end",
                }}
              >
                <span
                  style={{
                    textAlign: "right",
                    alignSelf: "center",
                    marginRight: 10,
                  }}
                >
                  ORDENAR POR:{" "}
                </span>
                <Dropdown
                  options={ordenar}
                  onChange={() => {
                    collectStuff(ordenar.label);
                  }}
                  value={defaultOrder}
                  placeholder="Select an order "
                />
              </div>
            </Grid>
          </Grid>
        </HeaderFilters>
        <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>
        </GridBusca>
      </Principal>
    </div>
  );
}

const GridBusca = styled(Grid)`
  color: #666;

  h4 {
    padding: 0 15px;
    font-size: 18px;
    margin-block: 10px;
    text-transform: uppercase;
  }
`;

const HeaderFilters = styled(Paper)`
  height: 60px;
  text-align: center;
  background-color: #fff;
  margin-bottom: 30px;
  color: #666;
`;

const StyledBreadCrumbs = styled(Breadcrumbs)`
  display: flex;
  justify-content: flex-start;
  max-width: 1170px;
  span {
    color: #a5a5a5;
  }
  a {
    color: #00bcd4;
    text-decoration: none;
  }
`;

const BreadCrumbsDiv = styled.div`
  padding: 10px;
  display: flex;
`;

const Principal = styled.div`
  width: 1170px;
  margin-inline: auto;
`;