Refactor query message toast

apps/frontend/app/routes/auth/login.tsx

@@ -1,15 +1,15 @@
 import { Box, Container, Flex, Heading } from '@radix-ui/themes';
 import { useMutation } from '@tanstack/react-query';
 import { useLocation, useNavigate } from 'react-router';
-import { Slide, toast, ToastContainer } from 'react-toastify';
+import { toast } from 'react-toastify/unstyled';
 import * as v from 'valibot';
 import { useResponseErrorHandler } from '../../hooks/ResponseHelper';
 import { useApi } from '../../providers/ApiProvider';
 import { formHook } from '../../providers/FormProvider';
 import type { Route } from './+types/login';
 import { SearchParamKeys } from '../../lib/constants';
-import { useEffect, useState } from 'react';
 import { AxiosError } from 'axios';
+import { useQueryMessage } from '../../hooks/useQueryMessage';
 
 const loginFormSchema = v.object({
   username: v.pipe(v.string(), v.trim(), v.minLength(1, 'Username is required')),
@@ -27,7 +27,7 @@ export default function LoginRoute() {
   const location = useLocation();
   const { tanstackApiClient } = useApi();
   const { defaultResponseErrorHandler } = useResponseErrorHandler();
-  const [previousSearchParamMessage, setPreviousSearchParamMessage] = useState<string>('');
+  useQueryMessage();
 
   const { mutateAsync: login, isPending } = useMutation({
     ...tanstackApiClient.mutation('post', '/api/auth/login').mutationOptions,
@@ -75,25 +75,6 @@ export default function LoginRoute() {
     },
   });
 
-  useEffect(() => {
-    const searchParams = new URLSearchParams(location.search);
-    const message = searchParams.get(SearchParamKeys.Message);
-    if (message && message !== previousSearchParamMessage) {
-      setPreviousSearchParamMessage(message);
-      toast.info(message, {
-        position: 'top-center',
-        autoClose: 5000,
-        hideProgressBar: false,
-        closeOnClick: true,
-        pauseOnHover: true,
-        draggable: false,
-        progress: undefined,
-        theme: 'colored',
-        toastId: 'login-route-info-message',
-      });
-    }
-  }, [location.search]);
-
   return (
     <>
       <Flex align="center" justify="center" style={{ minHeight: 'calc(100vh - 64px)' }}>
@@ -167,17 +148,6 @@ export default function LoginRoute() {
           </Box>
         </Container>
       </Flex>
-      <ToastContainer
-        position="top-center"
-        autoClose={false}
-        newestOnTop={false}
-        closeOnClick
-        rtl={false}
-        pauseOnFocusLoss
-        draggable={false}
-        theme="colored"
-        transition={Slide}
-      />
     </>
   );
 }