RPJosh
/
authelia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
pull/2321/head^2
Amir Zarrinkafsh 2021-09-04 22:31:24 +10:00 committed by GitHub
parent 8c77f4f931
commit 6b7b08d800
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/hooks/NotificationsContext.ts
View File

@ -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 {

10
web/src/views/LoginPortal/SecondFactor/OneTimePasswordMethod.tsx
View File

@ -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,

12
web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx
View File

@ -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",

12
web/src/views/LoginPortal/SecondFactor/SecurityKeyMethod.tsx
View File

@ -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",
},