Fast forward

frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/MFASection.tsx

@@ -1,17 +1,14 @@
-import { useEffect, useState } from "react";
-
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { Checkbox, EmailServiceSetupModal } from "@app/components/v2";
+import {
+  useGetUser,
+  useUpdateMfaEnabled} from "@app/hooks/api";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
 import { usePopUp } from "@app/hooks/usePopUp";
 
-import { useGetUser } from "../../../../hooks/api";
-import { User } from "../../../../hooks/api/types";
-import updateMyMfaEnabled from "../../../../pages/api/user/updateMyMfaEnabled";
-
 export const MFASection = () => {
-  const [isMfaEnabled, setIsMfaEnabled] = useState(false);
   const { data: user } = useGetUser();
+  const { mutateAsync } = useUpdateMfaEnabled();
   const { createNotification } = useNotificationContext();
   const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp([
     "setUpEmail"
@@ -19,22 +16,12 @@ export const MFASection = () => {
   
   const {data: serverDetails } = useFetchServerStatus()
   
-  useEffect(() => {
-    if (user && typeof user.isMfaEnabled !== "undefined") {
-      setIsMfaEnabled(user.isMfaEnabled);
-    }
-  }, [user]);
-  
   const toggleMfa = async (state: boolean) => {
     try {
-      const newUser: User = await updateMyMfaEnabled({
+      const newUser = await mutateAsync({
         isMfaEnabled: state
       });
 
-      if (newUser) {
-        setIsMfaEnabled(newUser.isMfaEnabled);
-      }
-
       createNotification({
         text: `${newUser.isMfaEnabled ? "Successfully turned on two-factor authentication." : "Successfully turned off two-factor authentication."}`,
         type: "success"
@@ -55,20 +42,22 @@ export const MFASection = () => {
         <p className="text-xl font-semibold text-mineshaft-100 mb-8">
           Two-factor Authentication
         </p>
-        <Checkbox
-          className="data-[state=checked]:bg-primary"
-          id="isTwoFAEnabled"
-          isChecked={isMfaEnabled}
-          onCheckedChange={(state) => {
-            if (serverDetails?.emailConfigured){
-              toggleMfa(state as boolean);
-            } else {
-              handlePopUpOpen("setUpEmail");
-            }
-          }}
-        >
-          Enable 2-factor authentication via your personal email.
-        </Checkbox>
+        {user && (
+          <Checkbox
+            className="data-[state=checked]:bg-primary"
+            id="isTwoFAEnabled"
+            isChecked={user?.isMfaEnabled}
+            onCheckedChange={(state) => {
+              if (serverDetails?.emailConfigured){
+                toggleMfa(state as boolean);
+              } else {
+                handlePopUpOpen("setUpEmail");
+              }
+            }}
+          >
+            Enable 2-factor authentication via your personal email.
+          </Checkbox>
+        )}
       </div>
     </form>
     <EmailServiceSetupModal