Update firebase-tutorial with firebase emulator

Author: redhwannacef

Diff for: firebase-tutorial/.eslintcache

@@ -1 +1 @@
-[{"/Users/codethred/development/workspace/youtube-tutorials/firebase-tutorial/src/App.js":"1","/Users/codethred/development/workspace/youtube-tutorials/firebase-tutorial/src/reportWebVitals.js":"2","/Users/codethred/development/workspace/youtube-tutorials/firebase-tutorial/src/index.js":"3","/Users/codethred/development/workspace/youtube-tutorials/firebase-tutorial/src/Todos.jsx":"4","/Users/codethred/development/workspace/youtube-tutorials/firebase-tutorial/src/firebase.js":"5"},{"size":508,"mtime":1611303381236,"results":"6","hashOfConfig":"7"},{"size":362,"mtime":1611236261994,"results":"8","hashOfConfig":"7"},{"size":522,"mtime":1611260932379,"results":"9","hashOfConfig":"7"},{"size":1836,"mtime":1611305852409,"results":"10","hashOfConfig":"7"},{"size":305,"mtime":1611307465248,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"ynmwzi",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/codethred/development/workspace/youtube-tutorials/firebase-tutorial/src/App.js",[],"/Users/codethred/development/workspace/youtube-tutorials/firebase-tutorial/src/reportWebVitals.js",[],"/Users/codethred/development/workspace/youtube-tutorials/firebase-tutorial/src/index.js",[],"/Users/codethred/development/workspace/youtube-tutorials/firebase-tutorial/src/Todos.jsx",[],"/Users/codethred/development/workspace/youtube-tutorials/firebase-tutorial/src/firebase.js",[]]
+[{"/Users/codethred/development/workspace/youtube-tutorials/firebase-tutorial/src/App.js":"1","/Users/codethred/development/workspace/youtube-tutorials/firebase-tutorial/src/reportWebVitals.js":"2","/Users/codethred/development/workspace/youtube-tutorials/firebase-tutorial/src/index.js":"3","/Users/codethred/development/workspace/youtube-tutorials/firebase-tutorial/src/Todos.jsx":"4","/Users/codethred/development/workspace/youtube-tutorials/firebase-tutorial/src/firebase.js":"5"},{"size":508,"mtime":1611303381236,"results":"6","hashOfConfig":"7"},{"size":362,"mtime":1611236261994,"results":"8","hashOfConfig":"7"},{"size":522,"mtime":1611260932379,"results":"9","hashOfConfig":"7"},{"size":1827,"mtime":1611680570166,"results":"10","hashOfConfig":"7"},{"size":780,"mtime":1611762035615,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"ynmwzi",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/codethred/development/workspace/youtube-tutorials/firebase-tutorial/src/App.js",[],"/Users/codethred/development/workspace/youtube-tutorials/firebase-tutorial/src/reportWebVitals.js",[],"/Users/codethred/development/workspace/youtube-tutorials/firebase-tutorial/src/index.js",[],"/Users/codethred/development/workspace/youtube-tutorials/firebase-tutorial/src/Todos.jsx",[],"/Users/codethred/development/workspace/youtube-tutorials/firebase-tutorial/src/firebase.js",[]]

Diff for: firebase-tutorial/.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+firestore-debug.log*
+ui-debug.log*

Diff for: firebase-tutorial/README.md

@@ -4,9 +4,12 @@ Tutorial on how to use auth, firestore and functions by building a simple todo a
 
 Useful Links:
 
-YouTube video: https://youtu.be/cuvP4h6O2x8
+YouTube video (Firebase Tutorial): https://youtu.be/cuvP4h6O2x8
+
+YouTube video (Firebase Emulator Tutorial): https://youtu.be/kVaNbNEa1Zk
 
 Firebase: https://firebase.google.com/
 
-React Firebase Hooks: https://github.com/csfrequency/react-firebase-hooks
+Firebase Emulator: https://firebase.google.com/docs/emulator-suite
 
+React Firebase Hooks: https://github.com/csfrequency/react-firebase-hooks

Diff for: firebase-tutorial/firebase.json

@@ -2,5 +2,19 @@
   "firestore": {
     "rules": "firestore.rules",
     "indexes": "firestore.indexes.json"
+  },
+  "emulators": {
+    "auth": {
+      "port": 9099
+    },
+    "functions": {
+      "port": 5001
+    },
+    "firestore": {
+      "port": 8080
+    },
+    "ui": {
+      "enabled": true
+    }
   }
 }

Diff for: firebase-tutorial/src/Todos.jsx

@@ -1,7 +1,6 @@
 import "./App.css";
 import { useState } from "react";
-import { auth, firestore, functions } from "./firebase";
-import firebase from "firebase";
+import firebase, { auth, firestore, functions } from "./firebase";
 import { useCollectionData } from "react-firebase-hooks/firestore";
 
 const addTodo = functions.httpsCallable("addTodo");
@@ -39,7 +38,7 @@ const Todos = () => {
           />
           <button type="submit">Add</button>
         </form>
-        {todos && todos.map((todo) => <Todo {...todo} />)}
+        {todos && todos.map((todo) => <Todo key={todo.id} {...todo} />)}
       </main>
     </>
   );

Diff for: firebase-tutorial/src/firebase.js

@@ -1,13 +1,19 @@
-import firebase from 'firebase/app'
+import firebase from "firebase/app";
 
 import "firebase/firestore";
 import "firebase/auth";
 import "firebase/functions";
 
-firebase.initializeApp({})
+firebase.initializeApp({});
 
 export const auth = firebase.auth();
 export const firestore = firebase.firestore();
 export const functions = firebase.functions();
 
+if (window.location.hostname.includes("localhost")) {
+  auth.useEmulator("http://localhost:9099");
+  firestore.useEmulator("localhost", 8080);
+  functions.useEmulator("localhost", 5001);
+}
+
 export default firebase;