hawkband-wled-client/app/page.js

"use client";

import { useEffect, useState } from "react";
import { Col, Row, Tag } from "tiny-ui";

import { Automation, Layout, Notification } from "components";

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

import { isFunction } from "lib/utils";

export default function Home() {
  const [names, setNames] = useState(null);
  const [clients, setClients] = useState(null);
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    let c = [];
    let n = [];
    for (let client of Object.keys(config)) {
      c.push(client);
      n.push(config[client]);
    }
    setClients(c);
    setNames(n);
  }, []);

  const handlePreset = (id, cb) => {
    setBusy(true);
    fetch(`/api/preset/${id}`)
      .then((resp) => resp && resp.json())
      .then((result) => {
        setBusy(false);
        Notification({
          title: `Preset set to ${id}`,
          description: (
            <>
              {result?.map((o, i) => (
                <div key={i} className="notification">
                  <strong>
                    {names[i]} ({clients[i]})
                  </strong>
                  {o &&
                    Object.keys(o)?.map((v, k) => (
                      <Tag key={k}>
                        <strong>{v}: </strong> {JSON.stringify(o[v])}
                      </Tag>
                    ))}
                </div>
              ))}
            </>
          )
        });
        if (isFunction(cb)) cb();
      })
      .catch((err) => {
        setBusy(false);
      });
  };

  const handleAutomation = (id, cb) => {
    setBusy(true);
    fetch(`/api/automation/${id}`)
      .then((resp) => resp && resp.json())
      .then((result) => {
        setBusy(false);
        Notification({
          title: `Automation set to ${id}`,
          description: (
            <>
              {result?.map((o, i) => (
                <div key={i} className="notification">
                  <strong>
                    {names[i]} ({clients[i]})
                  </strong>
                  {o &&
                    Object.keys(o)?.map((v, k) => (
                      <Tag key={k}>
                        <strong>{v}: </strong> {JSON.stringify(o[v])}
                      </Tag>
                    ))}
                </div>
              ))}
            </>
          )
        });
        if (isFunction(cb)) cb();
      })
      .catch((err) => {
        setBusy(false);
      });
  };

  const handlePower = (value, cb) => {
    setBusy(true);
    fetch(`/api/power/${value}`)
      .then((resp) => resp && resp.json())
      .then((result) => {
        setBusy(false);
        Notification({
          title: `Power set to ${value}`,
          description: (
            <>
              {result?.map((o, i) => (
                <div key={i} className="notification">
                  <strong>
                    {names[i]} ({clients[i]})
                  </strong>
                  {o &&
                    Object.keys(o)?.map((v, k) => (
                      <Tag key={k}>
                        <strong>{v}: </strong> {JSON.stringify(o[v])}
                      </Tag>
                    ))}
                </div>
              ))}
            </>
          )
        });
        if (isFunction(cb)) cb();
      })
      .catch((err) => {
        setBusy(false);
      });
  };

  return (
    <Layout page="home">
      <Row>
        <Col style={{ margin: "2rem" }}>
          <Automation
            automation={automation}
            clients={clients}
            names={names}
            presets={presets}
            onAutomation={handleAutomation}
            onPower={handlePower}
            onPreset={handlePreset}
            busy={busy}
          />
        </Col>
      </Row>
    </Layout>
  );

  return;
}