MP-40 update state after dice success

Author: kkartunov

src/apps/accounts/src/settings/tabs/account/security/Security.tsx

@@ -1,5 +1,6 @@
 import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
+import { KeyedMutator } from 'swr'
 
 import { Button, Collapsible, FormToggleSwitch } from '~/libs/ui'
 import { diceIdLogo, MFAImage, SettingSection } from '~/apps/accounts/src/lib'
@@ -15,7 +16,10 @@ interface SecurityProps {
 const Security: FC<SecurityProps> = (props: SecurityProps) => {
     const [setupDiceModalOpen, setSetupDiceModalOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
 
-    const mfaStatusData: MemberMFAStatus | undefined = useMemberMFAStatus(props.profile.userId)
+    const { data: mfaStatusData, mutate: mutateMFAData }: {
+        data: MemberMFAStatus | undefined
+        mutate: KeyedMutator<any>,
+    } = useMemberMFAStatus(props.profile.userId)
 
     const [mfaEnabled, setMFAEnabled]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
 
@@ -91,6 +95,7 @@ const Security: FC<SecurityProps> = (props: SecurityProps) => {
 
             {setupDiceModalOpen && (
                 <DiceSetupModal
+                    mutateMFAData={mutateMFAData}
                     onClose={handleDiceModalStatus}
                     profile={props.profile}
                 />

src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.tsx

@@ -2,6 +2,7 @@ import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
 import { QRCodeSVG } from 'qrcode.react'
 import { get, isUndefined, lowerCase } from 'lodash'
 import { toast } from 'react-toastify'
+import { KeyedMutator } from 'swr'
 
 import { BaseModal, Button } from '~/libs/ui'
 import {
@@ -20,6 +21,7 @@ import styles from './DiceSetupModal.module.scss'
 const GooglePlayLink: string = 'https://play.google.com/store/apps/details?id=com.diwallet1'
 const AppleStoreLink: string = 'https://apps.apple.com/us/app/dice-id/id1548148979'
 interface DiceSetupModalProps {
+    mutateMFAData: KeyedMutator<any>
     onClose: () => void
     profile: UserProfile
 }
@@ -72,6 +74,7 @@ const DiceSetupModal: FC<DiceSetupModalProps> = (props: DiceSetupModalProps) =>
                     },
                 })
                     .then(() => {
+                        props.mutateMFAData()
                         setStep(4)
                         // eslint-disable-next-line max-len
                         toast.success('Your credentials have been verified and you are all set for MFA using your decentralized identity (DICE ID).')

src/libs/core/lib/profile/data-providers/useMemberMFAStatus.ts

@@ -1,4 +1,4 @@
-import useSWR, { SWRResponse } from 'swr'
+import useSWR, { KeyedMutator, SWRResponse } from 'swr'
 
 import { memberModifyMfaURL } from '~/libs/core'
 
@@ -13,8 +13,16 @@ export interface MemberMFAStatus {
     userId: number
 }
 
-export function useMemberMFAStatus(userId: number): MemberMFAStatus | undefined {
-    const { data }: SWRResponse = useSWR(memberModifyMfaURL(userId))
+export interface UseMemberMFAStatusAPI {
+    data: MemberMFAStatus | undefined
+    mutate: KeyedMutator<any>
+}
+
+export function useMemberMFAStatus(userId: number): UseMemberMFAStatusAPI {
+    const { data, mutate }: SWRResponse = useSWR(memberModifyMfaURL(userId))
 
-    return data ? data.result.content : undefined
+    return {
+        data: data ? data.result.content : undefined,
+        mutate,
+    }
 }