fixed bugs and create channels.

src/components/app/FriendsList.vue

@@ -5,6 +5,7 @@
       <div :class="{selector: true, right: currentTab === 1}" />
       <div
         class="tab"
+        :class="{notifyAnimation: friendRequestExists}"
         @click="currentTab = 0"
       >
         Friends
@@ -85,7 +86,14 @@ export default {
       }
       return notification;
     },
-  }
+    friendRequestExists() {
+      const allFriend = this.$store.getters.user.friends;
+      const result = Object.keys(allFriend).map(function(key) {
+        return allFriend[key];
+      });
+      return result.find(friend => friend.status === 1);
+    }
+}
 }
 </script>
 <style scoped>

src/components/app/Popouts/Popouts/ServerSettingsPanels/DeleteServer.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="content-inner">
+    <div class="content-inner" v-if="server">
       <div class="warning">Are you sure you want to delete <strong>{{server.name}}</strong>? This cannot be <strong>UNDONE!</strong></div>
-      <div class="button" @click="deleteServer()">DELETE <strong>{{server.name}}</strong></div>
+      <div class="button" @click="deleteServer()">{{confirmed ? 'ARE YOU SURE?' : 'DELETE SERVER'}}</div>
     </div>
 </template>
 
@@ -14,8 +14,16 @@ import { mapState } from "vuex";
 
 export default {
   components: {Spinner},
+  data() {
+    return {
+      confirmed: false
+    }
+  },
   methods: {
     async deleteServer(){
+      if (!this.confirmed) {
+        return this.confirmed = true;
+      }
       const {ok, error, result} = await ServerService.leaveServer(this.server.server_id);
       if (ok) {
         this.$store.dispatch('setServerSettings', {serverID: null})

src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue

@@ -2,14 +2,15 @@
     <div class="content-inner">
       <div class="channels-list">
         <div class="channel add-channel-button" @click="createChannel()"><div class="material-icons">add</div><div>Create Channel</div></div>
-        <div class="channel" v-for="(channel, index) in channels" :key="channel.channelID" :class="{selected: index === selectedChannelIndex}" @click="selectedChannelIndex = index">{{channel.name}}</div>
+        <div class="channel" v-for="(channel, index) in channels" :key="channel.channelID" :class="{selected: index === selectedChannelIndex}" @click="channelClick($event, index)"><div class="name">{{channel.name}}</div></div>
       </div>
-      <div class="details">
+      <div class="details" v-if="channels[selectedChannelIndex]">
         <div class="input">
         <div class="input-title">Server Name</div>
-          <input type="text" placeholder="Channel Name" :default-value.prop="channels[selectedChannelIndex].name" @input="inputEvent('name', $event)">
+          <input type="text" ref="name" placeholder="Channel Name" :default-value.prop="channels[selectedChannelIndex].name" @input="inputEvent('name', $event)">
         </div>
-        <div class="button" v-if="update.name">Save Changes</div>
+        <div class="button" v-if="update.name" @click="updateChannel">Save Changes</div>
+        <div class="button warn delete-server" v-if="server.default_channel_id !== channels[selectedChannelIndex].channelID" @click="deleteChannel">{{deleteButtonConfirmed ? 'ARE YOU SURE?' : 'Delete Channel' }}</div>
       </div>
     </div>
 </template>
@@ -25,6 +26,7 @@ export default {
   components: {Spinner},
   data() {
     return {
+      deleteButtonConfirmed: false,
       selectedChannelIndex: 0,
       update: {
         name: null
@@ -34,11 +36,32 @@ export default {
   methods: {
     async createChannel() {
       const {ok, error, result} = await ServerService.createChannel(this.server.server_id, "New Channel");
-      console.log(ok, error, result) 
+    },
+    async updateChannel() {
+      const data = {
+        name: this.update.name || this.channels[this.selectedChannelIndex].name
+      }
+      const {ok, error, result} = await ServerService.updateChannel(this.server.server_id, this.channels[this.selectedChannelIndex].channelID, data);    
+      if (ok) {
+        this.update.name = null;
+      }
+    },
+    async deleteChannel() {
+      if (!this.deleteButtonConfirmed) {
+        return this.deleteButtonConfirmed = true; 
+      }
+      const {ok, error, result} = await ServerService.deleteChannel(this.server.server_id, this.channels[this.selectedChannelIndex].channelID)
+      console.log({ok, error, result})
     },
     inputEvent(name, event) {
       this.update.name = event.target.value
-    }
+    },
+    channelClick(event, index) {
+      this.selectedChannelIndex = index
+      this.$refs['name'].value = this.channels[this.selectedChannelIndex].name
+      this.update.name = null;
+      this.deleteButtonConfirmed = false;
+    },
   },
   computed: {
     server() {
@@ -67,12 +90,14 @@ export default {
 .content-inner {
   display: flex;
   height: 100%;
+  position: relative;
 }
 .channels-list {
   background: #161616e5;
   height: 100%;
-  width: 155px;
+  width: 165px;
   flex-shrink: 0;
+  overflow: auto;
 }
 .channel {
   border-radius: 5px;
@@ -82,7 +107,12 @@ export default {
   cursor: pointer;
   transition: 0.3s;
   display: flex;
-
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.channel .name {
+  overflow: hidden;
+  text-overflow: ellipsis; 
 }
 .channel div {
   align-self: center;
@@ -118,6 +148,21 @@ export default {
 .button:hover {
   background: rgb(17, 148, 255);
 }
+.button.warn {
+  background: rgba(255, 17, 17, 0.692);
+}
+.button.warn:hover {
+  background: rgb(255, 17, 17);
+}
+.delete-server{
+  margin: auto;
+  margin-bottom: 0;
+  margin-left: 0;
+  margin-right: 0;
+  align-self: initial;
+  border-radius: 0;
+  text-align: center;
+}
 .input {
   display: flex;
   flex-direction: column;

src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue

@@ -123,7 +123,7 @@ export default {
   background: rgb(59, 59, 59);
 }
 .header{
-  background: rgb(75, 75, 75);
+  background: rgb(47, 47, 47);
   display: flex;
   height: 50px;
   flex-shrink: 0;

src/components/app/ServerTemplate/ChannelsList.vue

@@ -57,7 +57,7 @@ export default {
         this.$store.dispatch('channel', element)
         channelsIDs.push(element.channelID)
       }
-      this.$store.dispatch("servers/setChannelsIDs", {
+      this.$store.dispatch("servers/AddChannelsIDs", {
         serverID: this.serverID,
         channelsIDs: channelsIDs
       });

src/components/app/relationships/PendingFriends.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="pending-friends">
+  <div class="pending-friends" v-if="friends && friends.length">
+
     <div
       class="tab"
       @click="expanded = !expanded"

src/services/ServerService.js

@@ -10,6 +10,12 @@ export default {
   createChannel(serverID, name) {
     return wrapper(instance().put(`/server/${serverID}/channel`, {name}));
   },
+  updateChannel (serverID, channelID, data) {
+    return wrapper(instance().patch(`/server/${serverID}/channels/${channelID}`, data));
+  },
+  deleteChannel (serverID, channelID) {
+    return wrapper(instance().delete(`/server/${serverID}/channels/${channelID}`));
+  },
   postInvite (serverID) {
     return wrapper (instance().post(`/server/${serverID}/invite`))
   },

src/store/modules/channelModule.js

@@ -26,6 +26,13 @@ const actions = {
   channel(context, channel) {
     context.commit("channel", channel);
   },
+  removeChannel(context, {channelID}) {
+    context.commit('removeChannel', channelID)
+  },
+  updateChannel(context, data) {
+    const update = Object.assign(context.state.channels[data.channelID], data);
+    context.commit('channel', update)
+  },
   selectedChannelID(context, channelID) {
     context.commit("selectedChannelID", channelID);
   },
@@ -44,6 +51,9 @@ const actions = {
 };
 
 const mutations = {
+  removeChannel(state, channelID) {
+    Vue.delete(state.channels, channelID);
+  },
   updateChannelLastMessage(state, channelID) {
     Vue.set(state.channels[channelID], "lastMessaged", Date.now());
   },

src/store/modules/serversModule.js

@@ -25,8 +25,8 @@ const getters = {
 };
 
 const actions = {
-  setChannelsIDs(context, {serverID, channelsIDs}) {
+  AddChannelsIDs(context, {serverID, channelsIDs}) {
-    context.commit('SET_CHANNELS_IDS', {serverID, channelsIDs});
+    context.commit('ADD_CHANNELS_IDS', {serverID, channelsIDs});
   },
   setServers(context, servers) {
     context.commit('SET_SERVERS', servers);
@@ -58,12 +58,20 @@ const actions = {
       }
       context.commit('REMOVE_SERVER_MEMBER', {uniqueID: member.uniqueID, server_id})
     }
+  },
+  removeServerChannel (context, {server_id, channelID}) {
+    const filter = context.state.channelsIDs[server_id].filter(c => {
+      return c !== channelID
+    })
+    context.commit('SET_CHANNEL_IDs', {serverID: server_id, channelIDs: filter})
   }
 };
 
 const mutations = {
-
+  SET_CHANNEL_IDs(state, {serverID, channelIDs}) {
-  SET_CHANNELS_IDS(state, {serverID, channelsIDs}) {
+    Vue.set(state.channelsIDs, serverID, channelIDs)
+  },
+  ADD_CHANNELS_IDS(state, {serverID, channelsIDs}) {
     const previousChannels = state.channelsIDs[serverID] || []
     Vue.set(state.channelsIDs, serverID, [...new Set([...previousChannels, ...channelsIDs])]);
   },

src/store/modules/socketIOModule.js

@@ -77,7 +77,7 @@ const actions = {
 
 
         context.dispatch('channel', element)
-        context.dispatch("servers/setChannelsIDs", {
+        context.dispatch("servers/AddChannelsIDs", {
           serverID: item.server_id,
           channelsIDs: [element.channelID]
         });
@@ -212,7 +212,7 @@ const actions = {
       element.server = undefined;
       element.server_id = server.server_id;
       context.dispatch('channel', element)
-      context.dispatch("servers/setChannelsIDs", {
+      context.dispatch("servers/AddChannelsIDs", {
         serverID: server.server_id,
         channelsIDs: [element.channelID]
       });
@@ -257,6 +257,17 @@ const actions = {
     }
     context.dispatch('members/addPresences', presences);
   },
+  ['socket_server:addChannel'](context, {channel}) { // add_channel
+    context.dispatch('channel', channel);
+    context.dispatch('servers/AddChannelsIDs', {serverID: channel.server_id, channelsIDs: [channel.channelID]})
+  },
+  ['socket_server:updateChannel'](context, {name, channelID}) { // update_channel
+    context.dispatch('updateChannel', {name, channelID});
+  },
+  ['socket_server:removeChannel'](context, {server_id, channelID}) {
+    context.dispatch('servers/removeServerChannel', {server_id, channelID});
+   // context.dispatch('removeChannel', {channelID});
+  },
 }
 
 export default {

src/utils/changelog.js

@@ -17,12 +17,12 @@ const config = [
     version: 4.9,
     title: "Color codeblocks and create multiple channels!",
     shortTitle: "",
-    date: "10/07/2019",
+    date: "12/07/2019",
-    headColor: "rgba(40, 100, 190, 0.77)",
+    headColor: "rgba(190, 40, 40, 0.77)",
     new: [
       "You can now color your code (thanks bree!) by typing: <div style='background: #00000066; border-radius: 5px; padding: 5px;'>```js<br>    console.log('Hello World!');<br>```</div>",
       "A new server settings option has been added that allows you to delete your server, create new channels and rename your channels. More future will be added in the future! ",
-      "The 'Recents' tab should now flash red when you get a notificaiton.",
+      "The 'Recents' tab should now flash red when you get a notification.",
       "Friends and Recents tabs position will be saved when visiting the site."
     ],
     fix: ['Fixed a bug where, when you are on the changelog or the server browser tab, the notifications get dismissed.'],