slack-status.js

// Menu: Watch slack status
// Description: Open a refreshing widget which shows any slack incidents

/** @type {import("@johnlindquist/kit")} */

const intervalInMinutes = 2;
const intervalInMs = 2 * 60 * 1000;
const { incidentTitle, updatedFormatted, nextUpdateFormatted } = await getData(
  intervalInMs
);

const w = await widget(
  `
    <div class="p-4">
        <h1>Slack status</h1>
        <h2>{{ incidentTitle }}</h2>
        <p>Updated at: {{ updatedFormatted }}</p>
        <p>Next update: {{ nextUpdateFormatted }}</p>
    </div>
`,
  {
    alwaysOnTop: true,
    state: { incidentTitle, updatedFormatted, nextUpdateFormatted },
  }
);

const interval = setInterval(async () => {
  const state = await getData(intervalInMs);
  w.setState(state);
}, intervalInMs);

w.onClose(() => clearInterval(interval));

async function getData(intervalInMs) {
  const { active_incidents: incidents } = (
    await get("https://status.slack.com/api/v2.0.0/current")
  ).data;
  const updated = new Date();
  const updatedFormatted = updated.toLocaleTimeString("nl-NL");
  const nextUpdate = new Date(updated);
  nextUpdate.setMilliseconds(updated.getMilliseconds() + intervalInMs);
  const nextUpdateFormatted = nextUpdate.toLocaleTimeString("nl-NL");
  const incidentTitle = incidents[0]?.title
    ? `⚠️ ${incidents[0].title}`
    : "All good in the hood 🤘";
  return { incidentTitle, updatedFormatted, nextUpdateFormatted };
}