From 043753c814b9a9ff86d732273b785e093f2aa927 Mon Sep 17 00:00:00 2001
From: cyrilkym <cyril.kym@youengineering.ch>
Date: Sun, 29 Oct 2023 13:19:42 +0100
Subject: [PATCH 1/4] basic chat implemented

---
 packages/frontend/src/pages/Circle.vue | 77 ++++++++++++++++++++++++--
 1 file changed, 73 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/pages/Circle.vue b/packages/frontend/src/pages/Circle.vue
index 284f011..41d6ab6 100644
--- a/packages/frontend/src/pages/Circle.vue
+++ b/packages/frontend/src/pages/Circle.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import CommunityCard from '@/components/ui/communityCard/CommunityCard.vue'
-import { onMounted, ref } from 'vue'
+import {onMounted, onUnmounted, ref} from 'vue'
 import axios from 'axios'
 import { useRouter } from 'vue-router'
+import { PaperAirplaneIcon } from "@heroicons/vue/24/outline";
 
 const router = useRouter()
 
@@ -17,10 +18,56 @@ type Answer = {
 }
 
 const answers = ref<Answer[]>([])
+const messages = ref<{username: string, message: string, userId: number}[]>([]);
+const currentInputValue = ref('')
+const userId = ref<number>(0)
 
