4 files changed, 71 insertions, 22 deletions

diff --git a/src/services/ChatService.js b/src/services/ChatService.js
index 08deba2..d077e9b 100644
--- a/src/services/ChatService.js
+++ b/src/services/ChatService.js
@@ -13,7 +13,7 @@ export default {
             }
         })
         .catch(error => error_notify(error))
-   },
+    },
 
     async get_all_user_groups() {
         return await axios
@@ -25,5 +25,17 @@ export default {
             }
         })
         .catch(error => error_notify(error))
+    },
+
+    async get_group_messages(group_pk) {
+        return await axios
+        .get(url+`groups/detail/${group_pk}/messages/`)
+        .then(res => {
+            return {
+                status: res.status,
+                data: res.data
+            }
+        })
+        .catch(error => error_notify(error))
     }
 }
diff --git a/src/services/CommandsService.js b/src/services/CommandsService.js
index cc5bdf2..181d50e 100644
--- a/src/services/CommandsService.js
+++ b/src/services/CommandsService.js
@@ -3,9 +3,9 @@ import ChatService from "./ChatService"
 import store from "@/store/index.js"
 import router from '@/router/index.js'
 
-function set_groups(data) {
+function set_groups(searcher, data) {
     function group_command(group) {
-        console.log(group)
+        searcher.$emit("group_set", group)
     }
 
     let groups = {}
@@ -21,11 +21,11 @@ function set_groups(data) {
 export default {
     groups() {
         return {
-            async send() {
+            async send(searcher) {
                 const {data, status} = await ChatService.get_all_user_groups()
                 if (status!==200)
                     return {}
-                const groups = set_groups(data)
+                const groups = set_groups(searcher, data)
                 return groups
             },
 
diff --git a/src/services/NotifyErrorService.js b/src/services/NotifyErrorService.js
index b28e664..465b908 100644
--- a/src/services/NotifyErrorService.js
+++ b/src/services/NotifyErrorService.js
@@ -1,16 +1,31 @@
 import Vue from 'vue'
+import router from '@/router/index.js'
+import store from "@/store/index.js"
+
 
 const error_notify = (error) => {
-    for (const [key, values] of Object.entries(error.response.data)) {
-        console.log(values)
-        values.forEach(value => {
-            Vue.notify({
-                type: 'error',
-                title: value,
-                text: (key !== 'non_field_errors') ? key : ''
-            })
+    if(error.response.status === 401) {
+        Vue.notify({
+            type: 'error',
+            title: 'Please login again!',
+            text: 'Token expire'
         })
+
+        store.dispatch('logout')
+        router.push('/login')
     }
+    else
+        for (const [key, values] of Object.entries(error.response.data)) {
+            console.log(values)
+            values.forEach(value => {
+                Vue.notify({
+                    type: 'error',
+                    title: value,
+                    text: (key !== 'non_field_errors') ? key : ''
+                })
+            })
+        }
+
     return {
         data: error.response.data,
         status: error.response.status
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 1fbbb7f..7bd99a2 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,16 +1,23 @@
 <template>
   <div class="home" v-hotkey="keymap">
-    Hi {{get_username}}!
-      <Searcher
-          v-if="popups.searcher_show"
-          @close="hideSearcher"
-          @toogle_group_maker="toogleGroupShow"
-      />
+      Hi {{get_username}}!
+
+      <div v-for="group in groups" :key="group.name" >
+          <GroupSender
+              :group="group"
+          />
+      </div>
 
       <GroupMaker
           v-if="popups.group_maker_show"
           @close="hideGroup"
+      />
 
+      <Searcher
+          v-if="popups.searcher_show"
+          @close="hideSearcher"
+          @toogle_group_maker="toogleGroupShow"
+          @group_set="openGroup"
       />
   </div>
 </template>
@@ -18,6 +25,7 @@
 <script>
 import Searcher from '@/components/searcher/Searcher.vue'
 import GroupMaker from '@/components/group/GroupMaker.vue'
+import GroupSender from  '@/components/group/GroupSender.vue'
 
 const popups = {
     searcher_show: false,
@@ -27,7 +35,8 @@ const popups = {
 export default {
   data() {
     return {
-        popups
+        popups,
+        groups: []
     }
   },
 
@@ -44,7 +53,19 @@ export default {
     hideSearcher() { this.popups.searcher_show = false },
 
     toogleGroupShow() { this.popups.group_maker_show = !this.popups.group_maker_show },
-    hideGroup() { this.popups.group_maker_show = false }
+    hideGroup() { this.popups.group_maker_show = false },
+
+    openGroup(group) {
+        let groups = this.groups.slice()
+        let index = groups.findIndex(o => o.name===group.name)
+
+        if(index >= 0)
+            groups.splice(index, 1)
+        else
+            groups.push(group)
+
+        this.groups = groups
+    }
   },
 
   computed: {
@@ -63,7 +84,8 @@ export default {
 
   components: {
       Searcher,
-      GroupMaker
+      GroupMaker,
+      GroupSender
   },
 
   created() {