moved openchat to friends template

src/components/app/News.vue

@@ -92,23 +92,26 @@ export default {
 .change-log {
   background: rgba(0, 0, 0, 0.137);
   padding: 20px;
-  flex: 1;
   overflow-y: auto;
+  max-width: 700px;
+  margin: auto;
 }
 .plan-list {
   color: white;
 }
 .date {
-  text-align: left;
-  margin-right: 50px;
+  text-align: right;
+  font-size: 19px;
+  margin-right: 10px;
   color: rgba(255, 255, 255, 0.692);
 }
 .changes-title {
-  font-size: 20px;
+  font-size: 30px;
   color: rgba(255, 255, 255, 0.979);
-  margin-bottom: 10px;
-  margin-top: 10px;
+  text-align: center;
   font-weight: bold;
+  margin-top: -5px;
+  margin-bottom: 10px;
 }
 
 @media (max-width: 840px) {

src/components/app/relationships/FriendsTemplate.vue

@@ -25,38 +25,19 @@ import {bus} from '@/main'
 export default {
   props: ['username', 'tag',  'channelID',  'uniqueID', 'recipient'],
   methods: {
-    async getMessages() {
-      const {ok, error, result} = await messagesService.get(this.$props.channelID);
-      if ( ok ) {
-        this.$store.dispatch('messages', {channelID: result.data.channelID, messages: result.data.messages});
-      } else {
-        // TODO handle this
-        console.log (error.response)
-      }
-    },
+
     async openChat(event) {
       if (event.target.classList[0] === "profile-picture") return;
       bus.$emit('closeLeftMenu');
-      // dismiss notification if exists
+      // dismiss notification if exists 
+      // TODO move this into openchat or something :/
       if (this.notifications && this.notifications >= 1 && document.hasFocus()) {
         this.$socket.emit('notification:dismiss', {channelID: this.channelID});
       }
-      // this.$store.dispatch('openChat', {
-      //   channelID: this.channelID,
-      //   channelName: this.channel
-      // })
-      this.$store.dispatch('selectedChannelID', this.$props.channelID);
-      this.$store.dispatch('setChannelName', this.recipient.username);
-      if (this.$store.getters.messages[this.$props.channelID]) return;
-      if (this.$store.getters.channels[this.$props.channelID] && !this.$store.getters.messages[this.$props.channelID]) return this.getMessages();
-      const {ok, error, result} = await channelService.post(this.$props.channelID);
-      if ( ok ) {
-        this.$store.dispatch('channel', result.data.channel);
-        this.getMessages();
-      } else {
-        // TODO handle this
-        console.log(error)
-      }
+      this.$store.dispatch('openChat', {
+        channelID: this.channelID,
+        channelName: this.recipient.username
+      })
     },
     openUserInformation() {
       this.$store.dispatch('setUserInformationPopout', this.recipient.uniqueID)

src/components/app/userInformationPopout.vue

@@ -19,7 +19,6 @@
           </div>
         </div>
         <div class="bottom" v-if="selfUniqueID !== user.uniqueID">
-
           <div class="button valid" v-if="this.relationshipStatus == null" @click="AddFriendButton">
             <div class="material-icons">person_add</div>Add friend
           </div>
@@ -36,7 +35,7 @@
             <div class="material-icons">person_add_disabled</div>End Friendship
           </div>
 
-          <div class="button">
+          <div class="button" @click="openChat">
             <div class="material-icons">chat</div>Send Message
           </div>
           <div class="button warn">
@@ -48,7 +47,6 @@
   </div>
 </template>
 <script>
-
 import config from "@/config.js";
 import Spinner from "@/components/Spinner.vue";
 import profilePicture from "@/components/ProfilePictureTemplate.vue";
@@ -69,13 +67,27 @@ export default {
       }
     },
     async AddFriendButton() {
-      const {ok, error, result} = await relationshipService.post({username: this.user.username, tag: this.user.tag});
+      const { ok, error, result } = await relationshipService.post({
+        username: this.user.username,
+        tag: this.user.tag
+      });
     },
     async AcceptFriendButton() {
-      const {ok, error, result} = await relationshipService.put(this.uniqueID);
+      const { ok, error, result } = await relationshipService.put(
+        this.uniqueID
+      );
     },
     async RemoveFriendButton() {
-      const {ok, error, result} = await relationshipService.delete(this.uniqueID);
+      const { ok, error, result } = await relationshipService.delete(
+        this.uniqueID
+      );
+    },
+    openChat() {
+      // todo: find from friends array and later, create new channels for people who are not friends.
+      this.$store.dispatch("openChat", {
+        channelID: this.channelID,
+        channelName: this.user.username
+      });
     }
   },
   async mounted() {
@@ -94,8 +106,8 @@ export default {
     relationshipStatus() {
       const userUniqueID = this.$store.getters.popouts.userInformationPopoutID;
       const allFriend = this.$store.getters.user.friends;
-      if (!allFriend[userUniqueID]) return null
-      return allFriend[userUniqueID].status
+      if (!allFriend[userUniqueID]) return null;
+      return allFriend[userUniqueID].status;
     }
   }
 };

src/store/modules/channelModule.js

@@ -1,12 +1,12 @@
-import {bus} from '../../main'
-import {router} from './../../router'
-import Vue from 'vue';
+import { bus } from "../../main";
+import { router } from "./../../router";
+import Vue from "vue";
 
 const state = {
   selectedChannelID: null,
   channelName: null,
   channels: {}
-}
+};
 
 const getters = {
   selectedChannelID(state) {
@@ -18,29 +18,29 @@ const getters = {
   channelName(state) {
     return state.channelName;
   }
-}
+};
 
 const actions = {
   channel(context, channel) {
-    context.commit('channel', channel)
+    context.commit("channel", channel);
   },
   selectedChannelID(context, channelID) {
-    context.commit('selectedChannelID', channelID)
+    context.commit("selectedChannelID", channelID);
   },
   setChannelName(context, name) {
-    context.commit('setChannelName', name)
+    context.commit("setChannelName", name);
   },
   updateChannelLastMessage(context, channelID) {
-    context.commit('updateChannelLastMessage', channelID)
+    context.commit("updateChannelLastMessage", channelID);
   }
-}
+};
 
 const mutations = {
-  updateChannelLastMessage(state, channelID){
-    Vue.set(state.channels[channelID], 'lastMessaged', Date.now());
+  updateChannelLastMessage(state, channelID) {
+    Vue.set(state.channels[channelID], "lastMessaged", Date.now());
   },
-  addAllChannels(state, channels){
-    Vue.set(state, 'channels', channels);
+  addAllChannels(state, channels) {
+    Vue.set(state, "channels", channels);
   },
   channel(state, channel) {
     Vue.set(state.channels, channel.channelID, channel);
@@ -51,7 +51,7 @@ const mutations = {
   setChannelName(state, name) {
     state.channelName = name;
   }
-}
+};
 
 export default {
   namespace: true,
@@ -59,4 +59,4 @@ export default {
   actions,
   mutations,
   getters
-}
+};

src/store/modules/messageModule.js

@@ -1,66 +1,93 @@
-import {bus} from '../../main'
-import {router} from '../../router'
-import Vue from 'vue';
+import { bus } from "../../main";
+import { router } from "../../router";
+import Vue from "vue";
+import channelService from "@/services/channelService";
+import messagesService from "@/services/messagesService";
 
 const state = {
   messages: {}
-}
+};
 
 const getters = {
   messages(state) {
     return state.messages;
   }
-
-}
+};
 
 const actions = {
+  async openChat(context, { channelID, channelName }) {
+    context.commit("selectedChannelID", channelID);
+    if (channelName) context.commit("setChannelName", channelName);
+
+    const messages = context.state.messages[channelID];
+    const channel = context.rootState.channelModule.channels[channelID];
+    if (messages) return;
+    if (channel && !messages) return getMessages();
+
+    const { ok, error, result } = await channelService.post(channelID);
+    if (ok) {
+      context.commit("channel", result.data.channel);
+      getMessages();
+    } else {
+      // TODO handle this
+      console.log(error);
+    }
+
+    async function getMessages() {
+      const { ok, error, result } = await messagesService.get(channelID);
+      if (ok) {
+        context.commit("messages", {
+          channelID: result.data.channelID,
+          messages: result.data.messages.reverse()
+        });
+      } else {
+        // TODO handle this
+        console.log(error.response);
+      }
+    }
+  },
   messages(context, data) {
-    context.commit('messages', data)
+    context.commit("messages", data);
   },
   addMessage(context, data) {
     // if the message is sent by this client, add additional information.
     if (data.sender) {
-      data.message.creator = context.getters.user
+      data.message.creator = context.getters.user;
       data.message.status = 0;
     }
 
     // send notification if message is not ours
-    context.commit('addMessage', data);
+    context.commit("addMessage", data);
   },
   replaceMessage(context, data) {
-    context.commit('replaceMessage', data)
+    context.commit("replaceMessage", data);
   }
-}
+};
 
 const mutations = {
   messages(state, data) {
-    Vue.set(state.messages, data.channelID, data.messages.reverse())
+    Vue.set(state.messages, data.channelID, data.messages.reverse());
   },
   addMessage(state, data) {
-    bus.$emit('newMessage', data);
+    bus.$emit("newMessage", data);
     Vue.set(
       state.messages[data.channelID],
       state.messages[data.channelID].length,
       data.message
-    );    
+    );
   },
 
-  replaceMessage (state, data) {
-    const {tempID, message} = data;
+  replaceMessage(state, data) {
+    const { tempID, message } = data;
 
     state.messages[message.channelID].find((o, i) => {
-      if(o.tempID === tempID) {
-        Vue.set(
-          state.messages[message.channelID],
-          i,
-          message
-        )
+      if (o.tempID === tempID) {
+        Vue.set(state.messages[message.channelID], i, message);
         return true;
       }
-    })
-
+    });
   }
-}
+};
 
 export default {
   namespace: true,
@@ -68,4 +95,4 @@ export default {
   actions,
   mutations,
   getters
-}
+};