Exercise 02 -learn React todo

.env.example

@@ -0,0 +1,7 @@
+REACT_APP_FIREBASE_API_KEY="PASTE VALUE HERE"
+REACT_APP_FIREBASE_AUTHDOMAIN="PASTE VALUE HERE"
+REACT_APP_FIREBASE_PROJECT_ID="PASTE VALUE HERE"
+REACT_APP_FIREBASE_STORAGEBUCKET="PASTE VALUE HERE"
+REACT_APP_FIREBASE_MESSAGINGSENDERID="PASTE VALUE HERE"
+REACT_APP_FIREBASE_APPID="PASTE VALUE HERE"
+REACT_APP_FIREBASE_MEASUREMENTID="PASTE VALUE HERE"

README.md

@@ -1,16 +1,19 @@
-## Exercise 1
+## Exercise 2
 
-This exercise is to edit and remove items from a todo list
+This exercise is to edit and remove items from a todo list stored in Firebase
 
 ### To do
 
-- [ ] Edit to-do
+- [ ] Add to-do (to Firebase)
+- [ ] Edit to-do (to Firebase)
 - [ ] Remove to-do
 
 ### Setup Instructions
 
 - Fork the repo
-- Clone the repo
+- Setup Firebase project and copy config credentials
+- Rename `.env.example` to `.env.local`
+- Copy Firebase credentials to `.env.local`
 - Install dependencies using `yarn`
 - Run locally using `yarn start`
 

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "firebase": "^8.2.10",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.3",

src/App.js

@@ -1,6 +1,25 @@
 import { useState, useEffect } from "react";
+import firebase from "firebase/app";
+import "firebase/firestore";
+
 import "./App.css";
 
+const firebaseConfig = {
+  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
+  authDomain: process.env.REACT_APP_FIREBASE_AUTHDOMAIN,
+  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.REACT_APP_STORAGEBUCKET,
+  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGINGSENDERID,
+  appId: process.env.REACT_APP_FIREBASE_APPID,
+  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENTID,
+};
+//This check is to avoid firebase re-initializing multiple times
+if (typeof window !== "undefined" && !firebase.apps.length) {
+  firebase.initializeApp(firebaseConfig);
+}
+//Load firebase firestore
+var db = firebase.firestore();
+
 const App = () => {
   const [title, setTitle] = useState("");
   const [tasks, setTasks] = useState([]);
@@ -14,6 +33,16 @@ const App = () => {
     }
   }, []);
 
+  useEffect(() => {
+    db.collection("todos").onSnapshot((querySnapshot) => {
+      var todos = [];
+      querySnapshot.forEach((doc) => {
+        todos.push(doc.data().title);
+      });
+      console.log("Current todos: ", todos);
+    });
+  }, []);
+
   //UseEffect re-renders application whenever dependency objects are changed
   useEffect(() => {
     //Save to localstorage whenever tasks is updated