Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 5 Rev 172
Línea 1... Línea 1...
1 
import React, { useState, useRef, useEffect } from 'react'
 1 
import React, { useState, useRef, useEffect } from "react";
2 
import { axios, jsonToParams } from '../../utils'
 2 
import { axios, jsonToParams } from "../../utils";
3 
import { Col, Container, Row } from 'react-bootstrap'
 3 
import { Col, Container, Row } from "react-bootstrap";
4 
import { useHistory, useLocation } from 'react-router-dom'
 4 
import { useHistory, useLocation } from "react-router-dom";
5 
 
 5 
 
6 
import Spinner from '../../components/UI/Spinner'
 6 
import Spinner from "../../components/UI/Spinner";
7 
import SearchItem from '../../components/search/SearchItem'
 7 
import SearchItem from "../../components/search/SearchItem";
8 
import SearchInput from '../../components/UI/SearchInput'
 8 
import Input from "../../components/UI/Input";
9 
import EmptySection from '../../components/UI/EmptySection'
 9 
import EmptySection from "../../components/UI/EmptySection";
10 
import PaginationComponent from '../../components/UI/PaginationComponent'
 10 
import PaginationComponent from "../../components/UI/PaginationComponent";
11 
import FiltersSidebar from '../../components/search/FiltersSidebar'
 11 
import FiltersSidebar from "../../components/search/FiltersSidebar";
12 
import CategoryFilter from '../../components/search/CategoryFilter'
 12 
import CategoryFilter from "../../components/search/CategoryFilter";
13 
import LocationFilter from '../../components/search/LocationFilter'
 13 
import LocationFilter from "../../components/search/LocationFilter";
Línea 14... Línea 14...
14 
 
 14 
 
