From f4fee69a8dff3e226287a134a4721d3dc2c0c698 Mon Sep 17 00:00:00 2001
From: "sweep-ai[bot]" <128439645+sweep-ai[bot]@users.noreply.github.com>
Date: Tue, 28 May 2024 14:57:29 +0000
Subject: [PATCH] feat: Updated 3 files

---
 frontend/app.vue                 |  9 ++++++++
 frontend/components/userStore.ts | 34 ++++++++++++++++++++++++++++++
 frontend/pages/profile.vue       | 36 ++++++++------------------------
 3 files changed, 52 insertions(+), 27 deletions(-)
 create mode 100644 frontend/app.vue
 create mode 100644 frontend/components/userStore.ts

diff --git a/frontend/app.vue b/frontend/app.vue
new file mode 100644
index 0000000..cb13abf
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/components/userStore.ts b/frontend/components/userStore.ts
new file mode 100644
index 0000000..d0e5612
--- /dev/null
+++ b/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;
+      }
+    },
+  },
+});
\ No newline at end of file
diff --git a/frontend/pages/profile.vue b/frontend/pages/profile.vue
index bea1b26..bd70cfc 100644
--- a/frontend/pages/profile.vue
+++ b/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>