|
1 | | -import React, { FC, ReactElement, useEffect } from "react"; |
2 | | -import { useDispatch, useSelector } from "react-redux"; |
| 1 | +import React, { FC, ReactElement } from "react"; |
3 | 2 | import { List } from "@material-ui/core"; |
4 | 3 |
|
5 | | -import TrendsItem from "./TrendsItem/TrendsItem"; |
6 | | -import { selectIsTrendsLoading, selectTrendsItems, selectTrendsPagesCount } from "../../store/ducks/tags/selectors"; |
7 | | -import { fetchTrends, resetTrendsState } from "../../store/ducks/tags/actionCreators"; |
| 4 | +import TrendsItem from "./TrendsItem"; |
8 | 5 | import Spinner from "../../components/Spinner/Spinner"; |
9 | 6 | import { withDocumentTitle } from "../../hoc/withDocumentTitle"; |
10 | 7 | import InfiniteScrollWrapper from "../../components/InfiniteScrollWrapper/InfiniteScrollWrapper"; |
11 | 8 | import PageWrapper from "../../components/PageWrapper/PageWrapper"; |
| 9 | +import { useTrends } from "./useTrends"; |
12 | 10 |
|
13 | 11 | const Trends: FC = (): ReactElement => { |
14 | | - const dispatch = useDispatch(); |
15 | | - const isLoading = useSelector(selectIsTrendsLoading); |
16 | | - const trends = useSelector(selectTrendsItems); |
17 | | - const pagesCount = useSelector(selectTrendsPagesCount); |
18 | | - |
19 | | - useEffect(() => { |
20 | | - window.scrollTo(0, 0); |
21 | | - loadTrends(0); |
22 | | - |
23 | | - return () => { |
24 | | - dispatch(resetTrendsState()); |
25 | | - }; |
26 | | - }, []); |
27 | | - |
28 | | - const loadTrends = (page: number): void => { |
29 | | - dispatch(fetchTrends(page)); |
30 | | - }; |
| 12 | + const { isTrendsLoading, trends, pagesCount, loadTrends } = useTrends(); |
31 | 13 |
|
32 | 14 | return ( |
33 | | - <PageWrapper translationKey={"TRENDS"} defaultValue={"Trends"}> |
| 15 | + <PageWrapper translationKey="TRENDS" defaultValue="Trends"> |
34 | 16 | <InfiniteScrollWrapper dataLength={trends.length} pagesCount={pagesCount} loadItems={loadTrends}> |
35 | | - {isLoading && !trends.length ? ( |
| 17 | + {isTrendsLoading && !trends.length ? ( |
36 | 18 | <Spinner paddingTop={80} /> |
37 | 19 | ) : ( |
38 | 20 | <List style={{ paddingTop: 48 }}> |
39 | 21 | {trends.map((trend) => <TrendsItem key={trend.id} tag={trend} />)} |
40 | | - {isLoading && <Spinner />} |
| 22 | + {isTrendsLoading && <Spinner />} |
41 | 23 | </List> |
42 | 24 | )} |
43 | 25 | </InfiniteScrollWrapper> |
|
0 commit comments