fix(app): move callback listener up the tree so dependencies are not …

…loaded unnecesarrily (passportxyz#1074)
averno08 · Apr 6, 2023 · 4988858 · 4988858
1 parent 0845f7a
commit 4988858
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 32 deletions.
diff --git a/app/__tests__/pages/index.test.tsx → app/__tests__/pages/app.test.tsx b/app/__tests__/pages/index.test.tsx → app/__tests__/pages/app.test.tsx
@@ -1,5 +1,6 @@
 import { render } from "@testing-library/react";
-import Index from "../../pages/index";
+import App from "../../pages/_app";
+import { AppProps } from "next/app";
 
 jest.mock("../../utils/onboard.ts");
 jest.mock("@datadog/browser-rum");
@@ -39,7 +40,9 @@ describe("when index is provided queryParams matching twitters OAuth response",
       value: mockCloseWindow,
     });
 
-    render(<Index />);
+    const appProps = {} as AppProps;
+
+    render(<App {...appProps} />);
 
     // expect message to be posted and window.close() to have been called
     expect(mockPostMessage).toBeCalledTimes(1);

diff --git a/app/pages/_app.tsx b/app/pages/_app.tsx
@@ -1,6 +1,8 @@
 // --- React Methods
 import React, { useEffect } from "react";
 
+import { BroadcastChannel } from "broadcast-channel";
+
 // --- Next Methods
 import { AppProps } from "next/app";
 import Head from "next/head";
@@ -19,11 +21,40 @@ import TagManager from "react-gtm-module";
 const FacebookAppId = process.env.NEXT_PUBLIC_PASSPORT_FACEBOOK_APP_ID || "";
 const GTM_ID = process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID || "";
 
-function MyApp({ Component, pageProps }: AppProps) {
+function App({ Component, pageProps }: AppProps) {
   useEffect(() => {
     TagManager.initialize({ gtmId: `${GTM_ID}` });
   }, []);
 
+  if (typeof window !== "undefined") {
+    // pull any search params
+    const queryString = new URLSearchParams(window?.location?.search);
+    // Twitter oauth will attach code & state in oauth procedure
+    const queryError = queryString.get("error");
+    const queryCode = queryString.get("code");
+    const queryState = queryString.get("state");
+
+    // We expect for a queryState like" 'twitter-asdfgh', 'google-asdfghjk'
+    const providerPath = queryState?.split("-");
+    const provider = providerPath ? providerPath[0] : undefined;
+
+    // if Twitter oauth then submit message to other windows and close self
+    if ((queryError || queryCode) && queryState && provider) {
+      // shared message channel between windows (on the same domain)
+      const channel = new BroadcastChannel(`${provider}_oauth_channel`);
+
+      // only continue with the process if a code is returned
+      if (queryCode) {
+        channel.postMessage({ target: provider, data: { code: queryCode, state: queryState } });
+      }
+
+      // always close the redirected window
+      window.close();
+
+      return <div></div>;
+    }
+  }
+
   const facebookSdkScript = (
     <script
       id="facebook-app-script"
@@ -74,4 +105,4 @@ function MyApp({ Component, pageProps }: AppProps) {
   );
 }
 
-export default MyApp;
+export default App;
diff --git a/app/pages/index.tsx b/app/pages/index.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps, @next/next/no-img-element */
 // --- Methods
 import React from "react";
-import { BroadcastChannel } from "broadcast-channel";
 import { HashRouter as Router, Routes, Route } from "react-router-dom";
 
 // -- Next Methods
@@ -40,33 +39,6 @@ datadogLogs.init({
 });
 
 const App: NextPage = () => {
-  // pull any search params
-  const queryString = new URLSearchParams(window?.location?.search);
-  // Twitter oauth will attach code & state in oauth procedure
-  const queryError = queryString.get("error");
-  const queryCode = queryString.get("code");
-  const queryState = queryString.get("state");
-
-  // We expect for a queryState like" 'twitter-asdfgh', 'google-asdfghjk'
-  const providerPath = queryState?.split("-");
-  const provider = providerPath ? providerPath[0] : undefined;
-
-  // if Twitter oauth then submit message to other windows and close self
-  if ((queryError || queryCode) && queryState && provider) {
-    // shared message channel between windows (on the same domain)
-    const channel = new BroadcastChannel(`${provider}_oauth_channel`);
-
-    // only continue with the process if a code is returned
-    if (queryCode) {
-      channel.postMessage({ target: provider, data: { code: queryCode, state: queryState } });
-    }
-
-    // always close the redirected window
-    window.close();
-
-    return <div></div>;
-  }
-
   return (
     <div>
       <Router>