Merge branch 'chat-gui' of fyindr/siimee into dev

backend/lib/routes/membership/active.js

@@ -53,7 +53,8 @@ module.exports = {
                 profileId,
                 membershipType,
             )
-            console.log('groupings :>> ', groupings)
+            // console.log('groupings :>> ', groupings)
+
             /**
              * Heavily process the result by storing just a profile_id
              * and attach complete profiles

backend/lib/schemas/profiles.js

@@ -3,6 +3,7 @@
 const Joi = require('joi')
 const surveyResponseSchema = require('./responses')
 const userSchema = require('./user')
+const tagSchema = require('./tags')
 
 const singleProfile = Joi.object({
     profile_id: Joi.number(),
@@ -11,7 +12,7 @@ const singleProfile = Joi.object({
     user_email: Joi.string(),
     responses: surveyResponseSchema.list,
     reveal: Joi.array().items(),
-    tags: Joi.array().items(),
+    tags: tagSchema.list,
     user_type: Joi.any(),
     user: userSchema.single,
     profile_description: Joi.string().allow(null, ''),
@@ -22,5 +23,5 @@ const singleProfile = Joi.object({
 
 module.exports = {
     single: singleProfile,
-    list: Joi.array().items(singleProfile).label('profile_list')
+    list: Joi.array().items(singleProfile).label('profile_list'),
 }

backend/lib/schemas/tags.js

@@ -0,0 +1,24 @@
+'use strict'
+
+const Joi = require('joi')
+
+const singleTag = Joi.object({
+    tag_id: Joi.number(),
+    tag_category: Joi.string(),
+    tag_description: Joi.string(),
+    is_active: Joi.number().required(),
+}).label('tag_single')
+
+const singleTagAssociation = Joi.object({
+    tag_association_id: Joi.number(),
+    profile_id: Joi.number().required(),
+    membership_id: Joi.number(),
+    tag_id: Joi.number().required(),
+    is_deleted: Joi.boolean().required(),
+}).label('tag_association_single')
+
+module.exports = {
+    association: singleTagAssociation,
+    single: singleTag,
+    list: Joi.array().items(singleTag).label('tag_list'),
+}

backend/lib/services/membership.js

@@ -70,7 +70,7 @@ module.exports = class MembershipService extends Schmervice.Service {
             profileId,
             type,
         )
-        console.log('dedupedGroupings :>> ', dedupedGroupings)
+
         /** Grab just the Groupings this id has a Membership for */
         return await Grouping.query()
             .whereIn('grouping_id', dedupedGroupings)

backend/lib/services/user.js

