Skip to content

Commit baddf58

Browse files
tesseralistesseralis
authoredJul 3, 2020
refactor pagination to function component (#25496)
·
v0.0.0-6babel-plugin-remove-graphql-queries@2.9.13
1 parent 6a6ac17 commit baddf58

File tree

1 file changed

+95
-98
lines changed

1 file changed

+95
-98
lines changed
 

‎www/src/components/pagination/index.js

+95-98
Original file line numberDiff line numberDiff line change
@@ -9,119 +9,116 @@ import {
99
import PaginationLink from "./PaginationLink"
1010
import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
1111

12-
class Pagination extends React.Component {
13-
changePage = e => {
14-
navigate(e.target.value ? `/blog/page/${e.target.value}` : `/blog/`)
15-
}
16-
render() {
17-
const { numPages, currentPage } = this.props.context
18-
const isFirst = currentPage === 1
19-
const isLast = currentPage === numPages
20-
const prevPageNum =
21-
currentPage - 1 === 1 ? `` : `page/${(currentPage - 1).toString()}`
22-
const nextPageNum = (currentPage + 1).toString()
23-
const prevPageLink = isFirst ? null : `/blog/${prevPageNum}`
24-
const nextPageLink = isLast ? null : `/blog/page/${nextPageNum}`
12+
function changePage(e) {
13+
navigate(e.target.value ? `/blog/page/${e.target.value}` : `/blog/`)
14+
}
2515

26-
const prevNextLinkStyles = {
27-
"&&": {
28-
borderBottom: 0,
29-
color: `gatsby`,
30-
},
31-
}
16+
export default function Pagination({ context }) {
17+
const { numPages, currentPage } = context
18+
const isFirst = currentPage === 1
19+
const isLast = currentPage === numPages
20+
const prevPageNum =
21+
currentPage - 1 === 1 ? `` : `page/${(currentPage - 1).toString()}`
22+
const nextPageNum = (currentPage + 1).toString()
23+
const prevPageLink = isFirst ? null : `/blog/${prevPageNum}`
24+
const nextPageLink = isLast ? null : `/blog/page/${nextPageNum}`
25+
26+
const prevNextLinkStyles = {
27+
"&&": {
28+
borderBottom: 0,
29+
color: `gatsby`,
30+
},
31+
}
3232

33-
return (
33+
return (
34+
<div
35+
sx={{
36+
display: `flex`,
37+
justifyContent: `space-between`,
38+
mx: -6,
39+
p: 6,
40+
flexDirection: `column`,
41+
fontSize: 1,
42+
[mediaQueries.md]: {
43+
background: `transparent`,
44+
borderTop: 0,
45+
marginBottom: 0,
46+
paddingTop: 0,
47+
flexDirection: `row`,
48+
},
49+
}}
50+
>
3451
<div
3552
sx={{
3653
display: `flex`,
54+
margin: `0`,
55+
padding: `0`,
3756
justifyContent: `space-between`,
38-
mx: -6,
39-
p: 6,
40-
flexDirection: `column`,
41-
fontSize: 1,
57+
alignItems: `center`,
58+
mb: 3,
4259
[mediaQueries.md]: {
43-
background: `transparent`,
44-
borderTop: 0,
45-
marginBottom: 0,
46-
paddingTop: 0,
47-
flexDirection: `row`,
60+
width: `15rem`,
61+
mb: 0,
4862
},
4963
}}
5064
>
51-
<div
65+
<PaginationLink to={prevPageLink} sx={prevNextLinkStyles}>
66+
<ArrowBackIcon />
67+
Newer posts
68+
</PaginationLink>
69+
<PaginationLink to={nextPageLink} sx={prevNextLinkStyles}>
70+
Older posts
71+
<ArrowForwardIcon />
72+
</PaginationLink>
73+
</div>
74+
<div
75+
sx={{
76+
display: `flex`,
77+
alignItems: `center`,
78+
justifyContent: `flex-end`,
79+
fontSize: 1,
80+
}}
81+
>
82+
<span>Showing page &nbsp;</span>
83+
<select
84+
aria-label="Pagination Dropdown"
85+
value={currentPage === 1 ? `` : currentPage.toString()}
86+
onChange={changePage}
5287
sx={{
53-
display: `flex`,
54-
margin: `0`,
55-
padding: `0`,
56-
justifyContent: `space-between`,
57-
alignItems: `center`,
58-
mb: 3,
59-
[mediaQueries.md]: {
60-
width: `15rem`,
61-
mb: 0,
62-
},
88+
appearance: `none`,
89+
border: `none`,
90+
padding: `0.5ch 2ch 0.5ch 0.5ch`,
91+
color: `gatsby`,
92+
fontWeight: `bold`,
6393
}}
6494
>
65-
<PaginationLink to={prevPageLink} sx={prevNextLinkStyles}>
66-
<ArrowBackIcon />
67-
Newer posts
68-
</PaginationLink>
69-
<PaginationLink to={nextPageLink} sx={prevNextLinkStyles}>
70-
Older posts
71-
<ArrowForwardIcon />
72-
</PaginationLink>
73-
</div>
74-
<div
95+
{Array.from({ length: numPages }, (_, i) => (
96+
<option
97+
value={`${i === 0 ? `` : i + 1}`}
98+
key={`pagination-number${i + 1}`}
99+
aria-label={`Goto Page ${i + 1}`}
100+
aria-current={currentPage === i + 1}
101+
>
102+
{i + 1}
103+
</option>
104+
))}
105+
</select>
106+
<svg
107+
width="10"
108+
height="5"
109+
viewBox="0 0 10 5"
75110
sx={{
76-
display: `flex`,
77-
alignItems: `center`,
78-
justifyContent: `flex-end`,
79-
fontSize: 1,
111+
position: `relative`,
112+
right: 4,
113+
fill: `gatsby`,
114+
pointerEvents: `none`,
80115
}}
81116
>
82-
<span>Showing page &nbsp;</span>
83-
<select
84-
aria-label="Pagination Dropdown"
85-
value={currentPage === 1 ? `` : currentPage.toString()}
86-
onChange={this.changePage}
87-
sx={{
88-
appearance: `none`,
89-
border: `none`,
90-
padding: `0.5ch 2ch 0.5ch 0.5ch`,
91-
color: `gatsby`,
92-
fontWeight: `bold`,
93-
}}
94-
>
95-
{Array.from({ length: numPages }, (_, i) => (
96-
<option
97-
value={`${i === 0 ? `` : i + 1}`}
98-
key={`pagination-number${i + 1}`}
99-
aria-label={`Goto Page ${i + 1}`}
100-
aria-current={currentPage === i + 1}
101-
>
102-
{i + 1}
103-
</option>
104-
))}
105-
</select>
106-
<svg
107-
width="10"
108-
height="5"
109-
viewBox="0 0 10 5"
110-
sx={{
111-
position: `relative`,
112-
right: 4,
113-
fill: `gatsby`,
114-
pointerEvents: `none`,
115-
}}
116-
>
117-
<path d="M0 0l5 4.998L10 0z" fillRule="evenodd" />
118-
</svg>
119-
<span>of &nbsp;</span>
120-
<span>{numPages}</span>
121-
</div>
117+
<path d="M0 0l5 4.998L10 0z" fillRule="evenodd" />
118+
</svg>
119+
<span>of &nbsp;</span>
120+
<span>{numPages}</span>
122121
</div>
123-
)
124-
}
122+
</div>
123+
)
125124
}
126-
127-
export default Pagination

0 commit comments

Comments
 (0)
Please sign in to comment.