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