:recycle: extended homeview tofetch and display matches | temporary removing majority of content on home endpoint

backend/knexfile.js

@@ -1,4 +1,5 @@
-require('dotenv').config()
+require('dotenv').config({path: './server/.env'})
+// require('dotenv').config()
 
 const local = {
     host: process.env.DB_HOST,

backend/server/manifest.js

@@ -1,4 +1,5 @@
-const Dotenv = require('dotenv')
+const Dotenv = require('dotenv').config({path: './server/.env'})
+// const Dotenv = require('dotenv')
 const Confidence = require('@hapipal/confidence')
 const Inert = require('@hapi/inert')
 const Vision = require('@hapi/vision')
@@ -6,7 +7,8 @@ const Schwifty = require('@hapipal/schwifty')
 const HapiSwagger = require('hapi-swagger')
 
 /** Pull .env into process.env */
-Dotenv.config({ path: `${__dirname}/../.env` })
+// Dotenv.config({ path: `${__dirname}/../.env` })
+// Dotenv.config({ path: `${__dirname}/../.env` })
 
 /** Glue manifest as a confidence store */
 module.exports = new Confidence.Store({

frontend/src/App.vue

@@ -1,31 +1,31 @@
 <template lang="pug">
-w-app
-    w-drawer(v-model="openDrawer")
-    w-flex.my12(:gap="3" align-center wrap)
-        w-button.ma1(@click="$waveui.notify('Information.')" bg-color="info") Notify info
-        w-button.ma1(@click="$waveui.notify('Success!', 'success')" bg-color="success") Notify success
-        w-button.ma1(@click="$waveui.notify('Warning!', 'warning')" bg-color="warning") Notify warning
-        w-button.ma1(@click="$waveui.notify('Error :(', 'error', 0)" bg-color="error") Permanent error
-    w-flex.my12(align-center wrap)
-        w-spinner(bounce)
-        w-input Label
-        w-checkbox Single option
-    w-flex.my12
-        w-button(@click="openDrawer = true" outline="")
-            | Open drawer
-    w-flex.my12(grow column)
-        w-slider(:model-value="40" thumb-label step-label :step="20" color="primary-light3").mt12
-        .mt4 v-model:
-            code.ml1 {{ sliderVal }}
-    w-flex.my12(:gap="3" align-center wrap)
-        | Show menu on:
-        w-menu
-            template(#activator="{ on }")
-                w-button(v-on="on") Show menu
-            | Menu content
-        w-badge.mr10(bg-color="error")
-            template(#badge) 3
-            w-icon(color="grey-light1" size="2.5em") mdi mdi-email
+w-app(style="display:flex; flex-direction:row-reverse; gap: 40px; justify-content: flex-end;")
+    //- w-drawer(v-model="openDrawer")
+    //- w-flex.my12(:gap="3" align-center wrap)
+    //-     w-button.ma1(@click="$waveui.notify('Information.')" bg-color="info") Notify info
+    //-     w-button.ma1(@click="$waveui.notify('Success!', 'success')" bg-color="success") Notify success
+    //-     w-button.ma1(@click="$waveui.notify('Warning!', 'warning')" bg-color="warning") Notify warning
+    //-     w-button.ma1(@click="$waveui.notify('Error :(', 'error', 0)" bg-color="error") Permanent error
+    //- w-flex.my12(align-center wrap)
+    //-     w-spinner(bounce)
+    //-     w-input Label
+    //-     w-checkbox Single option
+    //- w-flex.my12
+    //-     w-button(@click="openDrawer = true" outline="")
+    //-         | Open drawer
+    //- w-flex.my12(grow column)
+    //-     w-slider(:model-value="40" thumb-label step-label :step="20" color="primary-light3").mt12
+    //-     .mt4 v-model:
+    //-         code.ml1 {{ sliderVal }}
+    //- w-flex.my12(:gap="3" align-center wrap)
+    //-     | Show menu on:
+    //-     w-menu
+    //-         template(#activator="{ on }")
+    //-             w-button(v-on="on") Show menu
+    //-         | Menu content
+    //-     w-badge.mr10(bg-color="error")
+    //-         template(#badge) 3
+    //-         w-icon(color="grey-light1" size="2.5em") mdi mdi-email
     SideBar(
         v-if="showSidebar"
         :pid="getPid"

frontend/src/components/Messages.vue

@@ -7,7 +7,7 @@
         :key='profile.profile_id' 
         :class="[pid == profile.profile_id ? 'active' : '', 'sidebar__message', 'f-col', 'start']"
     )
-    img(:src='profile.avatar')
+    img(:src='profile.avatar' style="max-height:100px")
     .message__right
         h4.message__name {{ profile.name }}
         p.message__content {{ profile.metadata.rawMetadata || "Hello I'm using tinder!" }}

frontend/src/main.js

@@ -28,8 +28,8 @@ router.beforeEach((to, from, next) => {
 
 const run = entry => {
     const siimee = createApp(App)
-    siimee.use(WaveUI, { components })
-    new WaveUI(siimee)
+    // siimee.use(WaveUI, { components })
+    // new WaveUI(siimee)
 
     siimee.use(router)
     siimee.component('MainNav', MainNav)

frontend/src/utils/mixins.js

@@ -11,6 +11,7 @@ const pidMixin = {
 const cardMixin = {
     data: () => ({
         cards: [],
+        matches: [],
         loading: true,
     }),
     watch: {

frontend/src/views/HomeView.vue

@@ -1,21 +1,29 @@
 <template lang="pug">
-main.view--home
-    header
-        h2 home - profile: {{ pid }}
-        
-    article(v-if="cards.length && !loading")
-        ProfileCardList(:profiles="cards" :pid="pid" @reload="getCards")
+main(class="view--home"  style="display:flex; flex-direction:row; gap: 40px")
+    div
+        header
+            h2 home - profile: {{ pid }}
+  
+        article(v-if="cards.length && !loading")
+            ProfileCardList(:profiles="cards" :pid="pid" @reload="getCards")
+  
+        p(v-else) Loading...
 
+    MainNav(@show-sidebar="$emit('show-sidebar')")
+
+    article(v-if="matches.length && !loading")
+        ProfileCardList(:profiles="matches" :pid="pid" @reload="getCards")
+    
+    p(v-else-if="matches.length===0") No matches.
     p(v-else) Loading...
 
-    MainNav(@show-sidebar="$emit('show-sidebar')")
 </template>
 
 <script>
 import ProfileCardList from '../components/ProfileCardList.vue'
 
 import { Card } from '../entities'
-import { fetchQueueByProfileId } from '../services'
+import { fetchQueueByProfileId, fetchMembershipsByProfileId } from '../services'
 import { mixins } from '../utils'
 
 /** Callback used to format incoming into card */
@@ -33,6 +41,20 @@ const convertToCard = profile => {
     })
 }
 
+const converGroupingToCard = grouping => {
+    if (grouping.type !== 'grouping') {
+        console.error(`Cannot convert ${grouping} to Card. Invalid entity.`)
+    }
+    if (!grouping.profile.isValid()) {
+        console.warn(`Profile in ${grouping} is not a valid profile.`)
+    }
+    return new Card({
+        pid: grouping.profile.profile_id,
+        name: grouping.profile.user_name,
+        avatar: grouping.profile.profile_media[0],
+    })
+}
+
 export default {
     name: 'HomeView',
     components: { ProfileCardList },
@@ -44,6 +66,8 @@ export default {
             try {
                 const queueList = await fetchQueueByProfileId(this.pid)
                 this.cards = this._reformat(queueList, convertToCard)
+                const matchList = await fetchMembershipsByProfileId(this.pid)
+                this.matches = this._reformat(matchList, converGroupingToCard)
             } catch (err) {
                 console.error(err)
             }