Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 4845 Rev 5122
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React from "react";
 2 
import React from 'react'
3 
import { useState, useRef, useEffect } from "react";
 3 
import { useState, useRef, useEffect } from 'react'
4 
import { useLocation } from "react-router-dom";
 4 
import { useLocation } from 'react-router-dom'
5 
import { useForm } from "react-hook-form";
 5 
import { useForm } from 'react-hook-form'
6 
import { FaPlus, FaMinus } from "react-icons/fa";
 6 
import { FaPlus, FaMinus } from 'react-icons/fa'
7 
import { axios, jsonToParams } from "../../../utils";
 7 
import { axios, jsonToParams } from '../../../utils'
8 
import styled from "styled-components";
 8 
import styled from 'styled-components'
9 
import Filters from "./filters/Filters";
 9 
import Filters from './filters/Filters'
10 
import Spinner from "../../../shared/loading-spinner/Spinner";
 10 
import Spinner from '../../../shared/loading-spinner/Spinner'
11 
import EntityTemplate from "../entity-template/EntityTemplate";
 11 
import EntityTemplate from '../entity-template/EntityTemplate'
12 
import PaginationComponent from "../../../shared/pagination/PaginationComponent";
 12 
import PaginationComponent from '../../../shared/pagination/PaginationComponent'
13 
import UbicationInput from "../../../shared/ubication-input/UbicationInput";
 13 
import UbicationInput from '../../../shared/ubication-input/UbicationInput'
Línea 14... Línea 14...
14 
 
 14 
 
15 
const SpinnerStyled = styled.div`
 15 
const SpinnerStyled = styled.div`
16 
  width: 100%;
 16 
  width: 100%;
17 
  height: 100%;
 17 
  height: 100%;
18 
  display: flex;
 18 
  display: flex;
19 
  justify-content: center;
 19 
  justify-content: center;
20 
  align-items: center;
 20 
  align-items: center;
Línea 21... Línea 21...
21 
`;
 21 
`
22 
 
 22 
 
