diff --git a/apps/web/components/I18nLanguageHandler.tsx b/apps/web/components/I18nLanguageHandler.tsx index 0663d6dfd0..3072b3504c 100644 --- a/apps/web/components/I18nLanguageHandler.tsx +++ b/apps/web/components/I18nLanguageHandler.tsx @@ -1,6 +1,7 @@ import { useTranslation } from "next-i18next"; import { useEffect } from "react"; +import { getDirFromLang } from "@calcom/lib/i18n"; import { trpc } from "@calcom/trpc/react"; export function useViewerI18n() { @@ -21,12 +22,16 @@ export function useViewerI18n() { */ const I18nLanguageHandler = (): null => { const { i18n } = useTranslation("common"); - const locale = useViewerI18n().data?.locale; + const locale = useViewerI18n().data?.locale || "en"; useEffect(() => { if (locale && i18n.language && i18n.language !== locale) { if (typeof i18n.changeLanguage === "function") i18n.changeLanguage(locale); } + + const dir = getDirFromLang(locale); + document.documentElement.setAttribute("lang", locale); + document.documentElement.setAttribute("dir", dir); }, [locale, i18n]); return null; diff --git a/apps/web/lib/core/i18n/i18n.utils.ts b/apps/web/lib/core/i18n/i18n.utils.ts index 7b4098c6c7..9a4353a3a4 100644 --- a/apps/web/lib/core/i18n/i18n.utils.ts +++ b/apps/web/lib/core/i18n/i18n.utils.ts @@ -1,7 +1,6 @@ import parser from "accept-language-parser"; import { IncomingMessage } from "http"; -import prisma from "@calcom/prisma"; import { Maybe } from "@calcom/trpc/server"; import { getSession } from "@lib/auth"; @@ -17,6 +16,7 @@ export function getLocaleFromHeaders(req: IncomingMessage): string { } export const getOrSetUserLocaleFromHeaders = async (req: IncomingMessage): Promise => { + const prisma = (await import("@calcom/prisma")).default; const session = await getSession({ req }); const preferredLocale = getLocaleFromHeaders(req); diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx index 70f2038c6f..5256f9244f 100644 --- a/apps/web/pages/_document.tsx +++ b/apps/web/pages/_document.tsx @@ -1,6 +1,8 @@ import Document, { DocumentContext, Head, Html, Main, NextScript, DocumentProps } from "next/document"; import Script from "next/script"; +import { getDirFromLang } from "@calcom/lib/i18n"; + type Props = Record & DocumentProps; function toRunBeforeReactOnClient() { @@ -47,7 +49,7 @@ class MyDocument extends Document { render() { const { locale } = this.props.__NEXT_DATA__; - const dir = locale === "ar" || locale === "he" ? "rtl" : "ltr"; + const dir = getDirFromLang(locale); return ( diff --git a/packages/lib/i18n.ts b/packages/lib/i18n.ts index 33b1e82aaa..6e2d08e2f5 100644 --- a/packages/lib/i18n.ts +++ b/packages/lib/i18n.ts @@ -2,11 +2,8 @@ import parser from "accept-language-parser"; import { IncomingMessage } from "http"; -import prisma from "@calcom/prisma"; import { Maybe } from "@calcom/trpc/server"; -import { getSession } from "./auth"; - const { i18n } = require("@calcom/config/next-i18next.config"); export function getLocaleFromHeaders(req: IncomingMessage): string { @@ -17,33 +14,5 @@ export function getLocaleFromHeaders(req: IncomingMessage): string { return preferredLocale ?? i18n.defaultLocale; } -export const getOrSetUserLocaleFromHeaders = async (req: IncomingMessage): Promise => { - const session = await getSession({ req }); - const preferredLocale = getLocaleFromHeaders(req); - - if (session?.user?.id) { - const user = await prisma.user.findUnique({ - where: { - id: session.user.id, - }, - select: { - locale: true, - }, - }); - - if (user?.locale) { - return user.locale; - } - - await prisma.user.update({ - where: { - id: session.user.id, - }, - data: { - locale: preferredLocale, - }, - }); - } - - return preferredLocale; -}; +export const getDirFromLang = (locale: string | undefined) => + locale === "ar" || locale === "he" ? "rtl" : "ltr";