list chat users

components/elements/menu.vue

@@ -19,10 +19,13 @@
           <li>
             <a href="" style="pointer-events: none; display: inline-block">Users</a>
             <ul class="sub">
-              <nuxt-link to="/chat" tag="a">Cheesy</nuxt-link>
-              <nuxt-link to="/chat" tag="a">Cheesy</nuxt-link>
-              <nuxt-link to="/chat" tag="a">Cheesy</nuxt-link>
-              <nuxt-link to="/chat" tag="a">Cheesy</nuxt-link>
+              <nuxt-link
+                v-for="(user, key) in this.users"
+                :key="key"
+                :to="{ path: 'chat', query: { friendId: key }}"
+                tag="a"
+                >{{ user.mail }}</nuxt-link
+              >
             </ul>
           </li>
         </ul>
@@ -32,10 +35,14 @@
 </template>
 
 <script>
+import axios from "axios";
+
 export default {
   data() {
     return {
       isLogin: false,
+      urlFireBase: "https://vue-chat-c1525-default-rtdb.firebaseio.com",
+      users: [],
     };
   },
   methods: {
@@ -46,16 +53,34 @@ export default {
         .catch((err) => {
           alert(err);
         });
+      this.users = [];
+    },
+    getlistUser: function () {
+      // get list user
+      axios
+        .get(this.urlFireBase + "/chat.json")
+        .then((res) => {
+          // remove current user
+          delete res.data[this.$store.state.user.uid];
+          this.users = res.data;
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
     },
   },
   computed: {
-      checkLogin: function() {
-          return (this.$store.state.user !== null) ? true : false;
-      }
+    checkLogin: function () {
+      this.getlistUser();
+      return this.$store.state.user !== null ? true : false;
+    },
   },
   created: function () {
     if (this.$store.state.user !== null) {
       this.isLogin = true;
+      this.getlistUser();
+    } else {
+      this.users = [];
     }
   },
 };

pages/chat/index.vue

 <template>
   <div class="container">
     <div class="row">
-			<div class="col-md-6 offset-md-3 col-sm-6 offset-sm-3 col-12 comments-main pt-4 rounded">
+      <div
+        class="col-md-6 offset-md-3 col-sm-6 offset-sm-3 col-12 comments-main pt-4 rounded"
+      >
         <div class="form-chat">
           <ul class="p-0 list-message">
             <li>
               <div class="row comments mb-2">
                 <div class="col-md-2 col-sm-2 col-3 text-center user-img">
-						    	<img id="profile-photo" src="http://nicesnippets.com/demo/man01.png" class="rounded-circle" />
+                  <img
+                    id="profile-photo"
+                    src="http://nicesnippets.com/demo/man01.png"
+                    class="rounded-circle"
+                  />
                 </div>
                 <div class="col-md-9 col-sm-9 col-9 comment rounded mb-2">
                   <h4 class="m-0"><a href="#">Jacks David</a></h4>
                   <time class="text-white ml-3">1 hours ago</time>
 
-							    <p class="mb-0 text-white">Thank you for visiting all the way from New York.</p>
+                  <p class="mb-0 text-white">
+                    Thank you for visiting all the way from New York.
+                  </p>
                 </div>
               </div>
             </li>
             <ul class="p-0">
               <li>
                 <div class="row comments mb-2">
-								<div class="col-md-2 offset-md-2 col-sm-2 offset-sm-2 col-3 offset-1 text-center user-img">
-							    	<img id="profile-photo" src="http://nicesnippets.com/demo/man02.png" class="rounded-circle" />
+                  <div
+                    class="col-md-2 offset-md-2 col-sm-2 offset-sm-2 col-3 offset-1 text-center user-img"
+                  >
+                    <img
+                      id="profile-photo"
+                      src="http://nicesnippets.com/demo/man02.png"
+                      class="rounded-circle"
+                    />
                   </div>
                   <div class="col-md-7 col-sm-7 col-8 comment rounded mb-2">
                     <h4 class="m-0"><a href="#">Steve Alex</a></h4>
                     <time class="text-white ml-3">1 week ago</time>
 
-								    <p class="mb-0 text-white">Thank you for visiting all the way from NYC.</p>
+                    <p class="mb-0 text-white">
+                      Thank you for visiting all the way from NYC.
+                    </p>
                   </div>
                 </div>
               </li>
@@ -48,11 +64,59 @@
 </template>
 
 <script>
+import axios from "axios";
 export default {
-}
+  data() {
+    return {
+      urlFireBase: "https://vue-chat-c1525-default-rtdb.firebaseio.com",
+    };
+  },
+  methods: {
+    getListChat: function () {
+      // Get list user and friend
+      axios
+        .get(
+          this.urlFireBase +
+            "/chat/" +
+            this.$store.state.user.uid +
+            "/" +
+            this.$route.query.friendId +
+            ".json"
+        )
+        .then((res) => {
+          // get mesages
+          let mes = res.data;
+          // Get list friend and user
+          axios
+            .get(
+              this.urlFireBase +
+                "/chat/" +
+                this.$route.query.friendId +
+                "/" +
+                this.$store.state.user.uid +
+                ".json"
+            )
+            .then((res) => {
+              // remove current user
+              console.log(res);
+            })
+            .catch(function (error) {
+              console.log(error);
+            });
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+    },
+  },
+  created: function () {
+    this.getListChat();
+    console.log(this.$route.query.friendId);
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-    @import '~/assets/css/bootstrap.min.css';
-    @import '~/assets/scss/chat.scss';
+@import "~/assets/css/bootstrap.min.css";
+@import "~/assets/scss/chat.scss";
 </style>

pages/regirst/index.vue

@@ -82,8 +82,8 @@ export default {
     return {
       title: "Create your account",
       user: {
-        name: "",
-        email: "",
+        name: "Name",
+        email: "Email",
         password: "",
         passConfirm: "",
         photoURL:
@@ -115,9 +115,8 @@ export default {
     userSignUp: function (err) {
       if (this.user.isLogin) {
         // upload img
-
         if (this.imageData) {
-          this.onUpload().then(url => {
+          this.onUpload().then((url) => {
             this.commonUpdateInfo();
           });
         } else {
@@ -131,6 +130,21 @@ export default {
             password: this.user.password,
           })
           .then(() => {
+
+            const userId = this.$store.state.user.uid;
+
+            let data = {};
+            data[userId] = {
+                mail: this.user.email
+            };
+            axios
+              .patch(this.urlFireBase + "/chat.json", data)
+              .then(function (response) {
+                console.log(response);
+              })
+              .catch(function (error) {
+                console.log(error);
+              });
             this.user.email = "";
             this.user.password = "";
             //if you wanted to redirect after sign id you'd that here with this.$router.push('/pagename')
@@ -166,7 +180,7 @@ export default {
           () => {
             this.uploadValue = 100;
             storageRef.snapshot.ref.getDownloadURL().then((url) => {
-              resolve(url)
+              resolve(url);
               this.user.photoURL = url;
             });
           }