signup modal changes

Joystream · Aug 13, 2023 · ae6057b · ae6057b
1 parent faced41
commit ae6057b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 27 deletions.
diff --git a/packages/ui/src/memberships/modals/EmailSubscriptionModal/EmailSubscriptionModal.tsx b/packages/ui/src/memberships/modals/EmailSubscriptionModal/EmailSubscriptionModal.tsx
@@ -29,13 +29,7 @@ export const EmailSubscriptionModal = () => {
   const [, setMembersEmail] = useLocalStorage<Record<string, string>>('membersEmail')
   const { wallet } = useMyAccounts()
   const [state, send] = useMachine(EmailSubscriptionMachine)
-  const {
-    data,
-    error,
-    send: mutate,
-  } = useBackend({
-    mutation: SIGNUP_MUTATION,
-  })
+  const signupMutation = useBackend({ mutation: SIGNUP_MUTATION })
 
   const signEmail = async () => {
     const timestamp = Date.now()
@@ -54,12 +48,12 @@ export const EmailSubscriptionModal = () => {
 
   const signUp = async () => {
     if (state.event.type === 'SIGNED') {
-      await mutate({
+      await signupMutation.send({
         memberId: parseFloat(member.id),
         name: member.name,
         email: state.context.email,
-        signature: state.event.signature,
-        timestamp: state.event.timestamp,
+        signature: state.context.signature,
+        timestamp: state.context.timestamp,
       })
     }
   }
@@ -68,23 +62,23 @@ export const EmailSubscriptionModal = () => {
     if (state.matches('signature')) {
       signEmail()
     }
-    if (state.matches('transaction')) {
+    if (state.matches('signup')) {
       signUp()
     }
   }, [state])
 
   useEffect(() => {
-    if (data) {
+    if (signupMutation.data) {
       send('SUCCESS')
       setMembersEmail((emails) => ({ ...emails, [member.id]: state.context.email || '' }))
       hideModal()
     }
-    if (error) {
+    if (signupMutation.error) {
       send('ERROR')
     }
-  }, [data, error])
+  }, [signupMutation])
 
-  if (state.matches('prepare')) {
+  if (state.matches('form')) {
     return (
       <EmailSubscriptionFormModal
         onClose={hideModal}

diff --git a/packages/ui/src/memberships/modals/EmailSubscriptionModal/machine.ts b/packages/ui/src/memberships/modals/EmailSubscriptionModal/machine.ts
@@ -8,12 +8,13 @@ import { EmailSubscriptionForm } from './types'
 interface Context extends EmailSubscriptionForm {
   email: string
   timestamp: number
+  signature: string
 }
 
 type EmailSubscriptionState =
-  | { value: 'prepare'; context: EmptyObject }
+  | { value: 'form'; context: EmptyObject }
   | { value: 'signature'; context: Pick<Context, 'email'> }
-  | { value: 'transaction'; context: Context }
+  | { value: 'signup'; context: Context }
   | { value: 'success'; context: Context }
   | { value: 'error'; context: Context }
 
@@ -26,9 +27,9 @@ export type EmailSubscriptionEvent =
 
 export const EmailSubscriptionMachine = createMachine<Partial<Context>, EmailSubscriptionEvent, EmailSubscriptionState>(
   {
-    initial: 'prepare',
+    initial: 'form',
     states: {
-      prepare: {
+      form: {
         on: {
           DONE: {
             target: 'signature',
@@ -41,19 +42,18 @@ export const EmailSubscriptionMachine = createMachine<Partial<Context>, EmailSub
       signature: {
         on: {
           SIGNED: {
-            target: 'transaction',
-            actions: (_, event) =>
-              assign({
-                signature: event.signature,
-                timestamp: event.timestamp,
-              }),
+            target: 'signup',
+            actions: assign({
+              signature: (_, event) => event.signature,
+              timestamp: (_, event) => event.timestamp,
+            }),
           },
           CANCEL: {
             target: 'canceled',
           },
         },
       },
-      transaction: {
+      signup: {
         on: {
           SUCCESS: {
             target: 'success',
@@ -69,7 +69,7 @@ export const EmailSubscriptionMachine = createMachine<Partial<Context>, EmailSub
         },
         cancel: {
           target: 'canceled',
-          action: 'prepare',
+          action: 'form',
         },
       }),
     },