-onMounted(async () => {
-  await getAnswers()
-})
+const sendMessage = async (message: string) => {
+  axios.post(`${import.meta.env.VITE_BACKEND_HOST}/circle/chat/${groupId}`,
+      {
+        message
+      },
+      {
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        withCredentials: true
+      }
+  )
+}
+
+const getCurrentUser = async () =>{
+  const user = await axios.get(
+      `${import.meta.env.VITE_BACKEND_HOST}/user/current`,
+      {
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        withCredentials: true
+      }
+  )
+  userId.value = user.data
+}
+
+const getChat = async () => {
+  const chat = await axios.get(
+      `${import.meta.env.VITE_BACKEND_HOST}/circle/chat/${groupId}`,
+      {
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        withCredentials: true
+      }
+  )
+  messages.value = chat.data.map(message => {
+    return {
+      username: message.user.username,
+      message: message.message,
+      userId: message.user.userId
+    }
+  })
+  console.log("chat", messages.value);
+}
 
 const getAnswers = async () => {
   try {
@@ -50,6 +97,15 @@ const getAnswers = async () => {
   } catch (error) {}
 }
 
+onMounted(async () => {
+  await sendMessage("hello there")
+  await getCurrentUser();
+  setInterval(() => {
+    getChat()
+  }, 2000)
+})
+
+
 const getCircle = async () => {
   try {
     const result = await axios.get(
@@ -76,6 +132,19 @@ const getCircle = async () => {
         :content="answer.answer"
         :variant="answer.emotion"
       ></CommunityCard>
+      <div class="flex flex-col-reverse">
+        <div v-for="message in messages" class="w-full">
+          <div v-if="message.userId === userId" class="flex flex-row">
+            <p>{{message.username}}: {{message.message}}</p>
+          </div>
+          <div v-if="message.userId !== userId" class="flex flex-row-reverse">
+            <p>{{message.username}}: {{message.message}}</p>
+          </div>
+        </div>
+      </div>
+      <v-text-field v-model="currentInputValue"></v-text-field>
+      <paper-airplane-icon @click="sendMessage(currentInputValue)" class="w-6"/>
+
     </div>
   </main>
 </template>

From ef4ce0955a1897cfcf08e678d70fa24c2d470713 Mon Sep 17 00:00:00 2001
From: cyrilkym <cyril.kym@youengineering.ch>
Date: Sun, 29 Oct 2023 13:28:38 +0100
Subject: [PATCH 2/4] basic chat implemented

---
 packages/frontend/src/pages/Circle.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/pages/Circle.vue b/packages/frontend/src/pages/Circle.vue
index 41d6ab6..e1d766c 100644
--- a/packages/frontend/src/pages/Circle.vue
+++ b/packages/frontend/src/pages/Circle.vue
@@ -21,8 +21,12 @@ const answers = ref<Answer[]>([])
 const messages = ref<{username: string, message: string, userId: number}[]>([]);
 const currentInputValue = ref('')
 const userId = ref<number>(0)
+const interval = setInterval(() => {
+  getChat()
+}, 2000);
 
 const sendMessage = async (message: string) => {
+  if(message === '') return
   axios.post(`${import.meta.env.VITE_BACKEND_HOST}/circle/chat/${groupId}`,
       {
         message
@@ -34,6 +38,7 @@ const sendMessage = async (message: string) => {
         withCredentials: true
       }
   )
+  currentInputValue.value = '';
 }
 
 const getCurrentUser = async () =>{
@@ -66,7 +71,6 @@ const getChat = async () => {
       userId: message.user.userId
     }
   })
-  console.log("chat", messages.value);
 }
 
 const getAnswers = async () => {
@@ -98,11 +102,11 @@ const getAnswers = async () => {
 }
 
 onMounted(async () => {
-  await sendMessage("hello there")
   await getCurrentUser();
-  setInterval(() => {
-    getChat()
-  }, 2000)
+})
+
+onUnmounted(() => {
+  clearInterval(interval)
 })
 
 
@@ -144,7 +148,6 @@ const getCircle = async () => {
       </div>
       <v-text-field v-model="currentInputValue"></v-text-field>
       <paper-airplane-icon @click="sendMessage(currentInputValue)" class="w-6"/>
-
     </div>
   </main>
 </template>

From b6648436978b67ebea6d2908c6352988f07c62b6 Mon Sep 17 00:00:00 2001
From: cyrilkym <cyril.kym@youengineering.ch>
Date: Sun, 29 Oct 2023 14:11:45 +0100
Subject: [PATCH 3/4] chat implemented

---
 packages/frontend/src/pages/Circle.vue | 79 ++++++++++++++++++++------
 1 file changed, 63 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/pages/Circle.vue b/packages/frontend/src/pages/Circle.vue
index 28f8303..ed0a253 100644
--- a/packages/frontend/src/pages/Circle.vue
+++ b/packages/frontend/src/pages/Circle.vue
@@ -3,7 +3,6 @@ import CommunityCard from '@/components/ui/communityCard/CommunityCard.vue'
 import {onMounted, onUnmounted, ref} from 'vue'
 import axios from 'axios'
 import { useRouter } from 'vue-router'
-import { PaperAirplaneIcon } from "@heroicons/vue/24/outline";
 
 const router = useRouter()
 
@@ -24,8 +23,14 @@ type Answer = {
     | undefined
 }
 
+type Message = {
+  username: string;
+  message: string;
+  userId: number;
+}
+
 const answers = ref<Answer[]>([])
-const messages = ref<{username: string, message: string, userId: number}[]>([]);
+const messages = ref<Message[]>([]);
 const currentInputValue = ref('')
 const userId = ref<number>(0)
 const interval = setInterval(() => {
@@ -71,13 +76,14 @@ const getChat = async () => {
         withCredentials: true
       }
   )
-  messages.value = chat.data.map(message => {
+  const msgs = chat.data.map((m: { user: {username: string, userId: number}, message: string}) => {
     return {
-      username: message.user.username,
-      message: message.message,
-      userId: message.user.userId
+      username: m.user.username,
+      message: m.message,
+      userId: m.user.userId
     }
   })
+  messages.value = msgs.reverse();
 }
 
 const getAnswers = async () => {
@@ -110,13 +116,13 @@ const getAnswers = async () => {
 
 onMounted(async () => {
   await getCurrentUser();
+  await getChat();
 })
 
 onUnmounted(() => {
   clearInterval(interval)
 })
 
-
 const getCircle = async () => {
   try {
     const result = await axios.get(
@@ -131,11 +137,12 @@ const getCircle = async () => {
     return result.data
   } catch (error) {}
 }
+
 </script>
 
 <template>
   <main>
-    <div class="inlay flex flex-col gap-y-6">
+    <div class="inlay flex flex-col gap-y-6 mb-10">
       <CommunityCard
         v-for="answer in answers"
         :id="answer.answerId"
@@ -143,18 +150,58 @@ const getCircle = async () => {
         :content="answer.answer"
         :variant="answer.emotion"
       ></CommunityCard>
-      <div class="flex flex-col-reverse">
-        <div v-for="message in messages" class="w-full">
-          <div v-if="message.userId === userId" class="flex flex-row">
-            <p>{{message.username}}: {{message.message}}</p>
+      <div>
+        <div v-for="message in messages" class="flex flex-column-reverse">
+          <div v-if="message.userId === userId">
+            <div
+                class="w-4/5 rounded-lg py-2 pl-4 font-poppins shadow-md"
+            >
+              <h4 style="font-size: 10px">{{message.username}}</h4>
+              <p>
+                {{ message.message }}
+              </p>
+            </div>
           </div>
-          <div v-if="message.userId !== userId" class="flex flex-row-reverse">
-            <p>{{message.username}}: {{message.message}}</p>
+          <div v-if="message.userId !== userId" class="flex flex-row">
+            <div
+                class="w-4/5 rounded-lg py-2 pl-4 font-poppins shadow-md"
+            >
+              <h4 style="font-size: 10px">{{message.username}}</h4>
+              <p>
+                {{ message.message }}
+              </p>
+            </div>
           </div>
         </div>
       </div>
-      <v-text-field v-model="currentInputValue"></v-text-field>
-      <paper-airplane-icon @click="sendMessage(currentInputValue)" class="w-6"/>
+      <div class="flex h-fit w-full justify-center">
+        <div
+            class="fixed bottom-0 mx-auto mb-[100px] flex h-fit w-11/12 justify-between rounded-full bg-white p-4 font-poppins shadow-[0_3px_10px_rgb(0,0,0,0.2)]"
+        >
+          <input
+              id="comment"
+              type="text"
+              v-model="currentInputValue"
+              class="sm:text-sm w-4/5 appearance-none leading-5 focus:z-10 focus:outline-none sm:leading-5"
+          />
+          <button @click="sendMessage(currentInputValue)">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="h-6 w-6"
+            >
+              <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
     </div>
   </main>
 </template>

From 9c3047ec886cef23e8c240609f688fa1beb8f9b1 Mon Sep 17 00:00:00 2001
From: cyrilkym <cyril.kym@youengineering.ch>
Date: Sun, 29 Oct 2023 14:15:35 +0100
Subject: [PATCH 4/4] getanswers

---
 packages/frontend/src/pages/Circle.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/frontend/src/pages/Circle.vue b/packages/frontend/src/pages/Circle.vue
index ed0a253..eafa1e5 100644
--- a/packages/frontend/src/pages/Circle.vue
+++ b/packages/frontend/src/pages/Circle.vue
@@ -115,6 +115,7 @@ const getAnswers = async () => {
 }
 
 onMounted(async () => {
+  await getAnswers();
   await getCurrentUser();
   await getChat();
 })