diff --git a/components/ElementToggle/index.tsx b/components/ElementToggle/index.tsx index 75dd5474..4eecc86b 100644 --- a/components/ElementToggle/index.tsx +++ b/components/ElementToggle/index.tsx @@ -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) diff --git a/components/ErrorSection/index.tsx b/components/ErrorSection/index.tsx index 0970d00e..91d7fd04 100644 --- a/components/ErrorSection/index.tsx +++ b/components/ErrorSection/index.tsx @@ -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('') diff --git a/components/Header/index.tsx b/components/Header/index.tsx index 67d920c3..2b0d5af6 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -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' diff --git a/components/MentionList/index.tsx b/components/MentionList/index.tsx index fb9207de..f33a2182 100644 --- a/components/MentionList/index.tsx +++ b/components/MentionList/index.tsx @@ -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( ({ 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) diff --git a/components/about/AboutHead/index.tsx b/components/about/AboutHead/index.tsx index e4092694..d60d3d73 100644 --- a/components/about/AboutHead/index.tsx +++ b/components/about/AboutHead/index.tsx @@ -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') diff --git a/components/about/AboutPage/index.tsx b/components/about/AboutPage/index.tsx index 7c196575..12941658 100644 --- a/components/about/AboutPage/index.tsx +++ b/components/about/AboutPage/index.tsx @@ -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) => { - 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) => {

{common('about.segmented_control.about')}

- + {/* TODO: Refactor to about.rich() */} + {about("about.subtitle")} + {/* Granblue.team is a tool to save and share team compositions for{' '} = (props: Props) => { Granblue Fantasy , a social RPG from Cygames. - + */}

{about('about.explanation.0')}

{about('about.explanation.1')}

@@ -54,7 +56,9 @@ const AboutPage: React.FC = (props: Props) => {

{about('about.credits.title')}

- + {/* TODO: Refactor to about.rich() */} + {about('about.credits.maintainer')} + {/* Granblue.team was built and is maintained by{' '} = (props: Props) => { @jedmund . - + */}

- + {/* TODO: Refactor to about.rich() */} + {about('about.credits.assistance')} + {/* Many thanks to{' '} = (props: Props) => { @tarngerine , who both provided a lot of help and advice as I was ramping up. - + */}

- + {/* TODO: Refactor to about.rich() */} + {about('about.credits.support')} + {/* Many thanks also go to everyone in{' '} = (props: Props) => { and the granblue-tools Discord for all of their help with with bug testing, feature requests, and moral support. (P.S. We're recruiting!) - + */}

@@ -126,7 +134,9 @@ const AboutPage: React.FC = (props: Props) => {

{about('about.license.title')}

- + {/* TODO: Refactor to about.rich() */} + {about('about.license.license')} + {/* This app is licensed under{' '} = (props: Props) => { GNU AGPLv3 . - + */}

{about('about.license.explanation')}

diff --git a/components/about/ContentUpdate/index.tsx b/components/about/ContentUpdate/index.tsx index 39f6cc78..d0085b30 100644 --- a/components/about/ContentUpdate/index.tsx +++ b/components/about/ContentUpdate/index.tsx @@ -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) diff --git a/components/about/RoadmapPage/index.tsx b/components/about/RoadmapPage/index.tsx index 590f3eda..0d5646a1 100644 --- a/components/about/RoadmapPage/index.tsx +++ b/components/about/RoadmapPage/index.tsx @@ -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' diff --git a/components/about/UpdatesPage/index.tsx b/components/about/UpdatesPage/index.tsx index e501dc7f..db927114 100644 --- a/components/about/UpdatesPage/index.tsx +++ b/components/about/UpdatesPage/index.tsx @@ -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') diff --git a/components/about/updates/ContentUpdate2022/index.tsx b/components/about/updates/ContentUpdate2022/index.tsx index 187f1c36..3053b860 100644 --- a/components/about/updates/ContentUpdate2022/index.tsx +++ b/components/about/updates/ContentUpdate2022/index.tsx @@ -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 = () => {
    {[...Array(versionUpdates['1.0.0'])].map((e, i) => (
  • - {updates(`versions.1.0.0.features.${i}`)} + {updates(`versions.v1_0_0.features.${i}`)}
    • ))}
diff --git a/components/about/updates/ContentUpdate2023/index.tsx b/components/about/updates/ContentUpdate2023/index.tsx index 9ecf81ba..240af288 100644 --- a/components/about/updates/ContentUpdate2023/index.tsx +++ b/components/about/updates/ContentUpdate2023/index.tsx @@ -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 = () => {
    {[...Array(versionUpdates['1.2.1'].bugs)].map((e, i) => (
  • - {updates(`versions.1.2.1.bugs.${i}`)} + {updates(`versions.v1_2_1.bugs.${i}`)}
    • ))}
@@ -289,19 +289,19 @@ const ContentUpdate2023 = () => { {[...Array(versionUpdates['1.2.0'].updates)].map((e, 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' )} -

    {updates(`versions.1.2.0.features.${i}.title`)}

    -

    {updates(`versions.1.2.0.features.${i}.blurb`)}

    +

    {updates(`versions.v1_2_0.features.${i}.title`)}

    +

    {updates(`versions.v1_2_0.features.${i}.blurb`)}

    • ))}

    Developer notes

    - {updates('versions.1.2.0.notes') + {updates('versions.v1_2_0.notes') .split('\n') .map((item, i) => (

    {item}

    @@ -319,7 +319,7 @@ const ContentUpdate2023 = () => {
      {[...Array(versionUpdates['1.2.0'].bugs)].map((e, i) => (
    • - {updates(`versions.1.2.0.bugs.${i}`)} + {updates(`versions.v1_2_0.bugs.${i}`)}
      • ))}
    @@ -601,13 +601,13 @@ const ContentUpdate2023 = () => { {[...Array(versionUpdates['1.1.0'].updates)].map((e, 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' )} -

    {updates(`versions.1.1.0.features.${i}.title`)}

    -

    {updates(`versions.1.1.0.features.${i}.blurb`)}

    +

    {updates(`versions.v1_1_0.features.${i}.title`)}

    +

    {updates(`versions.v1_1_0.features.${i}.blurb`)}

    • ))} @@ -617,7 +617,7 @@ const ContentUpdate2023 = () => {
      {[...Array(versionUpdates['1.1.0'].bugs)].map((e, i) => (
    • - {updates(`versions.1.1.0.bugs.${i}`)} + {updates(`versions.v1_1_0.bugs.${i}`)}
      • ))}
    @@ -671,7 +671,7 @@ const ContentUpdate2023 = () => {
      {[...Array(versionUpdates['1.0.1'])].map((e, i) => (
    • - {updates(`versions.1.0.1.features.${i}`)} + {updates(`versions.v1_0_1.features.${i}`)}
      • ))}
    diff --git a/components/about/updates/ContentUpdate2024/index.tsx b/components/about/updates/ContentUpdate2024/index.tsx index dd07d2e2..6863665d 100644 --- a/components/about/updates/ContentUpdate2024/index.tsx +++ b/components/about/updates/ContentUpdate2024/index.tsx @@ -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 ( <> diff --git a/components/auth/AccountModal/index.tsx b/components/auth/AccountModal/index.tsx index 2fe38d20..9883abd9 100644 --- a/components/auth/AccountModal/index.tsx +++ b/components/auth/AccountModal/index.tsx @@ -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( 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' diff --git a/components/auth/LoginModal/index.tsx b/components/auth/LoginModal/index.tsx index aaf8787a..892b12bc 100644 --- a/components/auth/LoginModal/index.tsx +++ b/components/auth/LoginModal/index.tsx @@ -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) diff --git a/components/auth/SignupModal/index.tsx b/components/auth/SignupModal/index.tsx index c1a10a41..36b6e2e6 100644 --- a/components/auth/SignupModal/index.tsx +++ b/components/auth/SignupModal/index.tsx @@ -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) diff --git a/components/character/CharacterConflictModal/index.tsx b/components/character/CharacterConflictModal/index.tsx index e0dfcec0..aa5dc7de 100644 --- a/components/character/CharacterConflictModal/index.tsx +++ b/components/character/CharacterConflictModal/index.tsx @@ -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) => { >

    - + {t.rich('modals.conflict.character', { + strong: (chunks) => {chunks} + })}

      diff --git a/components/character/CharacterGrid/index.tsx b/components/character/CharacterGrid/index.tsx index 6616ca36..fc003e27 100644 --- a/components/character/CharacterGrid/index.tsx +++ b/components/character/CharacterGrid/index.tsx @@ -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') diff --git a/components/character/CharacterHovercard/index.tsx b/components/character/CharacterHovercard/index.tsx index 50cd6a9c..abaae016 100644 --- a/components/character/CharacterHovercard/index.tsx +++ b/components/character/CharacterHovercard/index.tsx @@ -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' diff --git a/components/character/CharacterModal/index.tsx b/components/character/CharacterModal/index.tsx index abdd39a2..3aa90aa8 100644 --- a/components/character/CharacterModal/index.tsx +++ b/components/character/CharacterModal/index.tsx @@ -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 = ( - - You will lose all changes to{' '} - {{ objectName: gridCharacter.object.name[locale] }}{' '} - if you continue. -
      -
      - Are you sure you want to continue without saving? -       - + <> + {t.rich('alert.unsaved_changes.object', { + objectName: gridCharacter.object.name[locale], + strong: (chunks) => {chunks}, + br: () =>
      + })} + } open={alertOpen} primaryActionText={t('alert.unsaved_changes.buttons.confirm')} diff --git a/components/character/CharacterSearchFilterBar/index.tsx b/components/character/CharacterSearchFilterBar/index.tsx index d30299a6..ca1e680c 100644 --- a/components/character/CharacterSearchFilterBar/index.tsx +++ b/components/character/CharacterSearchFilterBar/index.tsx @@ -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) diff --git a/components/character/CharacterUnit/index.tsx b/components/character/CharacterUnit/index.tsx index 335a92cc..ddb87061 100644 --- a/components/character/CharacterUnit/index.tsx +++ b/components/character/CharacterUnit/index.tsx @@ -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={ - - Are you sure you want to remove{' '} - {{ character: gridCharacter?.object.name[locale] }}{' '} - from your team? - + <> + {t.rich('modals.characters.messages.remove', { + character: gridCharacter?.object.name[locale], + strong: (chunks) => {chunks} + })} + } /> ) diff --git a/components/common/Editor/index.tsx b/components/common/Editor/index.tsx index fb6dda9f..2a244752 100644 --- a/components/common/Editor/index.tsx +++ b/components/common/Editor/index.tsx @@ -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)) diff --git a/components/common/MentionTypeahead/index.tsx b/components/common/MentionTypeahead/index.tsx index 6c93f918..899fef1f 100644 --- a/components/common/MentionTypeahead/index.tsx +++ b/components/common/MentionTypeahead/index.tsx @@ -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(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' diff --git a/components/common/SelectWithInput/index.tsx b/components/common/SelectWithInput/index.tsx index d7f41b13..7e8a4edf 100644 --- a/components/common/SelectWithInput/index.tsx +++ b/components/common/SelectWithInput/index.tsx @@ -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) diff --git a/components/common/ToolbarButton/index.tsx b/components/common/ToolbarButton/index.tsx index 7b780ac2..7b2d3724 100644 --- a/components/common/ToolbarButton/index.tsx +++ b/components/common/ToolbarButton/index.tsx @@ -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 diff --git a/components/dialogs/DeleteTeamAlert/index.tsx b/components/dialogs/DeleteTeamAlert/index.tsx index c905735d..bf036eb8 100644 --- a/components/dialogs/DeleteTeamAlert/index.tsx +++ b/components/dialogs/DeleteTeamAlert/index.tsx @@ -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() diff --git a/components/dialogs/RemixTeamAlert/index.tsx b/components/dialogs/RemixTeamAlert/index.tsx index 528181f4..ffe9fc14 100644 --- a/components/dialogs/RemixTeamAlert/index.tsx +++ b/components/dialogs/RemixTeamAlert/index.tsx @@ -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 ? ( - - Remixing a team makes a copy of it in your account so you can make - your own changes.\n\nYou're already the creator of{' '} - {{ name: name }}, are you sure you want to remix - it? - + <> + {t.rich('modals.remix_team.description.creator', { + name: name, + strong: (chunks) => {chunks} + })} + ) : ( - - Remixing a team makes a copy of it in your account so you can make - your own changes.\n\nWould you like to remix{' '} - {{ name: name }}? - + <> + {t.rich('modals.remix_team.description.viewer', { + name: name, + strong: (chunks) => {chunks} + })} + ) } /> diff --git a/components/extra/ExtraSummonsGrid/index.tsx b/components/extra/ExtraSummonsGrid/index.tsx index b22c5475..3a0ae64f 100644 --- a/components/extra/ExtraSummonsGrid/index.tsx +++ b/components/extra/ExtraSummonsGrid/index.tsx @@ -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 (
      diff --git a/components/extra/ExtraWeaponsGrid/index.tsx b/components/extra/ExtraWeaponsGrid/index.tsx index 00b3ffbf..ddbbb161 100644 --- a/components/extra/ExtraWeaponsGrid/index.tsx +++ b/components/extra/ExtraWeaponsGrid/index.tsx @@ -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' diff --git a/components/extra/GuidebookUnit/index.tsx b/components/extra/GuidebookUnit/index.tsx index 6504310a..06b10d84 100644 --- a/components/extra/GuidebookUnit/index.tsx +++ b/components/extra/GuidebookUnit/index.tsx @@ -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={ - - Are you sure you want to remove{' '} - {{ guidebook: guidebook?.name[locale] }} from your - team? - + <> + {t.rich('modals.guidebooks.messages.remove', { + guidebook: guidebook?.name[locale], + strong: (chunks) => {chunks} + })} + } /> ) diff --git a/components/extra/GuidebooksGrid/index.tsx b/components/extra/GuidebooksGrid/index.tsx index 03f375b2..efe836f1 100644 --- a/components/extra/GuidebooksGrid/index.tsx +++ b/components/extra/GuidebooksGrid/index.tsx @@ -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, diff --git a/components/filters/FilterBar/index.tsx b/components/filters/FilterBar/index.tsx index a94e2dcd..0d1ad169 100644 --- a/components/filters/FilterBar/index.tsx +++ b/components/filters/FilterBar/index.tsx @@ -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) diff --git a/components/filters/FilterModal/index.tsx b/components/filters/FilterModal/index.tsx index 760e1f45..66c07470 100644 --- a/components/filters/FilterModal/index.tsx +++ b/components/filters/FilterModal/index.tsx @@ -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() @@ -441,10 +441,12 @@ const FilterModal = (props: Props) => { return (

      - + {/* TODO: Refactor to t.rich() */} + {/* Filters set on user profiles and in{' '} Your saved teams will not be saved - + */} + {t('modals.filters.notice')}

      ) diff --git a/components/head/NewHead/index.tsx b/components/head/NewHead/index.tsx index cc484b4b..5d262b52 100644 --- a/components/head/NewHead/index.tsx +++ b/components/head/NewHead/index.tsx @@ -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 ( diff --git a/components/head/ProfileHead/index.tsx b/components/head/ProfileHead/index.tsx index 7e3b61a8..bd2b7ec5 100644 --- a/components/head/ProfileHead/index.tsx +++ b/components/head/ProfileHead/index.tsx @@ -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 ( diff --git a/components/head/SavedHead/index.tsx b/components/head/SavedHead/index.tsx index b87f349f..3aa0885b 100644 --- a/components/head/SavedHead/index.tsx +++ b/components/head/SavedHead/index.tsx @@ -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 ( diff --git a/components/head/TeamsHead/index.tsx b/components/head/TeamsHead/index.tsx index a2aca1d2..6860b06b 100644 --- a/components/head/TeamsHead/index.tsx +++ b/components/head/TeamsHead/index.tsx @@ -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 ( diff --git a/components/job/JobAccessoryPopover/index.tsx b/components/job/JobAccessoryPopover/index.tsx index 71c588b0..59f6f348 100644 --- a/components/job/JobAccessoryPopover/index.tsx +++ b/components/job/JobAccessoryPopover/index.tsx @@ -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) => { // Localization - const { t } = useTranslation('common') + const t = useTranslations('common') const locale = (getCookie('NEXT_LOCALE') as string) || 'en' diff --git a/components/job/JobDropdown/index.tsx b/components/job/JobDropdown/index.tsx index 4a757ba7..0550ef5c 100644 --- a/components/job/JobDropdown/index.tsx +++ b/components/job/JobDropdown/index.tsx @@ -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( 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) diff --git a/components/job/JobSection/index.tsx b/components/job/JobSection/index.tsx index 5b6ed259..ba45ddf1 100644 --- a/components/job/JobSection/index.tsx +++ b/components/job/JobSection/index.tsx @@ -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' diff --git a/components/job/JobSkillItem/index.tsx b/components/job/JobSkillItem/index.tsx index 98e5c891..8f8aebd7 100644 --- a/components/job/JobSkillItem/index.tsx +++ b/components/job/JobSkillItem/index.tsx @@ -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( 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( cancelAction={() => setAlertOpen(false)} cancelActionText={t('buttons.cancel')} message={ - - Are you sure you want to remove{' '} - {{ job_skill: skill?.name[locale] }} from your - team? - + <> + {t.rich('modals.job_skills.messages.remove', { + job_skill: skill?.name[locale], + strong: (chunks) => {chunks} + })} + } /> ) diff --git a/components/job/JobSkillSearchFilterBar/index.tsx b/components/job/JobSkillSearchFilterBar/index.tsx index 1ad8176d..5167393c 100644 --- a/components/job/JobSkillSearchFilterBar/index.tsx +++ b/components/job/JobSkillSearchFilterBar/index.tsx @@ -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) diff --git a/components/mastery/AwakeningSelectWithInput/index.tsx b/components/mastery/AwakeningSelectWithInput/index.tsx index 45e38cfc..077de5ec 100644 --- a/components/mastery/AwakeningSelectWithInput/index.tsx +++ b/components/mastery/AwakeningSelectWithInput/index.tsx @@ -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) diff --git a/components/mastery/AxSelect/index.tsx b/components/mastery/AxSelect/index.tsx index 3ecb08c4..703cb153 100644 --- a/components/mastery/AxSelect/index.tsx +++ b/components/mastery/AxSelect/index.tsx @@ -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) diff --git a/components/mastery/ExtendedMasterySelect/index.tsx b/components/mastery/ExtendedMasterySelect/index.tsx index abcefc49..5ccfe601 100644 --- a/components/mastery/ExtendedMasterySelect/index.tsx +++ b/components/mastery/ExtendedMasterySelect/index.tsx @@ -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) diff --git a/components/party/EditPartyModal/index.tsx b/components/party/EditPartyModal/index.tsx index 526d0498..6ac965fd 100644 --- a/components/party/EditPartyModal/index.tsx +++ b/components/party/EditPartyModal/index.tsx @@ -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 = ({ - - You will lose all changes to your party{' '} - - {{ - objectName: name || capitalizeFirstLetter(t('untitled')), - }} - {' '} - if you continue. -
      -
      - Are you sure you want to continue without saving? -       + {/* TODO: Refactor to t.rich() */} + {t('alert.unsaved_changes.party', { + objectName: name || capitalizeFirstLetter(t('untitled')) + })} } open={alertOpen} diff --git a/components/party/Party/index.tsx b/components/party/Party/index.tsx index 987d76be..b6156021 100644 --- a/components/party/Party/index.tsx +++ b/components/party/Party/index.tsx @@ -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) diff --git a/components/party/PartyDropdown/index.tsx b/components/party/PartyDropdown/index.tsx index f3d21e02..6b19479a 100644 --- a/components/party/PartyDropdown/index.tsx +++ b/components/party/PartyDropdown/index.tsx @@ -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() diff --git a/components/party/PartyFooter/index.tsx b/components/party/PartyFooter/index.tsx index 25e2ee32..fcd91b09 100644 --- a/components/party/PartyFooter/index.tsx +++ b/components/party/PartyFooter/index.tsx @@ -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) diff --git a/components/party/PartyHead/index.tsx b/components/party/PartyHead/index.tsx index 99a9e79c..99f7d1cc 100644 --- a/components/party/PartyHead/index.tsx +++ b/components/party/PartyHead/index.tsx @@ -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 diff --git a/components/party/PartyHeader/index.tsx b/components/party/PartyHeader/index.tsx index bf92dfd3..917510a6 100644 --- a/components/party/PartyHeader/index.tsx +++ b/components/party/PartyHeader/index.tsx @@ -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' diff --git a/components/party/PartySegmentedControl/index.tsx b/components/party/PartySegmentedControl/index.tsx index 2618494f..38e1d64d 100644 --- a/components/party/PartySegmentedControl/index.tsx +++ b/components/party/PartySegmentedControl/index.tsx @@ -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) diff --git a/components/party/PartyVisibilityDialog/index.tsx b/components/party/PartyVisibilityDialog/index.tsx index ab736c8b..62f9f0d5 100644 --- a/components/party/PartyVisibilityDialog/index.tsx +++ b/components/party/PartyVisibilityDialog/index.tsx @@ -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) diff --git a/components/raids/RaidCombobox/index.tsx b/components/raids/RaidCombobox/index.tsx index d2277fe8..2c0064c1 100644 --- a/components/raids/RaidCombobox/index.tsx +++ b/components/raids/RaidCombobox/index.tsx @@ -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) diff --git a/components/raids/RaidItem/index.tsx b/components/raids/RaidItem/index.tsx index 3e79bc05..c37ae0b4 100644 --- a/components/raids/RaidItem/index.tsx +++ b/components/raids/RaidItem/index.tsx @@ -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>( }: PropsWithChildren, forwardedRef ) { - const { t } = useTranslation('common') + const t = useTranslations('common') const classes = classNames({ raid: true, diff --git a/components/reps/CharacterRep/index.tsx b/components/reps/CharacterRep/index.tsx index 26a4404f..e8b029f3 100644 --- a/components/reps/CharacterRep/index.tsx +++ b/components/reps/CharacterRep/index.tsx @@ -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 diff --git a/components/reps/GridRep/index.tsx b/components/reps/GridRep/index.tsx index 139c54d5..53d1496c 100644 --- a/components/reps/GridRep/index.tsx +++ b/components/reps/GridRep/index.tsx @@ -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) diff --git a/components/search/SearchModal/index.tsx b/components/search/SearchModal/index.tsx index ffa515b5..e99b4e8d 100644 --- a/components/search/SearchModal/index.tsx +++ b/components/search/SearchModal/index.tsx @@ -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() diff --git a/components/summon/SummonGrid/index.tsx b/components/summon/SummonGrid/index.tsx index c0373c67..e89c1ed8 100644 --- a/components/summon/SummonGrid/index.tsx +++ b/components/summon/SummonGrid/index.tsx @@ -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() diff --git a/components/summon/SummonHovercard/index.tsx b/components/summon/SummonHovercard/index.tsx index aa1d478e..2b8eabca 100644 --- a/components/summon/SummonHovercard/index.tsx +++ b/components/summon/SummonHovercard/index.tsx @@ -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) diff --git a/components/summon/SummonSearchFilterBar/index.tsx b/components/summon/SummonSearchFilterBar/index.tsx index 1e54e17e..4a7c4d56 100644 --- a/components/summon/SummonSearchFilterBar/index.tsx +++ b/components/summon/SummonSearchFilterBar/index.tsx @@ -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) diff --git a/components/summon/SummonUnit/index.tsx b/components/summon/SummonUnit/index.tsx index 0ca6ccff..d402d3dd 100644 --- a/components/summon/SummonUnit/index.tsx +++ b/components/summon/SummonUnit/index.tsx @@ -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={ - - Are you sure you want to remove{' '} - {{ weapon: gridSummon?.object.name[locale] }} from - your team? - + <> + {t.rich('modals.summon.messages.remove', { + summon: gridSummon?.object.name[locale], + strong: (chunks) => {chunks} + })} + } /> ) diff --git a/components/toasts/RemixedToast/index.tsx b/components/toasts/RemixedToast/index.tsx index 8bc533a0..69329166 100644 --- a/components/toasts/RemixedToast/index.tsx +++ b/components/toasts/RemixedToast/index.tsx @@ -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={ - - You remixed {{ title: partyName }} - + <> + {t.rich('toasts.remixed', { + title: partyName, + strong: (chunks) => {chunks} + })} + } onOpenChange={handleOpenChange} onCloseClick={handleCloseClick} diff --git a/components/toasts/UpdateToast/index.tsx b/components/toasts/UpdateToast/index.tsx index 81f7c428..6b89cc15 100644 --- a/components/toasts/UpdateToast/index.tsx +++ b/components/toasts/UpdateToast/index.tsx @@ -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, diff --git a/components/toasts/UrlCopiedToast/index.tsx b/components/toasts/UrlCopiedToast/index.tsx index f4816913..dcd7f36d 100644 --- a/components/toasts/UrlCopiedToast/index.tsx +++ b/components/toasts/UrlCopiedToast/index.tsx @@ -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() { diff --git a/components/uncap/TranscendencePopover/index.tsx b/components/uncap/TranscendencePopover/index.tsx index b864dbf7..89499f66 100644 --- a/components/uncap/TranscendencePopover/index.tsx +++ b/components/uncap/TranscendencePopover/index.tsx @@ -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) => { - const { t } = useTranslation('common') + const t = useTranslations('common') const [open, setOpen] = useState(false) const [baseLevel, setBaseLevel] = useState(0) diff --git a/components/weapon/WeaponConflictModal/index.tsx b/components/weapon/WeaponConflictModal/index.tsx index 22be078b..891d1ea5 100644 --- a/components/weapon/WeaponConflictModal/index.tsx +++ b/components/weapon/WeaponConflictModal/index.tsx @@ -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) ? ( - + /* TODO: Refactor to t.rich() */ + t('modals.conflict.weapon.opus-draconic') ) : ( - - Only one weapon from the - {{ series: seriesSlug }} Series can be included in each - party. Do you want to change your weapons? - + /* TODO: Refactor to t.rich() */ + t('modals.conflict.weapon.generic', { series: seriesSlug }) ) } diff --git a/components/weapon/WeaponGrid/index.tsx b/components/weapon/WeaponGrid/index.tsx index a6e044cf..e628469b 100644 --- a/components/weapon/WeaponGrid/index.tsx +++ b/components/weapon/WeaponGrid/index.tsx @@ -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') diff --git a/components/weapon/WeaponHovercard/index.tsx b/components/weapon/WeaponHovercard/index.tsx index d94bdf81..8aa72a9e 100644 --- a/components/weapon/WeaponHovercard/index.tsx +++ b/components/weapon/WeaponHovercard/index.tsx @@ -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 = { diff --git a/components/weapon/WeaponKeySelect/index.tsx b/components/weapon/WeaponKeySelect/index.tsx index c263a1dd..201f1bd7 100644 --- a/components/weapon/WeaponKeySelect/index.tsx +++ b/components/weapon/WeaponKeySelect/index.tsx @@ -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( 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([]) const [error, setError] = useState('') diff --git a/components/weapon/WeaponModal/index.tsx b/components/weapon/WeaponModal/index.tsx index c4935faa..3707f128 100644 --- a/components/weapon/WeaponModal/index.tsx +++ b/components/weapon/WeaponModal/index.tsx @@ -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 = ( - - You will lose all changes to{' '} - {{ objectName: gridWeapon.object.name[locale] }} if - you continue. -
      -
      - Are you sure you want to continue without saving? -       - + <> + {t.rich('alert.unsaved_changes.object', { + objectName: gridWeapon.object.name[locale], + strong: (chunks) => {chunks}, + br: () =>
      + })} + } open={alertOpen} primaryActionText={t('alert.unsaved_changes.buttons.confirm')} diff --git a/components/weapon/WeaponSearchFilterBar/index.tsx b/components/weapon/WeaponSearchFilterBar/index.tsx index 8bc24fdd..9b732ab8 100644 --- a/components/weapon/WeaponSearchFilterBar/index.tsx +++ b/components/weapon/WeaponSearchFilterBar/index.tsx @@ -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) diff --git a/components/weapon/WeaponUnit/index.tsx b/components/weapon/WeaponUnit/index.tsx index 11b62866..a916c683 100644 --- a/components/weapon/WeaponUnit/index.tsx +++ b/components/weapon/WeaponUnit/index.tsx @@ -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={ - - Are you sure you want to remove{' '} - {{ weapon: gridWeapon?.object.name[locale] }} from - your team? - + <> + {t.rich('modals.weapon.messages.remove', { + weapon: gridWeapon?.object.name[locale], + strong: (chunks) => {chunks} + })} + } /> )