Adding the discussion architectures and creating new discussions

frontend/src/Apps/Msg.vue

@@ -7,9 +7,9 @@
 
 <script setup>
 	import { ref, reactive } from 'vue'
-	import { getDiscussions, currentDiscussion, fetchDiscussion } from '@/rest/msg.js'
+	import { getDiscussions, currentDiscussion, fetchDiscussion, createDiscussion } from '@/rest/msg.js'
 
-	const discussionsList = reactive(await getDiscussions());
+	const discussionsList = ref(await getDiscussions());
 
 </script>
 
@@ -17,6 +17,7 @@
 	<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'); getDiscussions().then(e => { discussionsList = e; })">+</button>
 		</div>
 		<div id="discussion">
 			<h1 id=msgName >{{currentDiscussion.name}}</h1>
@@ -50,6 +51,8 @@ div#discList{
 	border-radius: 10px;
 	overflow: hidden;
 	padding: 10px;
+	display: flex;
+	flex-direction: column;
 
 }
 
@@ -66,6 +69,17 @@ div#discList{
 	border: 1px solid darkorange;
 }
 
+#createDiscussion{
+	height: 4vh;
+	margin: 5px;
+	color: white;
+	background-color: green;
+	border-radius: 0 30px 30px 0;
+	border: none;
+	font-weight: 900;
+	font-size: 2em;
+}
+
 div#discussion{
 	display: flex;
 	flex-direction: column;

frontend/src/rest/msg.js

@@ -5,30 +5,19 @@
  * Description: Messages frontend api consumer
  *******************************************************/
 
-import { restGet } from './restConsumer.js'
+import { restGet, restPost } from './restConsumer.js'
 import { ref } from 'vue'
 
 export const currentDiscussion = ref({});
 
+/**
+ * @return array of
+ * - id
+ * - name
+ * - members
+ */
 export async function getDiscussions(){
-	return [
-		{ 
-			id: 1,
-			name: "Discussion#1",
-			members: [1, 2, 3, 4],
-		},
-		{ 
-			id: 2,
-			name: "Discussion#2",
-			members: [1, 4],
-		},
-		{ 
-			id: 3,
-			name: "Discussion#3",
-			members: [1, 3],
-		}
-	]
-	// return restGet("/discussions");
+	return restGet("/discussions");
 }
 
 export async function fetchDiscussion(id){
@@ -83,3 +72,11 @@ export async function fetchDiscussion(id){
 	// currentDiscussion.value = restGet("/discussion/" + id);
 }
 
+export async function createDiscussion(name){
+	restPost("/discussion", {name: name});
+}
+
+
+export async function invite(id, regNo){
+	restPost("/discussion/"+ id+ "/invite", {user: regNo});
+}