siimee/frontend/src/views/ChatView.vue

<template lang="pug">
main.view--chat
    header.mb6(v-if='profile && grouping')
        h3 chatting with:
        p {{ target.profile_id }} | {{ grouping.profile.user_name }} | {{ grouping.profile.user_email }}

        h3 logged in as:
        p {{ profile.id }} | {{ profile._profile.user_name }} | {{ profile._profile.user_email }}
        //- p subscriptions: {{ profile.chatter.subscriptions }}
        hr

        .w-flex.column(v-if='!grouping._loading')
            .w-flex.row
                button(@click='reveal(7)') reveal my name
                button(@click='reveal(8)') reveal my email
                // TODO: Remove later, only for testing
                button(@click='checkData()') check data
            p you revealed:
                span(v-if="grouping.revealed[profile.id.value]")
                    ul(v-for="reveal in grouping.revealed[profile.id.value]")
                        li {{ reveal.description }} : {{ profile._profile[reveal.description] }}
            p they revealed:
                span(v-if="grouping.revealed[grouping.profile.profile_id]")
                    ul(v-for="reveal in grouping.revealed[grouping.profile.profile_id]")
                        li {{ reveal.description }} : {{ grouping.profile[reveal.description] }}

    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 && 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.icon-paper-plane

    MainNav
</template>

<script lang="js">
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: [],
        grouping: null,
    }),
    watch: {
        async profile() {
            this.loadTargetProfile()
            currentProfile._loading.value = true
            this.messages = await currentProfile.chatter.getHistory(this.grouping.grouping_name)
            currentProfile.chatter.setOnMessage(this._onMessage)
            currentProfile._loading.value = false
        },
    },
    async created() {
        this.loadTargetProfile()
        currentProfile._loading.value = true
        this.grouping = this.getGrouping()
        this.messages = await currentProfile.chatter.getHistory(this.grouping.grouping_name)
        console.log('this.messages :>> ', this.messages)
        currentProfile.chatter.setOnMessage(this._onMessage)
        currentProfile._loading.value = false
    },
    methods: {
        async reveal(tagId) {
            const grouping = this.getGrouping()
            await grouping.reveal(currentProfile.id.value, tagId)
         },
        // TODO: remove, only for testing reveal()
        async checkData() {
            console.log(currentProfile)
        },
        /**
         * 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>