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

@@ -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 = useRef(notificationBuilder("info")).current;
-    const createInfoNotification = useCallback(notificationBuilder("info"), []);
+    const createSuccessNotification = useRef(notificationBuilder("success")).current;
-    const createSuccessNotification = useCallback(notificationBuilder("success"), []);
+    const createWarnNotification = useRef(notificationBuilder("warning")).current;
-    const createWarnNotification = useCallback(notificationBuilder("warning"), []);
+    const createErrorNotification = useRef(notificationBuilder("error")).current;
-    const createErrorNotification = useCallback(notificationBuilder("error"), []);
-    /* eslint-enable react-hooks/exhaustive-deps */
     const isActive = useNotificationsProps.notification !== null;
 
     return {

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 = useRef(onSignInError).current;
-    const onSignInErrorCallback = useCallback(onSignInError, []);
+    const onSignInSuccessCallback = useRef(onSignInSuccess).current;
-    const onSignInSuccessCallback = useCallback(onSignInSuccess, []);
-    /* eslint-enable react-hooks/exhaustive-deps */
 
     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,

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 = useRef(onSignInError).current;
-    const onSignInErrorCallback = useCallback(onSignInError, []);
+    const onSignInSuccessCallback = useRef(onSignInSuccess).current;
-    const onSignInSuccessCallback = useCallback(onSignInSuccess, []);
-    /* eslint-enable react-hooks/exhaustive-deps */
 
     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",

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 = useRef(onSignInError).current;
-    const onSignInErrorCallback = useCallback(onSignInError, []);
+    const onSignInSuccessCallback = useRef(onSignInSuccess).current;
-    const onSignInSuccessCallback = useCallback(onSignInSuccess, []);
-    /* eslint-enable react-hooks/exhaustive-deps */
 
     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",
     },