diff --git a/src/apps/accounts/src/settings/tabs/account/security/Security.tsx b/src/apps/accounts/src/settings/tabs/account/security/Security.tsx index 6c05311df..9048cf742 100644 --- a/src/apps/accounts/src/settings/tabs/account/security/Security.tsx +++ b/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 = (props: SecurityProps) => { const [setupDiceModalOpen, setSetupDiceModalOpen]: [boolean, Dispatch>] = useState(false) - const mfaStatusData: MemberMFAStatus | undefined = useMemberMFAStatus(props.profile.userId) + const { data: mfaStatusData, mutate: mutateMFAData }: { + data: MemberMFAStatus | undefined + mutate: KeyedMutator, + } = useMemberMFAStatus(props.profile.userId) const [mfaEnabled, setMFAEnabled]: [boolean, Dispatch>] = useState(false) @@ -91,6 +95,7 @@ const Security: FC = (props: SecurityProps) => { {setupDiceModalOpen && ( diff --git a/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.tsx b/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.tsx index 2db6a7e27..1737155a2 100644 --- a/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.tsx +++ b/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 onClose: () => void profile: UserProfile } @@ -72,6 +74,7 @@ const DiceSetupModal: FC = (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).') diff --git a/src/libs/core/lib/profile/data-providers/useMemberMFAStatus.ts b/src/libs/core/lib/profile/data-providers/useMemberMFAStatus.ts index 0a3b6dc7f..844b5a496 100644 --- a/src/libs/core/lib/profile/data-providers/useMemberMFAStatus.ts +++ b/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 +} + +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, + } }