refactor: remove explicit return types for functional components in tests and providers

Author: leefreemanxyz

__tests__/helpers.tsx

@@ -8,7 +8,7 @@ export const createWrapper = ({
 }: Partial<Auth0ProviderOptions> = {}) => {
   return function Wrapper({
     children,
-  }: PropsWithChildren<Record<string, unknown>>): JSX.Element {
+  }: PropsWithChildren<Record<string, unknown>>): React.JSX.Element {
     return (
       <Auth0Provider domain={domain} clientId={clientId} {...opts}>
         {children}

__tests__/ssr.test.tsx

@@ -13,7 +13,7 @@ describe('In a Node SSR environment', () => {
     ReactDOMServer.renderToString(
       <Auth0Provider clientId="__client_id__" domain="__domain__">
         <Auth0Context.Consumer>
-          {(value): JSX.Element => {
+          {(value): React.JSX.Element => {
             ({ isLoading, isAuthenticated, user, loginWithRedirect } = value);
             return <div>App</div>;
           }}

__tests__/with-auth0.test.tsx

@@ -7,7 +7,7 @@ import withAuth0, { WithAuth0Props } from '../src/with-auth0';
 describe('withAuth0', () => {
   it('should wrap a class component', () => {
     class MyComponent extends Component<WithAuth0Props> {
-      render(): JSX.Element {
+      render() {
         return <>hasAuth: {`${!!this.props.auth0}`}</>;
       }
     }
@@ -19,7 +19,7 @@ describe('withAuth0', () => {
   it('should wrap a class component and provide context', () => {
     const context = React.createContext<Auth0ContextInterface>(initialContext);
     class MyComponent extends Component<WithAuth0Props> {
-      render(): JSX.Element {
+      render() {
         return <>hasAuth: {`${!!this.props.auth0}`}</>;
       }
     }

__tests__/with-authentication-required.test.tsx

@@ -12,7 +12,7 @@ const mockClient = jest.mocked(new Auth0Client({ clientId: '', domain: '' }));
 describe('withAuthenticationRequired', () => {
   it('should block access to a private component when not authenticated', async () => {
     mockClient.getUser.mockResolvedValue(undefined);
-    const MyComponent = (): JSX.Element => <>Private</>;
+    const MyComponent = () => <>Private</>;
     const WrappedComponent = withAuthenticationRequired(MyComponent);
     render(
       <Auth0Provider clientId="__test_client_id__" domain="__test_domain__">
@@ -27,7 +27,7 @@ describe('withAuthenticationRequired', () => {
 
   it('should allow access to a private component when authenticated', async () => {
     mockClient.getUser.mockResolvedValue({ name: '__test_user__' });
-    const MyComponent = (): JSX.Element => <>Private</>;
+    const MyComponent = () => <>Private</>;
     const WrappedComponent = withAuthenticationRequired(MyComponent);
     await act(() => {
       render(
@@ -49,8 +49,8 @@ describe('withAuthenticationRequired', () => {
     const deferred = defer<User | undefined>();
     mockClient.getUser.mockResolvedValue(deferred.promise);
 
-    const MyComponent = (): JSX.Element => <>Private</>;
-    const OnRedirecting = (): JSX.Element => <>Redirecting</>;
+    const MyComponent = () => <>Private</>;
+    const OnRedirecting = () => <>Redirecting</>;
     const WrappedComponent = withAuthenticationRequired(MyComponent, {
       onRedirecting: OnRedirecting,
     });
@@ -84,7 +84,7 @@ describe('withAuthenticationRequired', () => {
     mockClient.loginWithRedirect.mockImplementationOnce(async () => {
       callOrder.push('loginWithRedirect');
     });
-    const MyComponent = (): JSX.Element => <>Private</>;
+    const MyComponent = () => <>Private</>;
     const OnBeforeAuthentication = jest
       .fn()
       .mockImplementationOnce(async () => {
@@ -112,7 +112,7 @@ describe('withAuthenticationRequired', () => {
 
   it('should pass additional options on to loginWithRedirect', async () => {
     mockClient.getUser.mockResolvedValue(undefined);
-    const MyComponent = (): JSX.Element => <>Private</>;
+    const MyComponent = () => <>Private</>;
     const WrappedComponent = withAuthenticationRequired(MyComponent, {
       loginOptions: {
         fragment: 'foo',
@@ -134,7 +134,7 @@ describe('withAuthenticationRequired', () => {
 
   it('should merge additional appState with the returnTo', async () => {
     mockClient.getUser.mockResolvedValue(undefined);
-    const MyComponent = (): JSX.Element => <>Private</>;
+    const MyComponent = () => <>Private</>;
     const WrappedComponent = withAuthenticationRequired(MyComponent, {
       loginOptions: {
         appState: {
@@ -162,7 +162,7 @@ describe('withAuthenticationRequired', () => {
 
   it('should accept a returnTo function', async () => {
     mockClient.getUser.mockResolvedValue(undefined);
-    const MyComponent = (): JSX.Element => <>Private</>;
+    const MyComponent = () => <>Private</>;
     const WrappedComponent = withAuthenticationRequired(MyComponent, {
       returnTo: () => '/foo',
     });
@@ -184,9 +184,9 @@ describe('withAuthenticationRequired', () => {
 
   it('should call loginWithRedirect only once even if parent state changes', async () => {
     mockClient.getUser.mockResolvedValue(undefined);
-    const MyComponent = (): JSX.Element => <>Private</>;
+    const MyComponent = () => <>Private</>;
     const WrappedComponent = withAuthenticationRequired(MyComponent);
-    const App = ({ foo }: { foo: number }): JSX.Element => (
+    const App = ({ foo }: { foo: number }) => (
       <div>
         {foo}
         <Auth0Provider clientId="__test_client_id__" domain="__test_domain__">
@@ -210,7 +210,7 @@ describe('withAuthenticationRequired', () => {
     mockClient.getUser.mockResolvedValueOnce({ name: '__test_user__' });
     mockClient.getUser.mockResolvedValueOnce(undefined);
     const context = React.createContext<Auth0ContextInterface>(initialContext);
-    const MyComponent = (): JSX.Element => <>Private</>;
+    const MyComponent = () => <>Private</>;
     const WrappedComponent = withAuthenticationRequired(MyComponent, {
       context,
     });
@@ -241,7 +241,7 @@ describe('withAuthenticationRequired', () => {
     mockClient.getUser.mockResolvedValueOnce(undefined);
     mockClient.getUser.mockResolvedValueOnce({ name: '__test_user__' });
     const context = React.createContext<Auth0ContextInterface>(initialContext);
-    const MyComponent = (): JSX.Element => <>Private</>;
+    const MyComponent = () => <>Private</>;
     const WrappedComponent = withAuthenticationRequired(MyComponent, {
       context,
     });

src/auth0-provider.tsx

@@ -132,7 +132,7 @@ const defaultOnRedirectCallback = (appState?: AppState): void => {
  *
  * Provides the Auth0Context to its child components.
  */
-const Auth0Provider = (opts: Auth0ProviderOptions): JSX.Element => {
+const Auth0Provider = (opts: Auth0ProviderOptions) => {
   const {
     children,
     skipRedirectCallback,
@@ -146,6 +146,11 @@ const Auth0Provider = (opts: Auth0ProviderOptions): JSX.Element => {
   const [state, dispatch] = useReducer(reducer, initialAuthState);
   const didInitialise = useRef(false);
 
+  const handleError = useCallback((error: Error) => {
+    dispatch({ type: 'ERROR', error });
+    return error;
+  }, []);
+
   useEffect(() => {
     if (didInitialise.current) {
       return;
@@ -164,10 +169,10 @@ const Auth0Provider = (opts: Auth0ProviderOptions): JSX.Element => {
         }
         dispatch({ type: 'INITIALISED', user });
       } catch (error) {
-        dispatch({ type: 'ERROR', error: loginError(error) });
+        handleError(loginError(error));
       }
     })();
-  }, [client, onRedirectCallback, skipRedirectCallback]);
+  }, [client, onRedirectCallback, skipRedirectCallback, handleError]);
 
   const loginWithRedirect = useCallback(
     (opts?: RedirectLoginOptions): Promise<void> => {
@@ -187,7 +192,7 @@ const Auth0Provider = (opts: Auth0ProviderOptions): JSX.Element => {
       try {
         await client.loginWithPopup(options, config);
       } catch (error) {
-        dispatch({ type: 'ERROR', error: loginError(error) });
+        handleError(loginError(error));
         return;
       }
       const user = await client.getUser();

src/with-auth0.tsx

@@ -30,10 +30,10 @@ const withAuth0 = <P extends WithAuth0Props>(
   Component: ComponentType<P>,
   context = Auth0Context
 ): ComponentType<Omit<P, keyof WithAuth0Props>> => {
-  return function WithAuth(props): JSX.Element {
+  return function WithAuth(props): React.JSX.Element {
     return (
       <context.Consumer>
-        {(auth: Auth0ContextInterface): JSX.Element => (
+        {(auth: Auth0ContextInterface): React.JSX.Element => (
           <Component {...(props as P)} auth0={auth} />
         )}
       </context.Consumer>

src/with-authentication-required.tsx

@@ -8,12 +8,12 @@ import Auth0Context, {
 /**
  * @ignore
  */
-const defaultOnRedirecting = (): JSX.Element => <></>;
+const defaultOnRedirecting = (): React.JSX.Element => <></>;
 
 /**
 * @ignore
 */
-const defaultOnBeforeAuthentication = async (): Promise<void> => {/* noop */};
+const defaultOnBeforeAuthentication = async (): Promise<void> => {/* noop */ };
 
 /**
  * @ignore
@@ -52,7 +52,7 @@ export interface WithAuthenticationRequiredOptions {
    *
    * Render a message to show that the user is being redirected to the login.
    */
-  onRedirecting?: () => JSX.Element;
+  onRedirecting?: () => React.JSX.Element;
   /**
    * ```js
    * withAuthenticationRequired(Profile, {
@@ -98,7 +98,7 @@ const withAuthenticationRequired = <P extends object>(
   Component: ComponentType<P>,
   options: WithAuthenticationRequiredOptions = {}
 ): FC<P> => {
-  return function WithAuthenticationRequired(props: P): JSX.Element {
+  return function WithAuthenticationRequired(props: P): React.JSX.Element {
     const {
       returnTo = defaultReturnTo,
       onRedirecting = defaultOnRedirecting,