From d5d67dcc6d1fd25be93519fdd19c848372e8bfef Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Sun, 17 Jul 2022 02:55:36 +0200
Subject: [PATCH] Create a component to provide and store the AuthContext

---
 components/auth/{base.ts => base.tsx} | 14 ++++++++++++++
 pages/_app.tsx                        |  7 +++----
 2 files changed, 17 insertions(+), 4 deletions(-)
 rename components/auth/{base.ts => base.tsx} (55%)

diff --git a/components/auth/base.ts b/components/auth/base.tsx
similarity index 55%
rename from components/auth/base.ts
rename to components/auth/base.tsx
index e3d9608..a47187e 100644
--- a/components/auth/base.ts
+++ b/components/auth/base.tsx
@@ -1,5 +1,7 @@
 import { Token, User } from "@prisma/client"
+import { default as React } from "react"
 import { createStateContext } from "../../utils/stateContext"
+import { useLocalStorageAuthState } from "./storage"
 
 
 /**
@@ -16,3 +18,15 @@ export type AuthContextContents = Token & { user: User } | null
  * Please note that the data containing in this context is not validated, and has to be validated by the server on every request.
  */
 export const AuthContext = createStateContext<AuthContextContents>()
+
+
+/**
+ * Component which stores the login status using {@link useLocalStorageAuthState} and provides it to its children through a {@link AuthContext}.
+ */
+export function AuthContextProvider({ storageKey, children }: { storageKey: string, children: React.ReactNode }) {
+    return (
+        <AuthContext.Provider value={useLocalStorageAuthState(storageKey)}>
+            {children}
+        </AuthContext.Provider>
+    )
+}
\ No newline at end of file
diff --git a/pages/_app.tsx b/pages/_app.tsx
index e3866b3..6d87a6f 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -4,7 +4,7 @@ import { AxiosSWRFetcherProvider } from '../components/auth/requests'
 import { useStatePostcard } from '../components/postcard/storage'
 import { PageErrorBoundary } from '../components/generic/errors/boundaries'
 import { PostcardContext } from '../components/postcard/base'
-import { AuthContext } from '../components/auth/base'
+import { AuthContext, AuthContextProvider } from '../components/auth/base'
 import { PostcardRenderer } from '../components/postcard/renderer'
 import '../styles/globals.css'
 import defaultPostcard from "../public/postcards/adi-goldstein-Hli3R6LKibo-unsplash.jpg"
@@ -19,18 +19,17 @@ fontAwesomeConfig.autoAddCss = false
 const App = ({ Component, pageProps }: AppProps): JSX.Element => {
     const { t } = useTranslation()
     const postcardState = useStatePostcard(defaultPostcard)
-    const authState = useLocalStorageAuthState("auth")
 
     return (
         <PageErrorBoundary text={t("genericError")}>
             <AxiosSWRFetcherProvider>
                 <PostcardContext.Provider value={postcardState}>
-                    <AuthContext.Provider value={authState}>
+                    <AuthContextProvider storageKey="auth">
                         <AxiosSWRFetcherProvider>
                             <PostcardRenderer />
                             <Component {...pageProps} />
                         </AxiosSWRFetcherProvider>
-                    </AuthContext.Provider>
+                    </AuthContextProvider>
                 </PostcardContext.Provider>
             </AxiosSWRFetcherProvider>
         </PageErrorBoundary>