feat: migrate nextjs to rr7

packages/lib/client-only/providers/feature-flag.tsx

@@ -1,95 +0,0 @@
-'use client';
-
-import { createContext, useCallback, useContext, useEffect, useState } from 'react';
-
-import {
-  FEATURE_FLAG_POLL_INTERVAL,
-  LOCAL_FEATURE_FLAGS,
-  isFeatureFlagEnabled,
-} from '@documenso/lib/constants/feature-flags';
-import { getAllFlags } from '@documenso/lib/universal/get-feature-flag';
-
-import { TFeatureFlagValue } from './feature-flag.types';
-
-export type FeatureFlagContextValue = {
-  getFlag: (_key: string) => TFeatureFlagValue;
-};
-
-export const FeatureFlagContext = createContext<FeatureFlagContextValue | null>(null);
-
-export const useFeatureFlags = () => {
-  const context = useContext(FeatureFlagContext);
-
-  if (!context) {
-    throw new Error('useFeatureFlags must be used within a FeatureFlagProvider');
-  }
-
-  return context;
-};
-
-export function FeatureFlagProvider({
-  children,
-  initialFlags,
-}: {
-  children: React.ReactNode;
-  initialFlags: Record<string, TFeatureFlagValue>;
-}) {
-  const [flags, setFlags] = useState(initialFlags);
-
-  const getFlag = useCallback(
-    (flag: string) => {
-      if (!isFeatureFlagEnabled()) {
-        return LOCAL_FEATURE_FLAGS[flag] ?? true;
-      }
-
-      return flags[flag] ?? false;
-    },
-    [flags],
-  );
-
-  /**
-   * Refresh the flags every `FEATURE_FLAG_POLL_INTERVAL` amount of time if the window is focused.
-   */
-  useEffect(() => {
-    if (!isFeatureFlagEnabled()) {
-      return;
-    }
-
-    const interval = setInterval(() => {
-      if (document.hasFocus()) {
-        void getAllFlags().then((newFlags) => setFlags(newFlags));
-      }
-    }, FEATURE_FLAG_POLL_INTERVAL);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, []);
-
-  /**
-   * Refresh the flags when the window is focused.
-   */
-  useEffect(() => {
-    if (!isFeatureFlagEnabled()) {
-      return;
-    }
-
-    const onFocus = () => void getAllFlags().then((newFlags) => setFlags(newFlags));
-
-    window.addEventListener('focus', onFocus);
-
-    return () => {
-      window.removeEventListener('focus', onFocus);
-    };
-  }, []);
-
-  return (
-    <FeatureFlagContext.Provider
-      value={{
-        getFlag,
-      }}
-    >
-      {children}
-    </FeatureFlagContext.Provider>
-  );
-}

packages/lib/client-only/providers/feature-flag.types.ts

@@ -1,10 +0,0 @@
-import { z } from 'zod';
-
-export const ZFeatureFlagValueSchema = z.union([
-  z.boolean(),
-  z.string(),
-  z.number(),
-  z.undefined(),
-]);
-
-export type TFeatureFlagValue = z.infer<typeof ZFeatureFlagValueSchema>;

packages/lib/client-only/providers/i18n-server.tsx

@@ -1,17 +1,12 @@
-import 'server-only';
-
-import { cookies, headers } from 'next/headers';
-
 import type { I18n, Messages } from '@lingui/core';
 import { setupI18n } from '@lingui/core';
-import { setI18n } from '@lingui/react/server';
 
 import {
   APP_I18N_OPTIONS,
   SUPPORTED_LANGUAGE_CODES,
   isValidLanguageCode,
 } from '../../constants/i18n';
-import { extractLocaleData } from '../../utils/i18n';
+import { env } from '../../utils/env';
 import { remember } from '../../utils/remember';
 
 type SupportedLanguages = (typeof SUPPORTED_LANGUAGE_CODES)[number];
@@ -19,7 +14,7 @@ type SupportedLanguages = (typeof SUPPORTED_LANGUAGE_CODES)[number];
 export async function loadCatalog(lang: SupportedLanguages): Promise<{
   [k: string]: Messages;
 }> {
-  const extension = process.env.NODE_ENV === 'development' ? 'po' : 'js';
+  const extension = env('NODE_ENV') === 'development' ? 'po' : 'mjs';
 
   const { messages } = await import(`../../translations/${lang}/web.${extension}`);
 
@@ -71,29 +66,3 @@ export const getI18nInstance = async (lang?: SupportedLanguages | (string & {}))
 
   return instances[lang] ?? instances[APP_I18N_OPTIONS.sourceLang];
 };
-
-/**
- * This needs to be run in all layouts and page server components that require i18n.
- *
- * https://lingui.dev/tutorials/react-rsc#pages-layouts-and-lingui
- */
-export const setupI18nSSR = async () => {
-  const { lang, locales } = extractLocaleData({
-    cookies: cookies(),
-    headers: headers(),
-  });
-
-  // Get and set a ready-made i18n instance for the given language.
-  const i18n = await getI18nInstance(lang);
-
-  // Reactivate the i18n instance with the locale for date and number formatting.
-  i18n.activate(lang, locales);
-
-  setI18n(i18n);
-
-  return {
-    lang,
-    locales,
-    i18n,
-  };
-};

packages/lib/client-only/providers/i18n.client.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { useState } from 'react';
 
 import { type Messages, setupI18n } from '@lingui/core';

packages/lib/client-only/providers/session.tsx

@@ -0,0 +1,111 @@
+import { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import React from 'react';
+
+import type { Session } from '@prisma/client';
+import { useLocation } from 'react-router';
+
+import { authClient } from '@documenso/auth/client';
+import type { SessionUser } from '@documenso/auth/server/lib/session/session';
+import { type TGetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
+import { trpc } from '@documenso/trpc/client';
+
+export type AppSession = {
+  session: Session;
+  user: SessionUser;
+  teams: TGetTeamsResponse;
+};
+
+interface SessionProviderProps {
+  children: React.ReactNode;
+  initialSession: AppSession | null;
+}
+
+interface SessionContextValue {
+  sessionData: AppSession | null;
+  refreshSession: () => Promise<void>;
+}
+
+const SessionContext = createContext<SessionContextValue | null>(null);
+
+export const useSession = () => {
+  const context = useContext(SessionContext);
+
+  if (!context) {
+    throw new Error('useSession must be used within a SessionProvider');
+  }
+
+  if (!context.sessionData) {
+    throw new Error('Session not found');
+  }
+
+  return {
+    ...context.sessionData,
+    refreshSession: context.refreshSession,
+  };
+};
+
+export const useOptionalSession = () => {
+  const context = useContext(SessionContext);
+
+  if (!context) {
+    throw new Error('useOptionalSession must be used within a SessionProvider');
+  }
+
+  return context;
+};
+
+export const SessionProvider = ({ children, initialSession }: SessionProviderProps) => {
+  const [session, setSession] = useState<AppSession | null>(initialSession);
+
+  const location = useLocation();
+
+  const refreshSession = useCallback(async () => {
+    const newSession = await authClient.getSession();
+
+    if (!newSession.isAuthenticated) {
+      setSession(null);
+      return;
+    }
+
+    const teams = await trpc.team.getTeams.query().catch(() => {
+      // Todo: (RR7) Log
+      return [];
+    });
+
+    setSession({
+      session: newSession.session,
+      user: newSession.user,
+      teams,
+    });
+  }, []);
+
+  useEffect(() => {
+    const onFocus = () => {
+      void refreshSession();
+    };
+
+    window.addEventListener('focus', onFocus);
+
+    return () => {
+      window.removeEventListener('focus', onFocus);
+    };
+  }, [refreshSession]);
+
+  /**
+   * Refresh session in background on navigation.
+   */
+  useEffect(() => {
+    void refreshSession();
+  }, [location.pathname]);
+
+  return (
+    <SessionContext.Provider
+      value={{
+        sessionData: session,
+        refreshSession,
+      }}
+    >
+      {children}
+    </SessionContext.Provider>
+  );
+};