Merge pull request #97 from elsoul/fix/router

fix routing. use i18n router
elsoul · Nov 25, 2023 · 35e4cb0 · 35e4cb0
2 parents 27e530c + 99cdaf4
commit 35e4cb0
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 44 deletions.
diff --git a/src/components/pages/action/ResetPasswordAction.tsx b/src/components/pages/action/ResetPasswordAction.tsx
@@ -10,7 +10,7 @@ import { z } from 'zod'
 import { useForm, Controller } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import useToastMessage from '@/hooks/useToastMessage'
-import { useRouter } from 'next/router'
+import useI18nRouter from '@/hooks/useI18nRouter'
 
 const schema = z.object({
   password: passwordSchema,
@@ -28,7 +28,7 @@ export default function ResetPasswordAction({ oobCode }: Props) {
   const { t } = useTranslation()
   const [email, setEmail] = useState('')
   const addToast = useToastMessage()
-  const router = useRouter()
+  const { routerPush } = useI18nRouter()
 
   const verifyEmail = useCallback(async () => {
     try {
@@ -43,9 +43,9 @@ export default function ResetPasswordAction({ oobCode }: Props) {
         title: t('auth:verifyErrorTitle'),
         description: t('auth:verifyErrorBody'),
       })
-      await router.push('/auth/login')
+      await routerPush('/auth/login')
     }
-  }, [router, t, oobCode, addToast])
+  }, [routerPush, t, oobCode, addToast])
 
   useEffect(() => {
     void (async () => {
@@ -79,7 +79,7 @@ export default function ResetPasswordAction({ oobCode }: Props) {
           title: t('auth:resetPasswordSuccessTitle'),
           description: t('auth:resetPasswordSuccessBody'),
         })
-        await router.push('/auth/login')
+        await routerPush('/auth/login')
       } catch (err) {
         console.error(err)
         addToast({
@@ -91,12 +91,12 @@ export default function ResetPasswordAction({ oobCode }: Props) {
         setRegisterLoading(false)
       }
     },
-    [oobCode, t, router, addToast]
+    [oobCode, t, routerPush, addToast],
   )
 
   const isDisabled = useMemo(
     () => isLoading || isRegisterLoading || errors.password != null,
-    [isLoading, isRegisterLoading, errors.password]
+    [isLoading, isRegisterLoading, errors.password],
   )
 
   if (isLoading) {
@@ -155,7 +155,7 @@ export default function ResetPasswordAction({ oobCode }: Props) {
                     isDisabled
                       ? 'cursor-not-allowed bg-gray-300 text-gray-500 dark:bg-gray-800 dark:text-gray-400'
                       : 'bg-gray-900 text-white hover:bg-gray-700 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-200',
-                    'w-full px-3 py-2 text-center text-lg font-bold'
+                    'w-full px-3 py-2 text-center text-lg font-bold',
                   )}
                 >
                   {t('auth:registerAccount')}

diff --git a/src/components/pages/action/VerifyEmailAction.tsx b/src/components/pages/action/VerifyEmailAction.tsx
@@ -4,10 +4,10 @@ import { useTranslation } from 'next-i18next'
 import { auth } from '@/lib/firebase'
 import { applyActionCode } from 'firebase/auth'
 import AppLoading from '@/components/loading/AppLoading'
-import { useRouter } from 'next/router'
 import { CheckCircleIcon } from '@heroicons/react/24/outline'
 import useToastMessage from '@/hooks/useToastMessage'
 import Button from '@/components/common/atoms/Button'
+import useI18nRouter from '@/hooks/useI18nRouter'
 
 type Props = {
   oobCode: string
@@ -16,7 +16,7 @@ type Props = {
 export default function VerifyEmailAction({ oobCode }: Props) {
   const [isLoading, setLoading] = useState(true)
   const { t } = useTranslation()
-  const router = useRouter()
+  const { routerPush } = useI18nRouter()
   const addToast = useToastMessage()
 
   const verifyUser = useCallback(async () => {
@@ -36,10 +36,10 @@ export default function VerifyEmailAction({ oobCode }: Props) {
           title: t('auth:verifyErrorTitle'),
           description: t('auth:verifyErrorBody'),
         })
-        await router.push('/auth/login')
+        await routerPush('/auth/login')
       }
     }
-  }, [router, t, oobCode, addToast, setLoading])
+  }, [routerPush, t, oobCode, addToast, setLoading])
 
   useEffect(() => {
     void (async () => {

diff --git a/src/components/pages/auth/RegisterScreen.tsx b/src/components/pages/auth/RegisterScreen.tsx
@@ -9,12 +9,12 @@ import {
 } from 'firebase/auth'
 import { auth } from '@/lib/firebase'
 import useToastMessage from '@/hooks/useToastMessage'
-import { useRouter } from 'next/router'
 import { emailSchema, passwordSchema, privacySchema } from '@/utils/form'
 import { z } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm, Controller } from 'react-hook-form'
 import Link from '@/components/routing/Link'
+import useI18nRouter from '@/hooks/useI18nRouter'
 
 const schema = z.object({
   email: emailSchema,
@@ -29,7 +29,7 @@ export default function RegisterScreen() {
   const isJapanese = useMemo(() => i18n.language === 'ja', [i18n])
   const [isLoading, setLoading] = useState(false)
   const addToast = useToastMessage()
-  const router = useRouter()
+  const { routerPush } = useI18nRouter()
 
   const {
     handleSubmit,
@@ -53,7 +53,7 @@ export default function RegisterScreen() {
           const userCredential = await createUserWithEmailAndPassword(
             auth,
             data.email,
-            data.password
+            data.password,
           )
           await sendEmailVerification(userCredential.user)
           await signOut(auth)
@@ -64,7 +64,7 @@ export default function RegisterScreen() {
             description: t('auth:sentConfirmEmailBody'),
           })
 
-          await router.push('/auth/check-email')
+          await routerPush('/auth/check-email')
         } catch (err) {
           console.error(err)
 
@@ -89,7 +89,7 @@ export default function RegisterScreen() {
         }
       }
     },
-    [t, isJapanese, addToast, router]
+    [t, isJapanese, addToast, routerPush],
   )
 
   const isDisabled = useMemo(
@@ -98,7 +98,7 @@ export default function RegisterScreen() {
       errors.email != null ||
       errors.password != null ||
       errors.privacy != null,
-    [isLoading, errors.email, errors.password, errors.privacy]
+    [isLoading, errors.email, errors.password, errors.privacy],
   )
 
   return (
@@ -211,7 +211,7 @@ export default function RegisterScreen() {
                     isDisabled
                       ? 'cursor-not-allowed bg-gray-300 text-gray-500 dark:bg-gray-800 dark:text-gray-400'
                       : 'bg-gray-900 text-white hover:bg-gray-700 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-200',
-                    'w-full px-3 py-2 text-center text-lg font-bold'
+                    'w-full px-3 py-2 text-center text-lg font-bold',
                   )}
                 >
                   {t('register')}

diff --git a/src/components/pages/auth/ResetPasswordScreen.tsx b/src/components/pages/auth/ResetPasswordScreen.tsx
@@ -10,7 +10,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm, Controller } from 'react-hook-form'
 import Link from '@/components/routing/Link'
 import useToastMessage from '@/hooks/useToastMessage'
-import { useRouter } from 'next/router'
+import useI18nRouter from '@/hooks/useI18nRouter'
 
 const schema = z.object({
   email: emailSchema,
@@ -22,7 +22,7 @@ export default function ResetPasswordScreen() {
   const { t } = useTranslation()
   const [isLoading, setLoading] = useState(false)
   const addToast = useToastMessage()
-  const router = useRouter()
+  const { routerPush } = useI18nRouter()
 
   const {
     handleSubmit,
@@ -46,7 +46,7 @@ export default function ResetPasswordScreen() {
             title: t('auth:sentResetPasswordRequest'),
             description: t('auth:confirmEmail'),
           })
-          await router.push('/auth/check-email')
+          await routerPush('/auth/check-email')
         } catch (err) {
           console.error(err)
           if (err instanceof Error && err.message === 'Not verified') {
@@ -76,12 +76,12 @@ export default function ResetPasswordScreen() {
         }
       }
     },
-    [t, addToast, router]
+    [t, addToast, routerPush],
   )
 
   const isDisabled = useMemo(
     () => isLoading || errors.email != null,
-    [isLoading, errors.email]
+    [isLoading, errors.email],
   )
 
   return (
@@ -138,7 +138,7 @@ export default function ResetPasswordScreen() {
                     isDisabled
                       ? 'cursor-not-allowed bg-gray-300 text-gray-500 dark:bg-gray-800 dark:text-gray-400'
                       : 'bg-gray-900 text-white hover:bg-gray-700 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-200',
-                    'w-full px-3 py-2 text-center text-lg font-bold'
+                    'w-full px-3 py-2 text-center text-lg font-bold',
                   )}
                 >
                   {t('auth:reset')}

diff --git a/src/layouts/auth/AuthLayout.tsx b/src/layouts/auth/AuthLayout.tsx
@@ -2,16 +2,14 @@ import type { ReactNode } from 'react'
 import { useEffect, useCallback } from 'react'
 import CommonFooter from '@/layouts/common/CommonFooter'
 import { User, signOut } from 'firebase/auth'
-
 import { fetchQuery, graphql } from 'react-relay'
-
-import { useRouter } from 'next/router'
 import AuthHeader from './AuthHeader'
 import { useRecoilState } from 'recoil'
 import { defaultUser, userState } from '@/store/user'
 import { auth } from '@/lib/firebase'
 import { createEnvironment } from '@/lib/relayEnvironment'
 import { AuthLayoutQuery } from '@/__generated__/AuthLayoutQuery.graphql'
+import useI18nRouter from '@/hooks/useI18nRouter'
 
 type Props = {
   children: ReactNode
@@ -30,7 +28,7 @@ export const authLayoutQuery = graphql`
 `
 
 export default function AuthLayout({ children }: Props) {
-  const router = useRouter()
+  const { router, routerPush } = useI18nRouter()
 
   const resetWindowScrollPosition = useCallback(() => {
     const element = document.getElementById(mainContentId)
@@ -59,7 +57,7 @@ export default function AuthLayout({ children }: Props) {
         const user = await fetchQuery<AuthLayoutQuery>(
           createEnvironment(),
           authLayoutQuery,
-          {}
+          {},
         ).toPromise()
         if (user?.me?.id) {
           setUser({
@@ -70,7 +68,7 @@ export default function AuthLayout({ children }: Props) {
             iconUrl: user.me.iconUrl ?? '',
             emailVerified: fbUser.emailVerified,
           })
-          await router.push('/user/vertex-ai')
+          await routerPush('/user/vertex-ai')
         } else {
           setUser(defaultUser)
           await signOut(auth)
@@ -79,7 +77,7 @@ export default function AuthLayout({ children }: Props) {
         setUser(defaultUser)
       }
     },
-    [setUser, router]
+    [setUser, routerPush],
   )
 
   useEffect(() => {

diff --git a/src/layouts/user/UserLayout.tsx b/src/layouts/user/UserLayout.tsx
@@ -2,7 +2,6 @@ import type { ReactNode } from 'react'
 import { useMemo, useCallback, useEffect, useState, Fragment } from 'react'
 import { Transition, Dialog, Menu } from '@headlessui/react'
 import { XMarkIcon, Bars3BottomLeftIcon } from '@heroicons/react/24/outline'
-import { useRouter } from 'next/router'
 import clsx from 'clsx'
 import { userHeaderNav, userMenuNav } from '@/config/navs'
 import { useTranslation } from 'next-i18next'
@@ -16,6 +15,7 @@ import Image from 'next/image'
 import { fetchQuery, graphql } from 'react-relay'
 import { UserLayoutQuery } from '@/__generated__/UserLayoutQuery.graphql'
 import { createEnvironment } from '@/lib/relayEnvironment'
+import useI18nRouter from '@/hooks/useI18nRouter'
 
 type Props = {
   children: ReactNode
@@ -34,7 +34,7 @@ export const userLayoutQuery = graphql`
 `
 
 export default function UserLayout({ children }: Props) {
-  const router = useRouter()
+  const { router, routerPush } = useI18nRouter()
   const [sidebarOpen, setSidebarOpen] = useState(false)
   const { t } = useTranslation()
 
@@ -70,7 +70,7 @@ export default function UserLayout({ children }: Props) {
         const user = await fetchQuery<UserLayoutQuery>(
           createEnvironment(),
           userLayoutQuery,
-          {}
+          {},
         ).toPromise()
         if (user?.me?.id) {
           setUser({
@@ -84,14 +84,14 @@ export default function UserLayout({ children }: Props) {
         } else {
           setUser(defaultUser)
           await signOut(auth)
-          await router.push('/auth/login')
+          await routerPush('/auth/login')
         }
       } else {
         setUser(defaultUser)
-        await router.push('/auth/login')
+        await routerPush('/auth/login')
       }
     },
-    [setUser, router]
+    [setUser, routerPush],
   )
 
   useEffect(() => {
@@ -171,7 +171,7 @@ export default function UserLayout({ children }: Props) {
                             asPathWithoutLang === item.href
                               ? 'bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-white'
                               : 'text-gray-700 hover:bg-gray-50 dark:text-gray-50 dark:hover:bg-gray-800',
-                            'group flex items-center px-2 py-2 text-base font-medium'
+                            'group flex items-center px-2 py-2 text-base font-medium',
                           )}
                         >
                           {item.icon && (
@@ -180,7 +180,7 @@ export default function UserLayout({ children }: Props) {
                                 asPathWithoutLang === item.href
                                   ? 'text-gray-900 dark:text-white'
                                   : 'text-gray-700 dark:text-gray-50',
-                                'mr-4 h-6 w-6 flex-shrink-0'
+                                'mr-4 h-6 w-6 flex-shrink-0',
                               )}
                               aria-hidden="true"
                             />
@@ -212,7 +212,7 @@ export default function UserLayout({ children }: Props) {
                       asPathWithoutLang === item.href
                         ? 'bg-gray-50 text-gray-900 dark:bg-gray-700 dark:text-white'
                         : 'text-gray-700 hover:bg-gray-50 dark:text-gray-50 dark:hover:bg-gray-800',
-                      'group flex items-center px-2 py-2 text-sm font-medium'
+                      'group flex items-center px-2 py-2 text-sm font-medium',
                     )}
                   >
                     {item.icon && (
@@ -221,7 +221,7 @@ export default function UserLayout({ children }: Props) {
                           asPathWithoutLang === item.href
                             ? 'text-gray-900  dark:text-white'
                             : 'text-gray-700 dark:text-gray-50',
-                          'mr-3 h-6 w-6 flex-shrink-0'
+                          'mr-3 h-6 w-6 flex-shrink-0',
                         )}
                         aria-hidden="true"
                       />
@@ -285,7 +285,7 @@ export default function UserLayout({ children }: Props) {
                               active
                                 ? 'bg-gray-50 text-gray-900 dark:bg-gray-700 dark:text-white'
                                 : '',
-                              'block px-4 py-2 text-sm text-gray-700 dark:text-gray-50'
+                              'block px-4 py-2 text-sm text-gray-700 dark:text-gray-50',
                             )}
                           >
                             {t(item.name)}
@@ -306,7 +306,7 @@ export default function UserLayout({ children }: Props) {
                             active
                               ? 'bg-gray-50 text-gray-900 dark:bg-gray-700 dark:text-white'
                               : '',
-                            'block px-4 py-2 text-sm text-gray-700 hover:cursor-pointer dark:text-gray-50'
+                            'block px-4 py-2 text-sm text-gray-700 hover:cursor-pointer dark:text-gray-50',
                           )}
                         >
                           {t('logout')}