/
NewsPage.js
77 lines (71 loc) · 1.81 KB
/
NewsPage.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import styled from "styled-components";
import NewsBoard from "../components/NewsPage/NewsBoard";
import WhiteNewsBanner from "../components/NewsPage/WhiteNewsBanner";
import { useInfiniteQuery } from "react-query";
import { useInView } from "react-intersection-observer";
import { getAllArticles } from "../api";
import { useEffect } from "react";
const Wrapper = styled.div`
overflow-y: scroll;
::-webkit-scrollbar {
display: none;
}
`;
const Board = styled.div`
padding-top: 46px;
padding-bottom: 45px;
`;
function NewsPage() {
const { ref, inView } = useInView();
const {
data,
error,
fetchNextPage,
hasNextPage,
isFetchingNextPage,
status,
} = useInfiniteQuery(
["allArticles"],
({ pageParam = 1 }) => getAllArticles(pageParam),
{
getNextPageParam: (lastPage) => {
if (!lastPage.isLast) {
return lastPage.nextPage;
} else {
return undefined;
}
},
getPreviousPageParam: (firstPage) => firstPage.prevCursor,
}
);
useEffect(() => {
if (inView) {
fetchNextPage();
}
}, [inView]);
return status === "loading" ? null : status === "error" ? (
<p>Error: {error.message}</p>
) : (
<Wrapper>
<WhiteNewsBanner />
<Board>
{data.pages.map((page, index) => (
<NewsBoard articles={page.content} key={index} />
))}
<button
style={{ border: "none", backgroundColor: "white", color: "white" }}
ref={ref}
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
>
{isFetchingNextPage
? "Loading more..."
: hasNextPage
? "Load Newer"
: "Nothing more to load"}
</button>
</Board>
</Wrapper>
);
}
export default NewsPage;