refactor(www): Make easy-to-convert class components into function co…

…mponents (#25489) * Convert class components to function components * Convert class components to function components * Convert class components to function components * fix * fix
gatsbyjs · Jul 3, 2020 · f08687c · f08687c
1 parent c9692ab
commit f08687c
Show file tree

Hide file tree

Showing 16 changed files with 782 additions and 891 deletions.
diff --git a/www/src/components/plugin-searchbar-body.js b/www/src/components/plugin-searchbar-body.js
@@ -197,128 +197,122 @@ const searchBoxStyles = t => css`
 /* stylelint-enable */
 
 // Search shows a list of "hits", and is a child of the PluginSearchBar component
-class Search extends Component {
-  render() {
-    return (
-      <div sx={{ pb: [11, null, null, 0] }}>
+function Search({ pathname, query }) {
+  return (
+    <div sx={{ pb: [11, null, null, 0] }}>
+      <div
+        sx={{
+          borderBottomWidth: `1px`,
+          borderBottomStyle: `solid`,
+          borderColor: `ui.border`,
+          display: `flex`,
+          flexDirection: `column`,
+          width: `100%`,
+        }}
+      >
+        <Global styles={searchBoxStyles} />
+        <SearchBox translations={{ placeholder: `Search Gatsby Library` }} />
+        <div css={{ display: `none` }}>
+          <Configure analyticsTags={[`gatsby-plugins`]} />
+          <RefinementList
+            attribute="keywords"
+            transformItems={items =>
+              items.map(({ count, ...item }) => {
+                return {
+                  ...item,
+                  count: count || 0,
+                }
+              })
+            }
+            defaultRefinement={[`gatsby-component`, `gatsby-plugin`]}
+          />
+          <ToggleRefinement
+            attribute="deprecated"
+            value={false}
+            label="No deprecated plugins"
+            defaultRefinement={true}
+          />
+        </div>
+
         <div
           sx={{
-            borderBottomWidth: `1px`,
-            borderBottomStyle: `solid`,
-            borderColor: `ui.border`,
+            alignItems: `center`,
+            color: `textMuted`,
             display: `flex`,
-            flexDirection: `column`,
-            width: `100%`,
+            height: searchMetaHeight,
+            px: 6,
+            fontSize: 0,
           }}
         >
-          <Global styles={searchBoxStyles} />
-          <SearchBox translations={{ placeholder: `Search Gatsby Library` }} />
-          <div css={{ display: `none` }}>
-            <Configure analyticsTags={[`gatsby-plugins`]} />
-            <RefinementList
-              attribute="keywords"
-              transformItems={items =>
-                items.map(({ count, ...item }) => {
-                  return {
-                    ...item,
-                    count: count || 0,
-                  }
-                })
-              }
-              defaultRefinement={[`gatsby-component`, `gatsby-plugin`]}
-            />
-            <ToggleRefinement
-              attribute="deprecated"
-              value={false}
-              label="No deprecated plugins"
-              defaultRefinement={true}
-            />
-          </div>
-
-          <div
-            sx={{
-              alignItems: `center`,
-              color: `textMuted`,
-              display: `flex`,
-              height: searchMetaHeight,
-              px: 6,
-              fontSize: 0,
-            }}
-          >
-            <Stats
-              translations={{
-                stats: function (n) {
-                  return `${n} results`
-                },
-              }}
-            />
-            <SkipNavLink />
-          </div>
-        </div>
-
-        <div>
-          <div
-            sx={{
-              [mediaQueries.md]: {
-                height: t =>
-                  `calc(100vh - ${t.sizes.headerHeight} - ${t.sizes.bannerHeight} - ${searchInputHeight} - ${searchInputWrapperMargin} - ${searchMetaHeight})`,
-                overflowY: `scroll`,
+          <Stats
+            translations={{
+              stats: function (n) {
+                return `${n} results`
               },
             }}
-          >
-            <InfiniteHits
-              hitComponent={result => (
-                <Result
-                  hit={result.hit}
-                  pathname={this.props.pathname}
-                  query={this.props.query}
-                />
-              )}
-            />
-          </div>
+          />
+          <SkipNavLink />
         </div>
+      </div>
 
+      <div>
         <div
           sx={{
-            fontSize: 0,
-            lineHeight: 0,
-            height: 20,
-            mt: 6,
-            display: `none`,
+            [mediaQueries.md]: {
+              height: t =>
+                `calc(100vh - ${t.sizes.headerHeight} - ${t.sizes.bannerHeight} - ${searchInputHeight} - ${searchInputWrapperMargin} - ${searchMetaHeight})`,
+              overflowY: `scroll`,
+            },
           }}
         >
-          <a
-            href={`https://www.algolia.com/`}
-            sx={{
-              "&&": {
+          <InfiniteHits
+            hitComponent={result => (
+              <Result hit={result.hit} pathname={pathname} query={query} />
+            )}
+          />
+        </div>
+      </div>
+
+      <div
+        sx={{
+          fontSize: 0,
+          lineHeight: 0,
+          height: 20,
+          mt: 6,
+          display: `none`,
+        }}
+      >
+        <a
+          href={`https://www.algolia.com/`}
+          sx={{
+            "&&": {
+              background: `url(${AlgoliaLogo})`,
+              border: `none`,
+              fontWeight: `body`,
+              backgroundRepeat: `no-repeat`,
+              backgroundPosition: `50%`,
+              backgroundSize: `100%`,
+              overflow: `hidden`,
+              textIndent: `-9000px`,
+              padding: `0!important`,
+              width: 110,
+              height: `100%`,
+              display: `block`,
+              ml: `auto`,
+              "&:hover": {
                 background: `url(${AlgoliaLogo})`,
-                border: `none`,
-                fontWeight: `body`,
                 backgroundRepeat: `no-repeat`,
                 backgroundPosition: `50%`,
                 backgroundSize: `100%`,
-                overflow: `hidden`,
-                textIndent: `-9000px`,
-                padding: `0!important`,
-                width: 110,
-                height: `100%`,
-                display: `block`,
-                ml: `auto`,
-                "&:hover": {
-                  background: `url(${AlgoliaLogo})`,
-                  backgroundRepeat: `no-repeat`,
-                  backgroundPosition: `50%`,
-                  backgroundSize: `100%`,
-                },
               },
-            }}
-          >
-            Algolia
-          </a>
-        </div>
+            },
+          }}
+        >
+          Algolia
+        </a>
       </div>
-    )
-  }
+    </div>
+  )
 }
 
 // the result component is fed into the InfiniteHits component

