From b4c4ba9257f632c5c444bfe3d3ec0c850683568e Mon Sep 17 00:00:00 2001 From: secondl1ght Date: Fri, 5 Jul 2024 15:56:02 -0600 Subject: [PATCH] feat: add language toggle and hook up some translations --- messages/en.json | 10 ++- messages/es.json | 10 ++- .../app/wallet/[walletId]/settings/page.tsx | 6 +- src/components/LanguageToggle.tsx | 76 +++++++++++++++++++ src/components/header/ExternalHeader.tsx | 4 +- src/components/layout/AppLayout.tsx | 5 +- src/i18n.ts | 4 +- src/views/app/Dashboard.tsx | 5 +- src/views/contacts/Contacts.tsx | 5 +- src/views/wallet/Wallet.tsx | 7 +- 10 files changed, 121 insertions(+), 11 deletions(-) create mode 100644 src/components/LanguageToggle.tsx diff --git a/messages/en.json b/messages/en.json index 0967ef42..1d3ddc73 100644 --- a/messages/en.json +++ b/messages/en.json @@ -1 +1,9 @@ -{} +{ + "Index": { + "accounts": "Accounts", + "contacts": "Contacts", + "settings": "Settings", + "transactions": "Transactions", + "wallet": "Wallet" + } +} diff --git a/messages/es.json b/messages/es.json index 0967ef42..d8aa4a96 100644 --- a/messages/es.json +++ b/messages/es.json @@ -1 +1,9 @@ -{} +{ + "Index": { + "accounts": "Cuentas", + "contacts": "Contactos", + "settings": "Configuración", + "transactions": "Transacciones", + "wallet": "Billetera" + } +} diff --git a/src/app/app/wallet/[walletId]/settings/page.tsx b/src/app/app/wallet/[walletId]/settings/page.tsx index 5dbe7fb4..ff33b86c 100644 --- a/src/app/app/wallet/[walletId]/settings/page.tsx +++ b/src/app/app/wallet/[walletId]/settings/page.tsx @@ -1,9 +1,13 @@ +import { useTranslations } from 'next-intl'; + import { WalletSettings } from '@/views/wallet/Settings'; export default function Page({ params }: { params: { walletId: string } }) { + const t = useTranslations('Index'); + return (
-

Settings

+

{t('settings')}

diff --git a/src/components/LanguageToggle.tsx b/src/components/LanguageToggle.tsx new file mode 100644 index 00000000..247a37ea --- /dev/null +++ b/src/components/LanguageToggle.tsx @@ -0,0 +1,76 @@ +'use client'; + +import { Check, Languages } from 'lucide-react'; +import { useRouter } from 'next/navigation'; +import * as React from 'react'; +import { useState } from 'react'; + +import { Button } from '@/components/ui/button'; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from '@/components/ui/dropdown-menu'; +import { SupportedLanguage } from '@/i18n'; + +const setCookie = (locale: SupportedLanguage) => + (document.cookie = `locale=${locale}; max-age=31536000; path=/;`); + +const deleteCookie = () => + (document.cookie = 'locale=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'); + +export function LanguageToggle() { + const { refresh } = useRouter(); + + const [language, setLanguage] = useState( + () => { + const localeCookie = document.cookie + .split('; ') + .find(c => c.startsWith('locale=')) + ?.split('=')[1] as SupportedLanguage | undefined; + + return localeCookie; + } + ); + + return ( + + + + + + { + setCookie('en'); + setLanguage('en'); + refresh(); + }} + > + English {language === 'en' && } + + { + setCookie('es'); + setLanguage('es'); + refresh(); + }} + > + Español {language === 'es' && } + + { + deleteCookie(); + setLanguage(undefined); + refresh(); + }} + > + System {!language && } + + + + ); +} diff --git a/src/components/header/ExternalHeader.tsx b/src/components/header/ExternalHeader.tsx index 3ed7f5be..32dd98d1 100644 --- a/src/components/header/ExternalHeader.tsx +++ b/src/components/header/ExternalHeader.tsx @@ -4,12 +4,13 @@ import Link from 'next/link'; import { ROUTES } from '@/utils/routes'; +import { LanguageToggle } from '../LanguageToggle'; import { ThemeToggle } from '../ThemeToggle'; import { Button } from '../ui/button'; export const ExternalHeader = () => { return ( -
+

Banco

@@ -21,6 +22,7 @@ export const ExternalHeader = () => { Sign Up +
); diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx index 311acad0..fb75e06e 100644 --- a/src/components/layout/AppLayout.tsx +++ b/src/components/layout/AppLayout.tsx @@ -27,6 +27,7 @@ import { import { ROUTES } from '@/utils/routes'; import { WalletButton } from '../button/WalletButton'; +import { LanguageToggle } from '../LanguageToggle'; import { Badge } from '../ui/badge'; export const AppLayout: FC<{ children: ReactNode }> = ({ children }) => { @@ -147,6 +148,7 @@ export const AppLayout: FC<{ children: ReactNode }> = ({ children }) => { + @@ -161,9 +163,10 @@ export const AppLayout: FC<{ children: ReactNode }> = ({ children }) => { -
+
+
diff --git a/src/i18n.ts b/src/i18n.ts index 59dad931..66e52205 100644 --- a/src/i18n.ts +++ b/src/i18n.ts @@ -1,14 +1,14 @@ import { cookies, headers } from 'next/headers'; import { getRequestConfig } from 'next-intl/server'; -type SupportedLanguage = 'en' | 'es'; +export type SupportedLanguage = 'en' | 'es'; const defaultLocale = 'en'; export default getRequestConfig(async () => { let locale: SupportedLanguage; const cookieStore = cookies(); - const localeCookie = cookieStore.get('locale') as + const localeCookie = cookieStore.get('locale')?.value as | SupportedLanguage | undefined; diff --git a/src/views/app/Dashboard.tsx b/src/views/app/Dashboard.tsx index 3d390be0..d762e90f 100644 --- a/src/views/app/Dashboard.tsx +++ b/src/views/app/Dashboard.tsx @@ -10,6 +10,7 @@ import { } from 'lucide-react'; import Link from 'next/link'; import { useRouter } from 'next/navigation'; +import { useTranslations } from 'next-intl'; import { FC, useEffect, useMemo, useState } from 'react'; import { useCopyToClipboard, useLocalStorage } from 'usehooks-ts'; @@ -28,6 +29,8 @@ import { ROUTES } from '@/utils/routes'; import { WalletInfo } from '../wallet/Wallet'; const WalletDetails: FC<{ id: string }> = ({ id }) => { + const t = useTranslations('Index'); + const { data } = useGetWalletDetailsQuery({ variables: { id }, }); @@ -51,7 +54,7 @@ const WalletDetails: FC<{ id: string }> = ({ id }) => {

- Wallet + {t('wallet')}