/dev-404-page/ search and limit

packages/gatsby/src/internal-plugins/dev-404-page/raw_dev-404-page.js

@@ -11,18 +11,40 @@ class Dev404Page extends React.Component {
 
   constructor(props) {
     super(props)
-    this.state = { showCustom404: false }
+    const { data } = this.props
+    const pagePaths = data.allSitePage.nodes.map(node => node.path)
+    this.state = {
+      showCustom404: false,
+      initPagePaths: pagePaths,
+      pagePaths: pagePaths,
+      pagePathSearchTerms: ``,
+    }
     this.showCustom404 = this.showCustom404.bind(this)
+    this.handlePagePathSearch = this.handlePagePathSearch.bind(this)
+    this.handleSearchTermChange = this.handleSearchTermChange.bind(this)
   }
 
   showCustom404() {
     this.setState({ showCustom404: true })
   }
 
+  handleSearchTermChange(event) {
+    this.setState({
+      pagePathSearchTerms: event.target.value,
+    })
+  }
+
+  handlePagePathSearch(event) {
+    event.preventDefault()
+    const tempPagePaths = [...this.state.initPagePaths]
+    const searchTerm = new RegExp(`${this.state.pagePathSearchTerms}`)
+    this.setState({
+      pagePaths: tempPagePaths.filter(pagePath => searchTerm.test(pagePath)),
+    })
+  }
+
   render() {
     const { pathname } = this.props.location
-    const { data } = this.props
-    const pagePaths = data.allSitePage.nodes.map(node => node.path)
     let newFilePath
     if (pathname === `/`) {
       newFilePath = `src/pages/index.js`
@@ -61,19 +83,49 @@ class Dev404Page extends React.Component {
           and this page will automatically refresh to show the new page
           component you created.
         </p>
-        {pagePaths.length > 0 && (
+        {this.state.initPagePaths.length > 0 && (
           <div>
             <p>
               If you were trying to reach another page, perhaps you can find it
               below.
             </p>
-            <h2>Pages ({pagePaths.length})</h2>
+            <h2>
+              Pages (
+              {this.state.pagePaths.length != this.state.initPagePaths.length
+                ? `${this.state.pagePaths.length}/${
+                    this.state.initPagePaths.length
+                  }`
+                : this.state.initPagePaths.length}
+              )
+            </h2>
+
+            <form onSubmit={this.handlePagePathSearch}>
+              <label>
+                Search:
+                <input
+                  type="text"
+                  id="search"
+                  placeholder="Search pages..."
+                  value={this.state.pageSearchTerm}
+                  onChange={this.handleSearchTermChange}
+                />
+              </label>
+              <input type="submit" value="Submit" />
+            </form>
             <ul>
-              {pagePaths.map(pagePath => (
-                <li key={pagePath}>
-                  <Link to={pagePath}>{pagePath}</Link>
-                </li>
-              ))}
+              {this.state.pagePaths.map(
+                (pagePath, index) =>
+                  index < 100 && (
+                    <li key={pagePath}>
+                      <Link to={pagePath}>{pagePath}</Link>
+                    </li>
+                  )
+              )}
+              {this.state.pagePaths.length > 100 && (
+                <p style={{ fontWeight: `bold` }}>
+                  ... and {this.state.pagePaths.length - 100} more.
+                </p>
+              )}
             </ul>
           </div>
         )}