diff --git a/www/src/components/stub-list.js b/www/src/components/stub-list.js
@@ -17,58 +17,54 @@ const flatten = pages =>
     []
   )
 
-class StubList extends React.Component {
-  render() {
-    const stubs = findStubs(
-      flatten([...itemListContributing.items, ...itemListDocs.items])
-    )
-
-    let groupedStubs = {}
+export default function StubList() {
+  const stubs = findStubs(
+    flatten([...itemListContributing.items, ...itemListDocs.items])
+  )
 
-    stubs.forEach(stub => {
-      let categoryTitle = stub.parentTitle || `Top Level Documentation Pages`
+  let groupedStubs = {}
 
-      if (groupedStubs[categoryTitle] === undefined) {
-        groupedStubs[categoryTitle] = []
-      }
-      groupedStubs[categoryTitle].push(stub)
-    })
+  stubs.forEach(stub => {
+    let categoryTitle = stub.parentTitle || `Top Level Documentation Pages`
 
-    let sortedCategories = Object.keys(groupedStubs).sort((a, b) =>
-      a.localeCompare(b)
-    )
+    if (groupedStubs[categoryTitle] === undefined) {
+      groupedStubs[categoryTitle] = []
+    }
+    groupedStubs[categoryTitle].push(stub)
+  })
 
-    // Put top level at the front of the array if it isn't empty
-    sortedCategories.splice(
-      sortedCategories.indexOf(`Top Level Documentation Pages`),
-      1
-    )
+  let sortedCategories = Object.keys(groupedStubs).sort((a, b) =>
+    a.localeCompare(b)
+  )
 
-    if (groupedStubs[`Top Level Documentation Pages`]) {
-      sortedCategories = [`Top Level Documentation Pages`, ...sortedCategories]
-    }
+  // Put top level at the front of the array if it isn't empty
+  sortedCategories.splice(
+    sortedCategories.indexOf(`Top Level Documentation Pages`),
+    1
+  )
 
-    return (
-      <section data-testid="list-of-stubs">
-        {sortedCategories.map(category => {
-          let categoryTitle =
-            category.slice(-1) === `*` ? category.slice(0, -1) : category
-          return (
-            <React.Fragment key={category}>
-              <h2 sx={{ fontSize: 4, mb: 3 }}>{categoryTitle}</h2>
-              <ul>
-                {groupedStubs[category].map(stub => (
-                  <li key={stub.title}>
-                    <Link to={stub.link}>{stub.title.slice(0, -1)}</Link>
-                  </li>
-                ))}
-              </ul>
-            </React.Fragment>
-          )
-        })}
-      </section>
-    )
+  if (groupedStubs[`Top Level Documentation Pages`]) {
+    sortedCategories = [`Top Level Documentation Pages`, ...sortedCategories]
   }
-}
 
-export default StubList
+  return (
+    <section data-testid="list-of-stubs">
+      {sortedCategories.map(category => {
+        let categoryTitle =
+          category.slice(-1) === `*` ? category.slice(0, -1) : category
+        return (
+          <React.Fragment key={category}>
+            <h2 sx={{ fontSize: 4, mb: 3 }}>{categoryTitle}</h2>
+            <ul>
+              {groupedStubs[category].map(stub => (
+                <li key={stub.title}>
+                  <Link to={stub.link}>{stub.title.slice(0, -1)}</Link>
+                </li>
+              ))}
+            </ul>
+          </React.Fragment>
+        )
+      })}
+    </section>
+  )
+}
diff --git a/www/src/pages/creators/agencies.js b/www/src/pages/creators/agencies.js
@@ -1,16 +1,11 @@
-import React, { Component } from "react"
+import React from "react"
 import { graphql } from "gatsby"
 import CreatorsView from "../../views/creators"
 
-class AgenciesPage extends Component {
-  render() {
-    const { location, data } = this.props
-    return <CreatorsView location={location} data={data} title={`Agencies`} />
-  }
+export default function AgenciesPage({ location, data }) {
+  return <CreatorsView location={location} data={data} title={`Agencies`} />
 }
 
-export default AgenciesPage
-
 export const pageQuery = graphql`
   query {
     allCreatorsYaml(filter: { type: { eq: "agency" } }) {

diff --git a/www/src/pages/creators/companies.js b/www/src/pages/creators/companies.js
@@ -1,16 +1,11 @@
-import React, { Component } from "react"
+import React from "react"
 import { graphql } from "gatsby"
 import CreatorsView from "../../views/creators"
 
-class CompaniesPage extends Component {
-  render() {
-    const { location, data } = this.props
-    return <CreatorsView data={data} location={location} title={`Companies`} />
-  }
+export default function CompaniesPage({ location, data }) {
+  return <CreatorsView data={data} location={location} title={`Companies`} />
 }
 
-export default CompaniesPage
-
 export const pageQuery = graphql`
   query {
     allCreatorsYaml(filter: { type: { eq: "company" } }) {

diff --git a/www/src/pages/creators/index.js b/www/src/pages/creators/index.js
@@ -1,12 +1,9 @@
-import React, { Component } from "react"
+import React from "react"
 import { graphql } from "gatsby"
 import CreatorsView from "../../views/creators"
 
-class CreatorsPage extends Component {
-  render() {
-    const { location, data } = this.props
-    return <CreatorsView data={data} location={location} title={`All`} />
-  }
+export function CreatorsPage({ location, data }) {
+  return <CreatorsView data={data} location={location} title={`All`} />
 }
 
 export default CreatorsPage