Add status bar to bottom of screen during develop (#14874)

* Add status bar to bottom of screen during develop

This is a simple start but we'll be adding more things to the
status bar over the next few days.

* Remove commented out code

* Comments and tweaks

* Add comment

* Make stage name more explicit & don't clear screen for now

Author: KyleAMathews

packages/gatsby-cli/src/reporter/index.js

@@ -179,6 +179,12 @@ const reporter: Reporter = {
       span,
     }
   },
+  // Make private as we'll probably remove this in a future refactor.
+  _setStage(stage) {
+    if (reporterInstance.setStage) {
+      reporterInstance.setStage(stage)
+    }
+  },
 }
 
 console.log = (...args) => reporter.log(util.format(...args))

packages/gatsby-cli/src/reporter/reporters/ink/components/develop.js

@@ -0,0 +1,88 @@
+import React, { useContext, useState, useEffect, useRef } from "react"
+import { Box, Color, StdoutContext } from "ink"
+
+// Handy hook from https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+function useInterval(callback, delay) {
+  const savedCallback = useRef()
+
+  // Remember the latest callback.
+  useEffect(() => {
+    savedCallback.current = callback
+  }, [callback])
+
+  // Set up the interval.
+  useEffect(() => {
+    function tick() {
+      savedCallback.current()
+    }
+    if (delay !== null) {
+      let id = setInterval(tick, delay)
+      return () => clearInterval(id)
+    }
+
+    return null
+  }, [delay])
+}
+
+// Track the width and height of the terminal. Responsive app design baby!
+const useTerminalResize = () => {
+  const { stdout } = useContext(StdoutContext)
+  const [sizes, setSizes] = useState([stdout.columns, stdout.rows])
+  useEffect(() => {
+    stdout.on(`resize`, () => {
+      setSizes([stdout.columns, stdout.rows])
+    })
+    return () => {
+      stdout.off(`resize`)
+    }
+  }, [stdout])
+
+  return sizes
+}
+
+// Query the site's graphql instance for the latest count.
+const fetchPageQueryCount = url =>
+  fetch(`${url}___graphql`, {
+    method: `post`,
+    body: JSON.stringify({
+      query: `query MyQuery {
+  allSitePage {
+    totalCount
+  }
+}`,
+    }),
+    headers: { "Content-Type": `application/json` },
+  })
+    .then(res => res.json())
+    .then(json => json.data.allSitePage.totalCount)
+
+const Develop = props => {
+  const [pagesCount, setPagesCount] = useState(0)
+
+  fetchPageQueryCount(props.stage.context.url).then(count =>
+    setPagesCount(count)
+  )
+  // Query for latest page count every second.
+  // Built-in subscriptions would be nice.
+  useInterval(() => {
+    // POST to get pages count.
+    fetchPageQueryCount(props.stage.context.url).then(count =>
+      setPagesCount(count)
+    )
+  }, 1000)
+
+  const [width] = useTerminalResize()
+
+  return (
+    <Box flexDirection="column" marginTop={2}>
+      <Box textWrap={`truncate`}>{`—`.repeat(width)}</Box>
+      <Box height={1} flexDirection="row">
+        <Color>{pagesCount} pages</Color>
+        <Box flexGrow={1} />
+        <Color>{props.stage.context.appName}</Color>
+      </Box>
+    </Box>
+  )
+}
+
+export default Develop

packages/gatsby-cli/src/reporter/reporters/ink/reporter.js

@@ -3,6 +3,7 @@ import { Static, Box } from "ink"
 import chalk from "chalk"
 import Spinner from "./components/spinner"
 import ProgressBar from "./components/progress-bar"
+import Develop from "./components/develop"
 import { Message } from "./components/messages"
 import isTTY from "../../../util/is-tty"
 import calcElapsedTime from "../../../util/calc-elapsed-time"
@@ -32,10 +33,15 @@ export default class GatsbyReporter extends React.Component {
     verbose: false,
     messages: [],
     activities: {},
+    stage: { stage: `init`, context: {} },
   }
 
   format = chalk
 
+  setStage = stage => {
+    this.setState({ stage })
+  }
+
   createActivity = ({ id, ...options }) => {
     this.setState(state => {
       return {
@@ -122,7 +128,7 @@ export default class GatsbyReporter extends React.Component {
   }
 
   render() {
-    const { activities, messages, disableColors } = this.state
+    const { activities, messages, disableColors, stage } = this.state
 
     const spinners = []
     const progressBars = []
@@ -165,6 +171,9 @@ export default class GatsbyReporter extends React.Component {
             />
           ))}
         </Box>
+        {stage.stage === `DevelopBootstrapFinished` && (
+          <Develop stage={stage} />
+        )}
       </Box>
     )
   }

packages/gatsby/src/commands/develop.js

@@ -428,7 +428,13 @@ module.exports = async (program: any) => {
   }
 
   function printInstructions(appName, urls, useYarn) {
-    console.log()
+    report._setStage({
+      stage: `DevelopBootstrapFinished`,
+      context: {
+        url: urls.localUrlForBrowser,
+        appName,
+      },
+    })
     console.log(`You can now view ${chalk.bold(appName)} in the browser.`)
     console.log()