Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 6365 Rev 6366
Línea 1... Línea 1...
1 
import React, { useState, useRef, useEffect } from 'react'
 1 
import React, { useState, useRef, useEffect } from 'react'
2 
import { useLocation } from 'react-router-dom'
 2 
import { useLocation } from 'react-router-dom'
3 
import { useForm } from 'react-hook-form'
 - 
 
4 
import { axios, jsonToParams } from '../../../utils'
 3 
import { axios, jsonToParams } from '../../../utils'
5 
import Spinner from '../../../shared/loading-spinner/Spinner'
 4 
import Spinner from '../../../shared/loading-spinner/Spinner'
6 
import EntityTemplate from '../entity-template/EntityTemplate'
 5 
import EntityTemplate from '../entity-template/EntityTemplate'
7 
import PaginationComponent from '../../../shared/pagination/PaginationComponent'
 6 
import PaginationComponent from '../../../shared/pagination/PaginationComponent'
8 
import EmptySection from '../../../shared/empty-section/EmptySection'
 7 
import EmptySection from '../../../shared/empty-section/EmptySection'
9 
import FiltersSidebar from '../../components/FiltersSidebar'
 8 
import FiltersSidebar from '../../components/FiltersSidebar'
Línea 10... Línea 9...
10 
 
 9 
 
11 
const MainSection = ({ filters }) => {
 10 
const MainSection = ({ filters }) => {
12 
  const [entities, setEntities] = useState([])
 11 
  const [entities, setEntities] = useState([])
13 
  const [loading, setLoading] = useState(true)
 12 
  const [loading, setLoading] = useState(true)
14 
  const [searchType, setSearchType] = useState('user')
 13 
  const [category, setCategory] = useState('user')
15 
  const [currentPage, setCurrentPage] = useState(1)
 14 
  const [currentPage, setCurrentPage] = useState(1)
Línea 16... Línea 15...
16 
  const [pages, setPages] = useState(1)
 15 
  const [pages, setPages] = useState(1)
17 
 
 16 
 
Línea 18... Línea 17...
18 
  const activeFilters = useRef([])
 17 
  const activeFilters = useRef([])
Línea 19... Línea -...
19 
  const addressFilter = useRef([])
 - 
 
20 
 
 - 
 
21 
  const location = useLocation()
 18 
  const addressFilter = useRef([])
22 
 
 19 
 
23 
  const { register, setValue } = useForm()
 20 
  const location = useLocation()
Línea 24... Línea 21...
24 
 
 21 
 
25 
  // getting keyword
 22 
  // getting keyword
26 
  const locationParams = new URLSearchParams(location.search)
 - 
 
27 
  const keyword = locationParams.get('keyword')
 23 
  const locationParams = new URLSearchParams(location.search)
28 
 
 - 
 
29 
  useEffect(() => {
 - 
 
30 
    loadEntities()
 - 
 
31 
    if (activeFilters.current.length) activeFilters.current = []
 - 
 
32 
  }, [searchType, keyword])
 - 
 
33 
 
 - 
 
34 
  const onCheckHandler = (event, filterType) => {
 - 
 
35 
    const checkBoxEl = event.target
 - 
 
36 
    if (checkBoxEl.checked) {
 - 
 
37 
      const newActiveFilters = [
 - 
 
38 
        ...activeFilters.current,
 - 
 
39 
        { name: checkBoxEl.name, value: 1, type: filterType },
 - 
 
40 
      ]
 - 
 
41 
      activeFilters.current = newActiveFilters
 - 
 
42 
    } else {
 - 
 
43 
      const newActiveFilters = activeFilters.current.filter(
 - 
 
44 
        (activeFilter) => activeFilter.name !== checkBoxEl.name
 - 
 
45 
      )
 - 
 
46 
      activeFilters.current = newActiveFilters
 - 
 
47 
    }
 - 
 
48 
    loadEntities()
 - 
 
49 
  }
 - 
 
50 
 
 - 
 
51 
  const onUncheckAllHandler = (event, filterType) => {
 - 
 
52 
    event.preventDefault()
 - 
 
53 
    const activeFiltersToDisable = activeFilters.current.filter(
 - 
 
54 
      ({ type }) => type === filterType
 - 
 
55 
    )
 - 
 
56 
    activeFiltersToDisable.map(({ name }) => {
 - 
 
57 
      setValue(name, '')
 - 
 
58 
    })
 - 
 
59 
 
 - 
 
60 
    if (activeFilters.current.length) {
 - 
 
61 
      const newActiveFilters = activeFilters.current.filter(
 - 
 
62 
        ({ type }) => type !== filterType
 - 
 
Línea 63... Línea 24...
63 
      )
 24 
  const keyword = locationParams.get('keyword')
64 
      activeFilters.current = newActiveFilters
 25 
 
65 
      loadEntities()
 26 
  useEffect(() => {
66 
    }
 27 
    loadEntities()
Línea 78... Línea 39...
78 
    })
 39 
    })
79 
    activeFilters.current.forEach(({ name, value }) => {
 40 
    activeFilters.current.forEach(({ name, value }) => {
80 
      urlParams[name] = value
 41 
      urlParams[name] = value
81 
    })
 42 
    })
82 
    await axios
 43 
    await axios
83 
      .get(`/search/entity/${searchType}?${jsonToParams(urlParams)}`)
 44 
      .get(`/search/entity/${category}?${jsonToParams(urlParams)}`)
84 
      .then((response) => {
 45 
      .then((response) => {
85 
        const responseData = response.data
 46 
        const responseData = response.data
86 
        if (responseData.success) {
 47 
        if (responseData.success) {
87 
          setEntities(responseData.data.current.items)
 48 
          setEntities(responseData.data.current.items)
88 
          setPages(responseData.data.total.pages)
 49 
          setPages(responseData.data.total.pages)
89 
        }
 50 
        }
90 
      })
 51 
      })
91 
    setLoading(false)
 52 
    setLoading(false)
92 
  }
 53 
  }