@@ -148,8 +148,6 @@ module.exports = class UserService extends Schmervice.Service {
     async login({ email, password }, txn) {
         const { User, Auth } = this.server.models()
 
-        
-        
         const user = await Auth.query(txn)
             .throwIfNotFound()
             .first()
@@ -159,11 +157,9 @@ module.exports = class UserService extends Schmervice.Service {
 
         /** Uncomment to run password check using SecurePassword */
         const passwordCheck = await this.pwd.verify(bufferPepper, user.token)
-        console.log("passwordCheck", passwordCheck)
         if (passwordCheck === SecurePassword.VALID_NEEDS_REHASH) {
             await this.changePassword(user.user_email, password, txn)
-        }
-        else if (passwordCheck !== SecurePassword.VALID) {
+        } else if (passwordCheck !== SecurePassword.VALID) {
             throw User.createNotFoundError()
         }
 
@@ -202,30 +198,20 @@ module.exports = class UserService extends Schmervice.Service {
      * @returns {number}
      */
     async changePassword(email, password, txn) {
-        const { User, Auth } = this.server.models()
-
-        console.log('email passed to changePassword', email)
+        const { Auth } = this.server.models()
 
-        const hashed = await this.pwd.hash(Buffer.from(process.env.PEPPER + password))
-        console.log('hashed', hashed)
+        const hashed = await this.pwd.hash(
+            Buffer.from(process.env.PEPPER + password),
+        )
 
         await Auth.query(txn)
             .throwIfNotFound()
             .where({ user_email: email })
             .patch({
                 // user_email: email,
-                token: hashed
+                token: hashed,
             })
-        console.log('changePassword query completed')
         return email
-
-        // await User.query(txn)
-        //     .throwIfNotFound()
-        //     .where({ id })
-        //     .patch({
-        //         password: await this.pwd.hash(Buffer.from(password)),
-        //     })
-        // return id
     }
 
     async getPassword(email, txn) {

frontend/src/App.vue

@@ -1,19 +1,16 @@
 <template lang="pug">
 w-app
-    div.nav(v-if="isLoggedIn" style="display: flex; justify-content: space-between;")
+    .nav(v-if="profile.isLoggedIn" style="display: flex; justify-content: space-between;")
         header
-            h2 home - profile: {{ getPid }}
+            h2 current - profile: {{ profile.id }}
         w-drawer(v-model="openDrawer")
-            SideBar(
-                :pid="getPid"
-                @updatePid="setPid"
-                @hide="showSidebar = false"
-            )
+            SideBar(@updatePid="setPid" :pid="profile.id.value")
         w-button(@click="openDrawer = true" outline="")
             | Active Chats
+
     RouterView(
-        v-if="isLoggedIn"
-        :pid="getPid"
+        v-if="profile.isLoggedIn"
+        :pid="profile.id.value"
         @updatePid="setPid"
         @show-sidebar="showSidebar = !showSidebar"
     )
@@ -32,16 +29,12 @@ const DEV_PID = 45
 export default {
     components: { SideBar },
     data: () => ({
-        showSidebar: false,
         sliderVal: 1,
         openDrawer: false,
     }),
     computed: {
-        getPid: () => {
-            return currentProfile.id.value ? currentProfile.id.value : null
-        },
-        isLoggedIn: () => {
-            return currentProfile.isLoggedIn
+        profile: () => {
+            return currentProfile
         },
     },
     async created() {
@@ -54,7 +47,7 @@ export default {
          * using the login form
          */
         if (DEV_MODE) {
-            this.setPid(DEV_PID)
+            await this.setPid(DEV_PID)
         }
     },
     methods: {
@@ -68,9 +61,6 @@ export default {
             }
             await currentProfile.login(profileId, this.$waveui.notify)
             console.log('---')
-            //  step 3: subscribe to the this.subscriptions array
-            // view current subscriptions on the currentProfile.chatter.subscriptions
-            console.log('subscriptions', currentProfile.chatter.subscriptions)
         },
     },
 }

frontend/src/components/MainNav.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 nav#main-header
-    button(@click="$emit('show-sidebar')") toggle sidebar
     router-link(:to="`/matches`") matches
     router-link(to='/') home
     router-link(:to="`/survey`") survey

frontend/src/components/Messages.vue

@@ -1,16 +1,16 @@
 <template lang="pug">
 .sidebar--messages
-  h5.message__title messages from matches
+  h5.message__title matches
   router-link(
-        :to="`/chats/${profile.profile_id}`" 
-        v-for='profile in matches' 
-        :key='profile.profile_id' 
-        :class="[pid == profile.profile_id ? 'active' : '', 'sidebar__message', 'f-col', 'start']"
+        :to="`/chats/${match.profile.profile_id}`" 
+        v-for='match in matches' 
+        :key='match.profile.profile_id' 
+        :class="[pid == match.profile.profile_id ? 'active' : '', 'sidebar__message', 'f-col', 'start']"
     )
-    img(:src='profile.avatar' style="max-height:100px")
+    img(:src='match.profile.avatar' style="max-height:100px")
     .message__right
-        h4.message__name {{ profile.name }}
-        p.message__content {{ profile.metadata.rawMetadata || &quot;Hello I&apos;m using tinder!&quot; }}
+        h4.message__name {{ match.profile.name }}
+        p.message__content {{ match.profile }}
 </template>
 
 <script>

frontend/src/components/ProfileCardList.vue

@@ -85,7 +85,6 @@ const randomize = max => {
 }
 
 // AHP Button behavior
-
 const accept = async targetId => {
     if (targetId == props.pid) return
     // need to pass these arguments (profileId, targetId, status)
@@ -101,11 +100,8 @@ const accept = async targetId => {
 
     // Reuse old grouping name if theres a match
     let channel = groupingName
-    console.log('membershipMatch :>> ', membershipMatch)
     if (membershipMatch?.hasMatch) {
-        const [time, intiator, target] = groupingName.split('_')
         channel = membershipMatch.groupings[0].grouping_name
-        console.log('channel :>> ', channel)
     }
     await subscribeToChannel(channel)
     emit('reload')
@@ -118,7 +114,6 @@ const view = pid => {
 const subscribeToChannel = async channelName => {
     // create a chatter reference from the current profile
     const chatter = currentProfile.chatter
-    // console.log('mock sender:', pid)
 
     /**
      * publish a new message to the chatter with the channel and the message & title is optional
@@ -130,7 +125,6 @@ const subscribeToChannel = async channelName => {
         description: `This is the checking to see if we are subscribed to the ${channelName} channel!`,
     })
     // PubNub response will be a timecode of when the message was published
-    console.log('res:', res)
     //router.push({ path: `/chat/${pid}` })
 }
 

frontend/src/components/SideBar.vue

@@ -1,13 +1,15 @@
 <template lang="pug">
-aside.sidebar
-    .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>
+import { currentProfile } from '../services'
 import Messages from './Messages.vue'
 import { mixins } from '../utils'
 
@@ -16,21 +18,12 @@ export default {
     mixins: [mixins.pidMixin],
     data: () => ({
         switchToPID: null,
-        matches: [
-            {
-                name: 'Bob McRob',
-                profile_id: 111,
-                avatar: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/newborn-baby-boy-sleeping-peacefully-wearing-knit-royalty-free-image-1589459736.jpg?crop=0.669xw:1.00xh;0.228xw,0&resize=640:*',
-                metadata: { rawMetadata: 'howdy howdy howdy' },
-            },
-            {
-                name: 'Rob Bebob',
-                profile_id: 112,
-                avatar: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/newborn-baby-boy-sleeping-peacefully-wearing-knit-royalty-free-image-1589459736.jpg?crop=0.669xw:1.00xh;0.228xw,0&resize=640:*',
-                metadata: { rawMetadata: 'this is the last message' },
-            },
-        ],
     }),
+    computed: {
+        profile: () => currentProfile,
+        matches: () =>
+            currentProfile.groupings.filter(g => g.grouping_type == 'match'),
+    },
     mounted() {
         // Set the form to display the default pid set in Home.vue
         this.switchToPID = this.pid

frontend/src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 import HomeView from '../views/HomeView.vue'
 import ProfileView from '../views/ProfileView.vue'
+import ChatView from '../views/ChatView.vue'
 import MatchesView from '../views/MatchesView.vue'
 import LoginView from '../views/LoginView.vue'
 import SurveyView from '../views/SurveyView.vue'
@@ -30,6 +31,15 @@ const routes = [
         component: ProfileView,
         meta: { requiresAuth: true, requiresCompleteProfile: true },
     },
+    {
+        path: '/chat/:tid',
+        component: ChatView,
+        meta: {
+            requiresAuth: true,
+            requiresCompleteProfile: true,
+            props: true,
+        },
+    },
     {
         path: `/survey`,
         component: SurveyView,

frontend/src/services/chat.service.js

@@ -1,8 +1,5 @@
 import PubNub from 'pubnub'
 
-// custom services
-import { fetchMembershipsByProfileId } from '../services/grouping.service'
-
 /**
  * Provider method holder
  * We always reference this object so
@@ -67,39 +64,32 @@ class Chatter {
         // Setup the main channel
         //  subscriptions array will be built dynamically from the "this.groupings" object
         this.subscriptions = [MAIN_CHANNEL]
+
         this.listeners = {
             status: async e => {
-                // await this.publish(this.subscriptions[0], testMessage)
                 if (e.category !== 'PNConnectedCategory') return
             },
-            message: this._onMessage,
+            message: null, // Set manually in chat view
             presence: this._onPresence,
         }
     }
-    /**
-     * Callback that fires on every message
-     * @param {event} e
-     */
-    async _onMessage(e) {
-        if (e.message) {
-            console.log(
-                `received message: ${e.message.title} - ${e.message.description}`,
-                e,
-            )
-        }
-    }
     async _onPresence(e) {
         return
     }
-    async setup(uuid) {
+    setOnMessage(cb) {
+        this.listeners.message = cb
+    }
+
+    async setup(uuid, groupings) {
         this.uuid = `${uuid}`
         this.provider = await setupPubnub(this.uuid)
 
         //  step 1: build the this.groupings object from the backend
         // ? .await for the groupings to be fetched before subscribing to channels
-        await this._setupAllChannels(this.uuid)
+        await this._setupAllChannels(groupings)
         this._listenFor({ listeners: this.listeners })
         this.subscribe({ channels: this.subscriptions })
+        return this.subscriptions
     }
     /**
      * Send a message to a channel
@@ -110,7 +100,7 @@ class Chatter {
      * @return {object} timestamp
      */
     async publish(channel, message) {
-        console.log('publishing message to channel:', channel)
+        // console.log('publishing message to channel:', channel)
         return providerMethods.publish({ channel, message })
     }
     /**
@@ -130,14 +120,13 @@ class Chatter {
     }
     //  step 2: build the this.subscriptions array from the this.groupings object
     // fetch all groupings for this profile and then store them in the chatter groupings object for reference
-    async _setupAllChannels(profileId) {
-        const groupings = await fetchMembershipsByProfileId(profileId)
-        console.log(`fetched groupings for profileId: ${profileId}`, groupings)
+    async _setupAllChannels(groupings) {
         groupings.forEach(grouping => {
             this.subscriptions.push(grouping.grouping_name)
         })
     }
     stop() {
+        this.subscriptions = [MAIN_CHANNEL]
         console.warn('chatter stop no implemented')
     }
 }

frontend/src/services/login.service.js

@@ -1,19 +1,24 @@
 import { ref } from 'vue'
-import { fetchResponsesByProfileId, Chatter, StonkAlert } from '../services'
+import {
+    fetchMembershipsByProfileId,
+    fetchResponsesByProfileId,
+    Chatter,
+    StonkAlert,
+} from '../services'
 import { surveyFactory } from '../utils'
 
-
 /**
  * Logged in profile state manager
  * Sort of a util and service hybrid
  */
 class Login {
     constructor() {
-        this._loading = false
+        this._loading = ref(true)
 
         // Make reactive with vue observer
         this.id = ref(null)
 
+        this.groupings = []
         this.responses = []
         this.tags = []
 
@@ -21,7 +26,7 @@ class Login {
         this.chatter = null
     }
     get isLoading() {
-        return this._loading
+        return this._loading.value
     }
     /**
      * Track login separate from complete-ess
@@ -30,7 +35,7 @@ class Login {
      * @returns {boolean}
      */
     get isLoggedIn() {
-        return this.id.value != null
+        return this.id.value != null && this.isLoading == false
     }
     /**
      * Combine questions retrieved from the database and
@@ -58,12 +63,18 @@ class Login {
      * @returns {number} stored reactive id
      */
     async login(profileId, cb) {
+        this._loading.value = true
+
         console.warn('logging in:', profileId)
         this.id.value = parseInt(profileId)
 
-        this.setupChatter()
+        await this.getGroupings()
+
+        await this.setupChatter()
         this.setupToaster(cb)
 
+        this._loading.value = false
+        console.warn('logged in:', this.isLoggedIn)
         return this.id.value
     }
     logout() {
@@ -91,7 +102,7 @@ class Login {
 
     async getResponses() {
         try {
-            const responseList = await fetchResponsesByProfileId(this.id)
+            const responseList = await fetchResponsesByProfileId(this.id.value)
             this.setResponses(responseList)
         } catch (err) {
             console.error(err)
@@ -100,20 +111,26 @@ class Login {
     setResponses(responses) {
         this.responses = responses
     }
+
+    async getGroupings() {
+        try {
+            this.groupings = await fetchMembershipsByProfileId(this.id.value)
+        } catch (err) {
+            console.error(err)
+        }
+    }
     /**
      * For push notifications and chat
      */
     setupToaster(waveCb) {
         this.toaster = new StonkAlert(this.id.value, waveCb)
     }
-    setupChatter() {
+    async setupChatter() {
         this.chatter = new Chatter()
         // Use the reactive id object
         const testAccountUUID = this.id.value
-        this.chatter.setup(testAccountUUID)
+        await this.chatter.setup(testAccountUUID, this.groupings)
     }
-
-    
 }
 
 const currentProfile = new Login()

frontend/src/services/survey.service.js

@@ -16,20 +16,6 @@ const fetchQuestions = async () => {
     })
 }
 
-// TODO: Remove
-const saveSurveyByProfileId = async (surveyResponses, profileId) => {
-    surveyResponses.forEach(responseKeyIdwithVal => {
-        const keyId = responseKeyIdwithVal.response_key_id
-        const val = responseKeyIdwithVal.val
-        console.log(keyId, val)
-        // POST
-        // const myresponses = db.post(
-        //     `/profile/${profileId}/respond?response_key_id=${keyId}&val=${val}`,
-        // )
-        // return myresponses
-    })
-}
-
 const updateSurveyByProfileId = async (surveyResponses, profileId) => {
     surveyResponses.forEach(responseKeyIdwithVal => {
         const keyId = responseKeyIdwithVal.response_key_id
@@ -54,14 +40,11 @@ const scoreSurveyByProfileId = async (profileId, maxDistance = 99) => {
 }
 
 const fetchResponsesByProfileId = async profileId => {
-    return await db.get(
-        `/profile/${profileId}/responses`,
-    )
+    return await db.get(`/profile/${profileId}/responses`)
 }
 
 export {
     fetchQuestions,
-    saveSurveyByProfileId,
     updateSurveyByProfileId,
     scoreSurveyByProfileId,
     fetchResponsesByProfileId,

frontend/src/utils/mixins.js

@@ -3,9 +3,9 @@ const pidMixin = {
         pid: {
             type: Number,
             required: true,
-            validator: prop => typeof prop === 'number' || prop === null
+            validator: prop => typeof prop === 'number' || prop === null,
         },
-    }
+    },
 }
 
 const cardMixin = {
@@ -16,7 +16,9 @@ const cardMixin = {
     }),
     watch: {
         /** Fetch the queue if pid changes */
-        pid() { this.getCards() },
+        pid() {
+            this.getCards()
+        },
     },
     async created() {
         await this.getCards()
@@ -24,8 +26,8 @@ const cardMixin = {
     methods: {
         _reformat(data, mapCb) {
             return data.map(mapCb)
-        }
-    }
+        },
+    },
 }
 
-export { pidMixin, cardMixin }
+export { pidMixin, cardMixin }

frontend/src/views/ChatView.vue

@@ -0,0 +1,89 @@
+<template lang="pug">
+main.view--chat
+    header 
+        h2 Chat Page
+ 
+    article(v-if="profile.isLoggedIn && target")
+        h3 {{ profile.id }} 
+            span chatting with: {{ target.profile_id }}
+        p subscriptions: {{ profile.chatter.subscriptions }}
+
+        ul(id="messages").w-flex.column
+            li(v-for="message, i in messages" class="pa1")
+                w-card.w-flex.row
+                    article
+                        p {{ message.message }}
+                    footer
+                        p {{ message.publisher }} | {{ message.timetoken }}
+                        w-button(class="my12" @click="openDrawer = i" text) setting
+                    w-drawer(v-model="openDrawer" absolute width="160px")
+                        p some settings things
+
+        input(v-model="toSend" @keyup.enter="sendMessage")
+        button(@click="sendMessage") send
+
+    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 { currentProfile } from '../services'
+
+export default {
+    name: 'ProfileView',
+    data: () => ({
+        target: null,
+        toSend: '',
+        messages: [],
+        openDrawer: null,
+    }),
+    computed: {
+        profile: () => currentProfile,
+    },
+    watch: {
+        profile() {
+            this.loadTargetProfile()
+            currentProfile.chatter.setOnMessage(this._onMessage)
+        },
+    },
+    created() {
+        this.loadTargetProfile()
+        currentProfile.chatter.setOnMessage(this._onMessage)
+    },
+    methods: {
+        /**
+         * Pubnub message callback fires when message event
+         * is detected. We define is HERE because we need the
+         * component state and `this` context
+         */
+        _onMessage(e) {
+            if (!e.message) return
+            this.messages.push(e)
+        },
+        getGrouping() {
+            return currentProfile.groupings.find(
+                g => g.profile.profile_id == this.$route.params.tid,
+            )
+        },
+        sendMessage() {
+            const grouping = this.getGrouping()
+            currentProfile.chatter.publish(grouping.grouping_name, this.toSend)
+            this.toSend = ''
+        },
+        loadTargetProfile() {
+            try {
+                const grouping = this.getGrouping()
+                if (!grouping) {
+                    throw `no match found for ${currentProfile.id.value}`
+                }
+
+                this.target = grouping.profile
+            } catch (err) {
+                console.error(err)
+            }
+        },
+    },
+}
+</script>