feat: change locale in settings

taskany-inc · Apr 15, 2024 · 1575984 · 1575984
1 parent e7ab38f
commit 1575984
Show file tree

Hide file tree

Showing 11 changed files with 89 additions and 5 deletions.
diff --git a/prisma/migrations/20240412082257_locale_in_settings/migration.sql b/prisma/migrations/20240412082257_locale_in_settings/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Settings" ADD COLUMN     "locale" TEXT NOT NULL DEFAULT 'en';
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -317,6 +317,7 @@ model Settings {
   flow     Flow?     @relation(fields: [flowId], references: [id])
   flowId   String?
   activity Activity?
+  locale   String    @default("en")
 
   createdAt DateTime @default(dbgenerated("timezone('utc'::text, now())")) @db.Timestamp()
   updatedAt DateTime @default(dbgenerated("timezone('utc'::text, now())")) @updatedAt

diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx
@@ -83,6 +83,14 @@ export const Page: React.FC<PageProps> = ({ user, ssrTime, title = 'Untitled', c
         setPreview(null);
     }, [router.asPath, setPreview]);
 
+    useEffect(() => {
+        const { asPath, locale, push } = router;
+
+        if (userSettings?.locale && locale !== userSettings.locale) {
+            push(asPath, asPath, { locale: userSettings.locale });
+        }
+    }, [router, userSettings]);
+
     return (
         <pageContext.Provider value={{ user, theme, themeId: mapThemeOnId[theme], ssrTime }}>
             <Head>

diff --git a/src/components/PageFooter/PageFooter.i18n/en.json b/src/components/PageFooter/PageFooter.i18n/en.json
@@ -4,5 +4,6 @@
     "Docs": "Docs",
     "Contact Taskany": "Contact Taskany",
     "API": "API",
-    "About": "About"
+    "About": "About",
+    "Locale change title": "Ru"
 }
diff --git a/src/components/PageFooter/PageFooter.i18n/ru.json b/src/components/PageFooter/PageFooter.i18n/ru.json
@@ -4,5 +4,6 @@
     "Docs": "Документация",
     "Contact Taskany": "Контакты",
     "API": "API",
-    "About": "О нас"
+    "About": "О нас",
+    "Locale change title": "En"
 }
diff --git a/src/components/PageFooter/PageFooter.tsx b/src/components/PageFooter/PageFooter.tsx
@@ -1,7 +1,11 @@
-import { FC } from 'react';
+import { FC, useCallback } from 'react';
 import { Footer, Link, FooterItem } from '@taskany/bricks';
+import { useRouter } from 'next/router';
 
 import { ModalEvent, dispatchModalEvent } from '../../utils/dispatchModal';
+import { defaultLocale, languages } from '../../utils/getLang';
+import { trpc } from '../../utils/trpcClient';
+import { notifyPromise } from '../../utils/notifyPromise';
 
 import s from './PageFooter.module.css';
 import { tr } from './PageFooter.i18n';
@@ -14,6 +18,29 @@ export const PageFooter: FC = () => {
         { title: tr('API'), url: '/api' },
         { title: tr('About'), url: '/about' },
     ];
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const updateSettingsMutation = trpc.user.updateSettings.useMutation();
+    const utils = trpc.useContext();
+    const onLocaleChange = useCallback(async () => {
+        const newLocale = locale === defaultLocale ? languages[1] : defaultLocale;
+
+        const promise = updateSettingsMutation.mutateAsync(
+            {
+                locale: newLocale,
+            },
+            {
+                onSuccess: () => {
+                    utils.user.settings.invalidate();
+                },
+            },
+        );
+
+        await notifyPromise(promise, 'userSettingsUpdate');
+    }, [updateSettingsMutation, utils.user.settings, locale]);
+
     return (
         <Footer>
             <FooterItem onClick={dispatchModalEvent(ModalEvent.FeedbackCreateModal)} className={s.FooterItem}>
@@ -25,6 +52,9 @@ export const PageFooter: FC = () => {
                     <FooterItem>{title}</FooterItem>
                 </Link>
             ))}
