profile only displays posts with identical uid, but the update functi…

…on is still not working
clr14003 · May 7, 2020 · 832c46b · 832c46b
1 parent b7de77b
commit 832c46b
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 14 deletions.
diff --git a/final/src/views/Home.vue b/final/src/views/Home.vue
@@ -1,16 +1,19 @@
 <template>
   <div class="home">
-
+    <!-- make the post input and refresh divs here -->
+
     <div id="postList">
       <div class="postDiv" v-for="(post, name, index) in posts" :key=index>
         <img v-if="post.hasOwnProperty('img')" class="postPFP" v-bind:src="post.img">
         <img v-if="!post.hasOwnProperty('img')" class="postPFP" src="../assets/ph-pfp.png">
-        {{ post.username }}
+        <span v-if="post.hasOwnProperty('username')">{{ post.username }}</span>
+        <span v-if="!post.hasOwnProperty('username')">[ERROR: USERNAME NOT FOUND]</span>
         <br>
-        {{ post.message }}</div>
+        {{ post.message }}
+      </div>
     </div>
-
-    <button id="updateButton" @click="getPosts()">update</button>
+   <!-- make a back-to-top button here -->
+    <button id="updateButton" @click="clearPosts()">update</button>
 
   </div>
 
@@ -33,13 +36,41 @@ export default {
 
   methods: {
     getPosts(){
+      db.collection("posts").get().then(querySnapshot => {
+          querySnapshot.forEach( doc => {
+              // doc.data() is never undefined for query doc snapshots
+              /*console.log(doc.id, " => ", doc.data());*/
+              this.posts.push(doc.data())
+          });
+      }); 
+    },
+
+    getMyPosts(){
       db.collection("posts").get().then(querySnapshot => {
           querySnapshot.forEach( doc => {
               // doc.data() is never undefined for query doc snapshots
               console.log(doc.id, " => ", doc.data());
               this.posts.push(doc.data())
           });
       }); 
+    },
+
+
+    // this currently isn't a "clear posts" function, but proves I can grab all posts and do something to them
+    clearPosts(){
+      document.querySelectorAll('.postDiv').forEach( div => {
+        div.style.backgroundColor = "red";
+      })
+    },
+
+    getPostsTest(){
+      db.collection("posts").onSnapshot((snapshot) => {
+        snapshot.docChanges().forEach( change => {
+            if (change.type === "added") {
+                this.posts.push(change.doc.data());
+            }
+        });
+    });
     }
 
   },
@@ -49,7 +80,7 @@ export default {
     // console.log(db);
 
     this.getPosts();
-
+    this.getPostsTest();
   }
 };
 </script>
diff --git a/final/src/views/Profile.vue b/final/src/views/Profile.vue
@@ -1,11 +1,16 @@
 <template>
   <div class="about">
     <h1>This is the profile page</h1>
-    <div>
-      {{ $store.state.user }}
-
+     <div id="postList">
+      <div class="postDiv" v-for="(post, name, index) in posts" :key=index>
+        <img v-if="post.hasOwnProperty('img')" class="postPFP" v-bind:src="post.img">
+        <img v-if="!post.hasOwnProperty('img')" class="postPFP" src="../assets/ph-pfp.png">
+        <span v-if="post.hasOwnProperty('username')">{{ post.username }}</span>
+        <span v-if="!post.hasOwnProperty('username')">[ERROR: USERNAME NOT FOUND]</span>
+        <br>
+        {{ post.message }}
+      </div>
     </div>
-    <img v-bind:src="$store.state.user.photoURL">
   </div>
 
 </template>
@@ -19,21 +24,38 @@ export default {
   name: 'profile',
   data: function(){
     return {
-
+      posts: []
     }
   },
 
 
   methods: {
-
+    getMyPosts(){
+      db.collection("posts").where("uid", "==", this.$store.state.user.uid).get().then(querySnapshot => {
+          querySnapshot.forEach( doc => {
+              // doc.data() is never undefined for query doc snapshots
+              this.posts.push(doc.data())
+          });
+      }); 
+    }
 
   },
 
   // This runs when the page loads
   mounted() {
     // console.log(db);
     console.log(this.$store.state.user.photoURL)
-
+    this.getMyPosts();
   }
 };
-</script>
+</script>
+
+<!-- getPosts(){
+      db.collection("posts").get().then(querySnapshot => {
+          querySnapshot.forEach( doc => {
+              // doc.data() is never undefined for query doc snapshots
+              console.log(doc.id, " => ", doc.data());
+              this.posts.push(doc.data())
+          });
+      }); 
+    } -->