-
Notifications
You must be signed in to change notification settings - Fork 30
/
view.js
103 lines (92 loc) · 4.03 KB
/
view.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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import React from "react"
import { Link } from "gatsby"
import Pagination from "./pagination.js"
import { InfiniteScroll } from "./infiniteScroll.js"
import { FaCog } from "react-icons/fa"
import theme from "../theme.yaml"
import Grid from "./grid.js"
import TrafficLight from "./trafficlight.js"
/** View for "home" page with infinite scroll and fallback to pagination. */
class View extends React.Component {
constructor(props) {
super(props)
console.log("*** Constructing View ***")
if (props.globalState.isInitializing() || !props.globalState.useInfiniteScroll) {
const pageKey = "page" + props.pageContext.currentPage
console.log(`View is initializing items according to ${pageKey}.`)
props.globalState.updateState({
[pageKey]: props.pageContext.pageImages,
cursor: props.pageContext.currentPage + 1,
})
}
}
render() {
const g = this.props.globalState
const pageContext = this.props.pageContext
const paginationData = {
currentPage: pageContext.currentPage,
countPages: pageContext.countPages,
useInfiniteScroll: g.useInfiniteScroll,
}
return (
<>
{/* Traffic Lights to toggle between Infinite Scroll and Pagination. */}
<TrafficLight onClick={g.toggle} green={g.useInfiniteScroll} pageContext={pageContext} />
{/* Infinite Scroll */}
<InfiniteScroll throttle={150} threshold={1800} hasMore={g.hasMore(pageContext)} onLoadMore={g.loadMore}>
{/* Grid given as a child element for Infinite Scroll. */}
<Grid globalState={g} pageContext={pageContext} />
</InfiniteScroll>
{/* Notification for demo purposes. */}
{g.useInfiniteScroll && g.cursor !== 0 && !g.hasMore(pageContext) && (
<div style={{ paddingTop: "40px" }}>
<h4>
<center>
Congrats! You scrolled through all items starting from page
{" " + pageContext.currentPage}. Go to page <Link to="/">one</Link>?
</center>
</h4>
</div>
)}
{/* Loading spinner. */}
{(g.cursor === 0 || g.hasMore(pageContext)) && (
<div className="spinner">
<FaCog />
</div>
)}
{/* Fallback to Pagination for non JS users. */}
{g.useInfiniteScroll && (
<noscript>
<style>{`.spinner { display: none !important; }`}</style>
<Pagination paginationData={paginationData} />
<h4>
<center>Infinite Scroll does not work without JavaScript.</center>
</h4>
</noscript>
)}
{/* Fallback to Pagination on toggle (for demo) and also on error. */}
{!g.useInfiniteScroll && <Pagination paginationData={paginationData} />}
<style jsx>
{`
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
.spinner {
margin-top: 40px;
font-size: 60px;
text-align: center;
display: ${g.useInfiniteScroll ? "block" : "none"};
}
.spinner :global(svg) {
fill: ${theme.color.brand.primaryLight};
animation: spinner 3s linear infinite;
}
`}
</style>
</>
)
}
}
export default View