Issue #1 | Connect app to Firebase

package.json

@@ -3,11 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "firebase": "^7.6.1",
     "husky": "^3.1.0",
     "lint-staged": "^9.5.0",
     "prettier": "^1.19.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-firestore": "^1.0.1",
     "react-scripts": "3.3.0"
   },
   "scripts": {

src/App.js

@@ -1,25 +1,13 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import List from './pages/List';
+import AddItem from './pages/AddItem';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <main>
+      <AddItem />
+      <List />
+    </main>
   );
 }
 

src/components/Loading.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Loading = () => {
+  return <p>loading...</p>;
+};
+
+export default Loading;

src/index.js

@@ -1,10 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
 import * as serviceWorker from './serviceWorker';
+import { FirestoreProvider } from 'react-firestore';
+import { fb as firebase } from './lib/firebase.js';
+import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <FirestoreProvider firebase={firebase}>
+    <App />
+  </FirestoreProvider>,
+  document.getElementById('root'),
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/pages/AddItem.js

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { withFirestore } from 'react-firestore';
+
+const AddItem = ({ firestore }) => {
+  const [name, setName] = useState('');
+
+  // Send the new item to Firebase
+  const addItem = name => {
+    firestore.collection('items').add({ name });
+  };
+
+  // The state every time an event happens
+  const handleChange = event => {
+    setName(event.target.value);
+  };
+
+  // Handle the click of the Add Item button on the form
+  const handleSubmit = event => {
+    event.preventDefault();
+    addItem(name);
+    setName('');
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        Add Item:
+        <input
+          value={name}
+          placeholder="apples"
+          type="text"
+          onChange={handleChange}
+        />
+      </label>
+      <input type="submit" value="Add Item" />
+    </form>
+  );
+};
+// Wrap this component in the higher order component withFirestore to directly access the database
+export default withFirestore(AddItem);

src/pages/List.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { FirestoreCollection } from 'react-firestore';
+import Loading from '../components/Loading';
+
+const List = () => {
+  return (
+    <section>
+      <FirestoreCollection
+        // Specify the path to the collection you're pulling data from
+        path="items"
+        // Sort the data
+        sort="name"
+        // isLoading = is a Boolean that represents the loading status for the firebase query. true until an initial payload from Firestore is received.
+        // data = an Array containing all of the documents in the collection. Each item will contain an id along with the other data contained in the document.
+        render={({ isLoading, data }) => {
+          return isLoading ? (
+            <Loading />
+          ) : (
+            <ul>
+              {data.map(item => (
+                <li key={item.id}>{item.name}</li>
+              ))}
+            </ul>
+          );
+        }}
+      />
+    </section>
+  );
+};
+
+export default List;