started on icons

webui/src/contexts/DataContext.tsx

@@ -1,5 +1,56 @@
-import React from "react";
+import React, {createContext, useCallback, useEffect, useState} from "react";
+import {ColorPreset} from "../models/Colors";
+import {DataTarget} from "../models/Shared";
+import {unimplemented} from "../helpers/misc";
+import {listColorPresets} from "../actions/ColorPresets";
 
 interface DataContextValue {
+  colorPresets: ColorPreset[]
 
+  ready(target?: DataTarget): boolean
+
+  refresh(target?: DataTarget): void
 }
+
+const DataContext = createContext<DataContextValue>({
+  colorPresets: [],
+  ready: unimplemented,
+  refresh: unimplemented,
+});
+
+export const DataContextProvider: React.FC = ({children}) => {
+  const [colorPresets, setColorPresets] = useState<ColorPreset[]>([]);
+
+  const [readyMap, setReadyMap] = useState<{ [key: string]: boolean }>({
+    [DataTarget.Default]: false,
+    [DataTarget.ColorPresets]: false,
+  });
+
+  const ready = useCallback((target: DataTarget = DataTarget.Default) => {
+    return readyMap[target] || false;
+  }, [readyMap]);
+
+  const refresh = useCallback((target: DataTarget = DataTarget.Default) => {
+    const refreshing: Promise<any>[] = [];
+    if ([DataTarget.Default, DataTarget.ColorPresets].includes(target)) {
+      refreshing.push(listColorPresets().then(setColorPresets));
+    }
+
+    Promise.all(refreshing).then(() => setReadyMap(prev => ({...prev, [target]: true})));
+  }, []);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  return (
+    <DataContext.Provider value={{
+      colorPresets,
+      ready, refresh,
+    }}>
+      {children}
+    </DataContext.Provider>
+  );
+};
+
+export default DataContext;