feat: add button message

src/App.js

@@ -1,9 +1,36 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 // import logo from './logo.svg';
 import './App.css';
+import { getResponseCount } from './backend';
 
 function App() {
   const [submitted, setSubmitted] = useState(false)
+  const [responseCount, setResponseCount] = useState()
+  const [status, setStatus] = useState("loading")
+
+  useEffect(() => {
+    getResponseCount().then(res => {
+      setResponseCount(res)
+      setStatus("loaded")
+    })
+      .catch(e => {
+        console.log(e.message)
+        setStatus("error")
+      })
+  }, [])
+  let buttonMessage = ""
+  switch (status) {
+    case "loading":
+      buttonMessage = "loading..."
+      break
+    case "loaded":
+      buttonMessage = `Vouch with ${responseCount} other's`
+      break
+    case "error":
+      buttonMessage = "error"
+      break
+    default:
+  }
   const content = submitted ? (
     <p>
       Thanks for joining in!<br />
@@ -29,8 +56,8 @@ function App() {
         <input value='' />
         </label>
         <button type="submit">
-          I'll vouch for that
-      </button>
+          {buttonMessage}
+        </button>
       </form>
     )
 

src/backend.js

@@ -0,0 +1,7 @@
+export async function getResponseCount() {
+  let res = await window.fetch(
+    'https://us-central1-example-project-4ad97.cloudfunctions.net/api/response-count',
+  )
+  let { data } = await res.json()
+  return data.count
+}