messsaging on the frontend

frontend/src/Apps/Msg.vue

@@ -7,9 +7,9 @@
 
 <script setup>
 	import { ref, reactive } from 'vue'
-	import { getDiscussions, currentDiscussion, fetchDiscussion, createDiscussion } from '@/rest/msg.js'
+	import { discussionsList, currentDiscussion, fetchDiscussion, createDiscussion, sendMessage, updateDiscussionName} from '@/rest/msg.js'
 
-	const discussionsList = reactive(await getDiscussions());
+	const msgContent = ref("");
 
 </script>
 
@@ -17,18 +17,18 @@
 	<div id="msg">
 		<div id="discList">
 			<div @click="fetchDiscussion(discussion.id)" class="discItem" v-for="discussion in discussionsList" :key="discussion.id">{{ discussion.name }}</div>
-			<button id="createDiscussion" @click="createDiscussion('New Discussion').then( e => discussionsList.push(e) )">+</button>
+			<button id="createDiscussion" @click="createDiscussion('New Discussion')">+</button>
 		</div>
 		<div id="discussion">
-			<h1 id=msgName >{{currentDiscussion.name}}</h1>
+			<h1 id=msgName ><input class="InputTitle" type="text" @blur="updateDiscussionName(currentDiscussion.id, currentDiscussion.name)" v-model="currentDiscussion.name"></h1>
 			<div id=msgs>
 				<div class="msg" v-for="msg in currentDiscussion.msgs" :sender="msg.sender" :key="msg.id">
-					{{ msg.text }}
+					{{ msg.content }}
 				</div>
 			</div>
 			<div id=messageBox>
-				<input type="text" name="messageBox" value="">
-				<input type="submit" name="" id="" value="send">
+				<input type="text" v-model="msgContent">
+				<input type="submit" @click="sendMessage(currentDiscussion.id, msgContent, null)" value="send">
 			</div>
 		</div>
 	</div>
@@ -56,6 +56,11 @@ div#discList{
 
 }
 
+.InputTitle{
+	all: inherit;
+	margin: auto;
+}
+
 .discItem{
 	color: darkorange;
 	display: flex;
@@ -91,7 +96,7 @@ div#discussion{
 #msgName{
 	text-align: center;
 	display: block;
-	background-color: #0202f755;
+	background-color: #2a1981;
 	border-radius: 5px;
 	color: white;
 	width: 75%;