From 6b7b08d800b639bcdf8a56f1ccb1931d1cd0db90 Mon Sep 17 00:00:00 2001 From: Amir Zarrinkafsh Date: Sat, 4 Sep 2021 22:31:24 +1000 Subject: [PATCH] refactor(web): replace incorrect use of usecallback (#2308) * refactor(web): replace incorrect use of usecallback Replaces incorrect usage of useCallback with useRef. * refactor(web): onsignin...ref -> onsignin...callback * fix(web): fix lint errors --- web/src/hooks/NotificationsContext.ts | 12 +++++------- .../SecondFactor/OneTimePasswordMethod.tsx | 10 ++++------ .../SecondFactor/PushNotificationMethod.tsx | 12 +++++------- .../LoginPortal/SecondFactor/SecurityKeyMethod.tsx | 12 +++++------- 4 files changed, 19 insertions(+), 27 deletions(-) diff --git a/web/src/hooks/NotificationsContext.ts b/web/src/hooks/NotificationsContext.ts index 4a2d5ec50..0b87f1863 100644 --- a/web/src/hooks/NotificationsContext.ts +++ b/web/src/hooks/NotificationsContext.ts @@ -1,4 +1,4 @@ -import { useCallback, createContext, useContext } from "react"; +import { createContext, useContext, useRef } from "react"; import { Level } from "@components/ColoredSnackbarContent"; import { Notification } from "@models/Notifications"; @@ -30,12 +30,10 @@ export function useNotifications() { }; const resetNotification = () => useNotificationsProps.setNotification(null); - /* eslint-disable react-hooks/exhaustive-deps */ - const createInfoNotification = useCallback(notificationBuilder("info"), []); - const createSuccessNotification = useCallback(notificationBuilder("success"), []); - const createWarnNotification = useCallback(notificationBuilder("warning"), []); - const createErrorNotification = useCallback(notificationBuilder("error"), []); - /* eslint-enable react-hooks/exhaustive-deps */ + const createInfoNotification = useRef(notificationBuilder("info")).current; + const createSuccessNotification = useRef(notificationBuilder("success")).current; + const createWarnNotification = useRef(notificationBuilder("warning")).current; + const createErrorNotification = useRef(notificationBuilder("error")).current; const isActive = useNotificationsProps.notification !== null; return { diff --git a/web/src/views/LoginPortal/SecondFactor/OneTimePasswordMethod.tsx b/web/src/views/LoginPortal/SecondFactor/OneTimePasswordMethod.tsx index 30a7ef566..856541981 100644 --- a/web/src/views/LoginPortal/SecondFactor/OneTimePasswordMethod.tsx +++ b/web/src/views/LoginPortal/SecondFactor/OneTimePasswordMethod.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useCallback } from "react"; +import React, { useCallback, useEffect, useRef, useState } from "react"; import { useRedirectionURL } from "@hooks/RedirectionURL"; import { completeTOTPSignIn } from "@services/OneTimePassword"; @@ -32,10 +32,8 @@ const OneTimePasswordMethod = function (props: Props) { const redirectionURL = useRedirectionURL(); const { onSignInSuccess, onSignInError } = props; - /* eslint-disable react-hooks/exhaustive-deps */ - const onSignInErrorCallback = useCallback(onSignInError, []); - const onSignInSuccessCallback = useCallback(onSignInSuccess, []); - /* eslint-enable react-hooks/exhaustive-deps */ + const onSignInErrorCallback = useRef(onSignInError).current; + const onSignInSuccessCallback = useRef(onSignInSuccess).current; const signInFunc = useCallback(async () => { if (!props.registered || props.authenticationLevel === AuthenticationLevel.TwoFactor) { @@ -60,9 +58,9 @@ const OneTimePasswordMethod = function (props: Props) { } setPasscode(""); }, [ - passcode, onSignInErrorCallback, onSignInSuccessCallback, + passcode, redirectionURL, props.authenticationLevel, props.registered, diff --git a/web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx b/web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx index e4a789e2a..75382c55f 100644 --- a/web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx +++ b/web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useCallback, useState, ReactNode } from "react"; +import React, { useCallback, useEffect, useRef, useState, ReactNode } from "react"; import { Button, makeStyles } from "@material-ui/core"; @@ -32,10 +32,8 @@ const PushNotificationMethod = function (props: Props) { const mounted = useIsMountedRef(); const { onSignInSuccess, onSignInError } = props; - /* eslint-disable react-hooks/exhaustive-deps */ - const onSignInErrorCallback = useCallback(onSignInError, []); - const onSignInSuccessCallback = useCallback(onSignInSuccess, []); - /* eslint-enable react-hooks/exhaustive-deps */ + const onSignInErrorCallback = useRef(onSignInError).current; + const onSignInSuccessCallback = useRef(onSignInSuccess).current; const signInFunc = useCallback(async () => { if (props.authenticationLevel === AuthenticationLevel.TwoFactor) { @@ -63,7 +61,7 @@ const PushNotificationMethod = function (props: Props) { onSignInErrorCallback(new Error("There was an issue completing sign in process")); setState(State.Failure); } - }, [onSignInErrorCallback, onSignInSuccessCallback, setState, redirectionURL, mounted, props.authenticationLevel]); + }, [onSignInErrorCallback, onSignInSuccessCallback, redirectionURL, mounted, props.authenticationLevel]); useEffect(() => { signInFunc(); @@ -113,7 +111,7 @@ const PushNotificationMethod = function (props: Props) { export default PushNotificationMethod; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(() => ({ icon: { width: "64px", height: "64px", diff --git a/web/src/views/LoginPortal/SecondFactor/SecurityKeyMethod.tsx b/web/src/views/LoginPortal/SecondFactor/SecurityKeyMethod.tsx index 9e6221749..a504b50f5 100644 --- a/web/src/views/LoginPortal/SecondFactor/SecurityKeyMethod.tsx +++ b/web/src/views/LoginPortal/SecondFactor/SecurityKeyMethod.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState, Fragment } from "react"; +import React, { useCallback, useEffect, useRef, useState, Fragment } from "react"; import { makeStyles, Button, useTheme } from "@material-ui/core"; import { CSSProperties } from "@material-ui/styles"; @@ -40,10 +40,8 @@ const SecurityKeyMethod = function (props: Props) { const [timerPercent, triggerTimer] = useTimer(signInTimeout * 1000 - 500); const { onSignInSuccess, onSignInError } = props; - /* eslint-disable react-hooks/exhaustive-deps */ - const onSignInErrorCallback = useCallback(onSignInError, []); - const onSignInSuccessCallback = useCallback(onSignInSuccess, []); - /* eslint-enable react-hooks/exhaustive-deps */ + const onSignInErrorCallback = useRef(onSignInError).current; + const onSignInSuccessCallback = useRef(onSignInSuccess).current; const doInitiateSignIn = useCallback(async () => { // If user is already authenticated, we don't initiate sign in process. @@ -82,8 +80,8 @@ const SecurityKeyMethod = function (props: Props) { setState(State.Failure); } }, [ - onSignInSuccessCallback, onSignInErrorCallback, + onSignInSuccessCallback, redirectionURL, mounted, triggerTimer, @@ -120,7 +118,7 @@ const SecurityKeyMethod = function (props: Props) { export default SecurityKeyMethod; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(() => ({ icon: { display: "inline-block", },