From 9b3ddd291ef01065d470b0660642829d47e23075 Mon Sep 17 00:00:00 2001
From: grimhilt <grimhilt@users.noreply.github.com>
Date: Mon, 20 Mar 2023 15:00:15 +0100
Subject: [PATCH] basic routing for roomview

---
 front/src/App.vue                      |  6 +-----
 front/src/router/index.js              |  6 ++++++
 front/src/views/room/RoomView.vue      | 28 +++++++++++++++-----------
 front/src/views/sidebar/rooms/Room.vue |  8 +++++++-
 4 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/front/src/App.vue b/front/src/App.vue
index 1922974..f264895 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -4,22 +4,18 @@ import { RouterView } from "vue-router";
 
 <template>
   <div id="app">
-    <!-- <router-link to="/">Home</router-link> -->
-    <RouterView/>
     <Sidebar />
-    <RoomView />
+    <RouterView/>
   </div>
 </template>
 
 <script>
 import Sidebar from './views/sidebar/Sidebar'
-import RoomView from './views/room/RoomView'
 
 export default {
   name: 'App',
   components: {
     Sidebar,
-    RoomView,
   },
 }
 </script>
diff --git a/front/src/router/index.js b/front/src/router/index.js
index 83b8288..26bf887 100644
--- a/front/src/router/index.js
+++ b/front/src/router/index.js
@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from "vue-router";
 import Home from "../views/Home";
+import RoomView from "../views/room/RoomView";
 
 const routes = [
   {
@@ -16,6 +17,11 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "about" */ "../views/About.vue"),
   },
+  {
+    path: "/:id",
+    name: "test",
+    component: RoomView
+  }
 ];
 
 const router = createRouter({
diff --git a/front/src/views/room/RoomView.vue b/front/src/views/room/RoomView.vue
index 027d63d..8341174 100644
--- a/front/src/views/room/RoomView.vue
+++ b/front/src/views/room/RoomView.vue
@@ -1,26 +1,30 @@
+<script setup>
+  import { useRoute } from "vue-router"
+  import { onBeforeMount } from "vue"
+  import Header from './Header.vue'
+
+  const route = useRoute();
+
+  onBeforeMount(() => {
+    // get data
+  });
+
+  const { id } = route.params;
+
+</script>
+
 <template>
     <div>
         <Header></Header>
         <div>
-           
             Room
             is thread
+            <b>{{ id }}</b>
         </div>
 
     </div>
 </template>
 
-<script>
-import Header from './Header.vue'
-
-export default {
-  name: 'RoomView',
-  components: {
-    Header
-  }
-}
-</script>
-
 <style scoped>
 div {
     background-color: #1D1D23;
diff --git a/front/src/views/sidebar/rooms/Room.vue b/front/src/views/sidebar/rooms/Room.vue
index 5c67c7e..926bacf 100644
--- a/front/src/views/sidebar/rooms/Room.vue
+++ b/front/src/views/sidebar/rooms/Room.vue
@@ -1,6 +1,12 @@
+<script setup>
+import { useRouter } from "vue-router"
+
+const router = useRouter();
+</script>
+
 <template>
     <div>
-        <div id="user">
+        <div id="user" @click="router.push(`/${data.id}`)">
             <BaseAvatar url="vue.png"/>
             <div id="content">
                 <div id="sender">{{ data.user }}</div>