From 037f97c68d072ca6c201596227c557afec916aa3 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Sun, 17 Jul 2022 03:49:37 +0200
Subject: [PATCH] Create a component to provide and store the PostcardContext

---
 components/postcard/provider.tsx | 18 ++++++++++++++++++
 pages/_app.tsx                   | 10 ++++------
 2 files changed, 22 insertions(+), 6 deletions(-)
 create mode 100644 components/postcard/provider.tsx

diff --git a/components/postcard/provider.tsx b/components/postcard/provider.tsx
new file mode 100644
index 0000000..483bd9b
--- /dev/null
+++ b/components/postcard/provider.tsx
@@ -0,0 +1,18 @@
+import React from "react"
+import { PostcardContext, PostcardSource } from "./base"
+import { useStatePostcard } from "./storage"
+
+
+export type PostcardContextProviderProps = {
+    defaultPostcard: PostcardSource,
+    children: React.ReactNode,
+}
+
+
+export const PostcardContextProvider = ({ defaultPostcard, children }: PostcardContextProviderProps) => {
+    return (
+        <PostcardContext.Provider value={useStatePostcard(defaultPostcard)}>
+            {children}
+        </PostcardContext.Provider>
+    )
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 0756156..d49a022 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -3,12 +3,11 @@ import '@fortawesome/fontawesome-svg-core/styles.css'
 import { AppProps } from 'next/app'
 import { appWithTranslation, useTranslation } from 'next-i18next'
 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 { AuthContextProvider } from '../components/auth/base'
+import { AuthContextProvider } from '../components/auth/provider'
 import { PostcardRenderer } from '../components/postcard/renderer'
 import { config as fontAwesomeConfig } from '@fortawesome/fontawesome-svg-core'
+import { PostcardContextProvider } from '../components/postcard/provider'
 import defaultPostcard from "../public/postcards/adi-goldstein-Hli3R6LKibo-unsplash.jpg"
 
 
@@ -17,19 +16,18 @@ fontAwesomeConfig.autoAddCss = false
 
 const App = ({ Component, pageProps }: AppProps): JSX.Element => {
     const { t } = useTranslation()
-    const postcardState = useStatePostcard(defaultPostcard)
 
     return (
         <PageErrorBoundary text={t("genericError")}>
             <AxiosSWRFetcherProvider>
-                <PostcardContext.Provider value={postcardState}>
+                <PostcardContextProvider defaultPostcard={defaultPostcard}>
                     <AuthContextProvider storageKey="auth">
                         <AxiosSWRFetcherProvider>
                             <PostcardRenderer />
                             <Component {...pageProps} />
                         </AxiosSWRFetcherProvider>
                     </AuthContextProvider>
-                </PostcardContext.Provider>
+                </PostcardContextProvider>
             </AxiosSWRFetcherProvider>
         </PageErrorBoundary>
     )