Proyectos de Subversion LeadersLinked - SPA

Rev

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

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