granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: migrate all components from next-i18next to next-intl

Browse source 
- Update all component imports from useTranslation to useTranslations
- Replace react-i18next and next-i18next imports with next-intl
- Convert Trans components to t.rich() for rich text formatting
- Update all translation hook usage to next-intl API

This affects 80+ component files across the codebase including:
- Character, weapon, summon components
- Auth modals (login, signup, account)
- Party management components
- Filter and search components
- Toast notifications
- About pages and content updates

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Justin Edmund 2025-09-02 19:48:04 -07:00
parent a9493402e2
commit b34cc8a4eb
73 changed files with 257 additions and 250 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/ElementToggle/index.tsx
View file

@ -1,7 +1,7 @@
'use client'
import React, { useEffect, useState } from 'react'
import { getCookie } from 'cookies-next'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
import * as ToggleGroup from '@radix-ui/react-toggle-group'
@ -16,7 +16,7 @@ const ElementToggle = ({ currentElement, sendValue, ...props }: Props) => {
// Localization
const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
const { t } = useTranslation('common')
const t = useTranslations('common')
// State: Component
const [element, setElement] = useState(currentElement)

4
components/ErrorSection/index.tsx
View file

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'
import Link from 'next/link'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import Button from '~components/common/Button'
import { ResponseStatus } from '~types'
@ -13,7 +13,7 @@ interface Props {
const ErrorSection = ({ status }: Props) => {
// Import translations
const { t } = useTranslation('common')
const t = useTranslations('common')
const [statusText, setStatusText] = useState('')

4
components/Header/index.tsx
View file

@ -1,7 +1,7 @@
'use client'
import React, { useState } from 'react'
import { deleteCookie, getCookie } from 'cookies-next'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
import clonedeep from 'lodash.clonedeep'
import Link from 'next/link'
@ -35,7 +35,7 @@ import styles from './index.module.scss'
const Header = () => {
// Localization
const { t } = useTranslation('common')
const t = useTranslations('common')
// Locale
const locale = (getCookie('NEXT_LOCALE') as string) || 'en'

4
components/MentionList/index.tsx
View file

@ -5,7 +5,7 @@ import React, {
useImperativeHandle,
useState,
} from 'react'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import { getCookie } from 'cookies-next'
import { SuggestionProps } from '@tiptap/suggestion'
import classNames from 'classnames'
@ -37,7 +37,7 @@ export const MentionList = forwardRef<MentionRef, Props>(
({ items, ...props }: Props, forwardedRef) => {
const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
const { t } = useTranslation('common')
const t = useTranslations('common')
const [selectedIndex, setSelectedIndex] = useState(0)

4
components/about/AboutHead/index.tsx
View file

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'
import Head from 'next/head'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
interface Props {
page: string
@ -8,7 +8,7 @@ interface Props {
const AboutHead = ({ page }: Props) => {
// Import translations
const { t } = useTranslation('common')
const t = useTranslations('common')
// State
const [currentPage, setCurrentPage] = useState('about')

36
components/about/AboutPage/index.tsx
View file

@ -1,5 +1,5 @@
import React from 'react'
import { Trans, useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
import LinkItem from '../LinkItem'
@ -12,8 +12,8 @@ import styles from './index.module.scss'
interface Props {}
const AboutPage: React.FC<Props> = (props: Props) => {
const { t: common } = useTranslation('common')
const { t: about } = useTranslation('about')
const common = useTranslations('common')
const about = useTranslations('about')
const classes = classNames(styles.about, 'PageContent')
@ -22,7 +22,9 @@ const AboutPage: React.FC<Props> = (props: Props) => {
<h1>{common('about.segmented_control.about')}</h1>
<section>
<h2>
<Trans i18nKey="about:about.subtitle">
{/* TODO: Refactor to about.rich() */}
{about("about.subtitle")}
{/* <Trans i18nKey="about:about.subtitle">
Granblue.team is a tool to save and share team compositions for{' '}
<a
href="https://game.granbluefantasy.jp"
@ -32,7 +34,7 @@ const AboutPage: React.FC<Props> = (props: Props) => {
Granblue Fantasy
</a>
, a social RPG from Cygames.
</Trans>
</Trans> */}
</h2>
<p>{about('about.explanation.0')}</p>
<p>{about('about.explanation.1')}</p>
@ -54,7 +56,9 @@ const AboutPage: React.FC<Props> = (props: Props) => {
<section>
<h2>{about('about.credits.title')}</h2>
<p>
<Trans i18nKey="about:about.credits.maintainer">
{/* TODO: Refactor to about.rich() */}
{about('about.credits.maintainer')}
{/* <Trans i18nKey="about:about.credits.maintainer">
Granblue.team was built and is maintained by{' '}
<a
href="https://twitter.com/jedmund"
@ -64,10 +68,12 @@ const AboutPage: React.FC<Props> = (props: Props) => {
@jedmund
</a>
.
</Trans>
</Trans> */}
</p>
<p>
<Trans i18nKey="about:about.credits.assistance">
{/* TODO: Refactor to about.rich() */}
{about('about.credits.assistance')}
{/* <Trans i18nKey="about:about.credits.assistance">
Many thanks to{' '}
<a
href="https://twitter.com/lalalalinna"
@ -85,10 +91,12 @@ const AboutPage: React.FC<Props> = (props: Props) => {
@tarngerine
</a>
, who both provided a lot of help and advice as I was ramping up.
</Trans>
</Trans> */}
</p>
<p>
<Trans i18nKey="about:about.credits.support">
{/* TODO: Refactor to about.rich() */}
{about('about.credits.support')}
{/* <Trans i18nKey="about:about.credits.support">
Many thanks also go to everyone in{' '}
<a
href="https://game.granbluefantasy.jp/#guild/detail/1190185"
@ -100,7 +108,7 @@ const AboutPage: React.FC<Props> = (props: Props) => {
and the granblue-tools Discord for all of their help with with bug
testing, feature requests, and moral support. (P.S. We&apos;re
recruiting!)
</Trans>
</Trans> */}
</p>
</section>
@ -126,7 +134,9 @@ const AboutPage: React.FC<Props> = (props: Props) => {
<section>
<h2>{about('about.license.title')}</h2>
<p>
<Trans i18nKey="about:about.license.license">
{/* TODO: Refactor to about.rich() */}
{about('about.license.license')}
{/* <Trans i18nKey="about:about.license.license">
This app is licensed under{' '}
<a
href="https://choosealicense.com/licenses/agpl-3.0/"
@ -136,7 +146,7 @@ const AboutPage: React.FC<Props> = (props: Props) => {
GNU AGPLv3
</a>
.
</Trans>
</Trans> */}
</p>
<p>{about('about.license.explanation')}</p>
</section>

4
components/about/ContentUpdate/index.tsx
View file

@ -1,5 +1,5 @@
import React from 'react'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
import ChangelogUnit from '~components/about/ChangelogUnit'
@ -33,7 +33,7 @@ const ContentUpdate = ({
raidItems,
numNotes,
}: Props) => {
const { t: updates } = useTranslation('updates')
const updates = useTranslations('updates')
const date = new Date(dateString)

2
components/about/RoadmapPage/index.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
import LinkItem from '~components/about/LinkItem'

6
components/about/UpdatesPage/index.tsx
View file

@ -1,5 +1,5 @@
import React, { useState } from 'react'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
import ContentUpdate2022 from '../updates/ContentUpdate2022'
@ -9,8 +9,8 @@ import ContentUpdate2024 from '../updates/ContentUpdate2024'
import styles from './index.module.scss'
const UpdatesPage = () => {
const { t: common } = useTranslation('common')
const { t: updates } = useTranslation('updates')
const common = useTranslations('common')
const updates = useTranslations('updates')
const classes = classNames(styles.updates, 'PageContent')

6
components/about/updates/ContentUpdate2022/index.tsx
View file

@ -1,11 +1,11 @@
import React from 'react'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import ContentUpdate from '~components/about/ContentUpdate'
import styles from './index.module.scss'
const ContentUpdate2022 = () => {
const { t: updates } = useTranslation('updates')
const updates = useTranslations('updates')
const versionUpdates = {
'1.0.0': 5,
@ -42,7 +42,7 @@ const ContentUpdate2022 = () => {
<ul className={styles.list}>
{[...Array(versionUpdates['1.0.0'])].map((e, i) => (
<li key={`1.0.0-update-${i}`}>
{updates(`versions.1.0.0.features.${i}`)}
{updates(`versions.v1_0_0.features.${i}`)}
</li>
))}
</ul>

26
components/about/updates/ContentUpdate2023/index.tsx
View file

@ -1,5 +1,5 @@
import React from 'react'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import ContentUpdate from '~components/about/ContentUpdate'
import LinkItem from '../../LinkItem'
import DiscordIcon from '~public/icons/discord.svg'
@ -7,7 +7,7 @@ import DiscordIcon from '~public/icons/discord.svg'
import styles from './index.module.scss'
const ContentUpdate2023 = () => {
const { t: updates } = useTranslation('updates')
const updates = useTranslations('updates')
const versionUpdates = {
'1.0.1': 4,
@ -263,7 +263,7 @@ const ContentUpdate2023 = () => {
<ul className={styles.bugs}>
{[...Array(versionUpdates['1.2.1'].bugs)].map((e, i) => (
<li key={`1.2.1-bugfix-${i}`}>
{updates(`versions.1.2.1.bugs.${i}`)}
{updates(`versions.v1_2_1.bugs.${i}`)}
</li>
))}
</ul>
@ -289,19 +289,19 @@ const ContentUpdate2023 = () => {
{[...Array(versionUpdates['1.2.0'].updates)].map((e, i) => (
<li key={`1.2.0-update-${i}`}>
{image(
updates(`versions.1.2.0.features.${i}.title`),
updates(`versions.v1_2_0.features.${i}.title`),
`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
versionUpdates['1.2.0'].images[i],
'jpg'
)}
<h3>{updates(`versions.1.2.0.features.${i}.title`)}</h3>
<p>{updates(`versions.1.2.0.features.${i}.blurb`)}</p>
<h3>{updates(`versions.v1_2_0.features.${i}.title`)}</h3>
<p>{updates(`versions.v1_2_0.features.${i}.blurb`)}</p>
</li>
))}
</ul>
<div className={styles.foreword}>
<h2>Developer notes</h2>
{updates('versions.1.2.0.notes')
{updates('versions.v1_2_0.notes')
.split('\n')
.map((item, i) => (
<p key={`note-${i}`}>{item}</p>
@ -319,7 +319,7 @@ const ContentUpdate2023 = () => {
<ul className={styles.bugs}>
{[...Array(versionUpdates['1.2.0'].bugs)].map((e, i) => (
<li key={`1.2.0-bugfix-${i}`}>
{updates(`versions.1.2.0.bugs.${i}`)}
{updates(`versions.v1_2_0.bugs.${i}`)}
</li>
))}
</ul>
@ -601,13 +601,13 @@ const ContentUpdate2023 = () => {
{[...Array(versionUpdates['1.1.0'].updates)].map((e, i) => (
<li key={`1.1.0-update-${i}`}>
{image(
updates(`versions.1.1.0.features.${i}.title`),
updates(`versions.v1_1_0.features.${i}.title`),
`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
versionUpdates['1.1.0'].images[i],
'jpg'
)}
<h3>{updates(`versions.1.1.0.features.${i}.title`)}</h3>
<p>{updates(`versions.1.1.0.features.${i}.blurb`)}</p>
<h3>{updates(`versions.v1_1_0.features.${i}.title`)}</h3>
<p>{updates(`versions.v1_1_0.features.${i}.blurb`)}</p>
</li>
))}
</ul>
@ -617,7 +617,7 @@ const ContentUpdate2023 = () => {
<ul className={styles.bugs}>
{[...Array(versionUpdates['1.1.0'].bugs)].map((e, i) => (
<li key={`1.1.0-bugfix-${i}`}>
{updates(`versions.1.1.0.bugs.${i}`)}
{updates(`versions.v1_1_0.bugs.${i}`)}
</li>
))}
</ul>
@ -671,7 +671,7 @@ const ContentUpdate2023 = () => {
<ul className={styles.list}>
{[...Array(versionUpdates['1.0.1'])].map((e, i) => (
<li key={`1.0.1-update-${i}`}>
{updates(`versions.1.0.1.features.${i}`)}
{updates(`versions.v1_0_1.features.${i}`)}
</li>
))}
</ul>

4
components/about/updates/ContentUpdate2024/index.tsx
View file

@ -1,9 +1,9 @@
import React from 'react'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import ContentUpdate from '~components/about/ContentUpdate'
const ContentUpdate2024 = () => {
const { t: updates } = useTranslation('updates')
const updates = useTranslations('updates')
return (
<>

4
components/auth/AccountModal/index.tsx
View file

@ -3,7 +3,7 @@
import React, { useEffect, useState } from 'react'
import { getCookie, setCookie } from 'cookies-next'
import { useRouter } from 'next/navigation'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import { useTheme } from 'next-themes'
import { Dialog } from '~components/common/Dialog'
@ -38,7 +38,7 @@ interface Props {
const AccountModal = React.forwardRef<HTMLDivElement, Props>(
function AccountModal(props: Props, forwardedRef) {
// Localization
const { t } = useTranslation('common')
const t = useTranslations('common')
const router = useRouter()
// In App Router, locale is handled via cookies
const currentLocale = getCookie('NEXT_LOCALE') as string || 'en'

4
components/auth/LoginModal/index.tsx
View file

@ -3,7 +3,7 @@
import React, { useEffect, useState } from 'react'
import { setCookie } from 'cookies-next'
import { useRouter } from 'next/navigation'
import { useTranslation } from 'react-i18next'
import { useTranslations } from 'next-intl'
import axios, { AxiosError, AxiosResponse } from 'axios'
import api from '~utils/api'
@ -37,7 +37,7 @@ interface Props {
const LoginModal = (props: Props) => {
const router = useRouter()
const { t } = useTranslation('common')
const t = useTranslations('common')
// Set up form states and error handling
const [formValid, setFormValid] = useState(false)

4
components/auth/SignupModal/index.tsx
View file

@ -3,7 +3,7 @@
import React, { useEffect, useState } from 'react'
import { setCookie, getCookie } from 'cookies-next'
import { useRouter } from 'next/navigation'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import { AxiosResponse } from 'axios'
import api from '~utils/api'
@ -37,7 +37,7 @@ const emailRegex =
const SignupModal = (props: Props) => {
const router = useRouter()
const { t } = useTranslation('common')
const t = useTranslations('common')
// Set up form states and error handling
const [formValid, setFormValid] = useState(false)

8
components/character/CharacterConflictModal/index.tsx
View file

@ -3,7 +3,7 @@
import React, { useEffect, useState } from 'react'
import { useRouter, usePathname, useSearchParams } from 'next/navigation'
import { getCookie } from 'cookies-next'
import { Trans, useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import { Dialog } from '~components/common/Dialog'
import DialogContent from '~components/common/DialogContent'
@ -29,7 +29,7 @@ const CharacterConflictModal = (props: Props) => {
const router = useRouter()
const pathname = usePathname()
const searchParams = useSearchParams()
const { t } = useTranslation('common')
const t = useTranslations('common')
const routerLocale = getCookie('NEXT_LOCALE')
const locale =
routerLocale && ['en', 'ja'].includes(routerLocale) ? routerLocale : 'en'
@ -89,7 +89,9 @@ const CharacterConflictModal = (props: Props) => {
>
<div className={styles.content}>
<p>
<Trans i18nKey="modals.conflict.character"></Trans>
{t.rich('modals.conflict.character', {
strong: (chunks) => <strong>{chunks}</strong>
})}
</p>
<div className={styles.diagram}>
<ul>

4
components/character/CharacterGrid/index.tsx
View file

@ -2,7 +2,7 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { getCookie } from 'cookies-next'
import { useSnapshot } from 'valtio'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import { AxiosError, AxiosResponse } from 'axios'
import debounce from 'lodash.debounce'
@ -33,7 +33,7 @@ const CharacterGrid = (props: Props) => {
const numCharacters: number = 5
// Localization
const { t } = useTranslation('common')
const t = useTranslations('common')
// Cookies
const cookie = getCookie('account')

4
components/character/CharacterHovercard/index.tsx
View file

@ -3,7 +3,7 @@
import React from 'react'
import { useRouter, usePathname, useSearchParams } from 'next/navigation'
import { getCookie } from 'cookies-next'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import {
Hovercard,
@ -34,7 +34,7 @@ const CharacterHovercard = (props: Props) => {
const router = useRouter()
const pathname = usePathname()
const searchParams = useSearchParams()
const { t } = useTranslation('common')
const t = useTranslations('common')
const routerLocale = getCookie('NEXT_LOCALE')
const locale =
routerLocale && ['en', 'ja'].includes(routerLocale) ? routerLocale : 'en'

21
components/character/CharacterModal/index.tsx
View file

@ -4,7 +4,7 @@
import React, { PropsWithChildren, useEffect, useState } from 'react'
import { useRouter, usePathname, useSearchParams } from 'next/navigation'
import { getCookie } from 'cookies-next'
import { Trans, useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import isEqual from 'lodash/isEqual'
// UI dependencies
@ -68,7 +68,7 @@ const CharacterModal = ({
const routerLocale = getCookie('NEXT_LOCALE')
const locale =
routerLocale && ['en', 'ja'].includes(routerLocale) ? routerLocale : 'en'
const { t } = useTranslation('common')
const t = useTranslations('common')
// State: Component
const [open, setOpen] = useState(false)
@ -287,16 +287,13 @@ const CharacterModal = ({
const confirmationAlert = (
<Alert
message={
<span>
<Trans i18nKey="alert.unsaved_changes.object">
You will lose all changes to{' '}
<strong>{{ objectName: gridCharacter.object.name[locale] }}</strong>{' '}
if you continue.
<br />
<br />
Are you sure you want to continue without saving?
</Trans>
</span>
<>
{t.rich('alert.unsaved_changes.object', {
objectName: gridCharacter.object.name[locale],
strong: (chunks) => <strong>{chunks}</strong>,
br: () => <br />
})}
</>
}
open={alertOpen}
primaryActionText={t('alert.unsaved_changes.buttons.confirm')}

4
components/character/CharacterSearchFilterBar/index.tsx
View file

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import cloneDeep from 'lodash.clonedeep'
import SearchFilter from '~components/search/SearchFilter'
@ -19,7 +19,7 @@ interface Props {
}
const CharacterSearchFilterBar = (props: Props) => {
const { t } = useTranslation('common')
const t = useTranslations('common')
const [rarityMenu, setRarityMenu] = useState(false)
const [elementMenu, setElementMenu] = useState(false)

15
components/character/CharacterUnit/index.tsx
View file

@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react'
import { useRouter, usePathname, useSearchParams } from 'next/navigation'
import { getCookie } from 'cookies-next'
import { useSnapshot } from 'valtio'
import { Trans, useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import { AxiosResponse } from 'axios'
import classNames from 'classnames'
import cloneDeep from 'lodash.clonedeep'
@ -58,7 +58,7 @@ const CharacterUnit = ({
updateTranscendence,
}: Props) => {
// Translations and locale
const { t } = useTranslation('common')
const t = useTranslations('common')
const router = useRouter()
const pathname = usePathname()
const searchParams = useSearchParams()
@ -268,11 +268,12 @@ const CharacterUnit = ({
cancelAction={() => setAlertOpen(false)}
cancelActionText={t('buttons.cancel')}
message={
<Trans i18nKey="modals.characters.messages.remove">
Are you sure you want to remove{' '}
<strong>{{ character: gridCharacter?.object.name[locale] }}</strong>{' '}
from your team?
</Trans>
<>
{t.rich('modals.characters.messages.remove', {
character: gridCharacter?.object.name[locale],
strong: (chunks) => <strong>{chunks}</strong>
})}
</>
}
/>
)

4
components/common/Editor/index.tsx
View file

@ -2,7 +2,7 @@
import { ComponentProps, useCallback, useEffect } from 'react'
import { useEditor, EditorContent } from '@tiptap/react'
import { getCookie } from 'cookies-next'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import StarterKit from '@tiptap/starter-kit'
import Link from '@tiptap/extension-link'
@ -48,7 +48,7 @@ const Editor = ({
// Hooks: Locale
const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
const { t } = useTranslation('common')
const t = useTranslations('common')
useEffect(() => {
editor?.commands.setContent(formatContent(content))

4
components/common/MentionTypeahead/index.tsx
View file

@ -1,7 +1,7 @@
import React from 'react'
import { useState } from 'react'
import { getCookie } from 'cookies-next'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import type {
Option,
@ -47,7 +47,7 @@ const MentionTypeahead = React.forwardRef<Typeahead, Props>(function Typeahead(
{ label, description, placeholder, inclusions, exclusions, ...props }: Props,
forwardedRef
) {
const { t } = useTranslation('common')
const t = useTranslations('common')
const locale = getCookie('NEXT_LOCALE')
? (getCookie('NEXT_LOCALE') as string)
: 'en'

4
components/common/SelectWithInput/index.tsx
View file

@ -2,7 +2,7 @@
// Core dependencies
import React, { useEffect, useState } from 'react'
import { getCookie } from 'cookies-next'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
// UI Dependencies
@ -41,7 +41,7 @@ const SelectWithInput = ({
sendValues,
}: Props) => {
const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
const { t } = useTranslation('common')
const t = useTranslations('common')
// UI state
const [open, setOpen] = useState(false)

4
components/common/ToolbarButton/index.tsx
View file

@ -1,4 +1,4 @@
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
import { Editor } from '@tiptap/react'
@ -15,7 +15,7 @@ interface Props {
}
const ToolbarIcon = ({ editor, action, level, icon, onClick }: Props) => {
const { t } = useTranslation('common')
const t = useTranslations('common')
const classes = classNames({
[styles.button]: true,
[styles.active]: level

4
components/dialogs/DeleteTeamAlert/index.tsx
View file

@ -1,5 +1,5 @@
import React from 'react'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import Alert from '~components/common/Alert'
interface Props {
@ -9,7 +9,7 @@ interface Props {
}
const DeleteTeamAlert = ({ open, deleteCallback, onOpenChange }: Props) => {
const { t } = useTranslation('common')
const t = useTranslations('common')
function deleteParty() {
deleteCallback()

27
components/dialogs/RemixTeamAlert/index.tsx
View file

@ -1,5 +1,5 @@
import React from 'react'
import { Trans, useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import Alert from '~components/common/Alert'
interface Props {
@ -17,7 +17,7 @@ const RemixTeamAlert = ({
remixCallback,
onOpenChange,
}: Props) => {
const { t } = useTranslation('common')
const t = useTranslations('common')
function remixParty() {
remixCallback()
@ -36,18 +36,19 @@ const RemixTeamAlert = ({
cancelActionText={t('modals.remix_team.buttons.cancel')}
message={
creator ? (
<Trans i18nKey="modals.remix_team.description.creator">
Remixing a team makes a copy of it in your account so you can make
your own changes.\n\nYou&apos;re already the creator of{' '}
<strong>{{ name: name }}</strong>, are you sure you want to remix
it?
</Trans>
<>
{t.rich('modals.remix_team.description.creator', {
name: name,
strong: (chunks) => <strong>{chunks}</strong>
})}
</>
) : (
<Trans i18nKey="modals.remix_team.description.viewer">
Remixing a team makes a copy of it in your account so you can make
your own changes.\n\nWould you like to remix{' '}
<strong>{{ name: name }}</strong>?
</Trans>
<>
{t.rich('modals.remix_team.description.viewer', {
name: name,
strong: (chunks) => <strong>{chunks}</strong>
})}
</>
)
}
/>

4
components/extra/ExtraSummonsGrid/index.tsx
View file

@ -1,5 +1,5 @@
import React from 'react'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import SummonUnit from '~components/summon/SummonUnit'
import { SearchableObject } from '~types'
import styles from './index.module.scss'
@ -20,7 +20,7 @@ interface Props {
const ExtraSummonsGrid = (props: Props) => {
const numSummons: number = 2
const { t } = useTranslation('common')
const t = useTranslations('common')
return (
<div className={styles.container}>

2
components/extra/ExtraWeaponsGrid/index.tsx
View file

@ -1,5 +1,5 @@
import React, { useState } from 'react'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import Switch from '~components/common/Switch'
import WeaponUnit from '~components/weapon/WeaponUnit'

15
components/extra/GuidebookUnit/index.tsx
View file

@ -1,7 +1,7 @@
'use client'
import React, { useEffect, useState } from 'react'
import { getCookie } from 'cookies-next'
import { Trans, useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
import Alert from '~components/common/Alert'
@ -36,7 +36,7 @@ const GuidebookUnit = ({
updateObject,
}: Props) => {
// Translations and locale
const { t } = useTranslation('common')
const t = useTranslations('common')
const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
// State: UI
@ -142,11 +142,12 @@ const GuidebookUnit = ({
cancelAction={() => setAlertOpen(false)}
cancelActionText={t('buttons.cancel')}
message={
<Trans i18nKey="modals.guidebooks.messages.remove">
Are you sure you want to remove{' '}
<strong>{{ guidebook: guidebook?.name[locale] }}</strong> from your
team?
</Trans>
<>
{t.rich('modals.guidebooks.messages.remove', {
guidebook: guidebook?.name[locale],
strong: (chunks) => <strong>{chunks}</strong>
})}
</>
}
/>
)

4
components/extra/GuidebooksGrid/index.tsx
View file

@ -1,5 +1,5 @@
import React from 'react'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
import GuidebookUnit from '../GuidebookUnit'
@ -24,7 +24,7 @@ const GuidebooksGrid = ({
removeGuidebook,
updateObject,
}: Props) => {
const { t } = useTranslation('common')
const t = useTranslations('common')
const classes = classNames({
[styles.guidebooks]: true,

4
components/filters/FilterBar/index.tsx
View file

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import { getCookie } from 'cookies-next'
import classNames from 'classnames'
import equals from 'fast-deep-equal'
@ -29,7 +29,7 @@ interface Props {
const FilterBar = (props: Props) => {
// Set up translation
const { t } = useTranslation('common')
const t = useTranslations('common')
const [scrolled, setScrolled] = useState(false)

10
components/filters/FilterModal/index.tsx
View file

@ -1,7 +1,7 @@
'use client'
import React, { useEffect, useRef, useState } from 'react'
import { getCookie, setCookie } from 'cookies-next'
import { Trans, useTranslation } from 'react-i18next'
import { useTranslations } from 'next-intl'
import { Dialog, DialogTrigger } from '~components/common/Dialog'
import DialogHeader from '~components/common/DialogHeader'
@ -37,7 +37,7 @@ const FilterModal = (props: Props) => {
const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
// Set up translation
const { t } = useTranslation('common')
const t = useTranslations('common')
// Refs
const headerRef = React.createRef<HTMLDivElement>()
@ -441,10 +441,12 @@ const FilterModal = (props: Props) => {
return (
<div className={styles.notice}>
<p>
<Trans i18nKey="modals.filters.notice">
{/* TODO: Refactor to t.rich() */}
{/* <Trans i18nKey="modals.filters.notice">
Filters set on <strong>user profiles</strong> and in{' '}
<strong>Your saved teams</strong> will not be saved
</Trans>
</Trans> */}
{t('modals.filters.notice')}
</p>
</div>
)

4
components/head/NewHead/index.tsx
View file

@ -1,10 +1,10 @@
import React from 'react'
import Head from 'next/head'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
const NewHead = () => {
// Import translations
const { t } = useTranslation('common')
const t = useTranslations('common')
return (
<Head>

4
components/head/ProfileHead/index.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'
import Head from 'next/head'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
interface Props {
user: User
@ -8,7 +8,7 @@ interface Props {
const ProfileHead = ({ user }: Props) => {
// Import translations
const { t } = useTranslation('common')
const t = useTranslations('common')
return (
<Head>

4
components/head/SavedHead/index.tsx
View file

@ -1,10 +1,10 @@
import React from 'react'
import Head from 'next/head'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
const SavedHead = () => {
// Import translations
const { t } = useTranslation('common')
const t = useTranslations('common')
return (
<Head>

4
components/head/TeamsHead/index.tsx
View file

@ -1,10 +1,10 @@
import React from 'react'
import Head from 'next/head'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
const TeamsHead = () => {
// Import translations
const { t } = useTranslation('common')
const t = useTranslations('common')
return (
<Head>

4
components/job/JobAccessoryPopover/index.tsx
View file

@ -1,7 +1,7 @@
'use client'
import React, { PropsWithChildren, useEffect, useState } from 'react'
import { getCookie } from 'cookies-next'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
import capitalizeFirstLetter from '~utils/capitalizeFirstLetter'
@ -40,7 +40,7 @@ const JobAccessoryPopover = ({
onOpenChange,
}: PropsWithChildren<Props>) => {
// Localization
const { t } = useTranslation('common')
const t = useTranslations('common')
const locale = (getCookie('NEXT_LOCALE') as string) || 'en'

4
components/job/JobDropdown/index.tsx
View file

@ -2,7 +2,7 @@
import React, { useEffect, useState } from 'react'
import { getCookie } from 'cookies-next'
import { useSnapshot } from 'valtio'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import Select from '~components/common/Select'
import SelectItem from '~components/common/SelectItem'
@ -26,7 +26,7 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
// Set up translation
const { t } = useTranslation('common')
const t = useTranslations('common')
// Create snapshot of app state
const { party } = useSnapshot(appState)

4
components/job/JobSection/index.tsx
View file

@ -2,7 +2,7 @@
import React, { useEffect, useState } from 'react'
import { getCookie } from 'cookies-next'
import { useSnapshot } from 'valtio'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
import JobDropdown from '~components/job/JobDropdown'
@ -30,7 +30,7 @@ interface Props {
const JobSection = (props: Props) => {
const { party } = useSnapshot(appState)
const { t } = useTranslation('common')
const t = useTranslations('common')
const locale = (getCookie('NEXT_LOCALE') as string) || 'en'

15
components/job/JobSkillItem/index.tsx
View file

@ -1,7 +1,7 @@
'use client'
import React, { useState } from 'react'
import { getCookie } from 'cookies-next'
import { Trans, useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
import Alert from '~components/common/Alert'
@ -45,7 +45,7 @@ const JobSkillItem = React.forwardRef<HTMLDivElement, Props>(
forwardedRef
) {
// Set up translation
const { t } = useTranslation('common')
const t = useTranslations('common')
const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
? router.locale
: 'en'
@ -139,11 +139,12 @@ const JobSkillItem = React.forwardRef<HTMLDivElement, Props>(
cancelAction={() => setAlertOpen(false)}
cancelActionText={t('buttons.cancel')}
message={
<Trans i18nKey="modals.job_skills.messages.remove">
Are you sure you want to remove{' '}
<strong>{{ job_skill: skill?.name[locale] }}</strong> from your
team?
</Trans>
<>
{t.rich('modals.job_skills.messages.remove', {
job_skill: skill?.name[locale],
strong: (chunks) => <strong>{chunks}</strong>
})}
</>
}
/>
)

4
components/job/JobSkillSearchFilterBar/index.tsx
View file

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useTranslations } from 'next-intl'
import Select from '~components/common/Select'
import SelectItem from '~components/common/SelectItem'
@ -12,7 +12,7 @@ interface Props {
const JobSkillSearchFilterBar = (props: Props) => {
// Set up translation
const { t } = useTranslation('common')
const t = useTranslations('common')
const [open, setOpen] = useState(false)
const [currentGroup, setCurrentGroup] = useState(-1)

4
components/mastery/AwakeningSelectWithInput/index.tsx
View file

@ -1,7 +1,7 @@
'use client'
import React, { useEffect, useState } from 'react'
import { getCookie } from 'cookies-next'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
// UI Dependencies
@ -42,7 +42,7 @@ const AwakeningSelectWithInput = ({
}: Props) => {
// Set up translations
const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
const { t } = useTranslation('common')
const t = useTranslations('common')
// State: Component
const [open, setOpen] = useState(false)

4
components/mastery/AxSelect/index.tsx
View file

@ -1,7 +1,7 @@
'use client'
import React, { useEffect, useState } from 'react'
import { getCookie } from 'cookies-next'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import Input from '~components/common/Input'
import Select from '~components/common/Select'
@ -34,7 +34,7 @@ interface Props {
const AXSelect = (props: Props) => {
const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
const { t } = useTranslation('common')
const t = useTranslations('common')
const [openAX1, setOpenAX1] = useState(false)
const [openAX2, setOpenAX2] = useState(false)

4
components/mastery/ExtendedMasterySelect/index.tsx
View file

@ -2,7 +2,7 @@
// Core dependencies
import React, { useEffect, useState } from 'react'
import { getCookie } from 'cookies-next'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
// UI Dependencies
@ -37,7 +37,7 @@ const ExtendedMasterySelect = ({
sendValues,
}: Props) => {
const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
const { t } = useTranslation('common')
const t = useTranslations('common')
// UI state
const [leftSelectOpen, setLeftSelectOpen] = useState(false)

20
components/party/EditPartyModal/index.tsx
View file

@ -1,6 +1,6 @@
import React, { useEffect, useRef, useState } from 'react'
import { useSnapshot } from 'valtio'
import { Trans, useTranslation } from 'react-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
import debounce from 'lodash.debounce'
@ -46,7 +46,7 @@ const EditPartyModal = ({
...props
}: Props) => {
// Set up translation
const { t } = useTranslation('common')
const t = useTranslations('common')
// Set up reactive state
const { party } = useSnapshot(appState)
@ -382,18 +382,10 @@ const EditPartyModal = ({
<Alert
message={
<span>
<Trans i18nKey="alert.unsaved_changes.party">
You will lose all changes to your party{' '}
<strong>
{{
objectName: name || capitalizeFirstLetter(t('untitled')),
}}
</strong>{' '}
if you continue.
<br />
<br />
Are you sure you want to continue without saving?
</Trans>
{/* TODO: Refactor to t.rich() */}
{t('alert.unsaved_changes.party', {
objectName: name || capitalizeFirstLetter(t('untitled'))
})}
</span>
}
open={alertOpen}

4
components/party/Party/index.tsx
View file

@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react'
import { getCookie } from 'cookies-next'
import { useRouter } from 'next/navigation'
import { subscribe, useSnapshot } from 'valtio'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import clonedeep from 'lodash.clonedeep'
import Alert from '~components/common/Alert'
@ -44,7 +44,7 @@ const Party = (props: Props) => {
const router = useRouter()
// Localization
const { t } = useTranslation('common')
const t = useTranslations('common')
// Set up states
const { party } = useSnapshot(appState)

4
components/party/PartyDropdown/index.tsx
View file

@ -4,7 +4,7 @@
import React, { useEffect, useState } from 'react'
import { useRouter, usePathname } from 'next/navigation'
import { useSnapshot } from 'valtio'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
// Dependencies: Common
import Button from '~components/common/Button'
@ -45,7 +45,7 @@ const PartyDropdown = ({
teamVisibilityCallback,
}: Props) => {
// Localization
const { t } = useTranslation('common')
const t = useTranslations('common')
// Router
const router = useRouter()

4
components/party/PartyFooter/index.tsx
View file

@ -3,7 +3,7 @@
import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { useSnapshot } from 'valtio'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import clonedeep from 'lodash.clonedeep'
import DOMPurify from 'dompurify'
@ -38,7 +38,7 @@ interface Props {
}
const PartyFooter = (props: Props) => {
const { t } = useTranslation('common')
const t = useTranslations('common')
const router = useRouter()
const { party: partySnapshot } = useSnapshot(appState)

4
components/party/PartyHead/index.tsx
View file

@ -3,7 +3,7 @@
import React from 'react'
import Head from 'next/head'
import { getCookie } from 'cookies-next'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import api from '~utils/api'
import generateTitle from '~utils/generateTitle'
@ -15,7 +15,7 @@ interface Props {
const PartyHead = ({ party, meta }: Props) => {
// Import translations
const { t } = useTranslation('common')
const t = useTranslations('common')
// Get locale from cookie
const cookieLocale = getCookie('NEXT_LOCALE') as string

8
components/party/PartyHeader/index.tsx
View file

@ -1,11 +1,11 @@
'use client'
import React, { useState } from 'react'
import Link from 'next/link'
import { useRouter, usePathname, useSearchParams } from 'next/navigation'
import { Link } from '~/i18n/navigation'
import { useRouter, usePathname, useSearchParams } from '~/i18n/navigation'
import { getCookie } from 'cookies-next'
import { useSnapshot } from 'valtio'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
import Button from '~components/common/Button'
@ -50,7 +50,7 @@ interface Props {
const PartyHeader = (props: Props) => {
const { party } = useSnapshot(appState)
const { t } = useTranslation('common')
const t = useTranslations('common')
const router = useRouter()
const pathname = usePathname()
const locale = getCookie('NEXT_LOCALE') || 'en'

4
components/party/PartySegmentedControl/index.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'
import { useSnapshot } from 'valtio'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
import { appState } from '~utils/appState'
@ -28,7 +28,7 @@ interface Props {
const PartySegmentedControl = (props: Props) => {
// Set up translations
const { t } = useTranslation('common')
const t = useTranslations('common')
const { party, grid } = useSnapshot(appState)

4
components/party/PartyVisibilityDialog/index.tsx
View file

@ -1,6 +1,6 @@
import React, { useEffect, useRef, useState } from 'react'
import { useSnapshot } from 'valtio'
import { useTranslation } from 'react-i18next'
import { useTranslations } from 'next-intl'
import debounce from 'lodash.debounce'
import * as RadioGroup from '@radix-ui/react-radio-group'
@ -33,7 +33,7 @@ const EditPartyModal = ({
...props
}: Props) => {
// Set up translation
const { t } = useTranslation('common')
const t = useTranslations('common')
// Set up reactive state
const { party } = useSnapshot(appState)

4
components/raids/RaidCombobox/index.tsx
View file

@ -1,7 +1,7 @@
'use client'
import { createRef, useCallback, useEffect, useState } from 'react'
import { getCookie } from 'cookies-next'
import { useTranslation } from 'react-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
import { Command, CommandGroup, CommandInput } from 'cmdk'
@ -71,7 +71,7 @@ const RaidCombobox = (props: Props) => {
const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
// Set up translations
const { t } = useTranslation('common')
const t = useTranslations('common')
// Component state
const [open, setOpen] = useState(false)

4
components/raids/RaidItem/index.tsx
View file

@ -1,5 +1,5 @@
import React, { ComponentProps, PropsWithChildren } from 'react'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
import { CommandItem } from '~components/common/Command'
import styles from './index.module.scss'
@ -54,7 +54,7 @@ const RaidItem = React.forwardRef<HTMLDivElement, PropsWithChildren<Props>>(
}: PropsWithChildren<Props>,
forwardedRef
) {
const { t } = useTranslation('common')
const t = useTranslations('common')
const classes = classNames({
raid: true,

4
components/reps/CharacterRep/index.tsx
View file

@ -1,7 +1,7 @@
'use client'
import React, { useEffect, useState } from 'react'
import { getCookie } from 'cookies-next'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import 'fix-date'
import styles from './index.module.scss'
@ -18,7 +18,7 @@ const CHARACTERS_COUNT = 3
const CharacterRep = (props: Props) => {
// Localization for alt tags
const { t } = useTranslation('common')
const t = useTranslations('common')
const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
// Component state

4
components/reps/GridRep/index.tsx
View file

@ -2,7 +2,7 @@
import React, { useEffect, useState } from 'react'
import Link from 'next/link'
import { useSnapshot } from 'valtio'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import { getCookie } from 'cookies-next'
import classNames from 'classnames'
import 'fix-date'
@ -32,7 +32,7 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
const { account } = useSnapshot(accountState)
const { t } = useTranslation('common')
const t = useTranslations('common')
const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
const [visible, setVisible] = useState(false)

4
components/search/SearchModal/index.tsx
View file

@ -1,7 +1,7 @@
'use client'
import React, { useEffect, useState } from 'react'
import { getCookie, setCookie } from 'cookies-next'
import { useTranslation } from 'react-i18next'
import { useTranslations } from 'next-intl'
import InfiniteScroll from 'react-infinite-scroll-component'
import cloneDeep from 'lodash.clonedeep'
@ -42,7 +42,7 @@ const SearchModal = (props: Props) => {
const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
// Set up translation
const { t } = useTranslation('common')
const t = useTranslations('common')
// Refs
const headerRef = React.createRef<HTMLDivElement>()

4
components/summon/SummonGrid/index.tsx
View file

@ -2,7 +2,7 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { getCookie } from 'cookies-next'
import { useSnapshot } from 'valtio'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
import { AxiosError, AxiosResponse } from 'axios'
@ -38,7 +38,7 @@ const SummonGrid = (props: Props) => {
: null
// Localization
const { t } = useTranslation('common')
const t = useTranslations('common')
// Set up state for error handling
const [axiosError, setAxiosError] = useState<AxiosResponse>()

4
components/summon/SummonHovercard/index.tsx
View file

@ -1,7 +1,7 @@
'use client'
import React from 'react'
import { useRouter } from 'next/navigation'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import { getCookie } from 'cookies-next'
import {
@ -23,7 +23,7 @@ interface Props {
const SummonHovercard = (props: Props) => {
const router = useRouter()
const { t } = useTranslation('common')
const t = useTranslations('common')
const locale =
getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string)
? (getCookie('NEXT_LOCALE') as string)

4
components/summon/SummonSearchFilterBar/index.tsx
View file

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import cloneDeep from 'lodash.clonedeep'
@ -17,7 +17,7 @@ interface Props {
}
const SummonSearchFilterBar = (props: Props) => {
const { t } = useTranslation('common')
const t = useTranslations('common')
const [rarityMenu, setRarityMenu] = useState(false)
const [elementMenu, setElementMenu] = useState(false)

15
components/summon/SummonUnit/index.tsx
View file

@ -1,7 +1,7 @@
'use client'
import React, { MouseEvent, useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { Trans, useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import { AxiosResponse } from 'axios'
import classNames from 'classnames'
import { getCookie } from 'cookies-next'
@ -49,7 +49,7 @@ const SummonUnit = ({
updateTranscendence,
}: Props) => {
// Translations and locale
const { t } = useTranslation('common')
const t = useTranslations('common')
const router = useRouter()
const locale =
getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string)
@ -252,11 +252,12 @@ const SummonUnit = ({
cancelAction={() => setAlertOpen(false)}
cancelActionText={t('buttons.cancel')}
message={
<Trans i18nKey="modals.summons.messages.remove">
Are you sure you want to remove{' '}
<strong>{{ weapon: gridSummon?.object.name[locale] }}</strong> from
your team?
</Trans>
<>
{t.rich('modals.summon.messages.remove', {
summon: gridSummon?.object.name[locale],
strong: (chunks) => <strong>{chunks}</strong>
})}
</>
}
/>
)

13
components/toasts/RemixedToast/index.tsx
View file

@ -1,6 +1,6 @@
import React, { useEffect } from 'react'
import Toast from '~components/common/Toast'
import { Trans, useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
interface Props {
partyName: string
@ -16,7 +16,7 @@ const RemixedToast = ({
onOpenChange,
onCloseClick,
}: Props) => {
const { t } = useTranslation('common')
const t = useTranslations('common')
// Methods: Event handlers
function handleOpenChange() {
@ -34,9 +34,12 @@ const RemixedToast = ({
duration={2400}
type="foreground"
content={
<Trans i18nKey="toasts.remixed">
You remixed <strong>{{ title: partyName }}</strong>
</Trans>
<>
{t.rich('toasts.remixed', {
title: partyName,
strong: (chunks) => <strong>{chunks}</strong>
})}
</>
}
onOpenChange={handleOpenChange}
onCloseClick={handleCloseClick}

4
components/toasts/UpdateToast/index.tsx
View file

@ -8,7 +8,7 @@ import Button from '~components/common/Button'
import Toast from '~components/common/Toast'
import styles from './index.module.scss'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
interface Props {
open: boolean
@ -25,7 +25,7 @@ const UpdateToast = ({
onActionClicked,
onCloseClicked,
}: Props) => {
const { t } = useTranslation('common')
const t = useTranslations('common')
const classes = classNames({
Update: true,

4
components/toasts/UrlCopiedToast/index.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'
import Toast from '~components/common/Toast'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
interface Props {
open: boolean
@ -10,7 +10,7 @@ interface Props {
}
const UrlCopiedToast = ({ open, onOpenChange, onCloseClick }: Props) => {
const { t } = useTranslation('common')
const t = useTranslations('common')
// Methods: Event handlers
function handleOpenChange() {

4
components/uncap/TranscendencePopover/index.tsx
View file

@ -1,5 +1,5 @@
import React, { PropsWithChildren, useEffect, useState } from 'react'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
import { Popover } from '@radix-ui/react-popover'
@ -34,7 +34,7 @@ const TranscendencePopover = ({
onOpenChange,
sendValue,
}: PropsWithChildren<Props>) => {
const { t } = useTranslation('common')
const t = useTranslations('common')
const [open, setOpen] = useState(false)
const [baseLevel, setBaseLevel] = useState(0)

14
components/weapon/WeaponConflictModal/index.tsx
View file

@ -1,7 +1,7 @@
'use client'
import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { Trans, useTranslation } from 'react-i18next'
import { useTranslations } from 'next-intl'
import { getCookie } from 'cookies-next'
import { Dialog } from '~components/common/Dialog'
@ -26,7 +26,7 @@ interface Props {
const WeaponConflictModal = (props: Props) => {
// Localization
const router = useRouter()
const { t } = useTranslation('common')
const t = useTranslations('common')
const locale =
getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string)
? (getCookie('NEXT_LOCALE') as string)
@ -61,13 +61,11 @@ const WeaponConflictModal = (props: Props) => {
const seriesSlug = t(`series.${mapWeaponSeries(series)}`)
return [2, 3, 34].includes(series) ? (
<Trans i18nKey="modals.conflict.weapon.opus-draconic"></Trans>
/* TODO: Refactor to t.rich() */
t('modals.conflict.weapon.opus-draconic')
) : (
<Trans i18nKey="modals.conflict.weapon.generic">
Only one weapon from the
<strong>{{ series: seriesSlug }} Series</strong> can be included in each
party. Do you want to change your weapons?
</Trans>
/* TODO: Refactor to t.rich() */
t('modals.conflict.weapon.generic', { series: seriesSlug })
)
}

4
components/weapon/WeaponGrid/index.tsx
View file

@ -2,7 +2,7 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { getCookie } from 'cookies-next'
import { useSnapshot } from 'valtio'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import { AxiosError, AxiosResponse } from 'axios'
import debounce from 'lodash.debounce'
@ -39,7 +39,7 @@ const WeaponGrid = (props: Props) => {
const numWeapons: number = 9
// Localization
const { t } = useTranslation('common')
const t = useTranslations('common')
// Cookies
const cookie = getCookie('account')

4
components/weapon/WeaponHovercard/index.tsx
View file

@ -1,7 +1,7 @@
'use client'
import React from 'react'
import { useRouter } from 'next/navigation'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
import { getCookie } from 'cookies-next'
@ -38,7 +38,7 @@ const WeaponHovercard = (props: Props) => {
? (getCookie('NEXT_LOCALE') as string)
: 'en'
const { t } = useTranslation('common')
const t = useTranslations('common')
const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light']
const WeaponKeyNames: KeyNames = {

4
components/weapon/WeaponKeySelect/index.tsx
View file

@ -1,7 +1,7 @@
'use client'
import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import classNames from 'classnames'
import { getCookie } from 'cookies-next'
@ -72,7 +72,7 @@ const WeaponKeySelect = React.forwardRef<HTMLButtonElement, Props>(
getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string)
? (getCookie('NEXT_LOCALE') as string)
: 'en'
const { t } = useTranslation('common')
const t = useTranslations('common')
const [keys, setKeys] = useState<WeaponKey[][]>([])
const [error, setError] = useState('')

21
components/weapon/WeaponModal/index.tsx
View file

@ -2,7 +2,7 @@
import React, { PropsWithChildren, useEffect, useState } from 'react'
import { getCookie } from 'cookies-next'
import { useRouter } from 'next/navigation'
import { Trans, useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import { isEqual } from 'lodash'
import { GridWeaponObject } from '~types'
@ -40,7 +40,7 @@ const WeaponModal = ({
getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string)
? (getCookie('NEXT_LOCALE') as string)
: 'en'
const { t } = useTranslation('common')
const t = useTranslations('common')
// Cookies
const cookie = getCookie('account')
@ -473,16 +473,13 @@ const WeaponModal = ({
const confirmationAlert = (
<Alert
message={
<span>
<Trans i18nKey="alert.unsaved_changes.object">
You will lose all changes to{' '}
<strong>{{ objectName: gridWeapon.object.name[locale] }}</strong> if
you continue.
<br />
<br />
Are you sure you want to continue without saving?
</Trans>
</span>
<>
{t.rich('alert.unsaved_changes.object', {
objectName: gridWeapon.object.name[locale],
strong: (chunks) => <strong>{chunks}</strong>,
br: () => <br />
})}
</>
}
open={alertOpen}
primaryActionText={t('alert.unsaved_changes.buttons.confirm')}

4
components/weapon/WeaponSearchFilterBar/index.tsx
View file

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import cloneDeep from 'lodash.clonedeep'
@ -21,7 +21,7 @@ interface Props {
}
const WeaponSearchFilterBar = (props: Props) => {
const { t } = useTranslation('common')
const t = useTranslations('common')
const [rarityMenu, setRarityMenu] = useState(false)
const [elementMenu, setElementMenu] = useState(false)

15
components/weapon/WeaponUnit/index.tsx
View file

@ -1,7 +1,7 @@
'use client'
import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { Trans, useTranslation } from 'next-i18next'
import { useTranslations } from 'next-intl'
import { AxiosResponse } from 'axios'
import classNames from 'classnames'
import clonedeep from 'lodash.clonedeep'
@ -53,7 +53,7 @@ const WeaponUnit = ({
updateTranscendence,
}: Props) => {
// Translations and locale
const { t } = useTranslation('common')
const t = useTranslations('common')
const router = useRouter()
const locale =
getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string)
@ -507,11 +507,12 @@ const WeaponUnit = ({
cancelAction={() => setAlertOpen(false)}
cancelActionText={t('buttons.cancel')}
message={
<Trans i18nKey="modals.weapons.messages.remove">
Are you sure you want to remove{' '}
<strong>{{ weapon: gridWeapon?.object.name[locale] }}</strong> from
your team?
</Trans>
<>
{t.rich('modals.weapon.messages.remove', {
weapon: gridWeapon?.object.name[locale],
strong: (chunks) => <strong>{chunks}</strong>
})}
</>
}
/>
)