Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5393 | Rev 6365 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 5393 Rev 6363
Línea 1... Línea -...
1 
/* eslint-disable camelcase */
 - 
 
2 
/* eslint-disable react/prop-types */
 - 
 
3 
import React, { useState, useRef, useEffect } from 'react'
 1 
import React, { useState, useRef, useEffect } from 'react'
4 
import { useLocation } from 'react-router-dom'
 2 
import { useLocation } from 'react-router-dom'
5 
import { useForm } from 'react-hook-form'
 3 
import { useForm } from 'react-hook-form'
6 
import { FaPlus, FaMinus } from 'react-icons/fa'
 - 
 
7 
import { axios, jsonToParams } from '../../../utils'
 4 
import { axios, jsonToParams } from '../../../utils'
8 
import Filters from './filters/Filters'
 - 
 
9 
import Spinner from '../../../shared/loading-spinner/Spinner'
 5 
import Spinner from '../../../shared/loading-spinner/Spinner'
10 
import EntityTemplate from '../entity-template/EntityTemplate'
 6 
import EntityTemplate from '../entity-template/EntityTemplate'
11 
import PaginationComponent from '../../../shared/pagination/PaginationComponent'
 7 
import PaginationComponent from '../../../shared/pagination/PaginationComponent'
12 
import UbicationInput from '../../../shared/ubication-input/UbicationInput'
 - 
 
13 
import EmptySection from '../../../shared/empty-section/EmptySection'
 8 
import EmptySection from '../../../shared/empty-section/EmptySection'
- 
 
 9 
import FiltersSidebar from '../../components/FiltersSidebar'
Línea 14... Línea 10...
14 
 
 10 
 