23 
const MainSection = (props) => {
 23 
const MainSection = (props) => {
24 
  // states
 24 
  // states
25 
  const [entities, setEntities] = useState([]);
 25 
  const [entities, setEntities] = useState([])
26 
  const [loading, setLoading] = useState(true);
 26 
  const [loading, setLoading] = useState(true)
27 
  const [displayFilters, setDisplayFilters] = useState(false);
 27 
  const [displayFilters, setDisplayFilters] = useState(false)
28 
  const [error, setError] = useState("");
 28 
  const [error, setError] = useState('')
29 
  const [searchType, setSearchType] = useState("user");
 29 
  const [searchType, setSearchType] = useState('user')
30 
  const [currentPage, setCurrentPage] = useState(1);
 30 
  const [currentPage, setCurrentPage] = useState(1)
31 
  const [pages, setPages] = useState(1);
 31 
  const [pages, setPages] = useState(1)
32 
  // refs
 32 
  // refs
33 
  const activeFilters = useRef([]);
 33 
  const activeFilters = useRef([])
34 
  const addressFilter = useRef([]);
 34 
  const addressFilter = useRef([])
35 
  const formRef = useRef();
 35 
  const formRef = useRef()
36 
  // useLocation
 36 
  // useLocation
37 
  const location = useLocation();
 37 
  const location = useLocation()
38 
  // props destructuring
 38 
  // props destructuring
39 
  const { filters } = props;
 39 
  const { filters } = props
Línea 40... Línea 40...
40 
  // react hook form
 40 
  // react hook form
41 
  const { register, setValue } = useForm();
 41 
  const { register, setValue } = useForm()
42 
 
 42 
 
Línea 43... Línea 43...
43 
  // getting keyword
 43 
  // getting keyword
44 
  const locationParams = new URLSearchParams(location.search);
 44 
  const locationParams = new URLSearchParams(location.search)
45 
  const keyword = locationParams.get("keyword");
 45 
  const keyword = locationParams.get('keyword')
46 
 
 46 
 
47 
  useEffect(() => {
 47 
  useEffect(() => {
Línea 48... Línea 48...
48 
    loadEntities();
 48 
    loadEntities()
49 
    formRef.current.reset();
 49 
    formRef.current.reset()
50 
    if (activeFilters.current.length) activeFilters.current = [];
 50 
    if (activeFilters.current.length) activeFilters.current = []
51 
  }, [searchType, keyword]);
 51 
  }, [searchType, keyword])
52 
 
 52 
 
53 
  const onCheckHandler = (event, filterType) => {
 53 
  const onCheckHandler = (event, filterType) => {
54 
    const checkBoxEl = event.target;
 54 
    const checkBoxEl = event.target
55 
    if (checkBoxEl.checked) {
 55 
    if (checkBoxEl.checked) {
56 
      const newActiveFilters = [
 56 
      const newActiveFilters = [
57 
        ...activeFilters.current,
 57 
        ...activeFilters.current,
58 
        { name: checkBoxEl.name, value: 1, type: filterType },
 58 
        { name: checkBoxEl.name, value: 1, type: filterType }
59 
      ];
 59 
      ]
60 
      activeFilters.current = newActiveFilters;
 60 
      activeFilters.current = newActiveFilters
61 
    } else {
 61 
    } else {
62 
      const newActiveFilters = activeFilters.current.filter(
 62 
      const newActiveFilters = activeFilters.current.filter(
63 
        (activeFilter) => activeFilter.name !== checkBoxEl.name
 63 
        (activeFilter) => activeFilter.name !== checkBoxEl.name
Línea 64... Línea 64...
64 
      );
 64 
      )
65 
      activeFilters.current = newActiveFilters;
 65 
      activeFilters.current = newActiveFilters
66 
    }
 66 
    }
67 
    loadEntities();
 67 
    loadEntities()
68 
  };
 68 
  }
69 
 
 69 
 
70 
  const onUncheckAllHandler = (event, filterType) => {
 70 
  const onUncheckAllHandler = (event, filterType) => {
71 
    event.preventDefault();
 71 
    event.preventDefault()
Línea 72... Línea 72...
72 
    const activeFiltersToDisable = activeFilters.current.filter(
 72 
    const activeFiltersToDisable = activeFilters.current.filter(
73 
      ({ type }) => type === filterType
 73 
      ({ type }) => type === filterType
74 
    );
 74 
    )
75 
    activeFiltersToDisable.map(({ name }) => {
 75 
    activeFiltersToDisable.map(({ name }) => {
76 
      setValue(name, "");
 76 
      setValue(name, '')
77 
    });
 77 
    })
78 
 
 78 
 
79 
    if (activeFilters.current.length) {
 79 
    if (activeFilters.current.length) {
Línea 80... Línea 80...
80 
      const newActiveFilters = activeFilters.current.filter(
 80 
      const newActiveFilters = activeFilters.current.filter(
81 
        ({ type }) => type !== filterType
 81 
        ({ type }) => type !== filterType
82 
      );
 82 
      )
83 
      activeFilters.current = newActiveFilters;
 83 
      activeFilters.current = newActiveFilters
84 
      loadEntities();
 84 
      loadEntities()
85 
    }
 85 
    }
86 
  };
 86 
  }
87 
 
 87 
 
88 
  const loadEntities = async (page = 1) => {
 88 
  const loadEntities = async (page = 1) => {
89 
    setLoading(true);
 89 
    setLoading(true)
90 
    setError(false);
 90 
    setError(false)
91 
    setCurrentPage(page)
 91 
    setCurrentPage(page)
92 
    let urlParams = {
 92 
    const urlParams = {
93 
      page,
 93 
      page,
94 
      keyword
 94 
      keyword
95 
    }
 95 
    }
96 
    addressFilter.current.forEach(({ name, type }) => {
 96 
    addressFilter.current.forEach(({ name, type }) => {
97 
      urlParams[type] = name
 97 
      urlParams[type] = name
98 
    });
 98 
    })
99 
    activeFilters.current.forEach(({ name, value }) => {
 99 
    activeFilters.current.forEach(({ name, value }) => {
100 
      urlParams[name] = value
 100 
      urlParams[name] = value
101 
    });
 101 
    })
102 
    await axios
 102 
    await axios
103 
      .get(`/search/entity/${searchType}?${jsonToParams(urlParams)}`)
 103 
      .get(`/search/entity/${searchType}?${jsonToParams(urlParams)}`)
104 
      .then((response) => {
 104 
      .then((response) => {
105 
        const responseData = response.data;
 105 
        const responseData = response.data
106 
        if (responseData.success) {
 106 
        if (responseData.success) {
107 
          setEntities(responseData.data.current.items);
 107 
          setEntities(responseData.data.current.items)
Línea 108... Línea 108...
108 
          setPages(responseData.data.total.pages);
 108 
          setPages(responseData.data.total.pages)
109 
        } else {
 109 
        } else {
110 
          const newError = responseData.data;
 110 
          const newError = responseData.data
111 
          setError(newError);
 111 
          setError(newError)
112 
        }
 112 
        }
113 
      });
 113 
      })
114 
    setLoading(false);
 114 
    setLoading(false)
115 
  };
 115 
  }
116 
 
 116 
 
117 
  const getAddressHandler = (addresObject) => {
 117 
  const getAddressHandler = (addresObject) => {
118 
    const { address_components } = addresObject;
 118 
    const { address_components } = addresObject
119 
    if (address_components) {
 119 
    if (address_components) {
120 
      addressFilter.current = [];
 120 
      addressFilter.current = []
121 
      address_components.map((address_component) => {
 121 
      address_components.map((address_component) => {
122 
        const address_component_name = address_component.long_name;
 122 
        const address_component_name = address_component.long_name
123 
        const address_component_type = address_component.types[0];
 123 
        const address_component_type = address_component.types[0]
124 
        switch (address_component_type) {
 124 
        switch (address_component_type) {
125 
          case "route":
 125 
          case 'route':
126 
            addressFilter.current = [
 126 
            addressFilter.current = [
127 
              ...addressFilter.current,
 127 
              ...addressFilter.current,
128 
              { type: "route", name: address_component_name },
 128 
              { type: 'route', name: address_component_name }
129 
            ];
 129 
            ]
130 
            break;
 130 
            break
131 
          case "sublocality":
 131 
          case 'sublocality':
132 
            addressFilter.current = [
 132 
            addressFilter.current = [
133 
              ...addressFilter.current,
 133 
              ...addressFilter.current,
134 
              { type: "sublocality", name: address_component_name },
 134 
              { type: 'sublocality', name: address_component_name }
135 
            ];
 135 
            ]
136 
            break;
 136 
            break
137 
          case "locality":
 137 
          case 'locality':
138 
            addressFilter.current = [
 138 
            addressFilter.current = [
139 
              ...addressFilter.current,
 139 
              ...addressFilter.current,
140 
              { type: "locality", name: address_component_name },
 140 
              { type: 'locality', name: address_component_name }
141 
            ];
 141 
            ]
142 
            break;
 142 
            break
143 
          case "administrative_area_level_2":
 143 
          case 'administrative_area_level_2':
144 
            addressFilter.current = [
 144 
            addressFilter.current = [
145 
              ...addressFilter.current,
 145 
              ...addressFilter.current,
146 
              {
 146 
              {
147 
                type: "administrative_area_level_2",
 147 
                type: 'administrative_area_level_2',
148 
                name: address_component_name,
 148 
                name: address_component_name
149 
              },
 149 
              }
150 
            ];
 150 
            ]
151 
            break;
 151 
            break
152 
          case "administrative_area_level_1":
 152 
          case 'administrative_area_level_1':
153 
            addressFilter.current = [
 153 
            addressFilter.current = [
154 
              ...addressFilter.current,
 154 
              ...addressFilter.current,
155 
              {
 155 
              {
156 
                type: "administrative_area_level_1",
 156 
                type: 'administrative_area_level_1',
157 
                name: address_component_name,
 157 
                name: address_component_name
158 
              },
 158 
              }
159 
            ];
 159 
            ]
160 
            break;
 160 
            break
161 
          case "country":
 161 
          case 'country':
162 
            addressFilter.current = [
 162 
            addressFilter.current = [
163 
              ...addressFilter.current,
 163 
              ...addressFilter.current,
164 
              { type: "country", name: address_component_name },
 164 
              { type: 'country', name: address_component_name }
165 
            ];
 165 
            ]
166 
            break;
 166 
            break
167 
          case "postal_code":
 167 
          case 'postal_code':
168 
            addressFilter.current = [
 168 
            addressFilter.current = [
169 
              ...addressFilter.current,
 169 
              ...addressFilter.current,
170 
              { type: "postal_code", name: address_component_name },
 170 
              { type: 'postal_code', name: address_component_name }
171 
            ];
 171 
            ]
172 
            break;
 172 
            break
173 
          default:
 173 
          default:
174 
            break;
 174 
            break
175 
        }
 175 
        }
Línea 176... Línea 176...
176 
      });
 176 
      })
177 
      loadEntities();
 177 
      loadEntities()
178 
    } else {
 178 
    } else {
Línea 179... Línea 179...
179 
      if (addressFilter.current.length) {
 179 
      if (addressFilter.current.length) {
180 
        addressFilter.current = [];
 180 
        addressFilter.current = []
181 
        loadEntities();
 181 
        loadEntities()
182 
      }
 182 
      }
Línea 196... Línea 196...
196 
              <form
 196 
              <form
197 
                name="form-filter"
 197 
                name="form-filter"
198 
                id="form-filter"
 198 
                id="form-filter"
199 
                ref={formRef}
 199 
                ref={formRef}
200 
                onSubmit={(e) => {
 200 
                onSubmit={(e) => {
201 
                  e.preventDefault();
 201 
                  e.preventDefault()
202 
                }}
 202 
                }}
203 
              >
 203 
              >
204 
                <div className="py-2 d-flex" style={{ gap: '10px' }}>
 204 
                <div className="py-2 d-flex" style={{ gap: '10px' }}>
205 
                  <h2 className="font-weight-bold search-title">Filtros</h2>
 205 
                  <h2 className="font-weight-bold search-title">Filtros</h2>
206 
                  <div className="show_filters">
 206 
                  <div className="show_filters">
Línea 221... Línea 221...
221 
                      <ul className="avail-checks avail-checks-search-type">
 221 
                      <ul className="avail-checks avail-checks-search-type">
222 
                        <li>
 222 
                        <li>
223 
                          <a
 223 
                          <a
224 
                            href="#"
 224 
                            href="#"
225 
                            onClick={(e) => {
 225 
                            onClick={(e) => {
226 
                              e.preventDefault;
 226 
                              e.preventDefault
227 
                              setSearchType("user");
 227 
                              setSearchType('user')
228 
                            }}
 228 
                            }}
229 
                            className={(searchType && searchType === 'user' ? 'search-item-selected' : '') + ' text-dark'}
 229 
                            className={(searchType && searchType === 'user' ? 'search-item-selected' : '') + ' text-dark'}
230 
                          >
 230 
                          >
231 
                            Personas
 231 
                            Personas
232 
                          </a>
 232 
                          </a>
Línea 235... Línea 235...
235 
                          <li>
 235 
                          <li>
236 
                            <a
 236 
                            <a
237 
                              className={(searchType && searchType === 'job' ? 'search-item-selected' : '') + ' text-dark'}
 237 
                              className={(searchType && searchType === 'job' ? 'search-item-selected' : '') + ' text-dark'}
238 
                              href="#"
 238 
                              href="#"
239 
                              onClick={(e) => {
 239 
                              onClick={(e) => {
240 
                                e.preventDefault;
 240 
                                e.preventDefault
241 
                                setSearchType("job");
 241 
                                setSearchType('job')
242 
                              }}
 242 
                              }}
243 
                            >
 243 
                            >
244 
                              Trabajos
 244 
                              Trabajos
245 
                            </a>
 245 
                            </a>
246 
                          </li>
 246 
                          </li>
Línea 249... Línea 249...
249 
                          <li>
 249 
                          <li>
250 
                            <a
 250 
                            <a
251 
                              className={(searchType && searchType === 'company' ? 'search-item-selected' : '') + ' text-dark'}
 251 
                              className={(searchType && searchType === 'company' ? 'search-item-selected' : '') + ' text-dark'}
252 
                              href="#"
 252 
                              href="#"
253 
                              onClick={(e) => {
 253 
                              onClick={(e) => {
254 
                                e.preventDefault;
 254 
                                e.preventDefault
255 
                                // searchType.current = "company";
 255 
                                // searchType.current = "company";
256 
                                setSearchType("company");
 256 
                                setSearchType('company')
257 
                              }}
 257 
                              }}
258 
                            >
 258 
                            >
259 
                              Empresas
 259 
                              Empresas
260 
                            </a>
 260 
                            </a>
261 
                          </li>
 261 
                          </li>
Línea 263... Línea 263...
263 
                        <li>
 263 
                        <li>
264 
                          <a
 264 
                          <a
265 
                            className={(searchType && searchType === 'group' ? 'search-item-selected' : '') + ' text-dark'}
 265 
                            className={(searchType && searchType === 'group' ? 'search-item-selected' : '') + ' text-dark'}
266 
                            href="#"
 266 
                            href="#"
267 
                            onClick={(e) => {
 267 
                            onClick={(e) => {
268 
                              e.preventDefault;
 268 
                              e.preventDefault
269 
                              setSearchType("group");
 269 
                              setSearchType('group')
270 
                            }}
 270 
                            }}
271 
                          >
 271 
                          >
272 
                            Grupos
 272 
                            Grupos
273 
                          </a>
 273 
                          </a>
274 
                        </li>
 274 
                        </li>
Línea 302... Línea 302...
302 
                </div>
 302 
                </div>
303 
              </form>
 303 
              </form>
304 
              <div className="main-ws-sec">
 304 
              <div className="main-ws-sec">
305 
                <div className="posts-section">
 305 
                <div className="posts-section">
306 
                  {/* <!--post-bar end--> */}
 306 
                  {/* <!--post-bar end--> */}
307 
                  {loading ? (
 307 
                  {loading
- 
 
 308 
                    ? (
308 
                    <SpinnerStyled>
 309 
                    <SpinnerStyled>
309 
                      <Spinner />
 310 
                      <Spinner />
310 
                    </SpinnerStyled>
 311 
                    </SpinnerStyled>
- 
 
 312 
                      )
311 
                  ) : error ? (
 313 
                    : error
- 
 
 314 
                      ? (
312 
                    <div>{error}</div>
 315 
                    <div>{error}</div>
- 
 
 316 
                        )
313 
                  ) : entities && entities.length ? (
 317 
                      : entities && entities.length
- 
 
 318 
                        ? (
314 
                    entities.map((entity) => (
 319 
                            entities.map((entity) => (
315 
                      <EntityTemplate
 320 
                      <EntityTemplate
316 
                        entity={entity}
 321 
                        entity={entity}
317 
                        key={entity.id}
 322 
                        key={entity.id}
318 
                        onChangePage={onChangePageHandler}
 323 
                        onChangePage={onChangePageHandler}
319 
                      />
 324 
                      />
- 
 
 325 
                            ))
320 
                    ))
 326 
                          )
321 
                  ) : (
 327 
                        : (
322 
                    <div
 328 
                    <div
323 
                      style={{
 329 
                      style={{
324 
                        display: "flex",
 330 
                        display: 'flex',
325 
                        justifyContent: "center",
 331 
                        justifyContent: 'center',
326 
                        alignItems: "center",
 332 
                        alignItems: 'center',
327 
                        padding: "1rem 0 3rem 0",
 333 
                        padding: '1rem 0 3rem 0'
328 
                      }}
 334 
                      }}
329 
                    >
 335 
                    >
330 
                      No hay resultados
 336 
                      No hay resultados
331 
                    </div>
 337 
                    </div>
332 
                  )}
 338 
                          )}
333 
                </div>
 339 
                </div>
334 
                <PaginationComponent
 340 
                <PaginationComponent
335 
                  pages={pages}
 341 
                  pages={pages}
336 
                  currentActivePage={currentPage}
 342 
                  currentActivePage={currentPage}
337 
                  onChangePage={loadEntities}
 343 
                  onChangePage={loadEntities}
Línea 350... Línea 356...
350 
            </div>
 356 
            </div>
351 
          </div>
 357 
          </div>
352 
        </div>
 358 
        </div>
353 
      </main>
 359 
      </main>
354 
    </div>
 360 
    </div>
355 
  );
 361 
  )
356 
};
 362 
}
Línea 357... Línea 363...
357 
 
 363