Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */

import React from 'react'

import { useState, useRef, useEffect } from 'react'

import { useLocation } from 'react-router-dom'

import { useForm } from 'react-hook-form'

import { FaPlus, FaMinus } from 'react-icons/fa'

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'

import UbicationInput from '../../../shared/ubication-input/UbicationInput'

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 [displayFilters, setDisplayFilters] = useState(false)

  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)

    const 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">

              <form

                name="form-filter"

                id="form-filter"

                ref={formRef}

                onSubmit={(e) => {

                  e.preventDefault()

                }}

              >

                <div className="py-2 d-flex" style={{ gap: '10px' }}>

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

                  <div className="show_filters">

                    {

                      displayFilters

                        ? <FaMinus className="cursor-pointer" onClick={() => setDisplayFilters(!displayFilters)} />

                        : <FaPlus className="cursor-pointer" onClick={() => setDisplayFilters(!displayFilters)} />

                    }

                  </div>

                </div>

                <div className={`filter-secs border-gray border-radius ${displayFilters ? 'show_filters' : 'hidden_filters'}`}>

                  <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>

                        {filters.allowSearchCompany &&

                          <li>

                            <a

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

                              href="#"

                              onClick={(e) => {

                                e.preventDefault

                                setSearchType('job')

                              }}

                            >

                              Trabajos

                            </a>

                          </li>

                        }

                        {filters.allowSearchCompany &&

                          <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>

                <div className={displayFilters ? 'show_filters' : 'hidden_filters'}>

                  {(searchType === 'user' && filters.allowViewConnectionLevelFilter) &&

                    <Filters

                      filters={filters}

                      searchType={searchType}

                      onCheck={onCheckHandler}

                      onUncheckAll={onUncheckAllHandler}

                      register={register}

                    />

                  }

                </div>

                <div className={`filter-secs border-gray border-radius ${displayFilters ? 'show_filters' : 'hidden_filters'}`}>

                  <div className="filter-heading">

                    <h3 className="text-dark font-weight-bold">Ubicación</h3>

                  </div>

                  <div

                    className="container mb-2"

                  >

                    <UbicationInput

                      onGetAddress={getAddressHandler}

                      placeholder="Buscar un lugar"

                    />

                  </div>

                </div>

              </form>

              <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>

              <div className="right-sidebar"></div>

            </div>

          </div>

        </div>

      </main>

    </div>

  )

}

export default MainSection