add Groups View and message fetcher

3 files changed, 102 insertions, 47 deletions

diff --git a/src/components/group/GroupSender.vue b/src/components/group/GroupSender.vue
new file mode 100644
index 0000000..160ca76
--- /dev/null
+++ b/src/components/group/GroupSender.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="group_view">
+      <h1> {{group.name}} </h1>
+      <div class="messages">
+        <Message v-for="message in messages" :key="message.id" :message="message" />
+      </div>
+
+      <form @submit="send_message">
+        <input v-model="message" type="text" ref="input" />
+      </form>
+  </div>
+</template>
+
+<script>
+import Message from '@/components/group/Message.vue'
+import ChatService from '@/services/ChatService.js'
+
+export default {
+  data() {
+    return {
+      message: "",
+      messages: []
+    }
+  },
+
+  props: {
+    group: Object
+  },
+
+  methods: {
+      close() {
+        this.$emit('close')
+      },
+
+    send_message(e) {
+      e.preventDefault()
+      console.log(this.message)
+      this.message = ""
+    },
+
+    async get_messages() {
+      let {status, data} = await ChatService.get_group_messages(this.group.id)
+
+      console.log(data)
+
+      if(status===200)
+        this.messages = data.messages
+    }
+  },
+
+  components: {
+    Message
+  },
+
+  created() {
+    this.$nextTick(function () {
+      this.$refs.input.focus()
+
+      this.get_messages()
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/group/GroupView.vue b/src/components/group/GroupView.vue
deleted file mode 100644
index 1608cf4..0000000
--- a/src/components/group/GroupView.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <div class="group_view">
-      Group maker
-      <form @submit="send_message">
-        <inout type="text" ref="input" />
-      </form>
-  </div>
-</template>
-
-<script>
-import ChatService from "@/services/ChatService.js"
-
-export default {
-  data() {
-    return {
-    }
-  },
-
-  methods: {
-      close() {
-        this.$emit('close')
-      },
-  },
-
-  created() {
-    this.$nextTick(function () {
-      this.$refs.input.focus()
-    })
-  }
-}
-</script>
-
-<style scoped>
-
-.group_view {
-    position: absolute;
-    width: 30%;
-    height: 80%;
-    top: 50%;
-    left: 50%;
-    background-color: #202020;
-    padding: 20px;
-    border-radius: 10px;
-    transform: translate(-50%, -50%);
-  }
-
-</style>
diff --git a/src/components/group/Message.vue b/src/components/group/Message.vue
new file mode 100644
index 0000000..56e2805
--- /dev/null
+++ b/src/components/group/Message.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="message">
+      <div class="sender">{{ get_message_user }}</div>
+      <div class="content">{{ get_message_content }}</div>
+      <div class="date">{{ get_message_date }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    message: Object
+  },
+
+  computed: {
+    get_message_user() { return this.message.sender.username },
+    get_message_content() { return this.message.message },
+    get_message_date() {
+      let date = new Date(this.message.create_date)
+      return `${date.getDate()}/${date.getMonth()} ${date.getHours()}:${date.getMinutes()}`
+    },
+  },
+
+  created() {
+    this.$nextTick(function () {
+    })
+  }
+}
+</script>
+
+<style scoped>
+.message {
+  width: 100%;
+}
+</style>