WIP.

webui/src/Components/Group.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import {Button, Card, CardFooter, CardHeader} from "reactstrap";
+import useLights from "../Hooks/light";
+
+function Group({id, name, permissions}) {
+  const lights = useLights({groupId: id});
+
+  return (
+    <Card className="mt-3">
+      <CardHeader>{name}</CardHeader>
+      <CardFooter>
+        <Button color="primary">Detaljer</Button>
+        {" "}
+        <Button color="secondary">Skift farger</Button>
+        {" "}
+        <Button color="danger">Fjern</Button>
+      </CardFooter>
+    </Card>
+  );
+}
+
+export default Group;

webui/src/Components/Groups.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import {Spinner} from "reactstrap";
+import useGroups from "../Hooks/group";
+import Group from "./Group";
+
+function Groups() {
+  const groups = useGroups();
+
+  if (groups === null) {
+    return (
+      <div>
+        <Spinner color="primary" style={{width: "4rem", height: "4rem"}}/>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {groups.map(group => <Group {...group} />)}
+    </div>
+  );
+}
+
+export default Groups;

webui/src/Components/Header.jsx

@@ -16,7 +16,13 @@ export default function Header() {
         {isLoggedIn && (
           <Nav className="ml-auto" navbar>
             <NavItem>
-              <NavLink tag={Link} to="/lights">Grupper</NavLink>
+              <NavLink tag={Link} to="/lights">Lys</NavLink>
+            </NavItem>
+            <NavItem>
+              <NavLink tag={Link} to="/groups">Grupper</NavLink>
+            </NavItem>
+            <NavItem>
+              <NavLink tag={Link} to="/admin">Admin</NavLink>
             </NavItem>
             <NavItem>
               <NavLink tabIndex={0}

webui/src/Components/IndexPage.jsx

@@ -1,29 +1,9 @@
 import React from "react";
-import useGroups from "../Hooks/lights";
-import {Button, Card, CardFooter, CardHeader, Spinner} from "reactstrap";
+import Groups from "./Groups";
 
 function IndexPage() {
-  const groups = useGroups();
-
-  if (groups === null) {
-    return (
-      <div>
-        <Spinner color="primary" style={{width: "4rem", height: "4rem"}}/>
-      </div>
-    );
-  }
-
   return (
-    <div>
-      {groups.map(group => (
-        <Card className="mt-3">
-          <CardHeader>{group.name}</CardHeader>
-          <CardFooter>
-            <Button color="secondary">Endre</Button>
-          </CardFooter>
-        </Card>
-      ))}
-    </div>
+    <Groups/>
   );
 }
 

webui/src/Helpers/groups.js

@@ -1,6 +1,6 @@
 import {randId} from "./random";
 import {fetchGet} from "./fetcher";
-import {notNullish} from "./null";
+import {notNullish, nullish} from "./null";
 
 const localData = {};
 const callbacks = [];
@@ -63,7 +63,7 @@ function handleGroups(groups) {
   groups.forEach(g => handleGroup(g));
 
   for (let key in localData) {
-    if (localData.hasOwnProperty(key) && !groups.hasOwnProperty(key)) {
+    if (localData.hasOwnProperty(key) && nullish(groups.find(g => g.id === key))) {
       delete localData[key];
     }
   }

webui/src/Helpers/lights.js

@@ -0,0 +1,78 @@
+import {randId} from "./random";
+import {notNullish, nullish} from "./null";
+import {fetchGet} from "./fetcher";
+
+const localData = {};
+const callbacks = [];
+
+export function subscribeToLight(lightId, callback) {
+  const callbackId = randId();
+
+  callbacks.push({callbackId, lightId, callback});
+
+  if (lightId >= 0) {
+    if (notNullish(localData[lightId])) {
+      dispatch(localData[lightId]);
+    }
+
+    fetchOne(lightId);
+  } else {
+    const list = [];
+    for (let key in localData) {
+      if (localData.hasOwnProperty(key) && notNullish(localData[key])) {
+        list.push(localData[key]);
+      }
+    }
+    dispatch(list);
+
+    fetchAll();
+  }
+}
+
+function fetchAll() {
+  fetchGet(`/light/`).then(({data, error}) => {
+    if (error === null) {
+      handleLights(data);
+    }
+  });
+}
+
+function fetchOne(id) {
+  fetchGet(`/light/${id}`).then(({data, error}) => {
+    if (error === null) {
+      handleLight(data);
+    }
+  });
+}
+
+function handleLights(lights) {
+  lights.forEach(l => handleLight(l));
+
+  for (let key in localData) {
+    if (localData.hasOwnProperty(key) && nullish(lights.find(l => l.id === key))) {
+      delete localData[key];
+    }
+  }
+
+  dispatch(lights);
+}
+
+function handleLight(light) {
+  localData[light.id] = light;
+
+  dispatch(light);
+}
+
+function dispatch(data) {
+  if (Array.isArray(data)) {
+    callbacks
+      .filter(c => c !== null)
+      .filter(c => c.lightId === -1)
+      .forEach(c => c.callback(data));
+  } else {
+    callbacks
+      .filter(c => c !== null)
+      .filter(c => c.lightId === data.id)
+      .forEach(c => c.callback(data));
+  }
+}

webui/src/Hooks/lights.js → webui/src/Hooks/group.js

@@ -11,7 +11,7 @@ export default function useGroups(id = -1) {
   useEffect(() => {
     const cbId = subscribeToGroup(id, onChange);
 
-    return function cleanup() {
+    return () => {
       unsubscribeFromGroup(cbId);
     };
   }, []);

webui/src/Hooks/light.js

@@ -0,0 +1,24 @@
+import {useEffect, useState} from "react";
+import {subscribeToLight} from "../Helpers/lights";
+
+export default function useLights({groupId = -1, id = -1}) {
+  const [light, setLight] = useState(null);
+
+  function onChange() {
+    setLight(light);
+  }
+
+  useEffect(() => {
+    const cbId = subscribeToLight(id, onChange);
+
+    return () => {
+      subscribeToLight(cbId);
+    };
+  }, []);
+
+  if (groupId >= 0 && light !== null) {
+    return light.filter(l => l.groupId === groupId);
+  }
+
+  return light;
+}