chore(docs): debug ssr app cookie capture

Author: krisantrobus

packages/paste-website/src/pages/_app.tsx

@@ -13,7 +13,6 @@ import { CookieConsent } from "../components/CookieConsent";
 import { DATADOG_APPLICATION_ID, DATADOG_CLIENT_TOKEN, ENVIRONMENT_CONTEXT, SITE_BREAKPOINTS } from "../constants";
 import { DarkModeContext } from "../context/DarkModeContext";
 import { PreviewThemeContext } from "../context/PreviewThemeContext";
-import { logger } from "../functions-utils/logger";
 import { ValidThemeName, themeCookieKey, useDarkMode } from "../hooks/useDarkMode";
 import * as gtag from "../lib/gtag";
 import { SimpleStorage } from "../utils/SimpleStorage";
@@ -28,9 +27,8 @@ interface AppPageProps {
 const App = ({ Component, pageProps, serverThemeCookie }: AppProps & AppPageProps): React.ReactElement => {
   const cookieTheme: ValidThemeName =
     serverThemeCookie || (parseCookies()[themeCookieKey] as ValidThemeName) || "twilio";
-
   // eslint-disable-next-line no-console
-  console.log({ cookieTheme, serverThemeCookie, clientCookie: parseCookies() });
+  console.log({ serverThemeCookie, cookieTheme, clientCookie: parseCookies() });
   const router = useRouter();
   const localStorageKey = "cookie-consent-accepted";
   const [theme, toggleMode, componentMounted] = useDarkMode(cookieTheme);
@@ -123,7 +121,7 @@ const App = ({ Component, pageProps, serverThemeCookie }: AppProps & AppPageProp
         </>
       )}
       <Theme.Provider
-        theme={serverThemeCookie ? serverThemeCookie : theme}
+        theme={theme}
         customBreakpoints={SITE_BREAKPOINTS}
         disableAnimations={inCypress()}
         cacheProviderProps={{ key: "next" }}
@@ -142,16 +140,15 @@ const App = ({ Component, pageProps, serverThemeCookie }: AppProps & AppPageProp
 App.getInitialProps = async (context: AppContext): Promise<AppPageProps & AppInitialProps> => {
   const ctx = await NextApp.getInitialProps(context);
   const cookies = context.ctx.req?.headers?.cookie;
+  const responseCookie = context.ctx?.res?.getHeader(themeCookieKey);
 
-  logger.info({ cookies, clientCookie: parseCookies() });
-
-  // eslint-disable-next-line no-console
-  console.log(context.ctx.req);
   if (cookies) {
     const cookiestring = new RegExp(`${themeCookieKey}=[^;]+`).exec(cookies);
     const decodedString = decodeURIComponent(cookiestring ? cookiestring.toString().replace(/^[^=]+./, "") : "");
 
     return { ...ctx, serverThemeCookie: decodedString as ValidThemeName };
+  } else if (responseCookie) {
+    return { ...ctx, serverThemeCookie: responseCookie as ValidThemeName };
   }
 
   return { ...ctx };