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();

                    }}

                  >

                    <h2 className="font-weight-bold search-title">Filtros</h2>

                    <div className="filter-secs border-gray border-radius">

                      <div className="filter-heading m-0">

                        <h3 className="text-dark font-weight-bold">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' : '') + ' text-dark'}

                              >

                                Personas

                              </a>

                            </li>

                            <li>

                              <a

                                className={(searchType && searchType === 'job' ? 'search-item-selected' : '') + ' text-dark'}

                                href="#"

                                onClick={(e) => {

                                  e.preventDefault;

                                  setSearchType("job");

                                }}

                              >

                                Trabajos

                              </a>

                            </li>

                            <li>

                              <a

                                className={(searchType && searchType === 'company' ? 'search-item-selected' : '') + ' text-dark'}

                                href="#"

                                onClick={(e) => {

                                  e.preventDefault;

                                  // searchType.current = "company";

                                  setSearchType("company");

                                }}

                              >

                                Empresas

                              </a>

                            </li>

                            <li>

                              <a

                                className={(searchType && searchType === 'group' ? 'search-item-selected' : '') + ' text-dark'}

                                href="#"

                                onClick={(e) => {

                                  e.preventDefault;

                                  setSearchType("group");

                                }}

                              >

                                Grupos

                              </a>

                            </li>

                          </ul>

                        </div>

                      </div>

                    </div>

                    {/* <!--filter-secs end--> */}

                    <div className="filter-secs border-gray border-radius">

                      <div className="filter-heading">

                        <h3 className="text-dark font-weight-bold">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;