siimee/frontend/src/App.vue

<template lang="pug">
w-app
    w-toolbar.w-flex.no-grow.align-start.mb4
        .title2 Siimee
        .spacer
        w-button.ml2 Home
        w-button.ml2 Matches
        w-button.ml2(@click="openDrawer = true" outline="") Active Chats

    .nav(v-if="profile.isLoggedIn" style="display: flex; justify-content: space-between;")
    header
        h2 current - profile: {{ profile.id }}
    w-drawer(v-model="openDrawer")
        SideBar(@updatePid="setPid" :pid="profile.id.value")
        

    RouterView(
        v-if="profile.isLoggedIn"
        :pid="profile.id.value"
        @updatePid="setPid"
        @show-sidebar="showSidebar = !showSidebar"
    )
</template>

<script>
import 'wave-ui/dist/wave-ui.css'
import SideBar from './components/SideBar.vue'

import { currentProfile } from './services'
import { surveyFactory } from './utils'

const DEV_MODE = import.meta.env.VITE_DEV == 'true'
const DEV_PID = 45

export default {
    components: { SideBar },
    data: () => ({
        sliderVal: 1,
        openDrawer: false,
    }),
    computed: {
        profile: () => {
            return currentProfile
        },
    },
    async created() {
        /** Get questions so we can compare against profile responses */
        await surveyFactory.getQuestions()

        /**
         * Development mode turns router guards off so
         * we hard set the profile id instead of
         * using the login form
         */
        if (DEV_MODE) {
            await this.setPid(DEV_PID)
        }
    },
    methods: {
        /**
         * Sync up this components state with
         * the currentProfile handler
         */
        async setPid(profileId) {
            if (currentProfile.isLoggedIn) {
                currentProfile.logout()
            }
            await currentProfile.login(profileId, this.$waveui.notify)
            console.log('---')
        },
    },
}
</script>