siimee/frontend/src/views/home.vue

<template lang="pug">
sidebar
main.f-col.start.w-full
    article#home
        h1(v-if='user') {{ user.user_name }}
        profile-card-list(:profiles='swipables' :uid='mypid')
    main-nav
</template>

<script>
import sidebar from '../components/Sidebar.vue'
import mainNav from '../components/MainNav.vue'
import profileCardList from '../components/ProfileCardList.vue'
import { fetchQueueByProfileId } from '../services'
import { Toaster } from '../utils/db'

import batch_10 from '../../../backend/db/generated/_batch_10.js.ref'
import batch_20 from '../../../backend/db/generated/_batch_20.js.ref'
import batch_30 from '../../../backend/db/generated/_batch_30.js.ref'

export default {
    name: 'HomeView',
    components: { profileCardList, sidebar, mainNav },
    data: () => ({
        swipables: [],
        user: null,
        mypid: null,
    }),
    mounted() {
        this.setupToaster()
    },
    async created() {
        // this.mypid = auth.currentUser?.mypid || "99999";
        this.mypid = 38
        // Uncomment below to use for batch file data
        // this.processProfilesFromBatch(this.parseBatch([batch_10, batch_20, batch_30]))

        // Uncomment below to use API
        const queueList = await fetchQueueByProfileId(this.mypid)
        // console.log('queueList', queueList)
        this.processQueue(queueList)
    },
    methods: {
        setupToaster() {
            const stocks = {}
            const source = new EventSource(`http://localhost:3001/api/notification/${this.mypid}/subscribe`)
            source.addEventListener('stonk', function (message) {
                console.log('updated:', message)
                const data = JSON.parse(message.data)
                stocks[data.name] = data
            })
            source.addEventListener('end', function (message) {
                this.close()
            })
        },
        processQueue(queueList) {
            const formattedList = []
            queueList.forEach(profile => {
                const formatted = {
                        uid: profile.profile_id,
                        name: profile.user_name,
                        avatar: profile.user_media,
                    }
                formattedList.push(formatted)
            })
            this.swipables = formattedList
        },
        // For Batch Data Parsing & Processing
        parseBatch(allBatches) {
            const finished = { profiles: [], users: [], responses: [] }
            allBatches.forEach(batch => {
                const split = batch.value.split('\n')
                split.splice(0, 5)
                split.unshift('{')
                const p = JSON.parse(split.join(''))
                finished.profiles = [...p.profiles, ...finished.profiles]
                finished.users = [...p.users, ...finished.users]
                finished.responses = [...p.responses, ...finished.responses]
            })
            // console.log('parsed batch', finished)
            return finished
        },
        processProfilesFromBatch(parsed) {
            const findUser = profile => {
                return parsed.users.filter(u => u.user_id == profile.user_id)[0]
            }
            parsed.profiles.forEach(p => {
                // console.log(parsed)
                const user = findUser(p)
                p.uid = p.profile_id
                p.name = user.user_name
                p.email = user.user_email
                p.avatar = p.user_media[0]
                p.responses = parsed.responses.filter(
                    r => r.profile_id == p.profile_id,
                )
                p.responses.forEach(r => {
                    if (r.response_key_id == 7) {
                        p.zipcode = r.val
                    }
                })
                this.swipables.push(p)
            })
            console.log('swipables', this.swipables)
        },
    },
}
</script>

<style lang="postcss">
main
    position: relative
    height: 100%
    > article
        height: 100%
        width: 100%
        flex-direction: column
</style>