feat: Updated 3 files

frontend/app.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { useUserStore } from './stores/userStore';
+
+const userStore = useUserStore();
+
+onMounted(async () => {
+  await userStore.fetchUserData();
+});
+</script>

frontend/components/userStore.ts

@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia';
+
+interface Profile {
+  id: string;
+  email: string;
+  app_email_alias: string;
+}
+
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    id: '',
+    email: '',
+    app_email_alias: '',
+  }),
+  actions: {
+    async fetchUserData() {
+      const config = useRuntimeConfig();
+      const apiBase = config.public.apiBase;
+      const token = useSupabaseSession().value?.access_token;
+      if (!token) return;
+      const { data } = await useFetch<Profile>(`${apiBase}/api/me`, {
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      if (data.value) {
+        this.id = data.value.id;
+        this.email = data.value.email;
+        this.app_email_alias = data.value.app_email_alias;
+      }
+    },
+  },
+});

frontend/pages/profile.vue

@@ -5,43 +5,25 @@ interface Profile {
   app_email_alias: string;
 }
 
-const profile = ref<Profile>({
-  id: '',
-  email: '',
-  app_email_alias: '',
-});
+import { useUserStore } from '~/stores/userStore';
 
-const config = useRuntimeConfig();
-const apiBase = config.public.apiBase;
+const userStore = useUserStore();
 
-const fetchProfile = async () => {
-  const token = useSupabaseSession().value?.access_token;
-  // TODO: handle re-auth
-  if (!token) return;
-  const { data } = await useFetch<Profile>(`${apiBase}/api/me`, {
-    method: 'GET',
-    headers: {
-      Authorization: `Bearer ${token}`,
-    },
-  });
-  if (data.value) {
-    profile.value = data.value;
-  }
-};
-
-onMounted(async () => {
-  await fetchProfile();
-});
+const profile = computed(() => ({
+  id: userStore.id,
+  email: userStore.email,
+  app_email_alias: userStore.app_email_alias,
+}));
 </script>
 
 <template>
   <div class="p-4">
     <h1 class="text-2xl font-bold mb-4 text-slate-700">Profile</h1>
     <p class="text-lg mb-2 text-slate-800">
-      <strong>Email:</strong> {{ profile.email }}
+      <strong>Email:</strong> {{ userStore.email }}
     </p>
     <p class="text-lg text-slate-800">
-      <strong>App Email Alias:</strong> {{ profile.app_email_alias }}
+      <strong>App Email Alias:</strong> {{ userStore.app_email_alias }}
     </p>
   </div>
 </template>