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}
-      />
     </>
   );
 }

apps/frontend/app/routes/init.tsx

@@ -1,13 +1,15 @@
 import { Box, Container, Flex, Heading, Text } from '@radix-ui/themes';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { 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 { TooltipContentContainer } from '../components/info';
 import { SearchParamKeys } from '../lib/constants';
+import { useQueryMessage } from '../hooks/useQueryMessage';
+import { QueryMessageCode, QueryMessageType } from '../lib/QueryMessages';
 
 const initFormSchema = v.object({
   username: v.pipe(v.string(), v.trim(), v.minLength(1, 'Username is required')),
@@ -19,12 +21,13 @@ export default function InitRoute() {
   const navigate = useNavigate();
   const { tanstackApiClient } = useApi();
   const { defaultResponseErrorHandler } = useResponseErrorHandler();
+  const { toSearchParamQueryMessage } = useQueryMessage();
 
   const { mutateAsync: initAdmin, isPending } = useMutation({
     ...tanstackApiClient.mutation('post', '/api/auth/init_admin').mutationOptions,
     onSuccess: async () => {
       const searchParams = new URLSearchParams();
-      searchParams.set(SearchParamKeys.Message, 'Initialization successful. Please log in.');
+      searchParams.set(SearchParamKeys.Message, toSearchParamQueryMessage(QueryMessageCode.InitializationSuccessful, QueryMessageType.Success));
       navigate(`/login?${searchParams.toString()}`);
     },
     onError: (error) => {
@@ -40,7 +43,7 @@ export default function InitRoute() {
       try {
         const data = await healthInfoQuery.queryFn!(...args);
         if (data.is_initialized) {
-          navigate('/');
+          navigate('/login', { replace: true });
           return data;
         }
         return data;
@@ -153,18 +156,6 @@ export default function InitRoute() {
           </Box>
         </Container>
       </Flex>
-
-      <ToastContainer
-        position="top-center"
-        autoClose={false}
-        newestOnTop={false}
-        closeOnClick
-        rtl={false}
-        pauseOnFocusLoss
-        draggable={false}
-        theme="colored"
-        transition={Slide}
-      />
     </>
   );
 }