Revert "Revert "I18N Caching (#6823)""

This reverts commit e248fda36b.

Re-fixed cache rules

apps/web/components/ImageUploader.tsx

@@ -1,11 +1,11 @@
 import { FormEvent, useCallback, useEffect, useState } from "react";
 import Cropper from "react-easy-crop";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui";
 
 import { Area, getCroppedImg } from "@lib/cropImage";
 import { useFileReader } from "@lib/hooks/useFileReader";
-import { useLocale } from "@lib/hooks/useLocale";
 
 import Slider from "@components/Slider";
 

apps/web/components/security/TwoFactorAuthSection.tsx

@@ -1,9 +1,8 @@
 import { useState } from "react";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Badge, Button } from "@calcom/ui";
 
-import { useLocale } from "@lib/hooks/useLocale";
-
 import DisableTwoFactorModal from "./DisableTwoFactorModal";
 import EnableTwoFactorModal from "./EnableTwoFactorModal";
 

apps/web/components/team/screens/Team.tsx

@@ -3,10 +3,9 @@ import Link from "next/link";
 import { TeamPageProps } from "pages/team/[slug]";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Avatar } from "@calcom/ui";
 
-import { useLocale } from "@lib/hooks/useLocale";
-
 const md = new MarkdownIt("default", { html: true, breaks: true, linkify: true });
 
 type TeamType = TeamPageProps["team"];

apps/web/lib/hooks/useLocale.ts

@@ -1,11 +0,0 @@
-import { useTranslation } from "next-i18next";
-
-/** @deprecated use the one from `@calcom/lib/hooks/useLocale` */
-export const useLocale = () => {
-  const { i18n, t } = useTranslation("common");
-
-  return {
-    i18n,
-    t,
-  };
-};

apps/web/pages/404.tsx

@@ -4,11 +4,10 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 import { COMPANY_NAME, DEVELOPER_DOCS, DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HeadSeo } from "@calcom/ui";
 import { FiFileText, FiCheck, FiBookOpen, FiChevronRight } from "@calcom/ui/components/icon";
 
-import { useLocale } from "@lib/hooks/useLocale";
-
 import { ssgInit } from "@server/lib/ssg";
 
 export default function Custom404() {

apps/web/pages/api/trpc/[trpc].ts

@@ -1,6 +1,8 @@
 /**
  * This file contains tRPC's HTTP response handler
  */
+import { z } from "zod";
+
 import * as trpcNext from "@calcom/trpc/server/adapters/next";
 import { createContext } from "@calcom/trpc/server/createContext";
 import { appRouter } from "@calcom/trpc/server/routers/_app";
@@ -30,34 +32,46 @@ export default trpcNext.createNextApiHandler({
    * @link https://trpc.io/docs/caching#api-response-caching
    */
   responseMeta({ ctx, paths, type, errors }) {
-    // assuming we have all our public routes in `viewer.public`
+    // Some helpers relevant to this function only
+    const ONE_DAY_IN_SECONDS = 60 * 60 * 24;
+    // assuming you have all your public routes with the keyword `public` in them
     const allPublic = paths && paths.every((path) => path.startsWith("viewer.public."));
     // checking that no procedures errored
     const allOk = errors.length === 0;
     // checking we're doing a query request
     const isQuery = type === "query";
+    const noHeaders = {};
 
-    // i18n response depends on request header
-    const nonCacheableQueries = ["viewer.public.i18n"];
-    const isThereANonCacheableQuery = paths?.some((path) => nonCacheableQueries.includes(path));
-    const isThereACacheableQuery = paths?.some((path) => !nonCacheableQueries.includes(path));
-    if (isThereANonCacheableQuery && isThereACacheableQuery) {
-      console.warn(
-        "Cacheable and Non-cacheable queries are mixed in the same request. Not going to cache the request"
-      );
-    }
+    // We cannot set headers on SSG queries
+    if (!ctx?.res) return noHeaders;
 
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore ctx.req is available for SSR but not SSG
-    if (!!ctx?.req && allPublic && allOk && isQuery && !isThereANonCacheableQuery) {
-      // cache request for 1 day + revalidate once every 5 seconds
-      const ONE_DAY_IN_SECONDS = 60 * 60 * 24;
-      return {
-        headers: {
-          "cache-control": `s-maxage=5, stale-while-revalidate=${ONE_DAY_IN_SECONDS}`,
-        },
-      };
-    }
-    return {};
+    const defaultHeaders: Record<"headers", Record<string, string>> = {
+      headers: {},
+    };
+
+    const timezone = z.string().safeParse(ctx.req?.headers["x-vercel-ip-timezone"]);
+    if (timezone.success) defaultHeaders.headers["x-cal-timezone"] = timezone.data;
+
+    // We need all these conditions to be true to set cache headers
+    if (!(allPublic && allOk && isQuery)) return defaultHeaders;
+
+    // No cache by default
+    defaultHeaders.headers["cache-control"] = `no-cache`;
+
+    // Our cache can change depending on our current paths value. Since paths is an array,
+    // we want to create a map that can match potential paths with their desired cache value
+    const cacheRules = {
+      "viewer.public.session": `no-cache`,
+      "viewer.public.i18n": `no-cache`,
+      // Revalidation time here should be 1 second, per https://github.com/calcom/cal.com/pull/6823#issuecomment-1423215321
+      "viewer.public.slots.getSchedule": `max-age=0, s-maxage=1`,
+    } as const;
+
+    // Find which element above is an exact match for this group of paths
+    const matchedPath = paths.find((v) => v in cacheRules) as keyof typeof cacheRules;
+
+    if (matchedPath) defaultHeaders.headers["cache-control"] = cacheRules[matchedPath];
+
+    return defaultHeaders;
   },
 });

apps/web/pages/auth/forgot-password/[id].tsx

@@ -6,11 +6,10 @@ import Link from "next/link";
 import React, { useMemo } from "react";
 
 import dayjs from "@calcom/dayjs";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
 import { Button, TextField } from "@calcom/ui";
 
-import { useLocale } from "@lib/hooks/useLocale";
-
 import AuthContainer from "@components/ui/AuthContainer";
 
 type Props = {

apps/web/pages/auth/forgot-password/index.tsx

@@ -5,10 +5,10 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { SyntheticEvent } from "react";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, EmailField } from "@calcom/ui";
 
 import { getSession } from "@lib/auth";
-import { useLocale } from "@lib/hooks/useLocale";
 
 import AuthContainer from "@components/ui/AuthContainer";
 

apps/web/pages/settings/my-account/general.tsx

@@ -69,7 +69,9 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
   const { t } = useLocale();
 
   const mutation = trpc.viewer.updateProfile.useMutation({
-    onSuccess: () => {
+    onSuccess: async () => {
+      // Invalidate our previous i18n cache
+      await utils.viewer.public.i18n.invalidate();
       reset(getValues());
       showToast(t("settings_updated_successfully"), "success");
     },