15 
const MainSection = (props) => {
 - 
 
16 
  // states
 11 
const MainSection = ({ filters }) => {
17 
  const [entities, setEntities] = useState([])
 12 
  const [entities, setEntities] = useState([])
18 
  const [loading, setLoading] = useState(true)
 - 
 
19 
  const [displayFilters, setDisplayFilters] = useState(false)
 13 
  const [loading, setLoading] = useState(true)
20 
  const [searchType, setSearchType] = useState('user')
 14 
  const [searchType, setSearchType] = useState('user')
21 
  const [currentPage, setCurrentPage] = useState(1)
 15 
  const [currentPage, setCurrentPage] = useState(1)
22 
  const [pages, setPages] = useState(1)
 16 
  const [pages, setPages] = useState(1)
23 
  // refs
 17 
 
24 
  const activeFilters = useRef([])
 18 
  const activeFilters = useRef([])
25 
  const addressFilter = useRef([])
 19 
  const addressFilter = useRef([])
26 
  const formRef = useRef()
 - 
 
- 
 
 20 
  const formRef = useRef()
27 
  // useLocation
 21 
 
28 
  const location = useLocation()
 - 
 
29 
  // props destructuring
 - 
 
30 
  const { filters } = props
 - 
 
- 
 
 22 
  const location = useLocation()
31 
  // react hook form
 23 
 
Línea 32... Línea 24...
32 
  const { register, setValue } = useForm()
 24 
  const { register, setValue } = useForm()
33 
 
 25 
 
34 
  // getting keyword
 26 
  // getting keyword
Línea 44... Línea 36...
44 
  const onCheckHandler = (event, filterType) => {
 36 
  const onCheckHandler = (event, filterType) => {
45 
    const checkBoxEl = event.target
 37 
    const checkBoxEl = event.target
46 
    if (checkBoxEl.checked) {
 38 
    if (checkBoxEl.checked) {
47 
      const newActiveFilters = [
 39 
      const newActiveFilters = [
48 
        ...activeFilters.current,
 40 
        ...activeFilters.current,
49 
        { name: checkBoxEl.name, value: 1, type: filterType }
 41 
        { name: checkBoxEl.name, value: 1, type: filterType },
50 
      ]
 42 
      ]
51 
      activeFilters.current = newActiveFilters
 43 
      activeFilters.current = newActiveFilters
52 
    } else {
 44 
    } else {
53 
      const newActiveFilters = activeFilters.current.filter(
 45 
      const newActiveFilters = activeFilters.current.filter(
54 
        (activeFilter) => activeFilter.name !== checkBoxEl.name
 46 
        (activeFilter) => activeFilter.name !== checkBoxEl.name
Línea 79... Línea 71...
79 
  const loadEntities = async (page = 1) => {
 71 
  const loadEntities = async (page = 1) => {
80 
    setLoading(true)
 72 
    setLoading(true)
81 
    setCurrentPage(page)
 73 
    setCurrentPage(page)
82 
    const urlParams = {
 74 
    const urlParams = {
83 
      page,
 75 
      page,
84 
      keyword
 76 
      keyword,
85 
    }
 77 
    }
86 
    addressFilter.current.forEach(({ name, type }) => {
 78 
    addressFilter.current.forEach(({ name, type }) => {
87 
      urlParams[type] = name
 79 
      urlParams[type] = name
88 
    })
 80 
    })
89 
    activeFilters.current.forEach(({ name, value }) => {
 81 
    activeFilters.current.forEach(({ name, value }) => {
Línea 110... Línea 102...
110 
        const address_component_type = address_component.types[0]
 102 
        const address_component_type = address_component.types[0]
111 
        switch (address_component_type) {
 103 
        switch (address_component_type) {
112 
          case 'route':
 104 
          case 'route':
113 
            addressFilter.current = [
 105 
            addressFilter.current = [
114 
              ...addressFilter.current,
 106 
              ...addressFilter.current,
115 
              { type: 'route', name: address_component_name }
 107 
              { type: 'route', name: address_component_name },
116 
            ]
 108 
            ]
117 
            break
 109 
            break
118 
          case 'sublocality':
 110 
          case 'sublocality':
119 
            addressFilter.current = [
 111 
            addressFilter.current = [
120 
              ...addressFilter.current,
 112 
              ...addressFilter.current,
121 
              { type: 'sublocality', name: address_component_name }
 113 
              { type: 'sublocality', name: address_component_name },
122 
            ]
 114 
            ]
123 
            break
 115 
            break
124 
          case 'locality':
 116 
          case 'locality':
125 
            addressFilter.current = [
 117 
            addressFilter.current = [
126 
              ...addressFilter.current,
 118 
              ...addressFilter.current,
127 
              { type: 'locality', name: address_component_name }
 119 
              { type: 'locality', name: address_component_name },
128 
            ]
 120 
            ]
129 
            break
 121 
            break
130 
          case 'administrative_area_level_2':
 122 
          case 'administrative_area_level_2':
131 
            addressFilter.current = [
 123 
            addressFilter.current = [
132 
              ...addressFilter.current,
 124 
              ...addressFilter.current,
133 
              {
 125 
              {
134 
                type: 'administrative_area_level_2',
 126 
                type: 'administrative_area_level_2',
135 
                name: address_component_name
 127 
                name: address_component_name,
136 
              }
 128 
              },
137 
            ]
 129 
            ]
138 
            break
 130 
            break
139 
          case 'administrative_area_level_1':
 131 
          case 'administrative_area_level_1':
140 
            addressFilter.current = [
 132 
            addressFilter.current = [
141 
              ...addressFilter.current,
 133 
              ...addressFilter.current,
142 
              {
 134 
              {
143 
                type: 'administrative_area_level_1',
 135 
                type: 'administrative_area_level_1',
144 
                name: address_component_name
 136 
                name: address_component_name,
145 
              }
 137 
              },
146 
            ]
 138 
            ]
147 
            break
 139 
            break
148 
          case 'country':
 140 
          case 'country':
149 
            addressFilter.current = [
 141 
            addressFilter.current = [
150 
              ...addressFilter.current,
 142 
              ...addressFilter.current,
151 
              { type: 'country', name: address_component_name }
 143 
              { type: 'country', name: address_component_name },
152 
            ]
 144 
            ]
153 
            break
 145 
            break
154 
          case 'postal_code':
 146 
          case 'postal_code':
155 
            addressFilter.current = [
 147 
            addressFilter.current = [
156 
              ...addressFilter.current,
 148 
              ...addressFilter.current,
157 
              { type: 'postal_code', name: address_component_name }
 149 
              { type: 'postal_code', name: address_component_name },
158 
            ]
 150 
            ]
159 
            break
 151 
            break
160 
          default:
 152 
          default:
161 
            break
 153 
            break
162 
        }
 154 
        }
Línea 174... Línea 166...
174 
    setCurrentPage(currentPage)
 166 
    setCurrentPage(currentPage)
175 
  }
 167 
  }
Línea 176... Línea 168...
176 
 
 168 
 
177 
  return (
 169 
  return (
178 
    <main className="main-section-data container px-0 mt-3">
 - 
 
179 
      <form
 - 
 
180 
        className='filter-form'
 - 
 
181 
        ref={formRef}
 - 
 
182 
        onSubmit={(e) => e.preventDefault()}
 - 
 
183 
      >
 - 
 
184 
        <div className="py-2 d-flex" style={{ gap: '10px' }}>
 - 
 
185 
          <h2 className="font-weight-bold search-title">Filtros</h2>
 - 
 
186 
          <div className="show_filters">
 - 
 
187 
            {displayFilters
 - 
 
188 
              ? <FaMinus className="cursor-pointer" onClick={() => setDisplayFilters(!displayFilters)} />
 - 
 
189 
              : <FaPlus className="cursor-pointer" onClick={() => setDisplayFilters(!displayFilters)} />}
 - 
 
190 
          </div>
 - 
 
191 
        </div>
 - 
 
192 
 
 - 
 
193 
        <div className={`filter-secs ${displayFilters ? 'show_filters' : 'hidden_filters'}`}>
 - 
 
194 
          <div className="filter-heading">
 - 
 
195 
            <h3>Buscar por</h3>
 - 
 
196 
          </div>
 - 
 
197 
          <ul className="avail-checks">
 - 
 
198 
            <li>
 - 
 
199 
              <a
 - 
 
200 
                href="#"
 - 
 
201 
                onClick={(e) => {
 - 
 
202 
                  e.preventDefault
 - 
 
203 
                  setSearchType('user')
 - 
 
204 
                }}
 - 
 
205 
                className={(searchType && searchType === 'user' ? 'search-item-selected' : '') + ' text-dark'}
 - 
 
206 
              >
 - 
 
207 
                Personas
 - 
 
208 
              </a>
 - 
 
209 
            </li>
 - 
 
210 
            {filters.allowSearchCompany &&
 - 
 
211 
              <li>
 - 
 
212 
                <a
 - 
 
213 
                  className={(searchType && searchType === 'job' ? 'search-item-selected' : '') + ' text-dark'}
 - 
 
214 
                  href="#"
 - 
 
215 
                  onClick={(e) => {
 - 
 
216 
                    e.preventDefault
 - 
 
217 
                    setSearchType('job')
 - 
 
218 
                  }}
 - 
 
219 
                >
 - 
 
220 
                  Trabajos
 - 
 
221 
                </a>
 - 
 
222 
              </li>
 - 
 
223 
            }
 - 
 
224 
            {filters.allowSearchCompany &&
 - 
 
225 
              <li>
 - 
 
226 
                <a
 - 
 
227 
                  className={(searchType && searchType === 'company' ? 'search-item-selected' : '') + ' text-dark'}
 - 
 
228 
                  href="#"
 - 
 
229 
                  onClick={(e) => {
 - 
 
230 
                    e.preventDefault
 - 
 
231 
                    // searchType.current = "company";
 - 
 
232 
                    setSearchType('company')
 - 
 
233 
                  }}
 - 
 
234 
                >
 - 
 
235 
                  Empresas
 - 
 
236 
                </a>
 - 
 
237 
              </li>
 - 
 
238 
            }
 - 
 
239 
            <li>
 - 
 
240 
              <a
 - 
 
241 
                className={(searchType && searchType === 'group' ? 'search-item-selected' : '') + ' text-dark'}
 - 
 
242 
                href="#"
 - 
 
243 
                onClick={(e) => {
 - 
 
244 
                  e.preventDefault
 - 
 
245 
                  setSearchType('group')
 - 
 
246 
                }}
 - 
 
247 
              >
 - 
 
248 
                Grupos
 - 
 
249 
              </a>
 - 
 
250 
            </li>
 - 
 
251 
          </ul>
 - 
 
252 
        </div>
 - 
 
253 
 
 - 
 
254 
        {(searchType === 'user' && filters.allowViewConnectionLevelFilter) &&
 - 
 
255 
          <div className={displayFilters ? 'show_filters' : 'hidden_filters'}>
 170 
    <main className="main-section-data container px-0 mt-3">
256 
            <Filters
 171 
      <FiltersSidebar
257 
              filters={filters}
 172 
        filtersOptions={filters}
258 
              searchType={searchType}
 173 
        getAddressHandler={getAddressHandler}
259 
              onCheck={onCheckHandler}
 174 
        onCheckHandler={onCheckHandler}
260 
              onUncheckAll={onUncheckAllHandler}
 175 
        onUncheckAllHandler={onUncheckAllHandler}
261 
              register={register}
 - 
 
262 
            />
 - 
 
263 
          </div>
 - 
 
264 
        }
 - 
 
265 
 
 - 
 
266 
        <div className={`filter-secs ${displayFilters ? 'show_filters' : 'hidden_filters'}`}>
 176 
        filters={searchType}
267 
          <div className="filter-heading">
 - 
 
268 
            <h3>Ubicación</h3>
 - 
 
269 
          </div>
 - 
 
270 
          <div className="avail-checks">
 177 
        setFilters={(value) => setSearchType(value)}
271 
            <UbicationInput
 - 
 
272 
              onGetAddress={getAddressHandler}
 - 
 
273 
              placeholder="Buscar un lugar"
 - 
 
274 
            />
 - 
 
275 
          </div>
 - 
 
276 
        </div>
 - 
 
277 
 
 178 
        register={register}
278 
      </form>
 179 
      />
279 
      <div className="main-ws-sec">
 180 
      <div className="main-ws-sec">
280 
        <div className="posts-section">
 181 
        <div className="posts-section">
281 
          {loading && <Spinner />}
 182 
          {loading && <Spinner />}
282 
          {entities.length
 183 
          {entities.length ? (
283 
            ? entities.map((entity) => (
 184 
            entities.map((entity) => (
284 
              <EntityTemplate
 185 
              <EntityTemplate
285 
                entity={entity}
 186 
                entity={entity}
286 
                key={entity.id}
 187 
                key={entity.id}
287 
                onChangePage={onChangePageHandler}
 188 
                onChangePage={onChangePageHandler}
288 
              />
 189 
              />
- 
 
 190 
            ))
289 
            ))
 191 
          ) : (
290 
            : <EmptySection message='No hay resultados' />
 192 
            <EmptySection message="No hay resultados" />
291 
          }
 193 
          )}
292 
        </div>
 194 
        </div>
293 
        <PaginationComponent
 195 
        <PaginationComponent
294 
          pages={pages}
 196 
          pages={pages}
295 
          currentActivePage={currentPage}
 197 
          currentActivePage={currentPage}