Skip to content

Commit f08687c

Browse files
tesseralistesseralis
authored
refactor(www): Make easy-to-convert class components into function components (#25489)
* Convert class components to function components * Convert class components to function components * Convert class components to function components * fix * fix
1 parent c9692ab commit f08687c

16 files changed

+782
-891
lines changed

‎www/src/components/plugin-searchbar-body.js

+97-103
Original file line numberDiff line numberDiff line change
@@ -197,128 +197,122 @@ const searchBoxStyles = t => css`
197197
/* stylelint-enable */
198198

199199
// Search shows a list of "hits", and is a child of the PluginSearchBar component
200-
class Search extends Component {
201-
render() {
202-
return (
203-
<div sx={{ pb: [11, null, null, 0] }}>
200+
function Search({ pathname, query }) {
201+
return (
202+
<div sx={{ pb: [11, null, null, 0] }}>
203+
<div
204+
sx={{
205+
borderBottomWidth: `1px`,
206+
borderBottomStyle: `solid`,
207+
borderColor: `ui.border`,
208+
display: `flex`,
209+
flexDirection: `column`,
210+
width: `100%`,
211+
}}
212+
>
213+
<Global styles={searchBoxStyles} />
214+
<SearchBox translations={{ placeholder: `Search Gatsby Library` }} />
215+
<div css={{ display: `none` }}>
216+
<Configure analyticsTags={[`gatsby-plugins`]} />
217+
<RefinementList
218+
attribute="keywords"
219+
transformItems={items =>
220+
items.map(({ count, ...item }) => {
221+
return {
222+
...item,
223+
count: count || 0,
224+
}
225+
})
226+
}
227+
defaultRefinement={[`gatsby-component`, `gatsby-plugin`]}
228+
/>
229+
<ToggleRefinement
230+
attribute="deprecated"
231+
value={false}
232+
label="No deprecated plugins"
233+
defaultRefinement={true}
234+
/>
235+
</div>
236+
204237
<div
205238
sx={{
206-
borderBottomWidth: `1px`,
207-
borderBottomStyle: `solid`,
208-
borderColor: `ui.border`,
239+
alignItems: `center`,
240+
color: `textMuted`,
209241
display: `flex`,
210-
flexDirection: `column`,
211-
width: `100%`,
242+
height: searchMetaHeight,
243+
px: 6,
244+
fontSize: 0,
212245
}}
213246
>
214-
<Global styles={searchBoxStyles} />
215-
<SearchBox translations={{ placeholder: `Search Gatsby Library` }} />
216-
<div css={{ display: `none` }}>
217-
<Configure analyticsTags={[`gatsby-plugins`]} />
218-
<RefinementList
219-
attribute="keywords"
220-
transformItems={items =>
221-
items.map(({ count, ...item }) => {
222-
return {
223-
...item,
224-
count: count || 0,
225-
}
226-
})
227-
}
228-
defaultRefinement={[`gatsby-component`, `gatsby-plugin`]}
229-
/>
230-
<ToggleRefinement
231-
attribute="deprecated"
232-
value={false}
233-
label="No deprecated plugins"
234-
defaultRefinement={true}
235-
/>
236-
</div>
237-
238-
<div
239-
sx={{
240-
alignItems: `center`,
241-
color: `textMuted`,
242-
display: `flex`,
243-
height: searchMetaHeight,
244-
px: 6,
245-
fontSize: 0,
246-
}}
247-
>
248-
<Stats
249-
translations={{
250-
stats: function (n) {
251-
return `${n} results`
252-
},
253-
}}
254-
/>
255-
<SkipNavLink />
256-
</div>
257-
</div>
258-
259-
<div>
260-
<div
261-
sx={{
262-
[mediaQueries.md]: {
263-
height: t =>
264-
`calc(100vh - ${t.sizes.headerHeight} - ${t.sizes.bannerHeight} - ${searchInputHeight} - ${searchInputWrapperMargin} - ${searchMetaHeight})`,
265-
overflowY: `scroll`,
247+
<Stats
248+
translations={{
249+
stats: function (n) {
250+
return `${n} results`
266251
},
267252
}}
268-
>
269-
<InfiniteHits
270-
hitComponent={result => (
271-
<Result
272-
hit={result.hit}
273-
pathname={this.props.pathname}
274-
query={this.props.query}
275-
/>
276-
)}
277-
/>
278-
</div>
253+
/>
254+
<SkipNavLink />
279255
</div>
256+
</div>
280257

258+
<div>
281259
<div
282260
sx={{
283-
fontSize: 0,
284-
lineHeight: 0,
285-
height: 20,
286-
mt: 6,
287-
display: `none`,
261+
[mediaQueries.md]: {
262+
height: t =>
263+
`calc(100vh - ${t.sizes.headerHeight} - ${t.sizes.bannerHeight} - ${searchInputHeight} - ${searchInputWrapperMargin} - ${searchMetaHeight})`,
264+
overflowY: `scroll`,
265+
},
288266
}}
289267
>
290-
<a
291-
href={`https://www.algolia.com/`}
292-
sx={{
293-
"&&": {
268+
<InfiniteHits
269+
hitComponent={result => (
270+
<Result hit={result.hit} pathname={pathname} query={query} />
271+
)}
272+
/>
273+
</div>
274+
</div>
275+
276+
<div
277+
sx={{
278+
fontSize: 0,
279+
lineHeight: 0,
280+
height: 20,
281+
mt: 6,
282+
display: `none`,
283+
}}
284+
>
285+
<a
286+
href={`https://www.algolia.com/`}
287+
sx={{
288+
"&&": {
289+
background: `url(${AlgoliaLogo})`,
290+
border: `none`,
291+
fontWeight: `body`,
292+
backgroundRepeat: `no-repeat`,
293+
backgroundPosition: `50%`,
294+
backgroundSize: `100%`,
295+
overflow: `hidden`,
296+
textIndent: `-9000px`,
297+
padding: `0!important`,
298+
width: 110,
299+
height: `100%`,
300+
display: `block`,
301+
ml: `auto`,
302+
"&:hover": {
294303
background: `url(${AlgoliaLogo})`,
295-
border: `none`,
296-
fontWeight: `body`,
297304
backgroundRepeat: `no-repeat`,
298305
backgroundPosition: `50%`,
299306
backgroundSize: `100%`,
300-
overflow: `hidden`,
301-
textIndent: `-9000px`,
302-
padding: `0!important`,
303-
width: 110,
304-
height: `100%`,
305-
display: `block`,
306-
ml: `auto`,
307-
"&:hover": {
308-
background: `url(${AlgoliaLogo})`,
309-
backgroundRepeat: `no-repeat`,
310-
backgroundPosition: `50%`,
311-
backgroundSize: `100%`,
312-
},
313307
},
314-
}}
315-
>
316-
Algolia
317-
</a>
318-
</div>
308+
},
309+
}}
310+
>
311+
Algolia
312+
</a>
319313
</div>
320-
)
321-
}
314+
</div>
315+
)
322316
}
323317

