Refactor user profile data retrieval

components/user/Avatar.vue

@@ -3,22 +3,10 @@ const user = useSupabaseUser()
 const supabase = useSupabaseClient()
 const userData = user.value;
 
-var userAvatar = "";
-
-await supabase
-    .from('profiles')
-    .select('id, avatar_url')
-    .eq('id', userData?.id)
-    .then(({ data, error }) => {
-        if (error) {
-            useToast().add({ title: 'User read failed', description: error.message })
-            console.log(error)
-        } else {
-            if (data.length > 0) {
-                userAvatar = data[0].avatar_url;
-            }
-        }
-    })
+const { data: userAvatar } = await useAsyncData('userAvatar', async () => {
+    const { data } = await supabase.from('profiles').select('id, avatar_url').eq('id', userData?.id).single();
+    return data.avatar_url
+});
 
 </script>
 

components/user/ProfileCard.vue

@@ -12,21 +12,15 @@ const state = reactive({
     username: ""
 })
 
-await supabase
-    .from('profiles')
-    .select('id, username')
-    .eq('id', userData?.id)
-    .then(({ data, error }) => {
-        if (error) {
-            console.log(error)
-        } else {
-            if (data.length > 0) {
-                state.username = data[0].username;
-            }
-        }
-    })
-
-
+const { data: userName, error } = await useAsyncData('userName', async () => {
+    const { data } = await supabase.from('profiles').select('id, username').eq('id', userData?.id).single();
+    return data?.username
+});
+state.username = userName;
+// if (error) {
+//     console.log(error)
+//     useToast().add({ title: 'Get username failed', description: error.message })
+// } 
 
 const onUpdate = async () => {
     const updates = {

pages/teams.vue

@@ -10,7 +10,6 @@
 </template>
 
 <script setup lang="ts">
-import type { Team } from '~/types';
 const supabase = useSupabaseClient();
 
 const { pending, data: teams } = await useAsyncData('teams', async () => {