Línea 93... Línea -...
93 
 
 - 
 
94 
  const getAddressHandler = (addresObject) => {
 - 
 
95 
    const { address_components } = addresObject
 - 
 
96 
    if (address_components) {
 - 
 
97 
      addressFilter.current = []
 - 
 
98 
      address_components.map((address_component) => {
 - 
 
99 
        const address_component_name = address_component.long_name
 - 
 
100 
        const address_component_type = address_component.types[0]
 - 
 
101 
        switch (address_component_type) {
 - 
 
102 
          case 'route':
 - 
 
103 
            addressFilter.current = [
 - 
 
104 
              ...addressFilter.current,
 - 
 
105 
              { type: 'route', name: address_component_name },
 - 
 
106 
            ]
 - 
 
107 
            break
 - 
 
108 
          case 'sublocality':
 - 
 
109 
            addressFilter.current = [
 - 
 
110 
              ...addressFilter.current,
 - 
 
111 
              { type: 'sublocality', name: address_component_name },
 - 
 
112 
            ]
 - 
 
113 
            break
 - 
 
114 
          case 'locality':
 - 
 
115 
            addressFilter.current = [
 - 
 
116 
              ...addressFilter.current,
 - 
 
117 
              { type: 'locality', name: address_component_name },
 - 
 
118 
            ]
 - 
 
119 
            break
 - 
 
120 
          case 'administrative_area_level_2':
 - 
 
121 
            addressFilter.current = [
 - 
 
122 
              ...addressFilter.current,
 - 
 
123 
              {
 - 
 
124 
                type: 'administrative_area_level_2',
 - 
 
125 
                name: address_component_name,
 - 
 
126 
              },
 - 
 
127 
            ]
 - 
 
128 
            break
 - 
 
129 
          case 'administrative_area_level_1':
 - 
 
130 
            addressFilter.current = [
 - 
 
131 
              ...addressFilter.current,
 - 
 
132 
              {
 - 
 
133 
                type: 'administrative_area_level_1',
 - 
 
134 
                name: address_component_name,
 - 
 
135 
              },
 - 
 
136 
            ]
 - 
 
137 
            break
 - 
 
138 
          case 'country':
 - 
 
139 
            addressFilter.current = [
 - 
 
140 
              ...addressFilter.current,
 - 
 
141 
              { type: 'country', name: address_component_name },
 - 
 
142 
            ]
 - 
 
143 
            break
 - 
 
144 
          case 'postal_code':
 - 
 
145 
            addressFilter.current = [
 - 
 
146 
              ...addressFilter.current,
 - 
 
147 
              { type: 'postal_code', name: address_component_name },
 - 
 
148 
            ]
 - 
 
149 
            break
 - 
 
150 
          default:
 - 
 
151 
            break
 - 
 
152 
        }
 - 
 
153 
      })
 - 
 
154 
      loadEntities()
 - 
 
155 
    } else {
 - 
 
156 
      if (addressFilter.current.length) {
 - 
 
157 
        addressFilter.current = []
 - 
 
158 
        loadEntities()
 - 
 
159 
      }
 - 
 
160 
    }
 - 
 
161 
  }
 - 
 
162 
 
 54 
 
163 
  const onChangePageHandler = (currentPage) => {
 55 
  const onChangePageHandler = (currentPage) => {
164 
    setCurrentPage(currentPage)
 56 
    setCurrentPage(currentPage)
Línea 165... Línea 57...
165 
  }
 57 
  }
166 
 
 58 
 
167 
  return (
 59 
  return (
168 
    <main className="main-section-data container px-0 mt-3">
 - 
 
169 
      <FiltersSidebar
 - 
 
170 
        filtersOptions={filters}
 - 
 
171 
        getAddressHandler={getAddressHandler}
 - 
 
172 
        onCheckHandler={onCheckHandler}
 - 
 
173 
        onUncheckAllHandler={onUncheckAllHandler}
 60 
    <main className="main-section-data container px-0 mt-3">
174 
        filters={searchType}
 61 
      <FiltersSidebar
175 
        setFilters={(value) => setSearchType(value)}
 62 
        onChange={(category) => setCategory(category)}
176 
        register={register}
 63 
        onComplete={loadEntities}
177 
      />
 64 
      />
178 
      <div className="main-ws-sec">
 65 
      <div className="main-ws-sec">
179 
        <div className="posts-section">
 66 
        <div className="posts-section">