siimee/frontend/src/views/ProfileView.vue

<template lang="pug">
main.view--profile.f-col.start.w-full
    header 
        h2 Profile Page
 
    article(v-if="!loading")
        h3 name: {{ profile.user_name }}
            span(v-if="profile.profile_prefs?.pronouns") &nbsp;({{ profile.profile_prefs?.pronouns.val }})
        p(v-if="profile.user_email") {{ profile.user_email }}
        
        p I am looking for a&nbsp;
            span {{ profile.profile_prefs?.presence?.val }}&nbsp;
            span {{ profile.profile_prefs?.role?.val }}&nbsp;
            span role&nbsp;
            span no further than {{ profile.profile_prefs?.distance?.val }} miles away&nbsp;
            span from {{ profile.profile_prefs?.zipcode?.val }}

        p I am {{ profile.profile_prefs?.urgency?.val.split("_").join(" ") }}.
        
        img(v-if="profile.reveal.map(t => t.description).includes('image')" :src="profile.profile_media[0]" alt="profile-avatar" style="max-height: 200px; width: auto;")
        h3(v-else) image not revealed
        
        p About: {{ profile.profile_description}}

        p reveal: {{ profile.reveal.map(t => t.description) }}
        p tags: {{ profile.tags.map(t => t.description) }}
        p images: {{ profile.profile_media }}
        p responses: {{ profile.responses.length }}
        button(@click="$router.go(-1)") back

    p(v-else) Loading...

    MainNav(@show-sidebar="$emit('show-sidebar')")
</template>

<script>
import { fetchProfileByProfileId } from '../services'

export default {
    name: 'ProfileView',
    data: () => ({
        loading: true,
        profile: {},
    }),
    created() {
        this.getProfile()
    },
    methods: {
        async getProfile() {
            this.loading = true
            try {
                this.profile = await fetchProfileByProfileId(
                    this.$route.params.pid,
                )
            } catch (err) {
                console.error(err)
            }
            this.loading = false
        },
    },
}
</script>