fix: client locale inference (#10850)
parent
bbad0fbc18
commit
6743aa4609
|
@ -1,15 +1,14 @@
|
|||
import parser from "accept-language-parser";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import { useEffect } from "react";
|
||||
|
||||
import { CALCOM_VERSION } from "@calcom/lib/constants";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
|
||||
// eslint-disable-next-line turbo/no-undeclared-env-vars
|
||||
const vercelCommitHash = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA || "NA";
|
||||
|
||||
export function useViewerI18n(locale: string) {
|
||||
function useViewerI18n(locale: string) {
|
||||
return trpc.viewer.public.i18n.useQuery(
|
||||
{ locale, CalComVersion: vercelCommitHash },
|
||||
{ locale, CalComVersion: CALCOM_VERSION },
|
||||
{
|
||||
/**
|
||||
* i18n should never be clubbed with other queries, so that it's caching can be managed independently.
|
||||
|
@ -21,13 +20,32 @@ export function useViewerI18n(locale: string) {
|
|||
);
|
||||
}
|
||||
|
||||
function useClientLocale(locales: string[]) {
|
||||
const session = useSession();
|
||||
// If the user is logged in, use their locale
|
||||
if (session.data?.user.locale) return session.data.user.locale;
|
||||
// If the user is not logged in, use the browser locale
|
||||
if (typeof window !== "undefined") {
|
||||
// This is the only way I found to ensure the prefetched locale is used on first render
|
||||
// FIXME: Find a better way to pick the best matching locale from the browser
|
||||
return parser.pick(locales, window.navigator.language, { loose: true }) || window.navigator.language;
|
||||
}
|
||||
// If the browser is not available, use English
|
||||
return "en";
|
||||
}
|
||||
|
||||
export function useClientViewerI18n(locales: string[]) {
|
||||
const clientLocale = useClientLocale(locales);
|
||||
return useViewerI18n(clientLocale);
|
||||
}
|
||||
|
||||
/**
|
||||
* Auto-switches locale client-side to the logged in user's preference
|
||||
*/
|
||||
const I18nLanguageHandler = () => {
|
||||
const session = useSession();
|
||||
const I18nLanguageHandler = (props: { locales: string[] }) => {
|
||||
const { locales } = props;
|
||||
const { i18n } = useTranslation("common");
|
||||
const locale = useViewerI18n(session.data?.user.locale || "en").data?.locale || i18n.language;
|
||||
const locale = useClientViewerI18n(locales).data?.locale || i18n.language;
|
||||
|
||||
useEffect(() => {
|
||||
// bail early when i18n = {}
|
||||
|
|
|
@ -6,7 +6,7 @@ import Script from "next/script";
|
|||
|
||||
import "@calcom/embed-core/src/embed-iframe";
|
||||
import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
|
||||
import { WEBAPP_URL, IS_CALCOM } from "@calcom/lib/constants";
|
||||
import { IS_CALCOM, WEBAPP_URL } from "@calcom/lib/constants";
|
||||
import { buildCanonical } from "@calcom/lib/next-seo.config";
|
||||
|
||||
import type { AppProps } from "@lib/app-providers";
|
||||
|
@ -72,7 +72,7 @@ function PageWrapper(props: AppProps) {
|
|||
}
|
||||
{...seoConfig.defaultNextSeo}
|
||||
/>
|
||||
<I18nLanguageHandler />
|
||||
<I18nLanguageHandler locales={props.router.locales || []} />
|
||||
<Script
|
||||
nonce={nonce}
|
||||
id="page-status"
|
||||
|
|
|
@ -20,7 +20,7 @@ import { MetaProvider } from "@calcom/ui";
|
|||
import useIsBookingPage from "@lib/hooks/useIsBookingPage";
|
||||
import type { WithNonceProps } from "@lib/withNonce";
|
||||
|
||||
import { useViewerI18n } from "@components/I18nLanguageHandler";
|
||||
import { useClientViewerI18n } from "@components/I18nLanguageHandler";
|
||||
|
||||
const I18nextAdapter = appWithTranslation<
|
||||
NextJsAppProps<SSRConfig> & {
|
||||
|
@ -69,11 +69,8 @@ const CustomI18nextProvider = (props: AppPropsWithoutNonce) => {
|
|||
/**
|
||||
* i18n should never be clubbed with other queries, so that it's caching can be managed independently.
|
||||
**/
|
||||
const session = useSession();
|
||||
const localeToUse = session.data?.user.locale ?? "en";
|
||||
const { i18n, locale } = useViewerI18n(localeToUse).data ?? {
|
||||
locale: "en",
|
||||
};
|
||||
const clientViewerI18n = useClientViewerI18n(props.router.locales || []);
|
||||
const { i18n, locale } = clientViewerI18n.data || {};
|
||||
|
||||
const passedProps = {
|
||||
...props,
|
||||
|
|
|
@ -1,53 +0,0 @@
|
|||
import parser from "accept-language-parser";
|
||||
import type { IncomingMessage } from "http";
|
||||
import type { GetServerSidePropsContext } from "next";
|
||||
|
||||
import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
|
||||
import type { Maybe } from "@calcom/trpc/server";
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
const { i18n } = require("@calcom/config/next-i18next.config");
|
||||
|
||||
export function getLocaleFromHeaders(req: IncomingMessage): string {
|
||||
let preferredLocale: string | null | undefined;
|
||||
if (req.headers["accept-language"]) {
|
||||
preferredLocale = parser.pick(i18n.locales, req.headers["accept-language"]) as Maybe<string>;
|
||||
}
|
||||
return preferredLocale ?? i18n.defaultLocale;
|
||||
}
|
||||
|
||||
export const getOrSetUserLocaleFromHeaders = async (
|
||||
req: GetServerSidePropsContext["req"],
|
||||
res: GetServerSidePropsContext["res"]
|
||||
): Promise<string> => {
|
||||
const { default: prisma } = await import("@calcom/prisma");
|
||||
|
||||
const session = await getServerSession({ req, res });
|
||||
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;
|
||||
};
|
|
@ -3,6 +3,7 @@ const CopyWebpackPlugin = require("copy-webpack-plugin");
|
|||
const os = require("os");
|
||||
const englishTranslation = require("./public/static/locales/en/common.json");
|
||||
const { withAxiom } = require("next-axiom");
|
||||
const { version } = require("./package.json");
|
||||
const { i18n } = require("./next-i18next.config");
|
||||
const {
|
||||
orgHostPath,
|
||||
|
@ -14,6 +15,9 @@ const {
|
|||
if (!process.env.NEXTAUTH_SECRET) throw new Error("Please set NEXTAUTH_SECRET");
|
||||
if (!process.env.CALENDSO_ENCRYPTION_KEY) throw new Error("Please set CALENDSO_ENCRYPTION_KEY");
|
||||
|
||||
// To be able to use the version in the app without having to import package.json
|
||||
process.env.NEXT_PUBLIC_CALCOM_VERSION = version;
|
||||
|
||||
// So we can test deploy previews preview
|
||||
if (process.env.VERCEL_URL && !process.env.NEXT_PUBLIC_WEBAPP_URL) {
|
||||
process.env.NEXT_PUBLIC_WEBAPP_URL = "https://" + process.env.VERCEL_URL;
|
||||
|
|
|
@ -2,6 +2,7 @@ import type { GetStaticPropsContext } from "next";
|
|||
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
|
||||
import superjson from "superjson";
|
||||
|
||||
import { CALCOM_VERSION } from "@calcom/lib/constants";
|
||||
import prisma from "@calcom/prisma";
|
||||
import { createProxySSGHelpers } from "@calcom/trpc/react/ssg";
|
||||
import { appRouter } from "@calcom/trpc/server/routers/_app";
|
||||
|
@ -9,10 +10,6 @@ import { appRouter } from "@calcom/trpc/server/routers/_app";
|
|||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
const { i18n } = require("@calcom/config/next-i18next.config");
|
||||
|
||||
// TODO: Consolidate this constant
|
||||
// eslint-disable-next-line turbo/no-undeclared-env-vars
|
||||
const CalComVersion = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA || "NA";
|
||||
|
||||
/**
|
||||
* Initialize static site rendering tRPC helpers.
|
||||
* Provides a method to prefetch tRPC-queries in a `getStaticProps`-function.
|
||||
|
@ -41,7 +38,7 @@ export async function ssgInit<TParams extends { locale?: string }>(opts: GetStat
|
|||
});
|
||||
|
||||
// always preload i18n
|
||||
await ssg.viewer.public.i18n.fetch({ locale, CalComVersion });
|
||||
await ssg.viewer.public.i18n.fetch({ locale, CalComVersion: CALCOM_VERSION });
|
||||
|
||||
return ssg;
|
||||
}
|
||||
|
|
|
@ -2,15 +2,12 @@ import type { GetServerSidePropsContext } from "next";
|
|||
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
|
||||
import superjson from "superjson";
|
||||
|
||||
import { getLocaleFromHeaders } from "@calcom/lib/i18n";
|
||||
import { CALCOM_VERSION } from "@calcom/lib/constants";
|
||||
import { getLocaleFromRequest } from "@calcom/lib/i18n";
|
||||
import { createProxySSGHelpers } from "@calcom/trpc/react/ssg";
|
||||
import { createContext } from "@calcom/trpc/server/createContext";
|
||||
import { appRouter } from "@calcom/trpc/server/routers/_app";
|
||||
|
||||
// TODO: Consolidate this constant
|
||||
// eslint-disable-next-line turbo/no-undeclared-env-vars
|
||||
const CalComVersion = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA || "NA";
|
||||
|
||||
/**
|
||||
* Initialize server-side rendering tRPC helpers.
|
||||
* Provides a method to prefetch tRPC-queries in a `getServerSideProps`-function.
|
||||
|
@ -19,8 +16,8 @@ const CalComVersion = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA || "NA";
|
|||
*/
|
||||
export async function ssrInit(context: GetServerSidePropsContext) {
|
||||
const ctx = await createContext(context);
|
||||
const locale = getLocaleFromHeaders(context.req);
|
||||
const i18n = await serverSideTranslations(getLocaleFromHeaders(context.req), ["common", "vital"]);
|
||||
const locale = await getLocaleFromRequest(context.req);
|
||||
const i18n = await serverSideTranslations(locale, ["common", "vital"]);
|
||||
|
||||
const ssr = createProxySSGHelpers({
|
||||
router: appRouter,
|
||||
|
@ -28,14 +25,15 @@ export async function ssrInit(context: GetServerSidePropsContext) {
|
|||
ctx: { ...ctx, locale, i18n },
|
||||
});
|
||||
|
||||
await Promise.allSettled([
|
||||
// always preload "viewer.public.i18n"
|
||||
await ssr.viewer.public.i18n.fetch({ locale, CalComVersion });
|
||||
ssr.viewer.public.i18n.prefetch({ locale, CalComVersion: CALCOM_VERSION }),
|
||||
// So feature flags are available on first render
|
||||
await ssr.viewer.features.map.prefetch();
|
||||
ssr.viewer.features.map.prefetch(),
|
||||
// Provides a better UX to the users who have already upgraded.
|
||||
await ssr.viewer.teams.hasTeamPlan.prefetch();
|
||||
|
||||
await ssr.viewer.public.session.prefetch();
|
||||
ssr.viewer.teams.hasTeamPlan.prefetch(),
|
||||
ssr.viewer.public.session.prefetch(),
|
||||
]);
|
||||
|
||||
return ssr;
|
||||
}
|
||||
|
|
|
@ -5,32 +5,32 @@ const config = {
|
|||
i18n: {
|
||||
defaultLocale: "en",
|
||||
locales: [
|
||||
"en",
|
||||
"fr",
|
||||
"it",
|
||||
"ru",
|
||||
"es",
|
||||
"ar",
|
||||
"cs",
|
||||
"da",
|
||||
"de",
|
||||
"en",
|
||||
"es-419",
|
||||
"es",
|
||||
"fr",
|
||||
"he",
|
||||
"it",
|
||||
"ja",
|
||||
"ko",
|
||||
"nl",
|
||||
"no",
|
||||
"pl",
|
||||
"pt-BR",
|
||||
"pt",
|
||||
"ro",
|
||||
"nl",
|
||||
"pt-BR",
|
||||
"es-419",
|
||||
"ko",
|
||||
"ja",
|
||||
"pl",
|
||||
"ar",
|
||||
"he",
|
||||
"zh-CN",
|
||||
"zh-TW",
|
||||
"cs",
|
||||
"ru",
|
||||
"sr",
|
||||
"sv",
|
||||
"vi",
|
||||
"no",
|
||||
"uk",
|
||||
"da",
|
||||
"tr",
|
||||
"uk",
|
||||
"vi",
|
||||
"zh-CN",
|
||||
"zh-TW",
|
||||
],
|
||||
},
|
||||
reloadOnPrerender: process.env.NODE_ENV !== "production",
|
||||
|
|
|
@ -93,3 +93,4 @@ export const ALLOWED_HOSTNAMES = JSON.parse(`[${process.env.ALLOWED_HOSTNAMES ||
|
|||
export const RESERVED_SUBDOMAINS = JSON.parse(`[${process.env.RESERVED_SUBDOMAINS || ""}]`) as string[];
|
||||
|
||||
export const ORGANIZATION_MIN_SEATS = 30;
|
||||
export const CALCOM_VERSION = process.env.NEXT_PUBLIC_CALCOM_VERSION as string;
|
||||
|
|
|
@ -1,15 +1,22 @@
|
|||
/* eslint-disable @typescript-eslint/no-var-requires */
|
||||
import parser from "accept-language-parser";
|
||||
import type { IncomingMessage } from "http";
|
||||
import type { GetServerSidePropsContext, NextApiRequest } from "next";
|
||||
|
||||
import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
|
||||
import type { Maybe } from "@calcom/trpc/server";
|
||||
|
||||
const { i18n } = require("@calcom/config/next-i18next.config");
|
||||
|
||||
export function getLocaleFromHeaders(req: IncomingMessage): string {
|
||||
export async function getLocaleFromRequest(
|
||||
req: NextApiRequest | GetServerSidePropsContext["req"]
|
||||
): Promise<string> {
|
||||
const session = await getServerSession({ req });
|
||||
if (session?.user?.locale) return session.user.locale;
|
||||
let preferredLocale: string | null | undefined;
|
||||
if (req.headers["accept-language"]) {
|
||||
preferredLocale = parser.pick(i18n.locales, req.headers["accept-language"]) as Maybe<string>;
|
||||
preferredLocale = parser.pick(i18n.locales, req.headers["accept-language"], {
|
||||
loose: true,
|
||||
}) as Maybe<string>;
|
||||
}
|
||||
return preferredLocale ?? i18n.defaultLocale;
|
||||
}
|
||||
|
|
|
@ -3,7 +3,7 @@ import type { GetServerSidePropsContext, NextApiRequest, NextApiResponse } from
|
|||
import type { Session } from "next-auth";
|
||||
import type { serverSideTranslations } from "next-i18next/serverSideTranslations";
|
||||
|
||||
import { getLocaleFromHeaders } from "@calcom/lib/i18n";
|
||||
import { getLocaleFromRequest } from "@calcom/lib/i18n";
|
||||
import prisma from "@calcom/prisma";
|
||||
import type { SelectedCalendar, User as PrismaUser } from "@calcom/prisma/client";
|
||||
|
||||
|
@ -62,7 +62,7 @@ export async function createContextInner(opts: CreateInnerContextOptions) {
|
|||
* @link https://trpc.io/docs/context
|
||||
*/
|
||||
export const createContext = async ({ req, res }: CreateContextOptions, sessionGetter?: GetSessionFn) => {
|
||||
const locale = getLocaleFromHeaders(req);
|
||||
const locale = await getLocaleFromRequest(req);
|
||||
const session = !!sessionGetter ? await sessionGetter({ req, res }) : null;
|
||||
const contextInner = await createContextInner({ locale, session });
|
||||
return {
|
||||
|
|
|
@ -1,7 +1,14 @@
|
|||
import parser from "accept-language-parser";
|
||||
import { z } from "zod";
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
const { i18n } = require("@calcom/config/next-i18next.config");
|
||||
|
||||
export const i18nInputSchema = z.object({
|
||||
locale: z.string(),
|
||||
locale: z
|
||||
.string()
|
||||
.min(2)
|
||||
.transform((locale) => parser.pick<string>(i18n.locales, locale, { loose: true }) || locale),
|
||||
CalComVersion: z.string(),
|
||||
});
|
||||
|
||||
|
|
|
@ -1,16 +1,12 @@
|
|||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { COMPANY_NAME, IS_SELF_HOSTED, IS_CALCOM } from "@calcom/lib/constants";
|
||||
|
||||
// Relative to prevent triggering a recompile
|
||||
import pkg from "../../../../apps/web/package.json";
|
||||
import { CALCOM_VERSION, COMPANY_NAME, IS_CALCOM, IS_SELF_HOSTED } from "@calcom/lib/constants";
|
||||
|
||||
// eslint-disable-next-line turbo/no-undeclared-env-vars
|
||||
const vercelCommitHash = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA;
|
||||
const commitHash = vercelCommitHash ? `-${vercelCommitHash.slice(0, 7)}` : "";
|
||||
|
||||
export const CalComVersion = `v.${pkg.version}-${!IS_SELF_HOSTED ? "h" : "sh"}`;
|
||||
const CalComVersion = `v.${CALCOM_VERSION}-${!IS_SELF_HOSTED ? "h" : "sh"}`;
|
||||
|
||||
export default function Credits() {
|
||||
const [hasMounted, setHasMounted] = useState(false);
|
||||
|
|
|
@ -4,11 +4,11 @@ import { vi } from "vitest";
|
|||
|
||||
import Credits from "./Credits";
|
||||
|
||||
vi.mock("../../../../apps/web/package.json", async () => {
|
||||
vi.mock("@calcom/lib/constants", async () => {
|
||||
const actual = (await vi.importActual("@calcom/lib/constants")) as typeof import("@calcom/lib/constants");
|
||||
return {
|
||||
default: {
|
||||
version: "mockedVersion",
|
||||
},
|
||||
...actual,
|
||||
CALCOM_VERSION: "mockedVersion",
|
||||
};
|
||||
});
|
||||
|
||||
|
|
|
@ -88,6 +88,7 @@ const config: PlaywrightTestConfig = {
|
|||
},
|
||||
use: {
|
||||
...devices["Desktop Chrome"],
|
||||
locale: "en-US",
|
||||
/** If navigation takes more than this, then something's wrong, let's fail fast. */
|
||||
navigationTimeout: DEFAULT_NAVIGATION_TIMEOUT,
|
||||
},
|
||||
|
@ -101,6 +102,7 @@ const config: PlaywrightTestConfig = {
|
|||
},
|
||||
use: {
|
||||
...devices["Desktop Chrome"],
|
||||
locale: "en-US",
|
||||
/** If navigation takes more than this, then something's wrong, let's fail fast. */
|
||||
navigationTimeout: DEFAULT_NAVIGATION_TIMEOUT,
|
||||
},
|
||||
|
@ -112,7 +114,7 @@ const config: PlaywrightTestConfig = {
|
|||
expect: {
|
||||
timeout: DEFAULT_EXPECT_TIMEOUT,
|
||||
},
|
||||
use: { ...devices["Desktop Chrome"], baseURL: "http://localhost:3100/" },
|
||||
use: { ...devices["Desktop Chrome"], locale: "en-US", baseURL: "http://localhost:3100/" },
|
||||
},
|
||||
{
|
||||
name: "@calcom/embed-react",
|
||||
|
@ -121,7 +123,7 @@ const config: PlaywrightTestConfig = {
|
|||
timeout: DEFAULT_EXPECT_TIMEOUT,
|
||||
},
|
||||
testMatch: /.*\.e2e\.tsx?/,
|
||||
use: { ...devices["Desktop Chrome"], baseURL: "http://localhost:3101/" },
|
||||
use: { ...devices["Desktop Chrome"], locale: "en-US", baseURL: "http://localhost:3101/" },
|
||||
},
|
||||
{
|
||||
name: "@calcom/embed-core--firefox",
|
||||
|
|
|
@ -224,6 +224,7 @@
|
|||
"NEXT_PUBLIC_API_URL",
|
||||
"NEXT_PUBLIC_APP_NAME",
|
||||
"NEXT_PUBLIC_AUTH_URL",
|
||||
"NEXT_PUBLIC_CALCOM_VERSION",
|
||||
"NEXT_PUBLIC_COMPANY_NAME",
|
||||
"NEXT_PUBLIC_CONSOLE_URL",
|
||||
"NEXT_PUBLIC_DEBUG",
|
||||
|
|
Loading…
Reference in New Issue