Fixed bug with responses. Reading responses from firebase as dictionary now instead of array

Author: bhaviksingh

src/components/responses/allResponsePreviews.js

@@ -7,7 +7,7 @@ export default class AllResponsePreviews extends React.Component {
     super(props)
     this.DBREF_STRING = "/joseSite/responses/"
 
-    this.waitTime = 10000
+    this.waitTime = 10 * 1000
     this.intervalID = ""
 
     this.state = {
@@ -32,9 +32,13 @@ export default class AllResponsePreviews extends React.Component {
       .ref(this.DBREF_STRING)
       .once("value")
       .then(snapshot => {
-        let dbValues = snapshot.val()
-        dbValues = dbValues.filter(function (el) {
-          return el !== undefined
+        let dbObjects = snapshot.val()
+        let dbValues = []
+        Object.keys(dbObjects).forEach(dbKey => {
+          let dbObject = dbObjects[dbKey]
+          if (dbObject != undefined) {
+            dbValues.push(dbObject)
+          }
         })
         dbValues.forEach(response => {
           response["randomLeftPos"] = Math.random() * 90

src/pages/responses.js

@@ -18,16 +18,20 @@ export default class Responses extends React.Component {
       .ref(this.DBREF_STRING)
       .once("value")
       .then(snapshot => {
-        let dbValues = snapshot.val()
-        dbValues = dbValues.filter(function (el) {
-          return el !== undefined
+        let dbObjects = snapshot.val()
+        let dbValues = []
+        Object.keys(dbObjects).forEach(dbKey => {
+          let dbObject = dbObjects[dbKey]
+          if (dbObject != undefined) {
+            dbValues.push(dbObject)
+          }
         })
         this.setState({ firebaseDataList: dbValues })
       })
   }
   renderResponses = () => {
-    return this.state.firebaseDataList.map(response => (
-      <div className={`${ResponseStyles.responseDetail} half`}>
+    return this.state.firebaseDataList.map((response, index) => (
+      <div className={`${ResponseStyles.responseDetail} half`} key={index}>
         <div className={ResponseStyles.author}> {response.author}</div>
         <div className={ResponseStyles.response}> {response.response}</div>
       </div>

src/styles/response.module.css

@@ -41,30 +41,32 @@
   position: fixed;
   bottom: 0px;
   font-size: 14px;
-  padding-bottom: 32px;
+  padding-bottom: 16px;
+  padding-top: 16px;
   z-index: 2;
+  background: var(--yellow);
+  box-shadow: 0px 0px 12px 10px var(--yellow);
 }
 
-.button,
 .responsePreview {
   background: var(--yellow);
   box-shadow: 0px 0px 12px 10px var(--yellow);
   cursor: pointer;
   padding: 4px;
 }
 
+.button {
+  cursor: pointer;
+  font-size: 18px;
+}
+
 .button:hover,
 .responsePreview:hover,
 .expandedResponsePreview {
   background: var(--lightYellow);
   box-shadow: 0px 0px 12px 10px var(--lightYellow);
 }
 
-.button {
-  padding-top: 12px;
-  padding-bottom: 12px;
-}
-
 .add {
   float: left;
 }