:recycle: using groupings for individual chat view

frontend/src/components/Messages.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .sidebar--messages
-  h5.message__title messages from matches
+  h5.message__title matches
   router-link(
         :to="`/chats/${match.profile.profile_id}`" 
         v-for='match in matches' 

frontend/src/components/SideBar.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
-aside.sidebar
-    p(v-if="profile.isLoggedIn") chans: {{profile.groupings}}
-    .temp-control-box
+aside.sidebar.w-flex.column.pa8
+    Messages(:matches="matches" :pid="pid")
+    .spacer
+    nav.temp-control-box
         input(v-model="switchToPID" @keyup.enter="$emit('updatePid', switchToPID)")
         button(@click="$emit('updatePid', switchToPID)") switch profile
     
-    Messages(:matches="matches" :pid="pid")
 </template>
 
 <script>

frontend/src/views/ChatView.vue

@@ -3,24 +3,25 @@ main.view--chat.f-col.start.w-full
     header 
         h2 Chat Page
  
-    article(v-if="!loading && target && profile.isLoggedIn")
+    article(v-if="profile.isLoggedIn && target")
         h3 {{ profile.id }} 
             span chatting with: {{ target.profile_id }}
         p subscriptions: {{ profile.chatter.subscriptions }}
+        p target: {{ target }}
     
+    p(v-else-if="profile.isLoggedIn && !target") No match found between profile {{ $route.params.tid }} and {{profile.id}}... 
     p(v-else) Loading...
 
     MainNav(@show-sidebar="$emit('show-sidebar')")
 </template>
 
 <script>
-import { fetchProfileByProfileId, currentProfile } from '../services'
+import { currentProfile } from '../services'
 
 export default {
     name: 'ProfileView',
     data: () => ({
-        loading: true,
-        target: {},
+        target: null,
     }),
     computed: {
         profile: () => currentProfile,
@@ -36,15 +37,15 @@ export default {
     },
     methods: {
         async loadTargetProfile() {
-            this.loading = true
             try {
-                this.target = await fetchProfileByProfileId(
-                    this.$route.params.tid,
+                const match = this.profile.groupings.find(
+                    grouping =>
+                        grouping.profile.profile_id == this.$route.params.tid,
                 )
+                this.target = match.profile
             } catch (err) {
                 console.error(err)
             }
-            this.loading = false
         },
     },
 }