From d48bdf25b6e5e8a70ba3256ba56e8300dfa1df24 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 1 Sep 2025 16:30:27 -0700 Subject: [PATCH] Migrate job and mastery 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 job and mastery components - Update imports from next/router to next/navigation - Replace router.locale with getCookie('NEXT_LOCALE') Job components migrated: - JobSkillItem, JobSection, JobDropdown, JobAccessoryPopover - JobAccessoryItem, JobSkillResult, JobImage Mastery components migrated: - ExtendedMasterySelect, AxSelect, AwakeningSelectWithInput 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- components/job/JobAccessoryItem/index.tsx | 7 +++---- components/job/JobAccessoryPopover/index.tsx | 7 +++---- components/job/JobDropdown/index.tsx | 8 ++++---- components/job/JobImage/index.tsx | 7 +++---- components/job/JobSection/index.tsx | 7 +++---- components/job/JobSkillItem/index.tsx | 7 +++---- components/job/JobSkillResult/index.tsx | 7 +++---- components/mastery/AwakeningSelectWithInput/index.tsx | 7 +++---- components/mastery/AxSelect/index.tsx | 7 +++---- components/mastery/ExtendedMasterySelect/index.tsx | 7 +++---- 10 files changed, 31 insertions(+), 40 deletions(-) diff --git a/components/job/JobAccessoryItem/index.tsx b/components/job/JobAccessoryItem/index.tsx index 954d5825..7cb55d44 100644 --- a/components/job/JobAccessoryItem/index.tsx +++ b/components/job/JobAccessoryItem/index.tsx @@ -1,5 +1,6 @@ +'use client' import React from 'react' -import { useRouter } from 'next/router' +import { getCookie } from 'cookies-next' import * as RadioGroup from '@radix-ui/react-radio-group' @@ -12,9 +13,7 @@ interface Props { const JobAccessoryItem = ({ accessory, selected }: Props) => { // Localization - const router = useRouter() - const locale = - router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + const locale = (getCookie('NEXT_LOCALE') as string) || 'en' return ( ( function useFieldSet(props, ref) { - // Set up router for locale - const router = useRouter() - const locale = router.locale || 'en' + // Set up locale from cookie + const locale = (getCookie('NEXT_LOCALE') as string) || 'en' // Set up translation const { t } = useTranslation('common') diff --git a/components/job/JobImage/index.tsx b/components/job/JobImage/index.tsx index a7c92305..40317f8f 100644 --- a/components/job/JobImage/index.tsx +++ b/components/job/JobImage/index.tsx @@ -1,5 +1,6 @@ +'use client' import React, { useState } from 'react' -import { useRouter } from 'next/router' +import { getCookie } from 'cookies-next' import classNames from 'classnames' import Button from '~components/common/Button' import JobAccessoryPopover from '~components/job/JobAccessoryPopover' @@ -27,9 +28,7 @@ const JobImage = ({ onAccessorySelected, }: Props) => { // Localization - const router = useRouter() - const locale = - router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + const locale = (getCookie('NEXT_LOCALE') as string) || 'en' // Component state const [open, setOpen] = useState(false) diff --git a/components/job/JobSection/index.tsx b/components/job/JobSection/index.tsx index 44a4f21a..5b6ed259 100644 --- a/components/job/JobSection/index.tsx +++ b/components/job/JobSection/index.tsx @@ -1,5 +1,6 @@ +'use client' import React, { useEffect, useState } from 'react' -import { useRouter } from 'next/router' +import { getCookie } from 'cookies-next' import { useSnapshot } from 'valtio' import { useTranslation } from 'next-i18next' import classNames from 'classnames' @@ -31,9 +32,7 @@ const JobSection = (props: Props) => { const { party } = useSnapshot(appState) const { t } = useTranslation('common') - const router = useRouter() - const locale = - router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + const locale = (getCookie('NEXT_LOCALE') as string) || 'en' // Data state const [job, setJob] = useState() diff --git a/components/job/JobSkillItem/index.tsx b/components/job/JobSkillItem/index.tsx index ee1b951e..98e5c891 100644 --- a/components/job/JobSkillItem/index.tsx +++ b/components/job/JobSkillItem/index.tsx @@ -1,5 +1,6 @@ +'use client' import React, { useState } from 'react' -import { useRouter } from 'next/router' +import { getCookie } from 'cookies-next' import { Trans, useTranslation } from 'next-i18next' import classNames from 'classnames' @@ -44,10 +45,8 @@ const JobSkillItem = React.forwardRef( forwardedRef ) { // Set up translation - const router = useRouter() const { t } = useTranslation('common') - const locale = - router.locale && ['en', 'ja'].includes(router.locale) + const locale = (getCookie('NEXT_LOCALE') as string) || 'en' ? router.locale : 'en' diff --git a/components/job/JobSkillResult/index.tsx b/components/job/JobSkillResult/index.tsx index 2eefa754..86d1f2b7 100644 --- a/components/job/JobSkillResult/index.tsx +++ b/components/job/JobSkillResult/index.tsx @@ -1,5 +1,6 @@ +'use client' import React, { useEffect, useState } from 'react' -import { useRouter } from 'next/router' +import { getCookie } from 'cookies-next' import classNames from 'classnames' import { SkillGroup, skillClassification } from '~data/skillGroups' @@ -11,9 +12,7 @@ interface Props { } const JobSkillResult = (props: Props) => { - const router = useRouter() - const locale = - router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + const locale = (getCookie('NEXT_LOCALE') as string) || 'en' const skill = props.data diff --git a/components/mastery/AwakeningSelectWithInput/index.tsx b/components/mastery/AwakeningSelectWithInput/index.tsx index a2216dc7..45e38cfc 100644 --- a/components/mastery/AwakeningSelectWithInput/index.tsx +++ b/components/mastery/AwakeningSelectWithInput/index.tsx @@ -1,5 +1,6 @@ +'use client' import React, { useEffect, useState } from 'react' -import { useRouter } from 'next/router' +import { getCookie } from 'cookies-next' import { useTranslation } from 'next-i18next' import classNames from 'classnames' @@ -40,9 +41,7 @@ const AwakeningSelectWithInput = ({ sendValues, }: Props) => { // Set up translations - const router = useRouter() - const locale = - router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + const locale = (getCookie('NEXT_LOCALE') as string) || 'en' const { t } = useTranslation('common') // State: Component diff --git a/components/mastery/AxSelect/index.tsx b/components/mastery/AxSelect/index.tsx index 4cf6865d..3ecb08c4 100644 --- a/components/mastery/AxSelect/index.tsx +++ b/components/mastery/AxSelect/index.tsx @@ -1,5 +1,6 @@ +'use client' import React, { useEffect, useState } from 'react' -import { useRouter } from 'next/router' +import { getCookie } from 'cookies-next' import { useTranslation } from 'next-i18next' import Input from '~components/common/Input' @@ -32,9 +33,7 @@ interface Props { } const AXSelect = (props: Props) => { - const router = useRouter() - const locale = - router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + const locale = (getCookie('NEXT_LOCALE') as string) || 'en' const { t } = useTranslation('common') const [openAX1, setOpenAX1] = useState(false) diff --git a/components/mastery/ExtendedMasterySelect/index.tsx b/components/mastery/ExtendedMasterySelect/index.tsx index 724fa624..abcefc49 100644 --- a/components/mastery/ExtendedMasterySelect/index.tsx +++ b/components/mastery/ExtendedMasterySelect/index.tsx @@ -1,6 +1,7 @@ +'use client' // Core dependencies import React, { useEffect, useState } from 'react' -import { useRouter } from 'next/router' +import { getCookie } from 'cookies-next' import { useTranslation } from 'next-i18next' import classNames from 'classnames' @@ -35,9 +36,7 @@ const ExtendedMasterySelect = ({ rightSelectValue, sendValues, }: Props) => { - const router = useRouter() - const locale = - router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + const locale = (getCookie('NEXT_LOCALE') as string) || 'en' const { t } = useTranslation('common') // UI state