feat: Dynamically fetch available presets from the backend

Author: Hypfer

custom_components/scene_presets/frontend/scene_presets_panel.js

@@ -7,6 +7,11 @@ async def async_setup_view(hass):
         PANEL_URL,
         hass.config.path(f'{BASE_PATH}/frontend/scene_presets_panel.js'),
     )
+    
+    hass.http.register_static_path(
+        f'/assets/{DOMAIN}/scene_presets.json',
+        hass.config.path(f"{BASE_PATH}/presets.json"),
+    )
 
     await bind_preset_images(hass)
 

custom_components/scene_presets/view.py

@@ -1,5 +1,7 @@
-import React from "react";
+import React, {useEffect} from "react";
 import {PresetApplyPage} from "./pages/PresetApplyPage";
+import {Category, Preset} from "./types";
+import {useSessionStorage} from "./hooks/useSessionStorage";
 
 declare global {
     namespace JSX {
@@ -27,6 +29,27 @@ export const App : React.FunctionComponent<{
     hass,
     narrow,
 }): JSX.Element => {
+    const [categories, setCategories] = useSessionStorage<Array<Category>>("scene_presets_categories",[]);
+    const [presets, setPresets] = useSessionStorage<Array<Preset>>("scene_presets_presets",[]);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                const response = await fetch("/assets/scene_presets/scene_presets.json");
+                const data = await response.json();
+
+                setCategories(data.categories);
+                setPresets(data.presets);
+            } catch (error) {
+                console.error("Error fetching data:", error);
+            }
+        };
+
+        fetchData().then(() => {
+            /* intentional */
+        });
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps 
+
     return (
         <>
             <ha-top-app-bar-fixed>
@@ -40,6 +63,9 @@ export const App : React.FunctionComponent<{
 
             <PresetApplyPage
                 hass={hass}
+
+                categories={categories}
+                presets={presets}
             />
         </>
     );

js/App.tsx

@@ -0,0 +1,26 @@
+import {useState} from "react";
+
+export const useSessionStorage = <T>(key: string, initialValue: T): [T, (s: T) => void] => {
+    const [storedValue, setStoredValue] = useState<T>(() => {
+        try {
+            const item = window.sessionStorage.getItem(key);
+            return item ? JSON.parse(item) : initialValue;
+        } catch (error) {
+            console.warn(error);
+            return initialValue;
+        }
+    });
+
+    const setValue = (value: T) => {
+        try {
+            const valueToStore = value instanceof Function ? value(storedValue) : value;
+            setStoredValue(valueToStore);
+            window.sessionStorage.setItem(key, JSON.stringify(valueToStore));
+        } catch (error) {
+            console.warn(error);
+            return;
+        }
+    };
+
+    return [storedValue, setValue];
+};

js/const.ts

@@ -1,11 +1,11 @@
 import React from "react";
-import data from "../../custom_components/scene_presets/presets.json";
 import {Tile} from "../components/Tile";
 import {useLocalStorage} from "../hooks/useLocalStorage";
 import HaSwitch from "../components/hass/building_blocks/HaSwitch";
 import {HaTargetSelector, HaTargetSelectorValue} from "../components/hass/selectors/HaTargetSelector";
 import {HaNumberSelector} from "../components/hass/selectors/HaNumberSelector";
 import HaIconButton from "../components/hass/building_blocks/HaIconButton";
+import {Category, Preset} from "../types";
 
 const DEFAULT_TUNABLE_SETTINGS = {
     shuffle: false,
@@ -17,9 +17,13 @@ const DEFAULT_TUNABLE_SETTINGS = {
 };
 
 export const PresetApplyPage: React.FunctionComponent<{
-    hass: any
+    hass: any,
+    categories: Array<Category>,
+    presets: Array<Preset>,
 }> = ({
     hass,
+    categories,
+    presets
 }): JSX.Element => {
     const [targets, setTargets] = useLocalStorage<HaTargetSelectorValue>("scene_presets_apply_page_targets", {});
     const [shuffle, setShuffle] = useLocalStorage<boolean>("scene_presets_apply_page_shuffle", DEFAULT_TUNABLE_SETTINGS.shuffle);
@@ -57,19 +61,19 @@ export const PresetApplyPage: React.FunctionComponent<{
     const presetsByCategories = React.useMemo(() => {
         const out = {};
 
-        data.categories.forEach(category => {
-            out[category.id] = data.presets.filter(p => p.categoryId === category.id);
+        categories.forEach(category => {
+            out[category.id] = presets.filter(p => p.categoryId === category.id);
         });
 
         return out;
-    }, []);
+    }, [categories, presets]);
 
 
     const tiles = React.useMemo(() => {
         const allTiles: {[key: string] : JSX.Element} = {};
         const favoriteTiles: Array<string> = [];
 
-        data.presets.forEach((preset, i) => {
+        presets.forEach((preset, i) => {
             const isFav = favoritePresets.includes(preset.id);
 
             allTiles[preset.id] = <Tile
@@ -98,7 +102,7 @@ export const PresetApplyPage: React.FunctionComponent<{
             all: allTiles,
             favoriteIds: favoriteTiles,
         };
-    }, [favoritePresets, applyPreset, setFavoritePresets]);
+    }, [presets, favoritePresets, applyPreset, setFavoritePresets]);
 
     return (
         <div
@@ -334,7 +338,7 @@ export const PresetApplyPage: React.FunctionComponent<{
                 }
 
                 {
-                    data.categories.map(({name, id}) => {
+                    categories.map(({name, id}) => {
                         return (
                             <div
                                 key={"category_" + name}

js/hooks/useSessionStorage.ts

@@ -0,0 +1,14 @@
+
+export type Category = {
+    id: string,
+    name: string
+}
+
+export type Preset = {
+    id: string,
+    categoryId: string,
+    name: string,
+    img: string,
+    bri: number,
+    lights: Array<{x: number, y: number}>
+}