[step-060] add firebase configuration, save responses directly to firestore

Author: jamesknelson

.env.example

@@ -0,0 +1,7 @@
+REACT_APP_FIREBASE_API_KEY=
+REACT_APP_FIREBASE_AUTH_DOMAIN=
+REACT_APP_FIREBASE_DATABASE_URL=
+REACT_APP_FIREBASE_PROJECT_ID=
+REACT_APP_FIREBASE_STORAGE_BUCKET=
+REACT_APP_FIREBASE_MESSAGING_SENDER_ID=
+REACT_APP_FIREBASE_APP_ID=

README.md

@@ -6,13 +6,17 @@ This is the companion repository to [React, Firebase & Bacon](https://frontarm.c
 Each branch within this repository contains code for one or more steps within the course. [See an outline and installation instructions at the master branch »](https://github.com/frontarm/react-firebase-bacon)
 
 
-Step 055 - Programmatic navigation
+Step 060 - Firestore configuration
 --------
 
 This step makes the following changes:
 
-- Splits the thankyou screen out into a separate route at `/thanks`.
-- Programmatically navigates to `/thanks` when a submit completes successfully.
+- Add the [firebase](https://npmjs.com/package/firebase) package as a dependency.
+- Add a `firestore.rules` file that (mostly) locks down the firestore database, and tell Firebase to use it in `firebase.json`.
+- Add `src/config.js`, which exports an object with the app's config, as set by your environment variables at build time.
+- Add an `.env.example` file (you can rename this `.env.local` and add your Firebase configuration, to set your environment variables for config.js).
+- Replace `src/backend.js` with code to initialize firestore.
+- Remove code to display a response count from the Landing route, and replace the call to the `postResponse` function with a direct call to Firestore.
 
 Related lessons:
 

firebase.json

@@ -12,5 +12,8 @@
         "destination": "/index.html"
       }
     ]
+  },
+  "firestore": {
+    "rules": "firestore.rules"
   }
 }

firestore.rules

@@ -0,0 +1,12 @@
+service cloud.firestore {
+  match /databases/{database}/documents {
+    // Keep everything locked down by default
+    match /{document=**} {
+      allow read, write: if false;
+    }
+
+    match /responses/{id} {
+      allow create;
+    }
+  }
+}

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "firebase": "^7.1.0",
     "history": "^4.10.1",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",

src/backend.js

@@ -1,34 +1,7 @@
-const BaseURL =
-  'https://us-central1-example-project-4ad97.cloudfunctions.net/api'
+import firebase from 'firebase/app'
+import 'firebase/firestore'
+import config from './config'
 
-export async function getResponseCount() {
-  let res = await window.fetch(BaseURL + '/response-count')
-  let { data } = await res.json()
-  return data.count
-}
+let firebaseApp = firebase.initializeApp(config.firebase)
 
-/**
- * Submit an email address and name to a test server, and returns
- * the server response's body in case of success, invalid input
- * or a conflict with existing data.
- */
-export async function postResponse({ email, name }) {
-  let res = await window.fetch(BaseURL + '/response', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({
-      email,
-      name,
-    }),
-  })
-
-  // If the server returns something other than expected, throw the
-  // response to indicate an error.
-  if (res.status !== 200 && res.status !== 400 && res.status !== 409) {
-    throw res
-  }
-
-  return res.json()
-}
+export const db = firebaseApp.firestore()

src/config.js

@@ -0,0 +1,11 @@
+export default {
+  firebase: {
+    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
+    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
+    databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
+    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
+    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
+    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
+    appId: process.env.REACT_APP_FIREBASE_APP_ID,
+  },
+}

src/routes/landing.js

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { css } from 'styled-components/macro'
 
-import { getResponseCount, postResponse } from 'backend'
+import { db } from 'backend'
 import { StyledButton } from 'components/buttons'
 import NarrowCardLayout from 'components/narrowCardLayout'
 import { Field } from 'components/fields'
@@ -37,35 +37,14 @@ function validate({ email, name }) {
 }
 
 export default function Landing({ navigate }) {
-  const [responseCount, setResponseCount] = useState(undefined)
+  const [responseCount, setResponseCount] = useState(0)
   const [name, setName] = useState('')
   const [email, setEmail] = useState('')
   const [status, setStatus] = useState({
     type: 'fresh',
   })
   const params = { name, email }
 
-  useEffect(() => {
-    let hasBeenUnmounted = false
-    getResponseCount().then(
-      count => {
-        if (!hasBeenUnmounted) {
-          setResponseCount(count || 0)
-        }
-      },
-      () => {
-        if (!hasBeenUnmounted) {
-          // There's no need to display an error if we can't get the count.
-          // Just set it to zero to hide the count.
-          setResponseCount(0)
-        }
-      },
-    )
-    return () => {
-      hasBeenUnmounted = true
-    }
-  }, [])
-
   const handleSubmit = async event => {
     event.preventDefault()
 
@@ -83,19 +62,13 @@ export default function Landing({ navigate }) {
     })
 
     try {
-      const result = await postResponse(params)
-      if (result.status === 'error') {
-        setStatus({
-          type: 'error',
-          issues: result.issues || {
-            base: 'error',
-          },
-          params,
-        })
-      } else {
-        navigate('/thanks')
-      }
+      await db
+        .collection('responses')
+        .doc()
+        .set(params)
+      navigate('/thanks')
     } catch (error) {
+      console.error(error)
       setStatus({
         type: 'error',
         issues: {