profile

package.json

@@ -13,6 +13,7 @@
     "firebase": "^7.14.2",
     "firebaseui": "^4.5.0",
     "jquery": "^3.5.0",
+    "moment": "^2.25.3",
     "popper.js": "^1.16.1",
     "vue": "^2.6.11",
     "vue-resource": "^1.5.1",

src/main.js

@@ -11,6 +11,7 @@ import ui from '@/plugins/firebaseui-init';
 
 import 'bootstrap';
 import './assets/app.scss';
+import 'moment';
 
 Vue.config.productionTip = false;
 

src/views/Home.vue

@@ -3,7 +3,7 @@
         <h2>Compose a Bark</h2>
         <input type="text" v-model="search" placeholder="search barks"/>
          <b-list-group-item class="d-flex align-items-center">
-        <b-avatar variant="info" src="https://placekitten.com/300/300" class="mr-3"></b-avatar>
+        <b-avatar variant="info" :src="this.$store.state.user.photoURL" class="mr-3"></b-avatar>
         <span class="mr-auto">
              <form  v-if="!submitted">
                 <textarea type="text" placeholder="Write your Bark here..." v-model.lazy="bark.content" required />
@@ -12,7 +12,7 @@
       </b-list-group-item>
         <b-list-group-item class="d-flex align-items-center" v-for="(bark, index) in filteredallBarks" :key=index>
         <b-avatar  :src="bark.user.photoURL" class="mr-3"></b-avatar>
-        <div class="mr-auto"> <p display="inline" > {{ bark.user.displayName }} | {{ new Date(bark.createdAt.seconds)}}</p>
+        <div class="mr-auto"> <p display="inline" > {{ bark.user.displayName }} | {{ formatDate (bark.createdAt.toDate() ) }}</p>
 
             </div>
             <br>
@@ -27,8 +27,10 @@
 
 <script>
 // Imports
+import moment from 'moment';
+
 export default {
-    data () {
+    data: function() {
         return {
             bark: {
                 content: '', 
@@ -38,7 +40,14 @@ export default {
             submitted: false
         }
     },
+
     methods: {
+    formatDate(myDate){
+        return moment(myDate).format('MMMM Do YYYY, h:mm:ss a');;
+
+    },
+
+
     post(){
 
         let newBark = {

src/views/Profile.vue

@@ -1,16 +1,65 @@
 <template>
   <div class="Pofile">
-    <h1 class="motherfont">Profile</h1>
-    <b-button variant="outline-primary">Boot</b-button>
-    <div id="biohead">
+    <span class="motherfont"> <h1>Profile</h1>
+    <h2 >Your Barks <i>stay</i> here.</h2>
+    </span>
+    <img src="/assets/barkbutton.png" alt="" width="25px">
+     <div class="motherfont">
+        <b-list-group-item class="d-flex align-items-center" v-for="(bark, index) in allBarks" :key=index>
+        <b-avatar  :src="bark.user.photoURL" class="mr-3"></b-avatar>
+        <div class="mr-auto"> <p display="inline" > {{ bark.user.displayName }} | {{ formatDate (bark.createdAt.toDate()) }}</p>
+            </div>
+            <br>
+        <div>  
+            <p>{{ bark.content }}</p>
+        </div>
+      </b-list-group-item>
 
+
+    </div>
 
+  </div>
+
+</template>
+<script>
 
+import moment from 'moment';
+export default {
+    data: function() {
+        return {
+            bark: {
+                content: '', 
+            },
+            allBarks: [],
+            search: '',
+            submitted: false
+        }
+    },
+    methods: {
+      formatDate(myDate){
+        return moment(myDate).format('MMMM Do YYYY, h:mm:ss a');;
+
+    },
+
+        getBarks2(){
+          //let poweruser = this.$store.state.user
+           db.collection("barks").where("user", "==",this.$store.state.user )
+            .get().then(querySnapshot => {
+            querySnapshot.forEach(doc => {
+                // doc.data() is never undefined for query doc snapshots
+                console.log(doc.id, " => ", doc.data());
+                this.allBarks.push(doc.data())
+            });
+        });
 
-
+        }
+    },
+    mounted(){
+        this.getBarks2();
 
 
-    </div>
+    },
+
+}
 
-  </div>
-</template>
+</script>