hawkband-wled-client/app/page.js

"use client";

import { useEffect, useState } from "react";
import { Col, Loader, Row } from "tiny-ui";
import { WLEDClient } from "wled-client";

import { Automation, Layout } from "components";

import automation from "data/automation.json";
import presets from "data/presets.json";

const CLIENTS = process.env.CLIENTS || [];
const NAMES = process.env.NAMES || [];

export default function Home() {
  const [names, setNames] = useState(null);
  const [clients, setClients] = useState(null);
  const [connections, setConnections] = useState(null);

  useEffect(() => {
    let t = [];
    let c = [];
    let n = [];
    for (let client of CLIENTS) {
      c.push(client);
      t.push(new WLEDClient(client));
    }
    for (let name of NAMES) {
      n.push(name);
    }
    setClients(c);
    setConnections(t);
    setNames(n);
  }, []);

  const handlePreset = async (payload) => {
    if (payload?.clients && payload?.value) {
      for (let client of payload?.clients) {
        let indx = clients.findIndex((o) => o === client);
        if (connections[indx]) {
          let wled = connections[indx];
          await wled.setPreset(payload?.value);
          await wled.reinit();
        }
      }
    }
  };

  return (
    <Layout page="home">
      <Row style={{ backgroundColor: "#fff" }}>
        <Col style={{ margin: "2rem" }}>
          {(connections && clients && (
            <Automation
              clients={clients}
              connections={connections}
              names={names}
              presets={presets}
              automation={automation}
              onPreset={handlePreset}
            />
          )) || <Loader size="lg" />}
        </Col>
      </Row>
    </Layout>
  );

  return;
}