improve login flow

Author: joshistoast

stores/customer.ts

@@ -15,77 +15,100 @@ import {
   customerAccessTokenDelete,
   customerCreate
 } from '@/api/customer/mutations'
+import {
+  getCustomer
+} from '@/api/customer/queries'
 
 type CustomerMutTokenCreate = {
   customerAccessTokenCreate: CustomerAccessTokenCreatePayload
 }
 
-export const useCustomer = defineStore('customer', {
-  state: () => ({
-    customer: null as Customer | null,
-    customerAccessToken: null as CustomerAccessToken | null,
-    loading: false as boolean,
-    customerUserErrors: null as CustomerUserError[],
-  }),
-  actions: {
-    async customerCreate (input: CustomerCreateInput) {
-      if (input) {
-        const { data } = await useClient().mutate({
-          mutation: customerCreate,
-          variables: { input }
-        })
-        if (data.customerCreate.customer) {
-          useRouter().push({ name: 'account-login', params: { email: input.email } })
-        }
-        if (data.customerCreate.customerUserErrors) {
-          this.customerUserErrors = data.customerCreate.customerUserErrors
-        }
-      }
-    },
-    async getCustomer (accessToken: string) {
-      console.log('getCustomer', accessToken)
-    },
-    async login (email: string, password: string) {
-      try {
-        this.loading = true
-        if (!this.customerAccessToken) {
-          const tokenCreateInput = { email, password }
-          this.customerAccessTokenCreate(tokenCreateInput)
+type CustomerMutTokenDelete = {}
+
+type CustomerGet = {
+  customer: Customer
+}
+
+export const useCustomer = defineStore(
+  'customer',
+  {
+    state: () => ({
+      customer: null as Customer | null,
+      customerAccessToken: null as CustomerAccessToken | null,
+      loading: false as boolean,
+      customerUserErrors: null as CustomerUserError[],
+    }),
+    actions: {
+      async customerCreate (input: CustomerCreateInput) {
+        if (input) {
+          const { data } = await useClient().mutate({
+            mutation: customerCreate,
+            variables: { input }
+          })
+          if (data.customerCreate.customer) {
+            useRouter().push({ name: 'account-login', params: { email: input.email } })
+          }
+          if (data.customerCreate.customerUserErrors) {
+            this.customerUserErrors = data.customerCreate.customerUserErrors
+          }
         }
-        if (this.customerAccessToken.accessToken) {
-          this.getCustomer(this.customerAccessToken.accessToken)
+      },
+      async login (email: string, password: string) {
+        try {
+          this.loading = true
+          if (!this.customerAccessToken) {
+            await this.customerAccessTokenCreate({ email, password })
+          }
+          if (!this.customer) {
+            await this.getCustomer(this.customerAccessToken.accessToken)
+          }
+        } catch (e) {
+          return e
+        } finally {
+          this.loading = false
         }
-      } catch (e) {
-        return e
-      } finally {
-        this.loading = false
-      }
-    },
-    async logout () {},
-    async customerAccessTokenCreate (input: CustomerAccessTokenCreateInput) {
-      try {
-        const { data } = await useClient().mutate<CustomerMutTokenCreate>({
-          mutation: customerAccessTokenCreate,
-          variables: {
-            input,
+      },
+      async logout () {},
+      async customerAccessTokenCreate (input: CustomerAccessTokenCreateInput) {
+        try {
+          const { data } = await useClient().mutate<CustomerMutTokenCreate>({
+            mutation: customerAccessTokenCreate,
+            variables: {
+              input,
+            }
+          })
+
+          if (data.customerAccessTokenCreate.customerAccessToken) {
+            this.customerAccessToken = data.customerAccessTokenCreate.customerAccessToken
           }
-        })
-        if (data.customerAccessTokenCreate.customerAccessToken) {
-          this.customerAccessToken = data.customerAccessTokenCreate.customerAccessToken
+          if (data.customerAccessTokenCreate.customerUserErrors) {
+            this.customerUserErrors = data.customerAccessTokenCreate.customerUserErrors
+          }
+        } catch (e) {
+          return e
         }
-        if (data.customerAccessTokenCreate.customerUserErrors) {
-          this.customerUserErrors = data.customerAccessTokenCreate.customerUserErrors
+      },
+      async getCustomer (accessToken: string) {
+        if (accessToken) {
+          const { data } = await useClient().query({
+            query: getCustomer,
+            variables: { customerAccessToken: accessToken }
+          })
+          if (data.customer) {
+            this.customer = data.customer
+          } else {
+            this.customer = null
+            throw new Error('No customer found')
+          }
         }
-      } catch (e) {
-        return e
-      }
+      },
+      async customerAccessTokenDelete () {},
+    },
+    persist: {
+      paths: ['customer', 'customerAccessToken'],
+    },
+    getters: {
+      isSignedIn: (state) => !!state.customerAccessToken,
     },
-    async customerAccessTokenDelete () {},
-  },
-  persist: {
-    paths: ['customer', 'customerAccessToken'],
-  },
-  getters: {
-    isSignedIn: (state) => !!state.customerAccessToken,
-  },
-})
+  }
+)