siimee/frontend/src/views/ChatView.vue

<template lang="pug">
main.view--chat
    header.mb6(v-if='profile && grouping')
        h3 chatting with: {{ target.profile_id }}
        p {{ grouping.profile.user_name }}
        p {{ grouping.profile.user_email }}
        p {{ grouping.profile }}
        //- p subscriptions: {{ profile.chatter.subscriptions }}
        .w-flex.column
            p reveal: {{ grouping.revealed }}
            .w-flex.row
                button(@click='reveal(7)') my name
                button(@click='reveal(8)') my email

    article
        template(v-if='isLoading')
            w-spinner(bounce)

        template(v-if='!isLoading && target')
            ul#messages.w-flex.column
                template(v-for='chatmessage in messages')
                    li(
                        :class='[{ me: chatmessage.publisher == profile.id.value }, chatmessage.publisher]'
                        v-if='chatmessage.message.description'
                    )
                        ChatBubble(
                            :message='chatmessage.message.description'
                            :publisher-id='chatmessage.publisher'
                            :time='chatmessage.timetoken'
                        )

        template(v-else-if='!isLoading && !target')
            p No match found between profile {{ $route.params.pid }} and {{ profile.id }}...

    footer.w-flex.row
        w-input(@keyup.enter='sendMessage' outline v-model='toSend')
        w-button(@click='sendMessage')
            w-icon mdi mdi-send

    MainNav
</template>

<script>
import ChatBubble from '../components/ChatBubble.vue'
import { currentProfile } from '../services'
import { mixins } from '../utils'

export default {
    name: 'ProfileView',
    components: { ChatBubble },
    mixins: [mixins.profileMixin],
    data: () => ({
        target: null,
        toSend: '',
        messages: [],
        openDrawer: null,
    }),
    computed: {
        grouping() {
            return this.profile.groupings.find(profileGrouping =>
                profileGrouping.participants.includes(
                    parseInt(this.$route.params.pid),
                ),
            )
        },
    },
    watch: {
        profile() {
            this.loadTargetProfile()
            currentProfile.chatter.setOnMessage(this._onMessage)
        },
    },
    created() {
        this.loadTargetProfile()
        currentProfile.chatter.setOnMessage(this._onMessage)
    },
    methods: {
        reveal(tagId) {
            this.grouping.reveal(currentProfile.profile_id, tagId)
        },
        /**
         * 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)
        },
        // TODO: test this
        getGrouping() {
            return currentProfile.groupings.find(
                g => g.profile.profile_id == this.$route.params.pid,
            )
        },
        sendMessage() {
            const grouping = this.getGrouping()
            currentProfile.chatter.publish(grouping.grouping_name, this.toSend)
            this.toSend = ''
        },
        // TODO: test this
        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>

<style lang="sass">
main.view--chat
    article ul
        list-style: none
        > li
            font-family: sans-serif
            background-color: powderblue
            margin: 0 0.5em 1em 2em
            &.me
                margin: 0 2em 1em 0.5em
                background-color: lightgreen
            p:first-of-type
                font-size: 10px
</style>