15 
const SearchPage = () => {
 15 
const SearchPage = () => {
16 
  const [entities, setEntities] = useState([])
 16 
  const [entities, setEntities] = useState([]);
17 
  const [loading, setLoading] = useState(true)
 17 
  const [loading, setLoading] = useState(true);
18 
  const [category, setCategory] = useState('user')
 18 
  const [category, setCategory] = useState("user");
19 
  const [entity, setEntity] = useState('')
 19 
  const [entity, setEntity] = useState("");
20 
  const [currentPage, setCurrentPage] = useState(1)
 20 
  const [currentPage, setCurrentPage] = useState(1);
21 
  const [pages, setPages] = useState(1)
 21 
  const [pages, setPages] = useState(1);
22 
  const activeFilters = useRef([])
 22 
  const activeFilters = useRef([]);
23 
  const addressKeys = useRef([])
 23 
  const addressKeys = useRef([]);
24 
 
 24 
 
25 
  const { search, pathname } = useLocation()
 25 
  const { search, pathname } = useLocation();
26 
  const history = useHistory()
 26 
  const history = useHistory();
27 
 
 27 
 
28 
  const params = new URLSearchParams(search)
 28 
  const params = new URLSearchParams(search);
29 
  const keyword = params.get('keyword')
 29 
  const keyword = params.get("keyword");
30 
 
 30 
 
31 
  const loadEntities = async (page = 1, keyword = '', category = 'user') => {
 31 
  const loadEntities = async (page = 1, keyword = "", category = "user") => {
32 
    setLoading(true)
 32 
    setLoading(true);
Línea 33... Línea 33...
33 
    setCurrentPage(page)
 33 
    setCurrentPage(page);
Línea 34... Línea 34...
34 
 
 34 
 
35 
    const urlParams = { page, keyword }
 35 
    const urlParams = { page, keyword };
36 
 
 36 
 
Línea 37... Línea 37...
37 
    addressKeys.current.forEach(({ name, type }) => {
 37 
    addressKeys.current.forEach(({ name, type }) => {
38 
      urlParams[type] = name
 38 
      urlParams[type] = name;
39 
    })
 39 
    });
Línea 40... Línea 40...
40 
 
 40 
 
41 
    activeFilters.current.forEach(({ name, value }) => {
 41 
    activeFilters.current.forEach(({ name, value }) => {
42 
      urlParams[name] = value
 42 
      urlParams[name] = value;
43 
    })
 43 
    });
Línea 44... Línea 44...
44 
 
 44 
 
45 
    await axios
 45 
    await axios
46 
      .get(`/search/entity/${category}?${jsonToParams(urlParams)}`)
 46 
      .get(`/search/entity/${category}?${jsonToParams(urlParams)}`)
47 
      .then((response) => {
 47 
      .then((response) => {
48 
        const { success, data } = response.data
 48 
        const { success, data } = response.data;
49 
 
 49 
 
50 
        if (success) {
 50 
        if (success) {
Línea 51... Línea 51...
51 
          setEntities(data.current.items)
 51 
          setEntities(data.current.items);
52 
          setPages(data.total.pages)
 52 
          setPages(data.total.pages);
53 
        }
 53 
        }
Línea 54... Línea 54...
54 
      })
 54 
      });
55 
    setLoading(false)
 55 
    setLoading(false);
56 
  }
 56 
  };
57 
 
 57 
 
58 
  const onChangePageHandler = (currentPage) => {
 58 
  const onChangePageHandler = (currentPage) => {
59 
    setCurrentPage(currentPage)
 59 
    setCurrentPage(currentPage);
60 
  }
 60 
  };
61 
 
 61 
 
62 
  const getAddressHandler = (addresObject) => {
 62 
  const getAddressHandler = (addresObject) => {
63 
    const { address_components } = addresObject
 63 
    const { address_components } = addresObject;
64 
    if (address_components) {
 64 
    if (address_components) {
65 
      addressKeys.current = []
 65 
      addressKeys.current = [];
66 
      address_components.map((address_component) => {
 66 
      address_components.map((address_component) => {
67 
        const address_component_name = address_component.long_name
 67 
        const address_component_name = address_component.long_name;
68 
        const address_component_type = address_component.types[0]
 68 
        const address_component_type = address_component.types[0];
69 
        switch (address_component_type) {
 69 
        switch (address_component_type) {
70 
          case 'route':
 70 
          case "route":
71 
            addressKeys.current = [
 71 
            addressKeys.current = [
72 
              ...addressKeys.current,
 72 
              ...addressKeys.current,
73 
              { type: 'route', name: address_component_name },
 73 
              { type: "route", name: address_component_name },
74 
            ]
 74 
            ];
75 
            break
 75 
            break;
76 
          case 'sublocality':
 76 
          case "sublocality":
77 
            addressKeys.current = [
 77 
            addressKeys.current = [
78 
              ...addressKeys.current,
 78 
              ...addressKeys.current,
79 
              { type: 'sublocality', name: address_component_name },
 79 
              { type: "sublocality", name: address_component_name },
80 
            ]
 80 
            ];
81 
            break
 81 
            break;
82 
          case 'locality':
 82 
          case "locality":
83 
            addressKeys.current = [
 83 
            addressKeys.current = [
84 
              ...addressKeys.current,
 84 
              ...addressKeys.current,
85 
              { type: 'locality', name: address_component_name },
 85 
              { type: "locality", name: address_component_name },
86 
            ]
 86 
            ];
87 
            break
 87 
            break;
88 
          case 'administrative_area_level_2':
 88 
          case "administrative_area_level_2":
89 
            addressKeys.current = [
 89 
            addressKeys.current = [
90 
              ...addressKeys.current,
 90 
              ...addressKeys.current,
91 
              {
 91 
              {
92 
                type: 'administrative_area_level_2',
 92 
                type: "administrative_area_level_2",
93 
                name: address_component_name,
 93 
                name: address_component_name,
94 
              },
 94 
              },
95 
            ]
 95 
            ];
96 
            break
 96 
            break;
97 
          case 'administrative_area_level_1':
 97 
          case "administrative_area_level_1":
98 
            addressKeys.current = [
 98 
            addressKeys.current = [
99 
              ...addressKeys.current,
 99 
              ...addressKeys.current,
100 
              {
 100 
              {
101 
                type: 'administrative_area_level_1',
 101 
                type: "administrative_area_level_1",
102 
                name: address_component_name,
 102 
                name: address_component_name,
103 
              },
 103 
              },
104 
            ]
 104 
            ];
105 
            break
 105 
            break;
106 
          case 'country':
 106 
          case "country":
107 
            addressKeys.current = [
 107 
            addressKeys.current = [
108 
              ...addressKeys.current,
 108 
              ...addressKeys.current,
109 
              { type: 'country', name: address_component_name },
 109 
              { type: "country", name: address_component_name },
110 
            ]
 110 
            ];
111 
            break
 111 
            break;
112 
          case 'postal_code':
 112 
          case "postal_code":
113 
            addressKeys.current = [
 113 
            addressKeys.current = [
Línea 114... Línea 114...
114 
              ...addressKeys.current,
 114 
              ...addressKeys.current,
115 
              { type: 'postal_code', name: address_component_name },
 115 
              { type: "postal_code", name: address_component_name },
116 
            ]
 116 
            ];
117 
            break
 117 
            break;
118 
          default:
 118 
          default:
119 
            break
 119 
            break;
120 
        }
 120 
        }
Línea 121... Línea 121...
121 
      })
 121 
      });
- 
 
 122 
 
122 
 
 123 
      loadEntities();
- 
 
 124 
    } else {
- 
 
 125 
      if (addressKeys.current.length) {
123 
      loadEntities()
 126 
        loadEntities();
124 
    } else {
 127 
      }
Línea 125... Línea 128...
125 
      if (addressKeys.current.length) {
 128 
    }
126 
        loadEntities()
 129 
  };
Línea 127... Línea 130...
127 
      }
 130 
 
128 
    }
 131 
  const onSearch = (e) => {
129 
  }
 132 
    if (e.key !== "Enter") {
Línea 130... Línea 133...
130 
 
 133 
      return;
131 
  const onSubmitHandler = (e) => {
 134 
    }
132 
    e.preventDefault()
 135 
 
Línea 133... Línea 136...
133 
    history.push({ pathname, search: `?keyword=${entity}` })
 136 
    history.push({ pathname, search: `?keyword=${entity}` });
134 
  }
 137 
  };
135 
 
 138 
 
136 
  const changeCategory = (newCategory) => {
 139 
  const changeCategory = (newCategory) => {
137 
    const urlParams = { keyword }
 140 
    const urlParams = { keyword };
138 
 
 141 
 
139 
    activeFilters.current.forEach(({ name, value }) => {
 142 
    activeFilters.current.forEach(({ name, value }) => {
140 
      urlParams[name] = value
 143 
      urlParams[name] = value;
141 
    })
 144 
    });
142 
 
 145 
 
Línea 143... Línea 146...
143 
    setCategory(newCategory)
 146 
    setCategory(newCategory);
144 
    history.push(`/search/entity/${newCategory}?${jsonToParams(urlParams)}`)
 147 
    history.push(`/search/entity/${newCategory}?${jsonToParams(urlParams)}`);
145 
  }
 148 
  };
146 
 
 149 
 
147 
  useEffect(() => {
 - 
 
148 
    loadEntities(currentPage, keyword, category)
 150 
  useEffect(() => {
149 
    setEntity(keyword)
 151 
    loadEntities(currentPage, keyword, category);
150 
    return () => {
 152 
    setEntity(keyword);
151 
      setCategory('user')
 - 
 
152 
      setEntity('')
 - 
 
153 
      activeFilters.current = []
 153 
    return () => {
154 
      addressKeys.current = []
 154 
      setCategory("user");
155 
    }
 155 
      setEntity("");
156 
  }, [keyword, category, currentPage])
 156 
      activeFilters.current = [];
157 
 
 157 
      addressKeys.current = [];
Línea 196... Línea 196...
196 
            />
 196 
            />
197 
          </Col>
 197 
          </Col>
198 
        </Row>
 198 
        </Row>
199 
      </Container>
 199 
      </Container>
200 
    </>
 200 
    </>
201 
  )
 201 
  );
202 
}
 202 
};
Línea 203... Línea 203...
203 
 
 203