Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3674 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3674 Rev 3719
Línea 1... Línea 1...
1 
import { useState, useCallback, useEffect } from 'react';
 1 
import { useState, useCallback, useEffect } from 'react';
2 
import { useApi } from './useApi';
 2 
import { useApi } from './useApi';
3 
import { api } from '@shared/libs';
 3 
import { api } from '@shared/libs';
4 
 
 4 
 
5 
const apiFunc = (url, page, filters) => {
 5 
const apiFunc = (url, page, filters) => {
6 
  return api.get(url, { params: { page, ...filters } });
 6 
  return api.get(url, { params: { page, ...filters } });
7 
};
 7 
};
8 
 
 8 
 
9 
export const usePagination = (url) => {
 9 
export const usePagination = (url) => {
10 
  const [data, setData] = useState([]);
 10 
  const [data, setData] = useState([]);
11 
  const [page, setPage] = useState(0);
 11 
  const [page, setPage] = useState(0);
12 
  const [hasMore, setHasMore] = useState(true);
 12 
  const [hasMore, setHasMore] = useState(true);
13 
  const [filters, setFilters] = useState({});
 13 
  const [filters, setFilters] = useState({});
14 
 
 14 
 
15 
  const { loading, execute } = useApi(apiFunc, {
 15 
  const { loading, execute } = useApi(apiFunc, {
16 
    onSuccess: (data) => {
 16 
    onSuccess: (data) => {
17 
      setData((prevData) =>
 17 
      setData((prevData) =>
18 
        data.current.page > 1 ? [...prevData, ...data.current.items] : data.current.items
 18 
        data.current.page > 1 ? [...prevData, ...data.current.items] : data.current.items
19 
      );
 19 
      );
20 
      setHasMore(data.current.page < data.total.pages);
 20 
      setHasMore(data.current.page < data.total.pages);
21 
      setPage(data.current.page);
 21 
      setPage(data.current.page);
22 
    }
 22 
    }
23 
  });
 23 
  });
24 
 
 24 
 
25 
  const loadMore = useCallback(() => {
 25 
  const loadMore = useCallback(() => {
26 
    if (loading || !hasMore) return;
 26 
    if (loading || !hasMore) return;
27 
    execute(url, page + 1, filters);
 27 
    execute(url, page + 1, filters);
28 
  }, [loading, hasMore, page, filters]);
 28 
  }, [loading, hasMore, page, filters]);
29 
 
 29 
 
30 
  const refresh = useCallback(
 30 
  const refresh = useCallback(
31 
    (newFilters) => {
 31 
    (newFilters) => {
32 
      setHasMore(true);
 32 
      setHasMore(true);
33 
      setData([]);
 33 
      setData([]);
34 
      setPage(0);
 34 
      setPage(0);
35 
      const filtersToUse = newFilters || filters;
 35 
      const filtersToUse = newFilters || filters;
36 
      setFilters(filtersToUse);
 36 
      setFilters(filtersToUse);
37 
      execute(url, 1, filtersToUse);
 37 
      execute(url, 1, filtersToUse);
38 
    },
 38 
    },
39 
    [execute, filters, url]
 39 
    [execute, filters, url]
40 
  );
 40 
  );
41 
 
 41 
 
42 
  useEffect(() => {
 42 
  useEffect(() => {
43 
    if (url && data.length === 0 && !loading && hasMore && page === 0) {
 43 
    if (url && data.length === 0 && !loading && hasMore && page === 0) {
44 
      refresh(filters);
 44 
      refresh(filters);
45 
    }
 45 
    }
46 
  }, [filters, refresh, data.length, loading, hasMore, page, url]);
 46 
  }, [filters, refresh, data.length, loading, hasMore, page, url]);
47 
 
 47 
 
48 
  const applyFilters = useCallback(
 48 
  const applyFilters = useCallback(
49 
    (newFilters) => {
 49 
    (newFilters) => {
50 
      refresh(newFilters);
 50 
      refresh(newFilters);
51 
    },
 51 
    },
52 
    [refresh]
 52 
    [refresh]
53 
  );
 53 
  );
54 
 
 54 
 
55 
  return {
 55 
  return {
56 
    data,
 56 
    data,
57 
    loading,
 57 
    loading,
58 
    hasMore,
 58 
    hasMore,
59 
    filters,
 59 
    filters,
60 
    loadMore,
 60 
    loadMore,
61 
    refresh,
 61 
    refresh,
62 
    applyFilters
 62 
    applyFilters
63 
  };
 63 
  };
64 
};
 64 
};