Proyectos de Subversion LeadersLinked - Antes de SPA

import React from "react";
import { useState, useRef, useEffect } from "react";
import { useLocation } from "react-router-dom";
import { useForm } from "react-hook-form";
import { axios, jsonToParams } from "../../../utils";
import styled from "styled-components";
import Filters from "./filters/Filters";
import Spinner from "../../../shared/loading-spinner/Spinner";
import EntityTemplate from "../entity-template/EntityTemplate";
import PaginationComponent from "../../../shared/pagination/PaginationComponent";

const SpinnerStyled = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const MainSection = (props) => {
  // states
  const [entities, setEntities] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [searchType, setSearchType] = useState("user");
  const [currentPage, setCurrentPage] = useState(1);
  const [pages, setPages] = useState(1);
  // refs
  const activeFilters = useRef([]);
  const addressFilter = useRef([]);
  const formRef = useRef();
  // useLocation
  const location = useLocation();
  // props destructuring
  const { filters } = props;
  // react hook form
  const { register, setValue } = useForm();

  // getting keyword
  const locationParams = new URLSearchParams(location.search);
  const keyword = locationParams.get("keyword");
  
  useEffect(() => {
    loadEntities();
    formRef.current.reset();
    if (activeFilters.current.length) activeFilters.current = [];
  }, [searchType, keyword]);

  const onCheckHandler = (event, filterType) => {
    const checkBoxEl = event.target;
    if (checkBoxEl.checked) {
      const newActiveFilters = [
        ...activeFilters.current,
        { name: checkBoxEl.name, value: 1, type: filterType },
      ];
      activeFilters.current = newActiveFilters;
    } else {
      const newActiveFilters = activeFilters.current.filter(
        (activeFilter) => activeFilter.name !== checkBoxEl.name
      );
      activeFilters.current = newActiveFilters;
    }
    loadEntities();
  };

  const onUncheckAllHandler = (event, filterType) => {
    event.preventDefault();
    const activeFiltersToDisable = activeFilters.current.filter(
      ({ type }) => type === filterType
    );
    activeFiltersToDisable.map(({ name }) => {
      setValue(name, "");
    });

    if (activeFilters.current.length) {
      const newActiveFilters = activeFilters.current.filter(
        ({ type }) => type !== filterType
      );
      activeFilters.current = newActiveFilters;
      loadEntities();
    }
  };

  const loadEntities = async (page = 1) => {
    setLoading(true);
    setError(false);
    setCurrentPage(page)
    let urlParams = {
      page,
      keyword
    }
    addressFilter.current.forEach(({ name, type }) => {
      urlParams[type] = name
    });
    activeFilters.current.forEach(({ name, value }) => {
      urlParams[name] = value
    });
    await axios
      .get(`/search/entity/${searchType}?${jsonToParams(urlParams)}`)
      .then((response) => {
        const responseData = response.data;
        if (responseData.success) {
          setEntities(responseData.data.current.items);
          setPages(responseData.data.total.pages);
        } else {
          const newError = responseData.data;
          setError(newError);
        }
      });
    setLoading(false);
  };

  const getAddressHandler = (addresObject) => {
    const { address_components } = addresObject;
    if (address_components) {
      addressFilter.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":
            addressFilter.current = [
              ...addressFilter.current,
              { type: "route", name: address_component_name },
            ];
            break;
          case "sublocality":
            addressFilter.current = [
              ...addressFilter.current,
              { type: "sublocality", name: address_component_name },
            ];
            break;
          case "locality":
            addressFilter.current = [
              ...addressFilter.current,
              { type: "locality", name: address_component_name },
            ];
            break;
          case "administrative_area_level_2":
            addressFilter.current = [
              ...addressFilter.current,
              {
                type: "administrative_area_level_2",
                name: address_component_name,
              },
            ];
            break;
          case "administrative_area_level_1":
            addressFilter.current = [
              ...addressFilter.current,
              {
                type: "administrative_area_level_1",
                name: address_component_name,
              },
            ];
            break;
          case "country":
            addressFilter.current = [
              ...addressFilter.current,
              { type: "country", name: address_component_name },
            ];
            break;
          case "postal_code":
            addressFilter.current = [
              ...addressFilter.current,
              { type: "postal_code", name: address_component_name },
            ];
            break;
          default:
            break;
        }
      });
      loadEntities();
    } else {
      if (addressFilter.current.length) {
        addressFilter.current = [];
        loadEntities();
      }
    }
  };

  const onChangePageHandler = (currentPage) => {
    setCurrentPage(currentPage);
  };

  return (
    <div>
      <main>
        <div className="main-section">
          <div className="container">
            <div className="main-section-data">
              <div className="row">
                <div className="col-lg-3">
                  <form
                    name="form-filter"
                    id="form-filter"
                    ref={formRef}
                    onSubmit={(e) => {
                      e.preventDefault();
                    }}
                  >
                    <div className="filter-secs">
                      <div className="filter-heading m-0">
                        <h3>Buscar por</h3>
                      </div>
                      {/* <!--filter-heading end--> */}
                      <div className="paddy">
                        <div className="filter-dd">
                          <ul className="avail-checks avail-checks-search-type">
                            <li>
                              <a
                                href="#"
                                onClick={(e) => {
                                  e.preventDefault;
                                  setSearchType("user");
                                }}
                                className={searchType && searchType === 'user' ? 'search-item-selected' : ''}
                              >
                                Personas
                              </a>
                            </li>
                            <li>
                              <a
                                className={searchType && searchType === 'job' ? 'search-item-selected' : ''}
                                href="#"
                                onClick={(e) => {
                                  e.preventDefault;
                                  setSearchType("job");
                                }}
                              >
                                Trabajos
                              </a>
                            </li>
                            <li>
                              <a
                                className={searchType && searchType === 'company' ? 'search-item-selected' : ''}
                                href="#"
                                onClick={(e) => {
                                  e.preventDefault;
                                  // searchType.current = "company";
                                  setSearchType("company");
                                }}
                              >
                                Empresas
                              </a>
                            </li>
                            <li>
                              <a
                                className={searchType && searchType === 'group' ? 'search-item-selected' : ''}
                                href="#"
                                onClick={(e) => {
                                  e.preventDefault;
                                  setSearchType("group");
                                }}
                              >
                                Grupos
                              </a>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    {/* <!--filter-secs end--> */}
                    <div className="filter-secs">
                      <div className="filter-heading">
                        <h3>Filtros</h3>
                      </div>
                      {/* <!--filter-heading end--> */}
                      <Filters
                        filters={filters}
                        searchType={searchType}
                        onCheck={onCheckHandler}
                        onUncheckAll={onUncheckAllHandler}
                        register={register}
                        onGetAddress={getAddressHandler}
                      />
                    </div>
                  </form>
                  {/* <!--filter-secs end--> */}
                </div>
                <div className="col-lg-6">
                  <div className="main-ws-sec">
                    <div className="posts-section">
                      {/* <!--post-bar end--> */}
                      {loading ? (
                        <SpinnerStyled>
                          <Spinner />
                        </SpinnerStyled>
                      ) : error ? (
                        <div>{error}</div>
                      ) : entities && entities.length ? (
                        entities.map((entity) => (
                          <EntityTemplate
                            entity={entity}
                            key={entity.id}
                            onChangePage={onChangePageHandler}
                          />
                        ))
                      ) : (
                        <div
                          style={{
                            display: "flex",
                            justifyContent: "center",
                            alignItems: "center",
                            padding: "1rem 0 3rem 0",
                          }}
                        >
                          No hay resultados
                        </div>
                      )}
                    </div>
                    <PaginationComponent
                      pages={pages}
                      currentActivePage={currentPage}
                      onChangePage={loadEntities}
                    />
                    {/* <div className="process-comm" id="paginator-process-comm">
                      <div className="spinner">
                        <div className="bounce1"></div>
                        <div className="bounce2"></div>
                        <div className="bounce3"></div>
                      </div>
                    </div> */}
                    {/* <!--process-comm end-->
              <!--posts-section end--> */}
                  </div>
                  {/* <!--main-ws-sec end--> */}
                </div>
                <div className="col-lg-3">
                  <div className="right-sidebar"></div>
                </div>
              </div>
            </div>
            {/* <!-- main-section-data end--> */}
          </div>
        </div>
      </main>
    </div>
  );
};

export default MainSection;