techies/authelia
1
0
Fork 0
mirror of https://github.com/0rangebananaspy/authelia.git synced 2024-09-14 22:47:21 +07:00
Code Issues Projects Releases Wiki Activity

refactor(web): replace incorrect use of usecallback (#2308)

Browse Source 
* 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
This commit is contained in:
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 { Level } from "@components/ColoredSnackbarContent";
import { Notification } from "@models/Notifications"; import { Notification } from "@models/Notifications";
@ -30,12 +30,10 @@ export function useNotifications() {
}; };
const resetNotification = () => useNotificationsProps.setNotification(null); 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; const isActive = useNotificationsProps.notification !== null;
return { 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 { useRedirectionURL } from "@hooks/RedirectionURL";
import { completeTOTPSignIn } from "@services/OneTimePassword"; import { completeTOTPSignIn } from "@services/OneTimePassword";
@ -32,10 +32,8 @@ const OneTimePasswordMethod = function (props: Props) {
const redirectionURL = useRedirectionURL(); const redirectionURL = useRedirectionURL();
const { onSignInSuccess, onSignInError } = props; 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 () => { const signInFunc = useCallback(async () => {
if (!props.registered || props.authenticationLevel === AuthenticationLevel.TwoFactor) { if (!props.registered || props.authenticationLevel === AuthenticationLevel.TwoFactor) {
@ -60,9 +58,9 @@ const OneTimePasswordMethod = function (props: Props) {
} }
setPasscode(""); setPasscode("");
}, [ }, [
passcode,
onSignInErrorCallback, onSignInErrorCallback,
onSignInSuccessCallback, onSignInSuccessCallback,
passcode,
redirectionURL, redirectionURL,
props.authenticationLevel, props.authenticationLevel,
props.registered, 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"; import { Button, makeStyles } from "@material-ui/core";
@ -32,10 +32,8 @@ const PushNotificationMethod = function (props: Props) {
const mounted = useIsMountedRef(); const mounted = useIsMountedRef();
const { onSignInSuccess, onSignInError } = props; 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 () => { const signInFunc = useCallback(async () => {
if (props.authenticationLevel === AuthenticationLevel.TwoFactor) { 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")); onSignInErrorCallback(new Error("There was an issue completing sign in process"));
setState(State.Failure); setState(State.Failure);
} }
}, [onSignInErrorCallback, onSignInSuccessCallback, setState, redirectionURL, mounted, props.authenticationLevel]); }, [onSignInErrorCallback, onSignInSuccessCallback, redirectionURL, mounted, props.authenticationLevel]);
useEffect(() => { useEffect(() => {
signInFunc(); signInFunc();
@ -113,7 +111,7 @@ const PushNotificationMethod = function (props: Props) {
export default PushNotificationMethod; export default PushNotificationMethod;
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles(() => ({
icon: { icon: {
width: "64px", width: "64px",
height: "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 { makeStyles, Button, useTheme } from "@material-ui/core";
import { CSSProperties } from "@material-ui/styles"; import { CSSProperties } from "@material-ui/styles";
@ -40,10 +40,8 @@ const SecurityKeyMethod = function (props: Props) {
const [timerPercent, triggerTimer] = useTimer(signInTimeout * 1000 - 500); const [timerPercent, triggerTimer] = useTimer(signInTimeout * 1000 - 500);
const { onSignInSuccess, onSignInError } = props; 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 () => { const doInitiateSignIn = useCallback(async () => {
// If user is already authenticated, we don't initiate sign in process. // If user is already authenticated, we don't initiate sign in process.
@ -82,8 +80,8 @@ const SecurityKeyMethod = function (props: Props) {
setState(State.Failure); setState(State.Failure);
} }
}, [ }, [
onSignInSuccessCallback,
onSignInErrorCallback, onSignInErrorCallback,
onSignInSuccessCallback,
redirectionURL, redirectionURL,
mounted, mounted,
triggerTimer, triggerTimer,
@ -120,7 +118,7 @@ const SecurityKeyMethod = function (props: Props) {
export default SecurityKeyMethod; export default SecurityKeyMethod;
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles(() => ({
icon: { icon: {
display: "inline-block", display: "inline-block",
}, },