324318
// the result component is fed into the InfiniteHits component

‎www/src/components/stub-list.js

+43-47
Original file line numberDiff line numberDiff line change
@@ -17,58 +17,54 @@ const flatten = pages =>
1717
[]
1818
)
1919

20-
class StubList extends React.Component {
21-
render() {
22-
const stubs = findStubs(
23-
flatten([...itemListContributing.items, ...itemListDocs.items])
24-
)
25-
26-
let groupedStubs = {}
20+
export default function StubList() {
21+
const stubs = findStubs(
22+
flatten([...itemListContributing.items, ...itemListDocs.items])
23+
)
2724

28-
stubs.forEach(stub => {
29-
let categoryTitle = stub.parentTitle || `Top Level Documentation Pages`
25+
let groupedStubs = {}
3026

31-
if (groupedStubs[categoryTitle] === undefined) {
32-
groupedStubs[categoryTitle] = []
33-
}
34-
groupedStubs[categoryTitle].push(stub)
35-
})
27+
stubs.forEach(stub => {
28+
let categoryTitle = stub.parentTitle || `Top Level Documentation Pages`
3629

37-
let sortedCategories = Object.keys(groupedStubs).sort((a, b) =>
38-
a.localeCompare(b)
39-
)
30+
if (groupedStubs[categoryTitle] === undefined) {
31+
groupedStubs[categoryTitle] = []
32+
}
33+
groupedStubs[categoryTitle].push(stub)
34+
})
4035

41-
// Put top level at the front of the array if it isn't empty
42-
sortedCategories.splice(
43-
sortedCategories.indexOf(`Top Level Documentation Pages`),
44-
1
45-
)
36+
let sortedCategories = Object.keys(groupedStubs).sort((a, b) =>
37+
a.localeCompare(b)
38+
)
4639

47-
if (groupedStubs[`Top Level Documentation Pages`]) {
48-
sortedCategories = [`Top Level Documentation Pages`, ...sortedCategories]
49-
}
40+
// Put top level at the front of the array if it isn't empty
41+
sortedCategories.splice(
42+
sortedCategories.indexOf(`Top Level Documentation Pages`),
43+
1
44+
)
5045

51-
return (
52-
<section data-testid="list-of-stubs">
53-
{sortedCategories.map(category => {
54-
let categoryTitle =
55-
category.slice(-1) === `*` ? category.slice(0, -1) : category
56-
return (
57-
<React.Fragment key={category}>
58-
<h2 sx={{ fontSize: 4, mb: 3 }}>{categoryTitle}</h2>
59-
<ul>
60-
{groupedStubs[category].map(stub => (
61-
<li key={stub.title}>
62-
<Link to={stub.link}>{stub.title.slice(0, -1)}</Link>
63-
</li>
64-
))}
65-
</ul>
66-
</React.Fragment>
67-
)
68-
})}
69-
</section>
70-
)
46+
if (groupedStubs[`Top Level Documentation Pages`]) {
47+
sortedCategories = [`Top Level Documentation Pages`, ...sortedCategories]
7148
}
72-
}
7349

74-
export default StubList
50+
return (
51+
<section data-testid="list-of-stubs">
52+
{sortedCategories.map(category => {
53+
let categoryTitle =
54+
category.slice(-1) === `*` ? category.slice(0, -1) : category
55+
return (
56+
<React.Fragment key={category}>
57+
<h2 sx={{ fontSize: 4, mb: 3 }}>{categoryTitle}</h2>
58+
<ul>
59+
{groupedStubs[category].map(stub => (
60+
<li key={stub.title}>
61+
<Link to={stub.link}>{stub.title.slice(0, -1)}</Link>
62+
</li>
63+
))}
64+
</ul>
65+
</React.Fragment>
66+
)
67+
})}
68+
</section>
69+
)
70+
}

‎www/src/pages/creators/agencies.js

+3-8
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,11 @@
1-
import React, { Component } from "react"
1+
import React from "react"
22
import { graphql } from "gatsby"
33
import CreatorsView from "../../views/creators"
44

5-
class AgenciesPage extends Component {
6-
render() {
7-
const { location, data } = this.props
8-
return <CreatorsView location={location} data={data} title={`Agencies`} />
9-
}
5+
export default function AgenciesPage({ location, data }) {
6+
return <CreatorsView location={location} data={data} title={`Agencies`} />
107
}
118

12-
export default AgenciesPage
13-
149
export const pageQuery = graphql`
1510
query {
1611
allCreatorsYaml(filter: { type: { eq: "agency" } }) {

‎www/src/pages/creators/companies.js

+3-8
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,11 @@
1-
import React, { Component } from "react"
1+
import React from "react"
22
import { graphql } from "gatsby"
33
import CreatorsView from "../../views/creators"
44

5-
class CompaniesPage extends Component {
6-
render() {
7-
const { location, data } = this.props
8-
return <CreatorsView data={data} location={location} title={`Companies`} />
9-
}
5+
export default function CompaniesPage({ location, data }) {
6+
return <CreatorsView data={data} location={location} title={`Companies`} />
107
}
118

12-
export default CompaniesPage
13-
149
export const pageQuery = graphql`
1510
query {
1611
allCreatorsYaml(filter: { type: { eq: "company" } }) {

‎www/src/pages/creators/index.js

+3-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
1-
import React, { Component } from "react"
1+
import React from "react"
22
import { graphql } from "gatsby"
33
import CreatorsView from "../../views/creators"
44

5-
class CreatorsPage extends Component {
6-
render() {
7-
const { location, data } = this.props
8-
return <CreatorsView data={data} location={location} title={`All`} />
9-
}
5+
export function CreatorsPage({ location, data }) {
6+
return <CreatorsView data={data} location={location} title={`All`} />
107
}
118

129
export default CreatorsPage

0 commit comments

Comments
 (0)