Proyectos de Subversion LeadersLinked - SPA

import React, { useState, useRef, useEffect } from "react";

import { axios, jsonToParams } from "../../utils";

import { Col, Container, Row } from "react-bootstrap";

import { useHistory, useLocation } from "react-router-dom";

import styled from "styled-components";

import SearchIcon from "@mui/icons-material/Search";

import Spinner from "../../components/UI/Spinner";

import SearchItem from "../../components/search/SearchItem";

import Input from "../../components/UI/Input";

import EmptySection from "../../components/UI/EmptySection";

import PaginationComponent from "../../components/UI/PaginationComponent";

import FiltersSidebar from "../../components/search/FiltersSidebar";

import CategoryFilter from "../../components/search/CategoryFilter";

import LocationFilter from "../../components/search/LocationFilter";

const StyledSearch = styled(Input)`

  background-color: var(--bg-color);

`;

const SearchPage = () => {

  const [entities, setEntities] = useState([]);

  const [loading, setLoading] = useState(true);

  const [category, setCategory] = useState("user");

  const [entity, setEntity] = useState("");

  const [currentPage, setCurrentPage] = useState(1);

  const [pages, setPages] = useState(1);

  const activeFilters = useRef([]);

  const addressKeys = useRef([]);

  const { search, pathname } = useLocation();

  const history = useHistory();

  const params = new URLSearchParams(search);

  const keyword = params.get("keyword");

  const loadEntities = async (page = 1, keyword = "", category = "user") => {

    setLoading(true);

    setCurrentPage(page);

    const urlParams = { page, keyword };

    addressKeys.current.forEach(({ name, type }) => {

      urlParams[type] = name;

    });

    activeFilters.current.forEach(({ name, value }) => {

      urlParams[name] = value;

    });

    await axios

      .get(`/search/entity/${category}?${jsonToParams(urlParams)}`)

      .then((response) => {

        const { success, data } = response.data;

        if (success) {

          setEntities(data.current.items);

          setPages(data.total.pages);

        }

      });

    setLoading(false);

  };

  const onChangePageHandler = (currentPage) => {

    setCurrentPage(currentPage);

  };

  const getAddressHandler = (addresObject) => {

    const { address_components } = addresObject;

    if (address_components) {

      addressKeys.current = [];

      address_components.map((address_component) => {

        const address_component_name = address_component.long_name;

        const address_component_type = address_component.types[0];

        switch (address_component_type) {

          case "route":

            addressKeys.current = [

              ...addressKeys.current,

              { type: "route", name: address_component_name },

            ];

            break;

          case "sublocality":

            addressKeys.current = [

              ...addressKeys.current,

              { type: "sublocality", name: address_component_name },

            ];

            break;

          case "locality":

            addressKeys.current = [

              ...addressKeys.current,

              { type: "locality", name: address_component_name },

            ];

            break;

          case "administrative_area_level_2":

            addressKeys.current = [

              ...addressKeys.current,

              {

                type: "administrative_area_level_2",

                name: address_component_name,

              },

            ];

            break;

          case "administrative_area_level_1":

            addressKeys.current = [

              ...addressKeys.current,

              {

                type: "administrative_area_level_1",

                name: address_component_name,

              },

            ];

            break;

          case "country":

            addressKeys.current = [

              ...addressKeys.current,

              { type: "country", name: address_component_name },

            ];

            break;

          case "postal_code":

            addressKeys.current = [

              ...addressKeys.current,

              { type: "postal_code", name: address_component_name },

            ];

            break;

          default:

            break;

        }

      });

      loadEntities();

    } else {

      if (addressKeys.current.length) {

        loadEntities();

      }

    }

  };

  const onSearch = (e) => {

    if (e.key !== "Enter") {

      return;

    }

    history.push({ pathname, search: `?keyword=${entity}` });

  };

  const changeCategory = (newCategory) => {

    const urlParams = { keyword };

    activeFilters.current.forEach(({ name, value }) => {

      urlParams[name] = value;

    });

    setCategory(newCategory);

    history.push(`/search/entity/${newCategory}?${jsonToParams(urlParams)}`);

  };

  useEffect(() => {

    loadEntities(currentPage, keyword, category);

    setEntity(keyword);

    return () => {

      setCategory("user");

      setEntity("");

      activeFilters.current = [];

      addressKeys.current = [];

    };

  }, [keyword, category, currentPage]);

  return (

    <>

      <Container as="main">

        <StyledSearch

          icon={SearchIcon}

          onKeyDown={onSearch}

          onChange={(e) => setEntity(e.target.value)}

          value={entity}

        />

        <Row className="mt-3">

          <Col as="aside" md="4">

            <FiltersSidebar>

              <CategoryFilter onChange={changeCategory} />

              <LocationFilter onChange={getAddressHandler} />

            </FiltersSidebar>

          </Col>

          <Col as="section" md="8">

            <div className="posts-section">

              {loading && <Spinner />}

              {entities.length ? (

                entities.map((entity) => (

                  <SearchItem

                    key={entity.id}

                    onChangePage={onChangePageHandler}

                    {...entity}

                  />

                ))

              ) : (

                <EmptySection message="No hay resultados" />

              )}

            </div>

            <PaginationComponent

              pages={pages}

              currentActivePage={currentPage}

              onChangePage={loadEntities}

              isRow

            />

          </Col>

        </Row>

      </Container>

    </>

  );

};

export default SearchPage;