pref: render optimizations (#98)

panel and schedule visualizer components are memoized to avoid rendering when nothing changed.

This improves rendering times by around 100-150% based the mock scenario.

package.json

@@ -23,7 +23,7 @@
     "clsx": "^1.1.0",
     "debug": "^4.1.1",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-adapter-react-16": "^1.15.4",
     "eventemitter3": "^4.0.0",
     "leaflet": "^1.6.0",
     "react": "^16.12.0",

src/components/app-contexts.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ResourceConfigurationsType } from '../resource-manager';
+import { defaultSettings, Settings } from '../settings';
+import { NotificationBarContext, NotificationBarProps } from './notification-bar';
+
+/* Declares the ResourcesContext which contains the resources used on the app*/
+export const ResourcesContext = React.createContext<ResourceConfigurationsType>({});
+
+export const SettingsContext = React.createContext(defaultSettings());
+
+export interface AppContextProviderProps extends React.PropsWithChildren<{}> {
+  settings: Settings;
+  notificationDispatch: React.Dispatch<React.SetStateAction<NotificationBarProps | null>>;
+}
+
+export function AppContextProvider(props: AppContextProviderProps): React.ReactElement {
+  const { settings, notificationDispatch, children } = props;
+  return (
+    <SettingsContext.Provider value={settings}>
+      <NotificationBarContext.Provider value={notificationDispatch}>
+        {children}
+      </NotificationBarContext.Provider>
+    </SettingsContext.Provider>
+  );
+}