Create a component to provide and store the PostcardContext

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>
+    )
+}

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/provider'
-import { AuthContextProvider } from '../components/auth/base'
 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>
     )