From 36c101211f524e293c80e41b25bb00b9aa1fda83 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 1 Sep 2025 16:30:06 -0700 Subject: [PATCH] Migrate weapon and summon 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 weapon and summon components - Update imports from next/router to next/navigation - Replace router.locale with getCookie('NEXT_LOCALE') Weapon components migrated: - WeaponUnit, WeaponModal, WeaponKeySelect, WeaponHovercard - WeaponConflictModal, WeaponResult, WeaponLabelIcon Summon components migrated: - SummonUnit, SummonHovercard, SummonResult 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- components/summon/SummonHovercard/index.tsx | 8 ++++++-- components/summon/SummonResult/index.tsx | 8 ++++++-- components/summon/SummonUnit/index.tsx | 8 ++++++-- components/weapon/WeaponConflictModal/index.tsx | 8 ++++++-- components/weapon/WeaponHovercard/index.tsx | 8 ++++++-- components/weapon/WeaponKeySelect/index.tsx | 8 +++++--- components/weapon/WeaponLabelIcon/index.tsx | 9 ++++++--- components/weapon/WeaponModal/index.tsx | 7 +++++-- components/weapon/WeaponResult/index.tsx | 8 ++++++-- components/weapon/WeaponUnit/index.tsx | 8 ++++++-- 10 files changed, 58 insertions(+), 22 deletions(-) diff --git a/components/summon/SummonHovercard/index.tsx b/components/summon/SummonHovercard/index.tsx index d001f49e..aa1d478e 100644 --- a/components/summon/SummonHovercard/index.tsx +++ b/components/summon/SummonHovercard/index.tsx @@ -1,6 +1,8 @@ +'use client' import React from 'react' -import { useRouter } from 'next/router' +import { useRouter } from 'next/navigation' import { useTranslation } from 'next-i18next' +import { getCookie } from 'cookies-next' import { Hovercard, @@ -23,7 +25,9 @@ const SummonHovercard = (props: Props) => { const router = useRouter() const { t } = useTranslation('common') const locale = - router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string) + ? (getCookie('NEXT_LOCALE') as string) + : 'en' const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light'] diff --git a/components/summon/SummonResult/index.tsx b/components/summon/SummonResult/index.tsx index 4a7fe4d3..c4b6f4e3 100644 --- a/components/summon/SummonResult/index.tsx +++ b/components/summon/SummonResult/index.tsx @@ -1,5 +1,7 @@ +'use client' import React from 'react' -import { useRouter } from 'next/router' +import { useRouter } from 'next/navigation' +import { getCookie } from 'cookies-next' import UncapIndicator from '~components/uncap/UncapIndicator' import WeaponLabelIcon from '~components/weapon/WeaponLabelIcon' @@ -17,7 +19,9 @@ const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light'] const SummonResult = (props: Props) => { const router = useRouter() const locale = - router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string) + ? (getCookie('NEXT_LOCALE') as string) + : 'en' const summon = props.data diff --git a/components/summon/SummonUnit/index.tsx b/components/summon/SummonUnit/index.tsx index 3c77e1d8..0ca6ccff 100644 --- a/components/summon/SummonUnit/index.tsx +++ b/components/summon/SummonUnit/index.tsx @@ -1,8 +1,10 @@ +'use client' import React, { MouseEvent, useEffect, useState } from 'react' -import { useRouter } from 'next/router' +import { useRouter } from 'next/navigation' import { Trans, useTranslation } from 'next-i18next' import { AxiosResponse } from 'axios' import classNames from 'classnames' +import { getCookie } from 'cookies-next' import api from '~utils/api' import { appState } from '~utils/appState' @@ -50,7 +52,9 @@ const SummonUnit = ({ const { t } = useTranslation('common') const router = useRouter() const locale = - router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string) + ? (getCookie('NEXT_LOCALE') as string) + : 'en' // State: UI const [searchModalOpen, setSearchModalOpen] = useState(false) diff --git a/components/weapon/WeaponConflictModal/index.tsx b/components/weapon/WeaponConflictModal/index.tsx index ce1fe8d6..22be078b 100644 --- a/components/weapon/WeaponConflictModal/index.tsx +++ b/components/weapon/WeaponConflictModal/index.tsx @@ -1,6 +1,8 @@ +'use client' import React, { useEffect, useState } from 'react' -import { useRouter } from 'next/router' +import { useRouter } from 'next/navigation' import { Trans, useTranslation } from 'react-i18next' +import { getCookie } from 'cookies-next' import { Dialog } from '~components/common/Dialog' import DialogContent from '~components/common/DialogContent' @@ -26,7 +28,9 @@ const WeaponConflictModal = (props: Props) => { const router = useRouter() const { t } = useTranslation('common') const locale = - router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string) + ? (getCookie('NEXT_LOCALE') as string) + : 'en' // States const [open, setOpen] = useState(false) diff --git a/components/weapon/WeaponHovercard/index.tsx b/components/weapon/WeaponHovercard/index.tsx index 177a76b4..d94bdf81 100644 --- a/components/weapon/WeaponHovercard/index.tsx +++ b/components/weapon/WeaponHovercard/index.tsx @@ -1,7 +1,9 @@ +'use client' import React from 'react' -import { useRouter } from 'next/router' +import { useRouter } from 'next/navigation' import { useTranslation } from 'next-i18next' import classNames from 'classnames' +import { getCookie } from 'cookies-next' import { Hovercard, @@ -32,7 +34,9 @@ interface KeyNames { const WeaponHovercard = (props: Props) => { const router = useRouter() const locale = - router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string) + ? (getCookie('NEXT_LOCALE') as string) + : 'en' const { t } = useTranslation('common') diff --git a/components/weapon/WeaponKeySelect/index.tsx b/components/weapon/WeaponKeySelect/index.tsx index b2d30f3b..c263a1dd 100644 --- a/components/weapon/WeaponKeySelect/index.tsx +++ b/components/weapon/WeaponKeySelect/index.tsx @@ -1,7 +1,9 @@ +'use client' import React, { useEffect, useState } from 'react' -import { useRouter } from 'next/router' +import { useRouter } from 'next/navigation' import { useTranslation } from 'next-i18next' import classNames from 'classnames' +import { getCookie } from 'cookies-next' import Select from '~components/common/Select' import SelectGroup from '~components/common/SelectGroup' @@ -67,8 +69,8 @@ const WeaponKeySelect = React.forwardRef( ) { const router = useRouter() const locale = - router.locale && ['en', 'ja'].includes(router.locale) - ? router.locale + getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string) + ? (getCookie('NEXT_LOCALE') as string) : 'en' const { t } = useTranslation('common') diff --git a/components/weapon/WeaponLabelIcon/index.tsx b/components/weapon/WeaponLabelIcon/index.tsx index 49dd3bf1..cef07c1b 100644 --- a/components/weapon/WeaponLabelIcon/index.tsx +++ b/components/weapon/WeaponLabelIcon/index.tsx @@ -1,6 +1,8 @@ +'use client' import React from 'react' -import { useRouter } from 'next/router' +import { useRouter } from 'next/navigation' import classNames from 'classnames' +import { getCookie } from 'cookies-next' import styles from './index.module.scss' @@ -12,12 +14,13 @@ interface Props { const WeaponLabelIcon = (props: Props) => { const router = useRouter() + const locale = getCookie('NEXT_LOCALE') as string || 'en' const classes = classNames({ [styles.icon]: true, [styles.small]: props.size === 'small', [styles[props.labelType]]: true, - [styles.en]: router.locale === 'en', - [styles.ja]: router.locale === 'ja', + [styles.en]: locale === 'en', + [styles.ja]: locale === 'ja', }) return diff --git a/components/weapon/WeaponModal/index.tsx b/components/weapon/WeaponModal/index.tsx index 65dc991a..c4935faa 100644 --- a/components/weapon/WeaponModal/index.tsx +++ b/components/weapon/WeaponModal/index.tsx @@ -1,6 +1,7 @@ +'use client' import React, { PropsWithChildren, useEffect, useState } from 'react' import { getCookie } from 'cookies-next' -import { useRouter } from 'next/router' +import { useRouter } from 'next/navigation' import { Trans, useTranslation } from 'next-i18next' import { isEqual } from 'lodash' @@ -36,7 +37,9 @@ const WeaponModal = ({ }: PropsWithChildren) => { const router = useRouter() const locale = - router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string) + ? (getCookie('NEXT_LOCALE') as string) + : 'en' const { t } = useTranslation('common') // Cookies diff --git a/components/weapon/WeaponResult/index.tsx b/components/weapon/WeaponResult/index.tsx index ea2ab682..fb493535 100644 --- a/components/weapon/WeaponResult/index.tsx +++ b/components/weapon/WeaponResult/index.tsx @@ -1,5 +1,7 @@ +'use client' import React from 'react' -import { useRouter } from 'next/router' +import { useRouter } from 'next/navigation' +import { getCookie } from 'cookies-next' import UncapIndicator from '~components/uncap/UncapIndicator' import WeaponLabelIcon from '~components/weapon/WeaponLabelIcon' @@ -29,7 +31,9 @@ const Proficiency = [ const WeaponResult = (props: Props) => { const router = useRouter() const locale = - router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string) + ? (getCookie('NEXT_LOCALE') as string) + : 'en' const weapon = props.data return ( diff --git a/components/weapon/WeaponUnit/index.tsx b/components/weapon/WeaponUnit/index.tsx index d88cc8f7..11b62866 100644 --- a/components/weapon/WeaponUnit/index.tsx +++ b/components/weapon/WeaponUnit/index.tsx @@ -1,9 +1,11 @@ +'use client' import React, { useEffect, useState } from 'react' -import { useRouter } from 'next/router' +import { useRouter } from 'next/navigation' import { Trans, useTranslation } from 'next-i18next' import { AxiosResponse } from 'axios' import classNames from 'classnames' import clonedeep from 'lodash.clonedeep' +import { getCookie } from 'cookies-next' import api from '~utils/api' import { appState } from '~utils/appState' @@ -54,7 +56,9 @@ const WeaponUnit = ({ const { t } = useTranslation('common') const router = useRouter() const locale = - router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string) + ? (getCookie('NEXT_LOCALE') as string) + : 'en' // State: UI const [detailsModalOpen, setDetailsModalOpen] = useState(false)