move error hook to hooks file

frontend/app/components/auth/auth.hooks.ts

@@ -1,5 +1,9 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef, useState, useMemo } from 'preact/hooks';
+import { useIntl } from 'react-intl';
+
+import { errorMessages, RequestError } from 'utils/errorUtils';
 import { parseMessage, postMessageToParent } from 'utils/post-message';
+import { messages } from './auth.messsages';
 
 function handleChangeIframeSize(element: HTMLElement) {
   const { top } = element.getBoundingClientRect();
@@ -80,3 +84,38 @@ export function useDropdown(disableClosing?: boolean) {
 
   return [rootRef, showDropdown, toggleDropdownState] as const;
 }
+
+export function useErrorMessage(): [string | null, (e: unknown) => void] {
+  const intl = useIntl();
+  const [invalidReason, setInvalidReason] = useState<string | null>(null);
+
+  return useMemo(() => {
+    let errorMessage = invalidReason;
+
+    if (invalidReason && messages[invalidReason]) {
+      errorMessage = intl.formatMessage(messages[invalidReason]);
+    }
+
+    if (invalidReason && errorMessages[invalidReason]) {
+      errorMessage = intl.formatMessage(errorMessages[invalidReason]);
+    }
+
+    function setError(err: unknown): void {
+      if (err === null) {
+        setInvalidReason(null);
+        return;
+      }
+
+      if (typeof err === 'string') {
+        setInvalidReason(err);
+        return;
+      }
+
+      const errorReason = err instanceof RequestError ? err.error : err instanceof Error ? err.message : 'error.0';
+
+      setInvalidReason(errorReason);
+    }
+
+    return [errorMessage, setError];
+  }, [intl, invalidReason]);
+}

frontend/app/components/auth/auth.tsx

@@ -15,8 +15,8 @@ import { ArrowIcon } from 'components/icons/arrow';
 import { Button } from './components/button';
 import { OAuth } from './components/oauth';
 import { messages } from './auth.messsages';
-import { useDropdown } from './auth.hooks';
-import { getProviders, getTokenInvalidReason, useErrorMessage } from './auth.utils';
+import { useDropdown, useErrorMessage } from './auth.hooks';
+import { getProviders, getTokenInvalidReason } from './auth.utils';
 import {
   oauthSignin,
   emailSignin,

frontend/app/components/auth/auth.utils.ts

@@ -1,8 +1,4 @@
-import { useMemo, useState } from 'preact/hooks';
-import { useIntl } from 'react-intl';
-
 import { isJwtExpired } from 'utils/jwt';
-import { errorMessages, RequestError } from 'utils/errorUtils';
 import { StaticStore } from 'common/static-store';
 import type { FormProvider, OAuthProvider } from 'common/types';
 
@@ -31,38 +27,3 @@ export function getTokenInvalidReason(token: string): null | keyof typeof messag
 
   return null;
 }
-
-export function useErrorMessage(): [string | null, (e: unknown) => void] {
-  const intl = useIntl();
-  const [invalidReason, setInvalidReason] = useState<string | null>(null);
-
-  return useMemo(() => {
-    let errorMessage = invalidReason;
-
-    if (invalidReason && messages[invalidReason]) {
-      errorMessage = intl.formatMessage(messages[invalidReason]);
-    }
-
-    if (invalidReason && errorMessages[invalidReason]) {
-      errorMessage = intl.formatMessage(errorMessages[invalidReason]);
-    }
-
-    function setError(err: unknown): void {
-      if (err === null) {
-        setInvalidReason(null);
-        return;
-      }
-
-      if (typeof err === 'string') {
-        setInvalidReason(err);
-        return;
-      }
-
-      const errorReason = err instanceof RequestError ? err.error : err instanceof Error ? err.message : 'error.0';
-
-      setInvalidReason(errorReason);
-    }
-
-    return [errorMessage, setError];
-  }, [intl, invalidReason]);
-}