a lot of progress in servers

.vs/VSWorkspaceState.json

@@ -0,0 +1,6 @@
+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "PreviewInSolutionExplorer": false
+}

src/components/ProfilePictureTemplate.vue

@@ -39,6 +39,7 @@ export default {
           name: "cute",
           emotePath: this.flower
         };
+      return ""
     }
   }
 };
@@ -75,38 +76,16 @@ export default {
   margin-left: 0;
   flex-shrink: 0;
   margin: auto;
-  background: linear-gradient(
+  background: #ffd828 100%;
-    45deg,
+
-    #ffd828 1%,
-    #ffd828 40%,
-    #ffd828 50%,
-    #ffe87f 60%,
-    #ffd828 99%,
-    #ffd828 100%,
-    #ffd828 100%
-  );
-  background-size: 400% 400%;
 
-  animation: Anime 4s ease infinite;
 }
 .cute {
   margin-right: 5px;
   margin-left: 0;
   flex-shrink: 0;
   margin: auto;
-  background: linear-gradient(
+  background: #ffb7ed;
-    45deg,
-    #ffb7ed 1%,
-    #ffb7ed 40%,
-    #ffb7ed 50%,
-    #ffe2f8 60%,
-    #ffb7ed 99%,
-    #ffb7ed 100%,
-    #ffb7ed 100%
-  );
-  background-size: 400% 400%;
-
-  animation: Anime 4s ease infinite;
 }
 .cute .emote {
   z-index: 999;
@@ -114,17 +93,6 @@ export default {
   left: -3px;
 }
 
-@keyframes Anime {
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
-}
 .emote {
   position: absolute;
   height: 20px;

src/components/app/MembersList.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="members-list">
+    <div class="header">
+      <div class="title">Members</div>
+    </div>
+  </div>
+</template>
+
+
+<style scoped>
+
+.members-list {
+  color: white;
+  display: flex;
+	flex-direction: column;
+  background: rgba(0, 0, 0, 0.671);
+  width: 300px;
+  height: 100%;
+}
+.header {
+	height: 40px;
+	width: 100%;
+	background: rgba(0, 0, 0, 0.438);
+	display: flex;
+}
+.header .title {
+  user-select: none;
+	font-size: 19px;
+	margin: auto;
+}
+</style>
+

src/components/app/MessagePanel.vue

@@ -1,20 +1,11 @@
 <template>
   <div class="right-panel">
-    <div class="heading">
+    <heading
-      <div class="show-menu-button" @click="toggleLeftMenu">
+      :uniqueID="recipients && recipients.length ? recipients[0].uniqueID : undefined"
-        <i class="material-icons">menu</i>
+      :type="selectedChannelID && channel && !channel.server_id ? 1 : 0"
-      </div>
+      :status-color="userStatusColor"
-      <div class="current-channel">
+      :name="selectedChannelID ? channelName : `Welcome back, ${user.username}!` "
-        <span class="channel-name" v-if="!selectedChannelID">Welcome back, {{user.username}}!</span>
+    />
-        <span class="channel-selected" v-else>
-          <div
-            class="user-status"
-            :style="`box-shadow: 0px 0px 14px 3px ${userStatusColor}; background-color: ${userStatusColor};`"
-          ></div>
-          <div class="channel-name">{{channelName}}</div>
-        </span>
-      </div>
-    </div>
     <div class="loading" v-if="selectedChannelID && !selectedChannelMessages">
       <spinner/>
     </div>
@@ -74,9 +65,10 @@
       </div>
       <div class="info">
         <div class="typing-outer">
-          <transition name="typing-animate">
+          <typing-status
-            <typing-status v-if="typing" :username="whosTyping"/>
+            v-if="typingRecipients[selectedChannelID]"
-          </transition>
+            :recipients="typingRecipients[selectedChannelID]"
+          />
         </div>
         <div
           :class="{'message-count': true, 'error-info': messageLength > 5000 }"
@@ -96,6 +88,7 @@ import Message from "../../components/app/MessageTemplate.vue";
 import Spinner from "@/components/Spinner.vue";
 import TypingStatus from "@/components/app/TypingStatus.vue";
 import uploadsQueue from "@/components/app/uploadsQueue.vue";
+import heading from "@/components/app/MessagePanel/Heading.vue";
 import emojiSuggestions from "@/components/app/EmojiPanels/emojiSuggestions.vue";
 import emojiParser from "@/utils/emojiParser.js";
 import statuses from "@/utils/statuses";
@@ -109,23 +102,21 @@ export default {
     TypingStatus,
     uploadsQueue,
     emojiSuggestions,
-    emojiPanel
+    emojiPanel,
+    heading
   },
   data() {
     return {
       message: "",
       messageLength: 0,
       postTimerID: null,
-      getTimerID: null,
+      typingTimer: null,
       typing: false,
-      whosTyping: "",
+      typingRecipients: {},
       showEmojiPanel: false
     };
   },
   methods: {
-    toggleLeftMenu() {
-      bus.$emit("toggleLeftMenu");
-    },
     generateNum(n) {
       var add = 1,
         max = 12 - add; // 12 is the min safe number Math.random() can generate without it starting to pad the end with zeros.
@@ -193,13 +184,18 @@ export default {
       }
     },
     async postTimer() {
-      this.postTimerID = setInterval(async () => {
+
+
+      this.postTimerID = setTimeout(async () => {
         if (this.message.trim() == "") {
           clearInterval(this.postTimerID);
-          return (this.postTimerID = null);
+          this.postTimerID = null;
+        }else {
+          await typingService.post(this.selectedChannelID);
+          this.postTimer()
         }
-        await typingService.post(this.selectedChannelID);
+      }, 2000)
-      }, 2000);
+
     },
 
     resize(event) {
@@ -336,7 +332,14 @@ export default {
     },
     hideTypingStatus(data) {
       if (this.user.uniqueID === data.message.creator.uniqueID) return;
-      this.typing = false;
+      clearTimeout(
+        this.typingRecipients[data.channelID][data.message.creator.uniqueID]
+          .timer
+      );
+      this.$delete(
+        this.typingRecipients[data.channelID],
+        data.message.creator.uniqueID
+      );
     },
     attachmentButton() {
       this.$refs.sendFileBrowse.click();
@@ -378,24 +381,50 @@ export default {
   },
   mounted() {
     this.$options.sockets.typingStatus = data => {
-      const { channelID, userID } = data;
+      const { channel_id, user } = data;
-      if (channelID !== this.selectedChannelID) return;
+      const typingRecipients = this.typingRecipients[channel_id];
-      this.typing = true;
+
-      this.whosTyping = this.channel.recipients.find(function(recipient) {
+      if (
-        return recipient.uniqueID == userID;
+        this.selectedChannelID !== channel_id ||
-      }).username;
+        user.unique_id === this.user.uniqueID
-      clearTimeout(this.getTimerID);
+      )
-      this.getTimerID = setTimeout(() => {
+        return;
-        this.typing = false;
+
-      }, 2500);
+      if (typingRecipients === undefined) {
+        this.$set(this.typingRecipients, channel_id, {
+          [user.unique_id]: { username: user.username }
+        });
+      } else if (!typingRecipients[user.unique_id]) {
+        this.$set(this.typingRecipients[channel_id], user.unique_id, {
+          username: user.username
+        });
+      }
+
+      clearTimeout(this.typingRecipients[channel_id][user.unique_id].timer);
+
+      this.typingRecipients[channel_id][user.unique_id].timer = setTimeout(
+        () => {
+          this.$delete(this.typingRecipients[channel_id], user.unique_id);
+        },
+        2500
+      );
     };
+
     bus.$on("newMessage", this.hideTypingStatus);
     bus.$on("emojiSuggestions:Selected", this.enterEmojiSuggestion);
     bus.$on("emojiPanel:Selected", this.enterEmojiPanel);
-    //dismiss notification on focus
+    window.onblur = () => {
-    window.onfocus = () => {
+      clearTimeout(this.postTimerID);
+      this.postTimerID = null;
+    }
+    window.onfocus = async () => {
+      if (this.message.trim() !== "") {
+        await typingService.post(this.selectedChannelID);
+        this.postTimer();
+      }
       bus.$emit("title:change", "Nertivia");
       if (!this.$store.getters.selectedChannelID) return;
+    //dismiss notification on focus
       const find = this.$store.getters.notifications.find(notification => {
         return notification.channelID === this.$store.getters.selectedChannelID;
       });
@@ -406,7 +435,10 @@ export default {
       }
     };
   },
+  
   beforeDestroy() {
+    clearTimeout(this.postTimerID);
+    this.postTimerID = null;
     bus.$off("newMessage", this.hideTypingStatus);
     bus.$off("emojiSuggestions:Selected", this.enterEmojiSuggestion);
     bus.$on("emojiPanel:Selected", this.enterEmojiPanel);
@@ -449,12 +481,17 @@ export default {
     emojiIndex() {
       return this.$store.getters.getEmojiIndex;
     },
+    recipients() {
+      const selectedChannel = this.$store.getters.selectedChannelID;
+      const channel = this.$store.getters.channels[selectedChannel];
+      return channel ? channel.recipients : undefined;
+    },
     userStatusColor() {
       const selectedChannel = this.$store.getters.selectedChannelID;
       const channel = this.$store.getters.channels[selectedChannel];
 
       let status = 0;
-      if (!channel) {
+      if (!channel || !channel.recipients || !channel.recipients.length) {
         status = 0;
       } else if (
         this.$store.getters.user.friends[channel.recipients[0].uniqueID]
@@ -464,14 +501,6 @@ export default {
             .recipient.status || 0;
       }
       return statuses[status].color;
-
-      // const allFriends = this.$store.getters.user.friends;
-      // const selectedChannel = this.$store.getters.selectedChannelID;
-      // const arr = Object.keys(allFriends).map(el => allFriends[el]);
-      // const find = arr.find(el => el.channelID === selectedChannel);
-      // console.log(find)
-      // if (!find) return statuses[0].color;
-      // return statuses[find.recipient.status || 0].color;
     }
   }
 };
@@ -500,71 +529,19 @@ export default {
 }
 .channel-selected {
   display: flex;
+  width: 100%;
   align-items: center;
+  height: 100%;
 }
-.user-status {
+
-  border-radius: 4px;
-  height: 10px;
-  width: 10px;
-  margin-right: 10px;
-  flex-shrink: 0;
-}
 .hidden {
   display: none;
 }
-.typing-animate-enter-active {
+
-  transition: 0.1s;
-}
-.typing-animate-enter /* .fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
-  transform: translateY(3px);
-}
-.typing-animate-leave-to {
-  opacity: 0;
-  transform: translateY(-3px);
-}
 .error-info {
   color: red;
 }
 
-.heading {
-  padding: 5px;
-  background: rgba(0, 0, 0, 0.185);
-  margin-bottom: 0;
-  height: 40px;
-  padding-bottom: 2spx;
-  display: flex;
-  flex-shrink: 0;
-}
-.show-menu-button {
-  display: inline-block;
-  margin: auto;
-  color: white;
-  margin-left: 10px;
-  margin-right: 5px;
-  margin-top: 8px;
-  user-select: none;
-  display: none;
-}
-
-.heading .current-channel {
-  color: white;
-  font-size: 20px;
-  margin: auto;
-  margin-left: 5px;
-  flex: 1;
-  padding: 5px;
-}
-.current-channel .channel-name {
-  display: block;
-  height: 26px;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: calc(100% - 17px);
-}
-
 .right-panel {
   height: 100%;
   width: 100%;
@@ -649,7 +626,6 @@ export default {
   resize: none;
   border: none;
   outline: none;
-  padding-left: 10px;
   transition: 0.3s;
   height: 1em;
   overflow: hidden;
@@ -718,10 +694,4 @@ export default {
 .emojis-button:hover {
   background: rgba(0, 0, 0, 0.514);
 }
-@media (max-width: 600px) {
-  .show-menu-button {
-    display: block;
-  }
-}
 </style>
-

src/components/app/MessagePanel/Heading.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="heading">
+    <div class="show-menu-button" @click="toggleLeftMenu">
+      <i class="material-icons">menu</i>
+    </div>
+    <div
+      v-if="type === 1"
+      class="user-status"
+      :style="`box-shadow: 0px 0px 14px 3px ${statusColor}; background-color: ${statusColor};`"/>
+    <div class="information">
+      <div :class="{name: true, clickable: !!uniqueID }" @click="openUserInfoPanel">{{name}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { bus } from "@/main";
+export default {
+  props: [
+    "type", // 0: without online status; 1: with online status
+    "statusColor", // only if type is set to 1;
+    "name",
+    "uniqueID"
+  ],
+  methods: {
+    openUserInfoPanel() {
+      if (this.uniqueID)
+        this.$store.dispatch("setUserInformationPopout", this.uniqueID);
+    },
+    toggleLeftMenu() {
+      bus.$emit("toggleLeftMenu");
+    }
+  }
+};
+</script>
+
+<style scoped>
+.heading {
+  background: rgba(0, 0, 0, 0.185);
+  margin-bottom: 0;
+  height: 40px;
+  display: flex;
+  flex-shrink: 0;
+  padding-left: 10px;
+  align-items: center;
+}
+.show-menu-button {
+  display: inline-block;
+  margin-right: 5px;
+  margin-top: 3px;
+  user-select: none;
+  display: none;
+}
+.show-menu-button .material-icons {
+  color: rgb(207, 207, 207);
+  transition: 0.3s;
+}
+.show-menu-button .material-icons:hover {
+  color: rgb(255, 255, 255);
+}
+.information {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.name {
+  color: white;
+  font-size: 20px;
+  width: 10px;
+  white-space: nowrap;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.user-status {
+  border-radius: 4px;
+  height: 10px;
+  width: 10px;
+  margin-right: 10px;
+  margin-left: 5px;
+  flex-shrink: 0;
+  transition: 0.3s;
+}
+.clickable {
+  color: white;
+  transition: 0.3s;
+  cursor: default;
+}
+.clickable:hover {
+  color: rgb(219, 219, 219);
+  text-decoration: underline;
+}
+@media (max-width: 600px) {
+  .show-menu-button {
+    display: block;
+  }
+}
+</style>

src/components/app/MessageTemplate.vue

@@ -57,7 +57,7 @@ export default {
   ],
   methods: {
     openUserInformation() {
-      this.$store.dispatch('setUserInformationPopout', this.uniqueID)
+        this.$store.dispatch('setUserInformationPopout', this.uniqueID)
     },
     imageClicked(event) {
       this.$store.dispatch("setImagePreviewURL", event.target.src);
@@ -140,8 +140,6 @@ export default {
 
 .message {
   margin: 10px;
-  margin-top: 10px;
-  margin-bottom: 10px;
   display: flex;
 
   animation: showMessage 0.3s ease-in-out;
@@ -203,20 +201,14 @@ export default {
 }
 
 .avatar {
-  margin: auto;
+  margin: auto 5px 0 0;
-  margin-left: 0;
-  margin-right: 5px;
-  margin-bottom: 0;
 }
 
 .triangle {
   display: flex;
   justify-content: bottom;
   flex-direction: column;
-  margin: auto;
+  margin: auto 0 8.7px 0;
-  margin-left: 0;
-  margin-right: 0px;
-  margin-bottom: 8.7px;
 }
 .triangle-inner {
   width: 0;
@@ -235,9 +227,7 @@ export default {
   flex-direction: column;
   border-radius: 10px;
   color: rgb(231, 231, 231);
-  margin: auto;
+  margin: auto 0;
-  margin-left: 0;
-  margin-right: 0;
   transition: 1s;
   overflow: hidden;
 }
@@ -265,9 +255,7 @@ export default {
 .username {
   color: rgb(219, 219, 219);
   font-size: 14px;
-  margin: auto;
+  margin: auto 0;
-  margin-left: 0;
-  margin-right: 0;
   transition: 0.1s;
   cursor: default;
 }
@@ -278,8 +266,7 @@ export default {
 .date {
   color: rgb(161, 161, 161);
   font-size: 10px;
-  margin: auto;
+  margin: auto auto auto 5px;
-  margin-left: 5px;
 }
 .content-message {
   word-wrap: break-word;
@@ -299,9 +286,7 @@ export default {
   padding-bottom: 5px;
   font-size: 15px;
   color: white;
-  margin: auto;
+  margin: auto auto 0 4px;
-  margin-left: 4px;
-  margin-bottom: 0;
   user-select: none;
   transition: 0.5;
   align-content: center;

src/components/app/Popouts/Popouts.vue

@@ -8,7 +8,8 @@
       <drag-drop-file-upload-dialog key="ddfud" v-if="showUploadDrapDrop"/>
       <user-information-popout key="uip" v-if="popouts.userInformationPopoutID"/>
       <take-survey-popout key="tsp" v-if="popouts.surveyPopout"/>
-      <AddServer key="as" v-if="false"/>
+      <add-server key="as" v-if="popouts.addServer"/>
+      <server-invite key="sip" v-if="popouts.showServerInviteMenu" />
     </transition-group>
   </div>
 </template>
@@ -24,6 +25,7 @@
   const GDriveLinkMenu = () => import('./Popouts/GDriveLinkMenu.vue');
   const imageLargePreview = () => import('./Popouts/imageLargePreview.vue');
   const DragDropFileUploadDialog = () => import('./Popouts/DragDropFileUploadDialog.vue');
+  const ServerInvitePopout = () => import('./Popouts/ServerInvitePopout.vue');
 
 
 
@@ -36,7 +38,8 @@ export default {
     DragDropFileUploadDialog,
     imageLargePreview,
     TakeSurveyPopout,
-    AddServer
+    AddServer,
+    ServerInvite: ServerInvitePopout
   },
   data() {
     return {

src/components/app/Popouts/Popouts/AddServer.vue

@@ -1,20 +1,76 @@
 <template>
-  <div class="dark-background" @click="backgroundClick">
+  <div class="dark-background" @mousedown="backgroundClick">
     <div class="inner">
-      
+      <div class="tabs">
+        <div :class="{tab: true, selected: tab == 0}" @click="tab = 0; slideBack(); ">Create</div>
+        <div :class="{tab: true, selected: tab == 1 || tab == 2}" @click="tab = 1; slideForward();">Join</div>
+      </div>
+      <transition-group tag="div" class="slider" :name="slideInDirection">
+        <div class="content" v-if="tab == 0" key="add-server">
+          <div class="title">Set your server's avatar</div>
+          <profile-picture class="avatar" size="90px" :url="tempImage"/>
+          <div class="button">Browse Avatar Coming Soon!</div>
+          <div class="input">
+            <div class="input-name">Server Name</div>
+            <input type="text" v-model="serverName" placeholder="Server Name">
+          </div>
+          <span v-if="serverNameError" class="warn">{{serverNameError}}</span>
+          <div class="button create-button" @click="createButton">Create</div>
+        </div>
+        <div class="content" v-if="tab == 1" key="check-invite">
+          <i class="material-icons icon">forum</i>
+          <div class="title">Join A Server</div>
+          <div class="input">
+            <div class="input-name">
+              Invite Code
+              <span v-if="inviteCodeError" class="warn">- {{inviteCodeError}}</span>
+            </div>
+            <input type="text" v-model="inviteCode" placeholder="Invite code">
+          </div>
+          <div class="button check-button" @click="checkInviteCode">Check</div>
+        </div>
+        <div class="content server" v-if="tab == 2" key="join-server">
+          <profile-picture class="avatar" size="100px" :url="tempImage"/>
+          <div class="server-name">{{server.name}}</div>
+          <div class="buttons">
+            <div class="button join-button" @click="joinButton" v-if="!servers[server.server_id]">Join {{server.name}}</div>
+            <div class="button join-button button-clicked" v-if="servers[server.server_id]">Joined</div>
+            <div
+              class="button cancel-button"
+              @click="server = null; inviteCode = ''; tab = 1; slideBack();"
+            >Cancel</div>
+          </div>
+        </div>
+      </transition-group>
     </div>
   </div>
 </template>
 
 <script>
+import config from "@/config.js";
 import { bus } from "@/main";
-import settingsService from "@/services/settingsService";
+import ServerService from "@/services/ServerService";
+import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
+import serversModule from '../../../../store/modules/serversModule';
 
 export default {
+  components: { ProfilePicture },
+  data() {
+    return {
+      tab: 0,
+      tempImage: config.domain + "/avatars/noob",
+      serverName: "",
+      serverNameError: null,
+      inviteCode: "",
+      inviteCodeError: null,
+      server: null,
+      slideInDirection: "slide-forward"
+    };
+  },
   methods: {
     closeMenu() {
       this.$store.dispatch("setPopoutVisibility", {
-        name: "GDLinkMenu",
+        name: "addServer",
         visibility: false
       });
     },
@@ -23,32 +79,280 @@ export default {
         this.closeMenu();
       }
     },
+    slideForward() {
+      this.slideInDirection = "slide-forward";
+    },
+    slideBack() {
+      this.slideInDirection = "slide-back";
+    },
+    async createButton(event) {
+      if (event.target.classList.contains("button-clicked")) return;
+      this.serverNameError = null;
+      const name = this.serverName.trim();
+      if (!name) {
+        this.serverNameError = "Enter a name!";
+        return;
+      }
+      event.target.classList.add("button-clicked");
+      const { ok, error, result } = await ServerService.post({ name });
+      if (ok) {
+        this.closeMenu();
+      } else {
+        if (error.response) {
+          this.serverNameError = error.response.data.message;
+        } else {
+          this.serverNameError = "Something went wrong.";
+        }
+        event.target.classList.remove("button-clicked");
+      }
+    },
+    async checkInviteCode(event) {
+      if (event.target.classList.contains("button-clicked")) return;
+      this.inviteCodeError = null;
+      const inviteCode = this.inviteCode.trim();
+      if (!inviteCode) {
+        this.inviteCodeError = "Enter invite code!";
+        return;
+      }
+      event.target.classList.add("button-clicked");
+
+      const { ok, error, result } = await ServerService.getInviteDetail(
+        inviteCode
+      );
+
+      if (!ok) {
+        event.target.classList.remove("button-clicked");
+        return (this.inviteCodeError = error.response.data.message);
+      }
+      event.target.classList.remove("button-clicked");
+      this.slideForward();
+      this.server = result.data;
+      this.tab = 2;
+    },
+    async joinButton(event) {
+      if (event.target.classList.contains("button-clicked")) return;
+      event.target.classList.add("button-clicked");
+      const { ok, error, result } = await ServerService.joinServer(this.inviteCode)
+      if (ok) {
+        this.closeMenu();
+      }
+    }
+  },
+  computed: {
+    servers() {
+      return this.$store.getters['servers/servers'];
+    }
   }
 };
 </script>
 
 
 <style scoped>
+.slide-forward-enter-active,
+.slide-forward-leave-active {
+  transition: 0.3s;
+}
+.slide-forward-enter {
+  transform: translate(100%, 0);
+}
+.slide-forward-leave-to {
+  transform: translate(-100%, 0);
+}
+
+.slide-back-enter-active,
+.slide-back-leave-active {
+  transition: 0.3s;
+}
+.slide-back-enter {
+  transform: translate(-100%, 0);
+}
+.slide-back-leave-to {
+  transform: translate(100%, 0);
+}
+
+.slider {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
 .dark-background {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  background: rgba(0, 0, 0, 0.781);
+  background: rgba(0, 0, 0, 0.541);
   z-index: 111111;
   display: flex;
 }
 .inner {
   margin: auto;
-  height: 400px;
+  height: 450px;
   width: 400px;
   background: rgb(32, 32, 32);
   display: flex;
   flex-direction: column;
   color: white;
-  border-radius: 3px;
+  border-radius: 10px;
+  overflow: hidden;
+}
+.tabs {
+  display: flex;
+  justify-content: center;
+  padding-top: 15px;
+  background: rgb(27, 27, 27);
+}
+.tab {
+  flex-shrink: 0;
+  border-radius: 1px;
+  padding: 5px;
+  padding-bottom: 5px;
+  margin-left: 10px;
+  margin-right: 10px;
+  border-bottom: solid 1px rgba(255, 255, 255, 0);
+  user-select: none;
+  cursor: pointer;
+  transition: 0.3s;
+  font-size: 20px;
+}
+.selected {
+  border-bottom: solid 1px white !important;
+}
+.tab:hover {
+  border-bottom: solid 1px rgb(107, 107, 107);
 }
 
+.content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  align-items: center;
+  justify-content: center;
+}
+.input {
+  align-self: center;
+  margin-top: 15px;
+  margin-bottom: 10px;
+  background: rgb(44, 44, 44);
+  padding: 5px;
+  border-radius: 10px;
+}
+.input input {
+  border-radius: 5px;
+}
+.title {
+  text-align: center;
+  margin: 20px;
+  user-select: none;
+}
+
+.avatar {
+  align-self: center;
+  margin-bottom: 10px;
+}
+
+.button {
+  padding: 5px;
+  background: rgba(25, 151, 255, 0.699);
+  border-radius: 5px;
+  user-select: none;
+  border: none;
+  color: white;
+  font-size: 17px;
+  outline: none;
+  transition: 0.2s;
+  box-shadow: 3px 3px rgba(23, 112, 255, 0.479);
+  align-self: center;
+  margin: 5px;
+}
+.button:hover {
+  background: rgb(25, 151, 255);
+}
+.button:focus {
+  background: rgb(25, 151, 255);
+}
+.button:active {
+  background: rgb(25, 151, 255);
+  transform: translate(3px, 3px);
+  box-shadow: 0px 0px rgba(0, 97, 207, 0.479);
+}
+
+.button-clicked {
+  background: rgb(126, 126, 126) !important;
+  transform: translate(3px, 3px) !important;
+  box-shadow: 0px 0px rgba(61, 61, 61, 0.479) !important;
+}
+
+.create-button {
+  padding: 10px;
+}
+
+.title {
+  font-size: 20px;
+  margin-bottom: 10px;
+  user-select: none;
+}
+
+.check-button {
+  padding: 10px;
+}
+.warn {
+  color: red;
+}
+
+.server-name {
+  text-align: center;
+  font-size: 25px;
+  margin-bottom: 40px;
+}
+
+.server .buttons {
+  display: flex;
+  justify-items: center;
+  align-content: center;
+}
+.server .button {
+  margin: auto;
+  padding: 10px;
+  align-self: center;
+  justify-content: center;
+}
+
+.join-button {
+  margin-right: 5px !important;
+}
+
+.cancel-button {
+  margin-left: 5px !important;
+  background: rgba(238, 55, 55, 0.521);
+  box-shadow: 3px 3px rgb(85, 28, 28);
+}
+
+.cancel-button:hover {
+  background: rgb(238, 55, 55);
+}
+.cancel-button:focus {
+  background: rgb(25, 151, 255);
+}
+.cancel-button:active {
+  background: rgb(238, 55, 55);
+  transform: translate(3px, 3px);
+  box-shadow: 0px 0px rgb(85, 28, 28);
+}
+.icon {
+  font-size: 80px;
+  margin-top: 40px;
+  margin-bottom: 5px;
+}
 </style>
 

src/components/app/Popouts/Popouts/ServerInvitePopout.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="dark-background" @mousedown="backgroundClick">
+    <div class="inner">
+      <div class="top">
+        <div class="button" @click="createInviteButton">Create New Invite</div>
+      </div>
+      <div class="bottom">
+        <div class="title">Invites created by you:</div>
+        <spinner v-if="invites === null"/>
+        <div class="invite-list" v-if="invites !== null">
+          <div class="invite" v-for="invite in invites.slice().reverse()" :key="invite">{{invite}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import config from "@/config.js";
+import { bus } from "@/main";
+import Spinner from "@/components/Spinner.vue";
+import ServerService from "@/services/ServerService";
+import { mapState } from "vuex";
+
+export default {
+  components: {Spinner},
+  data() {
+    return {
+      invites: null
+    };
+  },
+  methods: {
+    closeMenu() {
+      this.$store.dispatch("setPopoutVisibility", {
+        name: "showServerInviteMenu",
+        visibility: false
+      });
+    },
+    backgroundClick(e) {
+      if (e.target.classList.contains("dark-background")) {
+        this.closeMenu();
+      }
+    },
+    async createInviteButton() {
+      if (!this.serverID) {
+        console.log("Server ID is not defined");
+        return;
+      }
+      const {ok, error, result} = await ServerService.postInvite(this.serverID);
+      if (ok) {
+        this.invites.push(result.data.invite_code)
+      }
+
+    }
+  },
+  async mounted() {
+    // get invites created by you
+    const {ok, error, result} = await ServerService.getInvites(this.serverID);
+    if (ok) {
+      let invites = [];
+      for (let invite of result.data) {
+        invites.push(invite.invite_code)
+      } 
+      this.invites = invites;
+    }
+  },
+  computed: {
+    ...mapState({
+      serverID: state => state.popoutsModule.serverIDContextMenu
+    })
+  }
+};
+</script>
+
+
+<style scoped>
+.dark-background {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.541);
+  z-index: 111111;
+  display: flex;
+}
+.inner {
+  margin: auto;
+  height: 400px;
+  width: 400px;
+  background: rgb(32, 32, 32);
+  display: flex;
+  flex-direction: column;
+  color: white;
+  border-radius: 10px;
+  overflow: hidden;
+}
+.top {
+  display: flex;
+  width: 100%;
+  min-height: 100px;
+  background: rgba(0, 0, 0, 0.171);
+  flex-shrink: 0;
+}
+
+.button {
+  padding: 10px;
+  background: rgba(0, 162, 255, 0.719);
+  margin: auto;
+  border-radius: 10px;
+  transition: 0.3s;
+  user-select: none;
+}
+.button:hover {
+  background: rgb(0, 162, 255);
+}
+
+.bottom {
+  display: flex;
+  flex-direction: column;
+}
+.title {
+  margin: 10px;
+  user-select: none;
+}
+.invite-list {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: auto;
+  height: 100%;
+}
+.invite {
+  display: flex;
+  background: rgba(0, 0, 0, 0.274);
+  margin: 5px;
+  padding: 10px;
+  border-radius: 10px;
+}
+</style>
+

src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue

@@ -145,6 +145,7 @@ export default {
   display: flex;
   width: 100%;
   margin-top: 20px;
+  flex-shrink: 0;
 }
 .avatar {
   display: flex;
@@ -233,11 +234,11 @@ export default {
 }
 @media (max-width: 815px) {
   .general-information {
-    display: block;
     flex-direction: column;
   }
   .avatar{
-    margin: auto;
+    align-self: center;
+    margin: 0;
     margin-bottom: 10px;
   }
   .information {

src/components/app/ServerList.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="left-panel">
     <MyMiniInformation/>
-
     <div class="list">
-      <server v-for="(data, index) in serverData" :key="index" :server-data="data" @click.native="toggleChannel(index, $event)" :open-channel="openedServer && openedServer === index"/>
+      <server v-for="(data, index) in servers" :key="index.server_id" :server-data="data" @click.native="toggleChannel(data.server_id, $event)" :open-channel="openedServer !== null && openedServer === data.server_id"/>
-      <server mode="ADD_SERVER"/>
+      <server mode="ADD_SERVER" @click.native="openAddServer"/>
     </div>
   </div>
 </template>
@@ -20,54 +19,30 @@ export default {
   },
   data() {
     return {
-      openedServer: null,
+      openedServer: null
-      serverData: {
-        "67574563576897": {
-          name: "DevHelp",
-          channels: [
-            { name: "General", channelID: 3563567574767467 },
-            { name: "NodeJS", channelID: 758546746747378 },
-            { name: "Java", channelID: 57355675747875 },
-            { name: "C#", channelID: 45656764765676 }
-          ]
-        },
-        "24325587980787": {
-          name: "Musica",
-          channels: [
-            { name: "General", channelID: 3563567574767467 },
-            { name: "NodeJS", channelID: 758546746747378 },
-            { name: "Java", channelID: 57355675747875 },
-            { name: "C#", channelID: 45656764765676 }
-          ]
-        },
-        "3468636435": {
-          name: "IDK",
-          channels: [
-            { name: "General", channelID: 3563567574767467 },
-            { name: "NodeJS", channelID: 758546746747378 },
-            { name: "Java", channelID: 57355675747875 },
-            { name: "C#", channelID: 45656764765676 }
-          ]
-        },
-        "63575764574645": {
-          name: "OWO",
-          channels: [
-            { name: "General", channelID: 3563567574767467 },
-            { name: "NodeJS", channelID: 758546746747378 },
-            { name: "Java", channelID: 57355675747875 },
-            { name: "C#", channelID: 45656764765676 }
-          ]
-        }
-      }
     };
   },
   methods: {
-    toggleChannel(index, event) {
+    openAddServer() {
-      if (!event.target.closest('.small-view')) return;
+      this.$store.dispatch("setPopoutVisibility", {
-      if (this.openedServer === index) 
+        name: "addServer",
+        visibility: true
+      });
+    },
+    toggleChannel(serverID, event) {
+      if (!event.target.closest('.small-view') || event.target.closest('.options-context-button') || event.target.closest('.options-context-menu')) return;
+      if (this.openedServer === serverID) 
         this.openedServer = null;
       else
-        this.openedServer = index;
+        this.openedServer = serverID;
+    }
+  },
+  computed: {
+    servers() {
+      const data = this.$store.getters['servers/servers'];
+      return Object.keys(data).map(key => {
+        return data[key];
+      }).slice().reverse()
     }
   }
 };

src/components/app/ServerTemplate/ChannelsList.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="channels-list">
+    <spinner v-if="channels === undefined" size="40"/>
+    <div class="wrapper" v-if="channels">
+      <ChannelTemplate v-for="channel in channels" :key="channel.name" :channel-data="channel" @click.native="openChannel(channel)"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import Spinner from "@/components/Spinner.vue";
+import ChannelTemplate from "@/components/app/ServerTemplate/ChannelTemplate.vue";
+import ServerService from "@/services/ServerService.js";
+
+export default {
+  components: { ChannelTemplate, Spinner },
+  props: ["serverID"],
+  methods: {
+    openChannel(channel) {
+      this.$store.dispatch('openChannel', channel)
+    }
+  },
+
+  async beforeMount() {
+    if (this.channels !== undefined) return;
+    const { ok, error, result } = await ServerService.getChannels(
+      this.serverID
+    );
+    if (!ok) {
+      console.log(error);
+    } else {
+      const channelsIDs = [];
+      for (let index = 0; index < result.data.length; index++) {
+        const element = result.data[index];
+        element.server = undefined;
+        element.server_id = this.serverID
+        this.$store.dispatch('channel', element)
+        channelsIDs.push(element.channelID)
+      }
+      this.$store.dispatch("servers/setChannelsIDs", {
+        serverID: this.serverID,
+        channelsIDs: channelsIDs
+      });
+    }
+  },
+  computed: {
+    channels() {
+      const channelsIds = this.$store.getters["servers/channelsIDs"][this.serverID];
+      if (channelsIds) {
+        let channels = [];
+        for ( let channelID of channelsIds ){
+          channels.push(this.$store.getters.channels[channelID])
+        }
+        return channels;
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.channel-list {
+  background: rgba(0, 0, 0, 0.288);
+  display: flex;
+  flex-direction: column;
+}
+</style>
+
+

src/components/app/ServerTemplate/ServerTemplate.vue

@@ -1,44 +1,89 @@
 <template>
   <div :class="{server: true, 'add-server': mode === 'ADD_SERVER'}">
-    <div class="small-view" @click="showChannels = !showChannels">
+    <div class="small-view">
       <profile-picture size="50px" v-if="!mode" :url="tempImage"/>
       <div class="add-icon" v-if="mode === 'ADD_SERVER'">
         <i class="material-icons">add</i>
       </div>
-      <div class="server-name">{{mode === 'ADD_SERVER'? 'Add Server' : ServerData.name}}</div>
+      <div class="server-name">{{mode === 'ADD_SERVER'? 'Add Server' : ServerData.name }}</div>
+      <div
+        ref="contextMenuButton"
+        class="options-context-button"
+        v-if="mode !== 'ADD_SERVER'"
+        @click="showContextMenu = !showContextMenu"
+      >
+        <i class="material-icons">more_vert</i>
+      </div>
+      <div class="options-context-menu" v-if="showContextMenu" v-click-outside="closeContextMenu">
+        <div class="menu-button" @click="createInvite(ServerData.server_id)">Create Invite</div>
+        <div
+          class="menu-button warn"
+          @click="leaveServer(ServerData.server_id)"
+          v-if="ServerData.creator.uniqueID !== user.uniqueID"
+        >Leave Server</div>
+        <div
+          class="menu-button warn"
+          @click="leaveServer(ServerData.server_id)"
+          v-if="ServerData.creator.uniqueID === user.uniqueID"
+        >Delete Server</div>
+      </div>
     </div>
     <div ref="container">
-      <div class="channel-list" v-if="openChannel">
+      <channels-list v-if="openChannel" :serverID="ServerData.server_id"/>
-        <ChannelTemplate
-          v-for="channel in ServerData.channels"
-          :key="channel.name"
-          :channel-data="channel"
-        />
-      </div>
     </div>
   </div>
 </template>
 
 <script>
 import config from "@/config.js";
-import ChannelTemplate from "@/components/app/ServerTemplate/ChannelTemplate.vue";
+import ChannelsList from "@/components/app/ServerTemplate/ChannelsList.vue";
 import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
+import ServerService from "@/services/ServerService";
 import smoothReflow from "vue-smooth-reflow";
 
 export default {
   mixins: [smoothReflow],
   props: ["ServerData", "openChannel", "mode"],
-  components: { ProfilePicture, ChannelTemplate },
+  components: { ProfilePicture, ChannelsList },
   data() {
     return {
+      showContextMenu: false,
       showChannels: false,
       tempImage: config.domain + "/avatars/noob"
     };
   },
+  methods: {
+    createInvite(serverID) {
+      this.showContextMenu = false;
+      this.$store.dispatch("setServerIDContextMenu", serverID);
+      this.$store.dispatch("setPopoutVisibility", {
+        name: "showServerInviteMenu",
+        visibility: true
+      });
+    },
+    closeContextMenu(event) {
+      if (
+        event.target.closest(".options-context-button") ===
+        this.$refs.contextMenuButton
+      )
+        return;
+      this.showContextMenu = false;
+    },
+    async leaveServer(serverID) {
+      this.showContextMenu = false;
+      const {ok, error, result} = await ServerService.leaveServer(serverID);
+      console.log({ok, error, result})
+    }
+  },
   mounted() {
     this.$smoothReflow({
       el: this.$refs.container
     });
+  },
+  computed: {
+    user() {
+      return this.$store.getters.user;
+    }
   }
 };
 </script>
@@ -54,14 +99,13 @@ export default {
   transition: 0.3s;
 }
 
-
 .server:hover {
   background: rgba(0, 0, 0, 0.288);
 }
 .material-icons {
   transition: 0.3s;
 }
-.add-server:hover .material-icons{
+.add-server:hover .material-icons {
   color: rgba(20, 255, 39, 0.726);
 }
 
@@ -70,23 +114,18 @@ export default {
   display: flex;
   transition: 0.3s;
   position: relative;
-  overflow: hidden;
   align-items: center;
   padding: 5px;
 }
 
-.channel-list {
-  background: rgba(0, 0, 0, 0.288);
-  display: flex;
-  flex-direction: column;
-}
-
 .server-name {
   overflow: hidden;
   text-overflow: ellipsis;
   margin-left: 5px;
+  flex: 1;
+  white-space: nowrap;
 }
-.add-icon{
+.add-icon {
   height: 56px;
   display: flex;
   align-items: center;
@@ -97,4 +136,38 @@ export default {
 .add-icon .material-icons {
   font-size: 40px;
 }
+.options-context-button {
+  display: flex;
+  align-items: center;
+  margin-right: 5px;
+  color: rgba(255, 255, 255, 0.623);
+  border-radius: 50%;
+  transition: 0.3s;
+}
+.options-context-button .material-icons:hover {
+  color: white;
+}
+
+.options-context-menu {
+  position: absolute;
+  background: rgba(0, 0, 0, 0.692);
+  border-radius: 10px;
+  z-index: 9999;
+  padding: 5px;
+  right: 40px;
+  top: 20px;
+}
+.menu-button {
+  padding: 5px;
+  margin: 2px;
+  border-radius: 5px;
+  transition: 0.3s;
+}
+.menu-button:hover {
+  background: rgb(47, 47, 47);
+}
+
+.warn {
+  color: red;
+}
 </style>

src/components/app/Tabs/DirectMessage.vue

@@ -65,6 +65,8 @@ export default {
   .left-panel {
     position: absolute;
     background-color: rgba(39, 39, 39, 0.97);
+    bottom: 0;
+    height: calc(100% - 40px);
   }
 }
 </style>

src/components/app/Tabs/Servers.vue

@@ -8,6 +8,7 @@
       />
     </transition>
     <message-panel/>
+    <members-list/>
   </div>
 </template>
 
@@ -16,11 +17,13 @@ import { bus } from "@/main";
 
 import ServerList from "@/components/app/ServerList.vue";
 import MessagePanel from "@/components/app/MessagePanel.vue";
+import MembersList from "@/components/app/MembersList.vue";
 
 export default {
   components: {
     ServerList,
-    MessagePanel
+    MessagePanel,
+    MembersList
   },
   data() {
     return {

src/components/app/TypingStatus.vue

@@ -1,22 +1,82 @@
 <template>
-  <div class="typing-status">
+  <transition name="typing-animate">
-    <object class="animation" type="image/svg+xml" :data="animation"></object>
+    <div class="typing-status" v-if="formatedRecipients">
-    <div class="text"><strong>{{this.$props.username}}</strong> is typing...</div>
+      <object class="animation" type="image/svg+xml" :data="animation"></object>
-  </div>
+      <div class="text" v-html="formatedRecipients"></div>
+    </div>
+  </transition>
 </template>
 
 <script>
 export default {
-  props: ['username'],
+  props: ["recipients"],
   data() {
     return {
-      animation: require('@/assets/typing-indicator.svg')
+      animation: require("@/assets/typing-indicator.svg")
+    };
+  },
+  methods: {
+    escapeHtml(unsafe) {
+      return unsafe
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+    }
+  },
+  computed: {
+    formatedRecipients() {
+      const arr = Object.values(this.recipients);
+      if (!arr.length) return null;
+      switch (true) {
+        case arr.length == 1:
+          return `<strong>${this.escapeHtml(
+            arr[0].username
+          )}</strong> is typing...`;
+          break;
+        case arr.length == 2:
+          return `<strong>${this.escapeHtml(
+            arr[0].username
+          )}</strong> and <strong>${this.escapeHtml(
+            arr[1].username
+          )}</strong> are typing...`;
+          break;
+        case arr.length == 3:
+          return `<strong>${this.escapeHtml(
+            arr[0].username
+          )}</strong>, <strong>${this.escapeHtml(
+            arr[1].username
+          )}</strong> and <strong>${this.escapeHtml(
+            arr[2].username
+          )}</strong> are typing...`;
+          break;
+        case arr.length > 3:
+          return `<strong>${arr.length}</strong> people are typing...`;
+          break;
+        default:
+          break;
+      }
+      return arr;
     }
   }
-}
+};
 </script>
 
 <style scoped>
+
+.typing-animate-enter-active {
+  transition: 0.1s;
+}
+.typing-animate-enter /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+  transform: translateY(3px);
+}
+.typing-animate-leave-to {
+  opacity: 0;
+  transform: translateY(-3px);
+}
+
 .typing-status {
   color: white;
   display: flex;
@@ -34,5 +94,4 @@ export default {
   margin-left: 5px;
   font-size: 13px;
 }
-
 </style>

src/components/app/relationships/RecentFriends.vue

@@ -24,7 +24,7 @@ export default {
       const keys = Object.keys(json);
       let result = [];
       keys.forEach(function(key){
-        if (json[key].recipients.length > 0)
+        if (json[key].recipients.length > 0 && !json[key].servers)
           result.push(json[key]);
       });
 

src/components/app/uploadsQueue.vue

@@ -35,6 +35,7 @@ export default {
   margin-left: 70px;
   display: flex;
   padding: 10px;
+  border-radius: 10px;
 }
 .icon .material-icons {
   font-size: 40px;

src/services/ServerService.js

@@ -0,0 +1,26 @@
+import {instance, wrapper} from './Api';
+
+export default {
+  post ( data )  {
+    return wrapper(instance().post('/server', data));
+  },
+  getChannels(serverID) {
+    return wrapper(instance().get(`/server/channels/${serverID}`));
+  },
+  postInvite (serverID) {
+    return wrapper (instance().post(`/server/${serverID}/invite`))
+  },
+  getInvites (serverID) {
+    return wrapper (instance().get(`/server/${serverID}/invites`))
+  },
+  getInviteDetail (inviteCode) {
+    return wrapper (instance().get(`/server/invite/${inviteCode}`))
+  },
+  joinServer (inviteCode) {
+    return wrapper (instance().post(`/server/invite/${inviteCode}`))
+  },
+  leaveServer (serverID) {
+    return wrapper (instance().delete(`/server/${serverID}`))
+  },
+  
+}

src/store/index.js

@@ -9,6 +9,7 @@ import settingsModule from './modules/settingsModule';
 import uploadFilesModule from './modules/uploadFilesModule';
 import popoutsModule from './modules/popoutsModule/popoutsModule.js';
 import emojiSuggestionModule from './modules/emojiSuggestionModule';
+import serversModule from './modules/serversModule';
 import {
   router
 } from './../router'
@@ -25,7 +26,8 @@ export const store = new Vuex.Store({
     settingsModule,
     uploadFilesModule,
     popoutsModule,
-    emojiSuggestionModule
+    emojiSuggestionModule,
+    servers: serversModule
   },
   state: {
     

src/store/modules/messageModule.js

@@ -15,6 +15,14 @@ const getters = {
 };
 
 const actions = {
+  async openChannel(context, channel) {
+    context.commit("setChannelName", channel.name);
+    const messages = context.state.messages[channel.channelID];
+    if (messages) return context.commit("selectedChannelID", channel.channelID);
+    context.commit("selectedChannelID", "loading")
+    getMessages(context, channel.channelID);
+
+  },
   async openChat(context, { uniqueID, channelID, channelName }) {
 
     if (channelName) context.commit("setChannelName", channelName);
@@ -33,65 +41,21 @@ const actions = {
     }
 
     if (messages) return;
-    if (channel && !messages) return getMessages(channelID);
+    if (channel && !messages) return getMessages(context, channelID);
 
 
     const { ok, error, result } = await channelService.post(uniqueID);
     if (ok) {
       context.commit("channel", result.data.channel);
-      getMessages(result.data.channel.channelID);
+      getMessages(context, result.data.channel.channelID);
     } else {
       // TODO handle this
       console.log(error);
     }
 
-    async function getMessages(channelID) {
+
-      const { ok, error, result } = await messagesService.get(channelID);
-      if (ok) {
-        context.commit("selectedChannelID", channelID);
-        context.commit("messages", {
-          channelID: result.data.channelID,
-          messages: result.data.messages.reverse()
-        });
-      } else {
-        // TODO handle this
-        console.log(error.response);
-      }
-    }
   },
 
-  // OLD STUFF
-  async openddChat(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);
   },
@@ -110,6 +74,21 @@ const actions = {
   }
 };
 
+async function getMessages(context, channelID) {
+  const { ok, error, result } = await messagesService.get(channelID);
+  if (ok) {
+    context.commit("selectedChannelID", channelID);
+    context.commit("messages", {
+      channelID: result.data.channelID,
+      messages: result.data.messages.reverse()
+    });
+  } else {
+    // TODO handle this
+    console.log(error.response);
+  }
+}
+
+
 const mutations = {
   messages(state, data) {
     Vue.set(state.messages, data.channelID, data.messages);

src/store/modules/popoutsModule/popoutsModule.js

@@ -11,12 +11,16 @@ const state = {
   uploadDialog: false,
   ImagePreviewURL: null,
 
+  serverIDContextMenu: null,
+  showServerInviteMenu: false,
+
   userInformationPopoutID: null,
 
   surveyPopout: false,
   dragDropFileUploadDialog: false,
   settings: false,
   GDLinkMenu: false,
+  addServer: false,
 }
 
 const getters = {
@@ -37,6 +41,9 @@ const actions = {
   },
   setImagePreviewURL(context, url) {
     context.commit('setImagePreviewURL', url);
+  },
+  setServerIDContextMenu(context, serverID) {
+    context.commit('setServerIDContextMenu', serverID);
   }
 }
 
@@ -52,6 +59,9 @@ const mutations = {
   },
   setImagePreviewURL(state, url) {
     Vue.set(state, 'ImagePreviewURL', url);
+  },
+  setServerIDContextMenu(state, serverID) {
+    Vue.set(state, 'serverIDContextMenu', serverID);
   }
 }
 

src/store/modules/serversModule.js

@@ -0,0 +1,55 @@
+import { bus } from "../../main";
+import { router } from "./../../router";
+import Vue from "vue";
+
+const state = {
+	servers: {},
+  channelsIDs: {}
+};
+
+const getters = {
+  servers(state) {
+    return state.servers;
+  },
+  channelsIDs(state) {
+    return state.channelsIDs;
+  }
+};
+
+const actions = {
+  setChannelsIDs(context, {serverID, channelsIDs}) {
+    context.commit('SET_CHANNELS_IDS', {serverID, channelsIDs});
+  },
+  setServers(context, servers) {
+    context.commit('SET_SERVERS', servers);
+  },
+  setServer(context, server) {
+    context.commit('SET_SERVER', server);
+  },
+  removeServer(context, serverID) {
+    context.commit('REMOVE_SERVER', serverID);
+  },
+};
+
+const mutations = {
+  SET_CHANNELS_IDS(state, {serverID, channelsIDs}) {
+    Vue.set(state.channelsIDs, serverID, channelsIDs);
+  },
+  SET_SERVERS(state, servers) {
+    state.servers = servers;
+  },
+  SET_SERVER(state, server) {
+		Vue.set(state.servers, server.server_id, server);
+  },
+  REMOVE_SERVER(state, serverID) {
+    Vue.delete(state.servers, serverID);
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  actions,
+  mutations,
+  getters
+};

src/store/modules/socketIOModule.js

@@ -34,9 +34,20 @@ const actions = {
           }
         }
       }
-      data.user.friends = friendObject;
     }
 
+    let servers = user.servers || [];
+    //convert array to object for servers
+    servers = servers.reduce((obj, item) => {
+      obj[item.server_id] = item
+      return obj
+    }, {})
+
+    context.dispatch('servers/setServers', servers)
+
+    data.user.servers = undefined;
+    data.user.friends = friendObject;
+
     context.commit('user', data.user)
 
     // convert dms array to object
@@ -123,7 +134,13 @@ const actions = {
   },
   ['socket_survey:completed'](context) {
     context.dispatch('surveyCompleted');
-  }
+  },
+  ['socket_server:joined'](context, server) {
+    context.dispatch('servers/setServer', server)
+  },
+  ['socket_server:leave'](context, {server_id}) {
+    context.dispatch('servers/removeServer', server_id)
+  },
 }
 
 export default {

src/views/App.vue

@@ -32,8 +32,8 @@
         <div class="panel-layout">
           <news v-if="currentTab == 0"/>
           <direct-message v-if="currentTab == 1"/>
-          <!-- <servers v-if="currentTab == 2"/> -->
+          <servers v-if="currentTab == 2"/>
-          <div class="coming-soon" v-if="currentTab > 1">
+          <div class="coming-soon" v-if="currentTab > 2">
             <div class="icon">
               <i class="material-icons">cached</i>
             </div>
@@ -56,8 +56,9 @@ import Spinner from "./../components/Spinner.vue";
 
 const ElectronFrameButtons = () =>
   import("./../components/ElectronJS/FrameButtons.vue");
-  
+
-const News = () => import(/* webpackChunkName: "News" */"./../components/app/Tabs/News.vue");
+const News = () =>
+  import(/* webpackChunkName: "News" */ "./../components/app/Tabs/News.vue");
 //const DirectMessage = () => import('./../components/app/Tabs/DirectMessage.vue');
 const DirectMessage = () => ({
   component: import("./../components/app/Tabs/DirectMessage.vue"),
@@ -233,7 +234,6 @@ export default {
 
 
 <style>
-
 textarea {
   font-family: "Roboto", sans-serif;
 }
@@ -252,6 +252,8 @@ textarea {
   background-repeat: no-repeat;
   background-position: bottom;
   background-size: cover;
+  filter: blur(15px);
+  transform: scale(1.1);
 }
 
 .panel-layout {
@@ -262,8 +264,7 @@ textarea {
   border-top-right-radius: 5px;
 }
 
-
+input {
-input{
   padding: 10px;
   background: rgba(0, 0, 0, 0.301);
   outline: none;
@@ -275,13 +276,12 @@ input{
   transition: 0.3s;
 }
 
-input:hover{
+input:hover {
   background: rgba(0, 0, 0, 0.452);
 }
 
 input:focus {
   background: rgba(0, 0, 0, 0.603);
 }
-
 </style>