feat(starters): Filter v2 by default (#9739)

* Filter for v2 starters by default. #7900

* WIP

* fix reset all filters issue

* move out default search option

* wip

* refactor to use render prop

* fix filtersApplied for metadata

* pr refactor

* linting

packages/gatsby-plugin-google-gtag/README.md

@@ -74,7 +74,7 @@ To use it, simply import it and use it like you would the `<a>` element e.g.
 import React from "react"
 import { OutboundLink } from "gatsby-plugin-google-gtag"
 
-export default () => (
+export default () => {
   <div>
     <OutboundLink href="https://www.gatsbyjs.org/packages/gatsby-plugin-google-gtag/">
       Visit the Google Global Site Tag plugin page!

www/src/utils/reach-router-state-manager.js

@@ -1,33 +1,55 @@
-import React from "react"
+import React, { Component, Fragment } from "react"
 import queryString from "query-string"
 import { navigate } from "@reach/router"
 
-// manage your state entirely within the router, so that it's copiable
-// https://gist.github.com/sw-yx/efd9ee71669413bca6a895d87e30742f
-
-export default defaultURLState => Component => props => {
-  const { location } = props
-  const urlState = { ...defaultURLState, ...queryString.parse(location.search) }
-  const setURLState = newState => {
-    const finalState = { ...urlState, ...newState } // merge with existing urlstate
-    Object.keys(finalState).forEach(function(k) {
-      if (
-        // Don't save some state values if it meets the conditions below.
-        !finalState[k] || // falsy
-        finalState[k] === `` || // string
-        (Array.isArray(finalState[k]) && !finalState[k].length) || // array
-        finalState[k] === defaultURLState[k] // same as default state, unnecessary
-      ) {
-        delete finalState[k] // Drop query params with new values = falsy
+const emptySearchState = { s: ``, c: [], d: [], v: [], sort: `recent` }
+class RRSM extends Component {
+  state = emptySearchState
+
+  static defaultProps = {
+    defaultSearchState: {},
+  }
+
+  setUrlState = newState => {
+    const finalState = { ...this.state, ...newState }
+    // update RSSM state
+    this.setState({ ...finalState })
+
+    // sync url to RSSM
+    const params = Object.keys(finalState).reduce((merged, key) => {
+      // right now the sort behavior is default, it doesn't show in the url
+      if (finalState[key] && key !== `sort`) {
+        merged[key] = finalState[key]
       }
-    })
-    return navigate(`${location.pathname}?${queryString.stringify(finalState)}`)
+      return merged
+    }, {})
+
+    return navigate(`${location.pathname}?${queryString.stringify(params)}`)
+  }
+
+  componentDidMount() {
+    const urlState = queryString.parse(location.search)
+
+    // if urlState is empty, default to v2
+    if (Object.keys(urlState).length === 0) {
+      return this.setUrlState(this.props.defaultSearchState)
+    }
+
+    // otherwise, set to urlState
+    return this.setUrlState(urlState)
+  }
+
+  render() {
+    const { render } = this.props
+    return (
+      <Fragment>
+        {render({
+          setURLState: this.setUrlState,
+          urlState: this.state,
+        })}
+      </Fragment>
+    )
   }
-  return (
-    <Component
-      setURLState={setURLState} // use this instead of `setState`
-      urlState={urlState} // easier to read state from this instead of `location`
-      {...props}
-    />
-  )
 }
+
+export default RRSM

www/src/views/starter-library/filtered-starters.js

@@ -27,8 +27,9 @@ export default class FilteredStarterLibrary extends Component {
   state = {
     sitesToShow: 12,
   }
-  setFiltersCategory = filtersCategory =>
+  setFiltersCategory = filtersCategory => {
     this.props.setURLState({ c: Array.from(filtersCategory) })
+  }
   setFiltersDependency = filtersDependency =>
     this.props.setURLState({ d: Array.from(filtersDependency) })
   setFiltersVersion = filtersVersion =>
@@ -37,8 +38,7 @@ export default class FilteredStarterLibrary extends Component {
     this.props.setURLState({
       sort: this.props.urlState.sort === `recent` ? `stars` : `recent`,
     })
-  resetFilters = () =>
-    this.props.setURLState({ c: null, d: null, v: null, s: `` })
+  resetFilters = () => this.props.setURLState({ c: [], d: [], v: [], s: `` })
   showMoreSites = starters => {
     let showAll =
       this.state.sitesToShow + 15 > starters.length ? starters.length : false

www/src/views/starter-library/index.js

@@ -2,6 +2,7 @@ import React, { Component } from "react"
 import Helmet from "react-helmet"
 import Layout from "../../components/layout"
 import RRSM from "../../utils/reach-router-state-manager"
+import queryString from "query-string"
 
 import FilteredStarters from "./filtered-starters"
 
@@ -11,13 +12,16 @@ class StarterLibraryPage extends Component {
     return JSON.stringify(this.props) !== JSON.stringify(nextProps)
   }
   render() {
-    const { location, urlState } = this.props
+    const { location } = this.props
+    const urlState = queryString.parse(location.search)
+
     const filtersApplied =
-      urlState.s !== ``
+      urlState.s !== undefined
         ? urlState.s // if theres a search term
         : urlState.d && !Array.isArray(urlState.d)
           ? urlState.d // if theres a single dependency
-          : `Showcase` // if no search term or single dependency
+          : `Library` // if no search term or single dependency
+
     return (
       <Layout location={location}>
         <Helmet>
@@ -39,12 +43,21 @@ class StarterLibraryPage extends Component {
           <meta name="twitter.label1" content="Reading time" />
           <meta name="twitter:data1" content={`1 min read`} />
         </Helmet>
-        <FilteredStarters {...this.props} />
+        <RRSM
+          {...this.props}
+          location={location}
+          render={({ setURLState, urlState }) => (
+            <FilteredStarters
+              {...this.props}
+              setURLState={setURLState}
+              urlState={urlState}
+            />
+          )}
+          defaultSearchState={{ v: [`2`] }}
+        />
       </Layout>
     )
   }
 }
 
-export default RRSM({ s: ``, c: [], d: [], v: [], sort: `recent` })(
-  StarterLibraryPage
-)
+export default StarterLibraryPage