From f119b3d750e8a50e2ed62964f96249cc5908bda0 Mon Sep 17 00:00:00 2001
From: Ryan Elian <ryan.elian.cs@gmail.com>
Date: Fri, 16 Sep 2022 04:09:41 +0700
Subject: [PATCH] Develop high-level SessionErrorHandler component

---
 components/Authorize.tsx           | 16 ++--------------
 components/SessionErrorHandler.tsx | 26 ++++++++++++++++++++++++++
 pages/_app.tsx                     |  5 ++++-
 3 files changed, 32 insertions(+), 15 deletions(-)
 create mode 100644 components/SessionErrorHandler.tsx

diff --git a/components/Authorize.tsx b/components/Authorize.tsx
index 9d1c9bf..05c9ef2 100644
--- a/components/Authorize.tsx
+++ b/components/Authorize.tsx
@@ -1,7 +1,7 @@
-import { notification, Spin } from "antd";
+import { Spin } from "antd";
 import { useSession, signIn } from "next-auth/react";
 import nProgress from "nprogress";
-import React, { useEffect } from "react";
+import React from "react";
 import { AuthorizationContext, AuthorizationContextData, UserInfo } from "../functions/AuthorizationContext";
 
 export const Authorize: React.FC<{
@@ -15,18 +15,6 @@ export const Authorize: React.FC<{
         },
     });
 
-    useEffect(() => {
-        // this error bubbles up from [...nextauth].ts, refreshAccessToken()
-        if (session?.['error'] === "RefreshAccessTokenError") {
-            notification['warning']({
-                message: 'Login Required',
-                description: 'Your session has ended. Redirecting to login page...'
-            });
-            nProgress.start();
-            signIn('oidc'); // Force sign in to hopefully resolve error
-        }
-    }, [session]);
-
     function getAccessToken(): string {
         const accessToken = session?.['accessToken'];
         if (typeof accessToken === 'string') {
diff --git a/components/SessionErrorHandler.tsx b/components/SessionErrorHandler.tsx
new file mode 100644
index 0000000..6cc1bc8
--- /dev/null
+++ b/components/SessionErrorHandler.tsx
@@ -0,0 +1,26 @@
+import { notification } from "antd";
+import { signIn, useSession } from "next-auth/react";
+import nProgress from "nprogress";
+import React, { useEffect } from "react";
+
+export const SessionErrorHandler: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const { data: session } = useSession();
+
+    useEffect(() => {
+        // this error bubbles up from [...nextauth].ts, refreshAccessToken()
+        if (session?.['error'] === "RefreshAccessTokenError") {
+            notification['warning']({
+                message: 'Login Required',
+                description: 'Your session has ended. Redirecting to login page...'
+            });
+            nProgress.start();
+            signIn('oidc'); // Force sign in to hopefully resolve error
+        }
+    }, [session]);
+
+    return (
+        <>
+            {children}
+        </>
+    );
+};
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 5f5233a..83d03b1 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -10,6 +10,7 @@ import { config } from '@fortawesome/fontawesome-svg-core';
 config.autoAddCss = false;
 
 import '../css/index.css';
+import { SessionErrorHandler } from '../components/SessionErrorHandler';
 
 type NextPageWithLayout = NextPage & {
     layout?: (page: React.ReactElement) => React.ReactNode;
@@ -28,7 +29,9 @@ function CustomApp({
     const withLayout = Component.layout ?? (page => page);
     return (
         <SessionProvider session={session} refetchInterval={120} refetchOnWindowFocus={false}>
-            {withLayout(<Component {...pageProps} />)}
+            <SessionErrorHandler>
+                {withLayout(<Component {...pageProps} />)}
+            </SessionErrorHandler>
         </SessionProvider>
     );
 }