use CoreProvider

Author: joshunrau

apps/gateway/src/Root.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useRef } from 'react';
 
-import { LanguageToggle, NotificationHub, ThemeToggle } from '@douglasneuroinformatics/libui/components';
+import { LanguageToggle, ThemeToggle } from '@douglasneuroinformatics/libui/components';
 import { useNotificationsStore } from '@douglasneuroinformatics/libui/hooks';
+import { CoreProvider } from '@douglasneuroinformatics/libui/providers';
 import { Branding, InstrumentRenderer } from '@opendatacapture/react-core';
 import type { InstrumentSubmitHandler } from '@opendatacapture/react-core';
 import type { UpdateRemoteAssignmentData } from '@opendatacapture/schemas/assignment';
@@ -52,31 +53,32 @@ export const Root = ({ id, initialSeriesIndex, target, token }: RootProps) => {
   };
 
   return (
-    <div className="flex h-screen flex-col" ref={ref} style={{ display: 'none' }}>
-      <header className="fixed top-0 z-10 w-full bg-white/80 text-slate-700 shadow-sm backdrop-blur-lg dark:bg-slate-800/75 dark:text-slate-300">
-        <div className="container flex items-center justify-between py-3 font-medium">
-          <Branding className="[&>span]:hidden sm:[&>span]:block" fontSize="md" />
-          <div className="flex gap-3">
-            <ThemeToggle className="h-9 w-9" />
-            <LanguageToggle
-              options={{
-                en: 'English',
-                fr: 'Français'
-              }}
-              triggerClassName="h-9 w-9"
-            />
+    <CoreProvider>
+      <div className="flex h-screen flex-col" ref={ref} style={{ display: 'none' }}>
+        <header className="fixed top-0 z-10 w-full bg-white/80 text-slate-700 shadow-sm backdrop-blur-lg dark:bg-slate-800/75 dark:text-slate-300">
+          <div className="container flex items-center justify-between py-3 font-medium">
+            <Branding className="[&>span]:hidden sm:[&>span]:block" fontSize="md" />
+            <div className="flex gap-3">
+              <ThemeToggle className="h-9 w-9" />
+              <LanguageToggle
+                options={{
+                  en: 'English',
+                  fr: 'Français'
+                }}
+                triggerClassName="h-9 w-9"
+              />
+            </div>
           </div>
-        </div>
-      </header>
-      <main className="container flex min-h-0 max-w-3xl grow flex-col pb-16 pt-32 xl:max-w-5xl">
-        <InstrumentRenderer
-          className="min-h-full w-full"
-          initialSeriesIndex={initialSeriesIndex}
-          target={target}
-          onSubmit={handleSubmit}
-        />
-      </main>
-      <NotificationHub />
-    </div>
+        </header>
+        <main className="container flex min-h-0 max-w-3xl grow flex-col pb-16 pt-32 xl:max-w-5xl">
+          <InstrumentRenderer
+            className="min-h-full w-full"
+            initialSeriesIndex={initialSeriesIndex}
+            target={target}
+            onSubmit={handleSubmit}
+          />
+        </main>
+      </div>
+    </CoreProvider>
   );
 };

apps/playground/src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { NotificationHub } from '@douglasneuroinformatics/libui/components';
+import { CoreProvider } from '@douglasneuroinformatics/libui/providers';
 import { ErrorPage, LoadingPage } from '@opendatacapture/react-core';
 import { ErrorBoundary } from 'react-error-boundary';
 
@@ -13,10 +13,11 @@ export const App = () => {
         <LoadingPage subtitle="Please Be Patient, This May Take a While" title="Loading Editor and Toolchain" />
       }
     >
-      <ErrorBoundary FallbackComponent={ErrorPage}>
-        <NotificationHub />
-        <IndexPage />
-      </ErrorBoundary>
+      <CoreProvider>
+        <ErrorBoundary FallbackComponent={ErrorPage}>
+          <IndexPage />
+        </ErrorBoundary>
+      </CoreProvider>
     </React.Suspense>
   );
 };

apps/web/src/routes/__root.tsx

@@ -1,6 +1,4 @@
-import { Fragment } from 'react';
-
-import { NotificationHub } from '@douglasneuroinformatics/libui/components';
+import { CoreProvider } from '@douglasneuroinformatics/libui/providers';
 import type { QueryClient } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { createRootRouteWithContext, Outlet } from '@tanstack/react-router';
@@ -16,11 +14,10 @@ type RouterContext = {
 
 export const Route = createRootRouteWithContext<RouterContext>()({
   component: () => (
-    <Fragment>
+    <CoreProvider>
       <Outlet />
-      <NotificationHub />
       <ReactQueryDevtools buttonPosition="bottom-right" position="left" />
       <TanStackRouterDevtools />
-    </Fragment>
+    </CoreProvider>
   )
 });