+            <Link inline onClick={onLocaleChange}>
+                <FooterItem>{tr('Locale change title')}</FooterItem>
+            </Link>
         </Footer>
     );
 };
diff --git a/src/components/UserSettingsPage/UserSettingsPage.i18n/en.json b/src/components/UserSettingsPage/UserSettingsPage.i18n/en.json
@@ -12,5 +12,6 @@
     "title": "Taskany — {user} — Settings",
     "You are hero": "",
     "Beta features": "",
-    "Nickname already exists": "Nickname already exists"
+    "Nickname already exists": "Nickname already exists",
+    "Locale": ""
 }
diff --git a/src/components/UserSettingsPage/UserSettingsPage.i18n/ru.json b/src/components/UserSettingsPage/UserSettingsPage.i18n/ru.json
@@ -12,5 +12,6 @@
     "title": "Taskany — {user} — Настройки",
     "You are hero": "Ты наш герой",
     "Beta features": "Участвовать в бета-тестировании",
-    "Nickname already exists": "Логин уже существует"
+    "Nickname already exists": "Логин уже существует",
+    "Locale": "Язык"
 }
diff --git a/src/components/UserSettingsPage/UserSettingsPage.tsx b/src/components/UserSettingsPage/UserSettingsPage.tsx
@@ -24,6 +24,7 @@ import { UpdateUser, updateUserSchema } from '../../schema/user';
 import { notifyPromise } from '../../utils/notifyPromise';
 import { dispatchErrorNotification, dispatchSuccessNotification } from '../../utils/dispatchNotification';
 import { userSettings, userSettingsLogoutButton } from '../../utils/domObjects';
+import { languages } from '../../utils/getLang';
 
 import s from './UserSettingsPage.module.css';
 import { tr } from './UserSettingsPage.i18n';
@@ -119,6 +120,26 @@ export const UserSettingsPage = ({ user, ssrTime }: ExternalPageProps) => {
         [updateSettingsMutation, utils.user.settings],
     );
 
+    const onLocaleChange = useCallback(
+        async (locale?: string) => {
+            if (!locale) return;
+
+            const promise = updateSettingsMutation.mutateAsync(
+                {
+                    locale,
+                },
+                {
+                    onSuccess: () => {
+                        utils.user.settings.invalidate();
+                    },
+                },
+            );
+
+            await notifyPromise(promise, 'userSettingsUpdate');
+        },
+        [updateSettingsMutation, utils.user.settings],
+    );
+
     const [betaUser, setBetaUser] = useState(settings?.data?.beta);
 
     const onBetaUserChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
@@ -246,6 +267,22 @@ export const UserSettingsPage = ({ user, ssrTime }: ExternalPageProps) => {
                         </Fieldset>
                     </Form>
                 </SettingsCard>
+                <SettingsCard>
+                    <Form>
+                        <Fieldset title={tr('Locale')}>
+                            <FormRadio
+                                label="Locale"
+                                name="locale"
+                                value={settings.data?.locale}
+                                onChange={onLocaleChange}
+                            >
+                                {languages.map((language) => (
+                                    <FormRadioInput value={language} label={language} key={language} />
+                                ))}
+                            </FormRadio>
+                        </Fieldset>
+                    </Form>
+                </SettingsCard>
 
                 <SettingsCard>
                     <Form>

diff --git a/src/schema/user.ts b/src/schema/user.ts
@@ -17,4 +17,5 @@ export const suggestionsUserSchema = z.object({
 export const settingsUserSchema = z.object({
     theme: z.string().optional(),
     beta: z.boolean().optional(),
+    locale: z.string().optional(),
 });
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
@@ -162,6 +162,7 @@ declare module 'next-auth' {
             settings?: {
                 theme: 'light' | 'dark' | 'system';
                 beta: boolean;
+                locale: string;
             };
         };
     }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		-- AlterTable
		ALTER TABLE "Settings" ADD COLUMN "locale" TEXT NOT NULL DEFAULT 'en';