From c7410326ffc6a3b77efe77aef5a8892554acca2b Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 1 Sep 2025 16:28:53 -0700 Subject: [PATCH] Migrate character components to App Router navigation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add 'use client' directives to all character components - Update imports from next/router to next/navigation - Replace router.locale with getCookie('NEXT_LOCALE') - Maintain type safety with proper type casting Components migrated: - CharacterUnit, CharacterModal, CharacterHovercard - CharacterConflictModal, CharacterResult 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- components/character/CharacterConflictModal/index.tsx | 10 ++++++++-- components/character/CharacterHovercard/index.tsx | 10 ++++++++-- components/character/CharacterModal/index.tsx | 10 ++++++++-- components/character/CharacterResult/index.tsx | 10 ++++++++-- components/character/CharacterUnit/index.tsx | 10 ++++++++-- 5 files changed, 40 insertions(+), 10 deletions(-) diff --git a/components/character/CharacterConflictModal/index.tsx b/components/character/CharacterConflictModal/index.tsx index b366ec5c..e0dfcec0 100644 --- a/components/character/CharacterConflictModal/index.tsx +++ b/components/character/CharacterConflictModal/index.tsx @@ -1,5 +1,8 @@ +'use client' + import React, { useEffect, useState } from 'react' -import { useRouter } from 'next/router' +import { useRouter, usePathname, useSearchParams } from 'next/navigation' +import { getCookie } from 'cookies-next' import { Trans, useTranslation } from 'next-i18next' import { Dialog } from '~components/common/Dialog' @@ -24,9 +27,12 @@ interface Props { const CharacterConflictModal = (props: Props) => { // Localization const router = useRouter() + const pathname = usePathname() + const searchParams = useSearchParams() const { t } = useTranslation('common') + const routerLocale = getCookie('NEXT_LOCALE') const locale = - router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + routerLocale && ['en', 'ja'].includes(routerLocale) ? routerLocale : 'en' // States const [open, setOpen] = useState(false) diff --git a/components/character/CharacterHovercard/index.tsx b/components/character/CharacterHovercard/index.tsx index af9257ba..50cd6a9c 100644 --- a/components/character/CharacterHovercard/index.tsx +++ b/components/character/CharacterHovercard/index.tsx @@ -1,5 +1,8 @@ +'use client' + import React from 'react' -import { useRouter } from 'next/router' +import { useRouter, usePathname, useSearchParams } from 'next/navigation' +import { getCookie } from 'cookies-next' import { useTranslation } from 'next-i18next' import { @@ -29,9 +32,12 @@ interface Props { const CharacterHovercard = (props: Props) => { const router = useRouter() + const pathname = usePathname() + const searchParams = useSearchParams() const { t } = useTranslation('common') + const routerLocale = getCookie('NEXT_LOCALE') const locale = - router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + routerLocale && ['en', 'ja'].includes(routerLocale) ? routerLocale : 'en' const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light'] const tintElement = Element[props.gridCharacter.object.element] diff --git a/components/character/CharacterModal/index.tsx b/components/character/CharacterModal/index.tsx index 8c5ca8c7..abdd39a2 100644 --- a/components/character/CharacterModal/index.tsx +++ b/components/character/CharacterModal/index.tsx @@ -1,6 +1,9 @@ +'use client' + // Core dependencies import React, { PropsWithChildren, useEffect, useState } from 'react' -import { useRouter } from 'next/router' +import { useRouter, usePathname, useSearchParams } from 'next/navigation' +import { getCookie } from 'cookies-next' import { Trans, useTranslation } from 'next-i18next' import isEqual from 'lodash/isEqual' @@ -60,8 +63,11 @@ const CharacterModal = ({ }: PropsWithChildren) => { // Router and localization const router = useRouter() + const pathname = usePathname() + const searchParams = useSearchParams() + const routerLocale = getCookie('NEXT_LOCALE') const locale = - router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + routerLocale && ['en', 'ja'].includes(routerLocale) ? routerLocale : 'en' const { t } = useTranslation('common') // State: Component diff --git a/components/character/CharacterResult/index.tsx b/components/character/CharacterResult/index.tsx index deb2deab..7814f677 100644 --- a/components/character/CharacterResult/index.tsx +++ b/components/character/CharacterResult/index.tsx @@ -1,5 +1,8 @@ +'use client' + import React from 'react' -import { useRouter } from 'next/router' +import { useRouter, usePathname, useSearchParams } from 'next/navigation' +import { getCookie } from 'cookies-next' import UncapIndicator from '~components/uncap/UncapIndicator' import WeaponLabelIcon from '~components/weapon/WeaponLabelIcon' @@ -15,8 +18,11 @@ const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light'] const CharacterResult = (props: Props) => { const router = useRouter() + const pathname = usePathname() + const searchParams = useSearchParams() + const routerLocale = getCookie('NEXT_LOCALE') const locale = - router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + routerLocale && ['en', 'ja'].includes(routerLocale) ? routerLocale : 'en' const character = props.data diff --git a/components/character/CharacterUnit/index.tsx b/components/character/CharacterUnit/index.tsx index e4fbb247..335a92cc 100644 --- a/components/character/CharacterUnit/index.tsx +++ b/components/character/CharacterUnit/index.tsx @@ -1,5 +1,8 @@ +'use client' + import React, { useEffect, useState } from 'react' -import { useRouter } from 'next/router' +import { useRouter, usePathname, useSearchParams } from 'next/navigation' +import { getCookie } from 'cookies-next' import { useSnapshot } from 'valtio' import { Trans, useTranslation } from 'next-i18next' import { AxiosResponse } from 'axios' @@ -57,8 +60,11 @@ const CharacterUnit = ({ // Translations and locale const { t } = useTranslation('common') const router = useRouter() + const pathname = usePathname() + const searchParams = useSearchParams() + const routerLocale = getCookie('NEXT_LOCALE') const locale = - router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + routerLocale && ['en', 'ja'].includes(routerLocale) ? routerLocale : 'en' // State snapshot const { party, grid } = useSnapshot(appState)