one step further with firestore, update react

Author: Jochem Berends

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Chrome",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}/src",
+      "sourceMapPathOverrides": {
+        "webpack:///src/*": "${webRoot}/*"
+      }
+    }
+  ]
+}

package.json

@@ -3,20 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.12",
-    "@fortawesome/free-regular-svg-icons": "^5.6.3",
-    "@fortawesome/free-solid-svg-icons": "^5.6.3",
-    "@fortawesome/react-fontawesome": "^0.1.3",
-    "@material-ui/core": "^3.7.1",
-    "@material-ui/icons": "^3.0.1",
+    "@firebase/app-types": "^0.3.5",
+    "@fortawesome/fontawesome-svg-core": "^1.2.15",
+    "@fortawesome/free-regular-svg-icons": "^5.7.2",
+    "@fortawesome/free-solid-svg-icons": "^5.7.2",
+    "@fortawesome/react-fontawesome": "^0.1.4",
+    "@material-ui/core": "^3.9.2",
+    "@material-ui/icons": "^3.0.2",
     "axios": "^0.18.0",
-    "firebase": "^5.7.3",
+    "firebase": "^5.8.5",
     "i": "^0.3.6",
-    "npm": "^6.5.0",
-    "react": "^16.7.0",
-    "react-contenteditable": "^3.2.4",
-    "react-dom": "^16.7.0",
-    "react-scripts": "2.1.2"
+    "npm": "^6.8.0",
+    "react": "^16.8.3",
+    "react-contenteditable": "^3.2.6",
+    "react-dom": "^16.8.3",
+    "react-scripts": "2.1.5"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/Ideas/Ideas.js

@@ -6,6 +6,7 @@ import BottomBar from "./BottomBar/BottomBar";
 import OnBoarding from "./OnBoarding/OnBoarding";
 import NewIdea from "./NewIdea/NewIdea";
 import axios from "axios";
+import { ideasStore } from "../../firebaseApi";
 
 class Ideas extends Component {
   constructor(props) {
@@ -37,9 +38,23 @@ class Ideas extends Component {
   }
 
   componentDidMount() {
+    // this.retrieveIdeaFirestoreHandler().then(this.randomIdea())
     this.retrieveIdeaHandler().then(this.randomIdea())
   }
 
+
+  retrieveIdeaFirestoreHandler = () => {
+    return ideasStore.get()
+    .then((snapshot) => {
+      snapshot.forEach((doc) => {
+        console.log(doc.id, '=>', doc.data());
+      })
+    })
+    .catch((err) => {
+      console.log('Error getting documents', err);
+    })
+  }
+
   /**
    * Retrievs the list of ideas from the server.
    * @returns {Promise<AxiosResponse<any> | never>}

src/firebaseApi.js

@@ -6,7 +6,13 @@ export default firebase.initializeApp({
   apiKey: process.env.REACT_APP_API_KEY,
   authDomain: process.env.REACT_APP_AUTH_DOMAIN,
   databaseURL: process.env.REACT_APP_DATABASE_URL,
-  // projectId: process.env.REACT_APP_PROJECT_ID,
+  projectId: process.env.REACT_APP_PROJECT_ID,
   storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
-  // messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
+  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
 });
+
+export const ideasStore = () => {
+  const db = firebase.firestore()
+  db.settings({timestampsInSnapshots: true})
+  return db.collection('ideas')
+}