Current User Avatar

<script setup lang="ts">
import { computed } from 'vue'
// @ts-ignore
import { useCurrentUserImage } from '@/composables/useCurrentUserImage'
// @ts-ignore
import { useCurrentUserName } from '@/composables/useCurrentUserName'

import Avatar from '@/components/ui/avatar/Avatar.vue'
import AvatarFallback from '@/components/ui/avatar/AvatarFallback.vue'
import AvatarImage from '@/components/ui/avatar/AvatarImage.vue'

const { image: profileImage } = useCurrentUserImage()
const { name } = useCurrentUserName()

const initials = computed(() => {
  if (!name.value) return ''
  return name.value
    .split(' ')
    .map(word => word[0])
    .join('')
    .toUpperCase()
})
</script>

<template>
  <Avatar>
    <AvatarImage
      v-if="profileImage"
      :src="profileImage"
      :alt="initials"
    />
    <AvatarFallback>
      {{ initials }}
    </AvatarFallback>
  </Avatar>
</template>

import { ref, onMounted } from 'vue'
// @ts-ignore
import { createClient } from '@/lib/supabase/client'

export function useCurrentUserName() {
  const name = ref<string | null>(null)

  const fetchProfileName = async () => {
    const { data, error } = await createClient().auth.getSession()

    if (error) {
      console.error(error)
      return
    }

    name.value = data.session?.user.user_metadata.full_name ?? '?'
  }

  onMounted(() => {
    fetchProfileName()
  })

  return {
    name,
  }
}

import { ref, onMounted } from 'vue'
// @ts-ignore
import { createClient } from '@/lib/supabase/client'

export function useCurrentUserImage() {
  const image = ref<string | null>(null)

  const fetchUserImage = async () => {
    const { data, error } = await createClient().auth.getSession()

    if (error) {
      console.error(error)
      return
    }

    image.value = data.session?.user.user_metadata.avatar_url ?? null
  }

  onMounted(() => {
    fetchUserImage()
  })

  return {
    image,
  }
}