liljudd-website/src/routes/config/[guildId].tsx

import { faToggleOff, faToggleOn } from "@fortawesome/pro-regular-svg-icons";
import { useLocation, useNavigate, useParams } from "@solidjs/router";
import {
  For,
  Index,
  createEffect,
  createResource,
  createSignal,
} from "solid-js";
import { createStore } from "solid-js/store";
import { FontAwesomeIcon } from "~/components/FontAwesomeIcon";
import Layout from "~/components/Layout";
import "../../styles/pages/config.scss";

const guessTZ = () => Intl.DateTimeFormat().resolvedOptions().timeZone;

const initialValue = (params: ReturnType<typeof useParams>) => ({
  success: null as boolean | null,
  guild: {
    id: params.guildId,
    name: undefined as string | undefined,
    icon: undefined as string | null | undefined,
    channel: "",
    channels: [] as { id: string; name: string }[],
  },
  tzNames: [guessTZ()],
});

function config() {
  const params = useParams();
  const navigator = useNavigate();
  const location = useLocation();
  const [timezoneRef, setTimezoneRef] = createSignal<HTMLInputElement>();
  const [timePlanningRef, setTimePlanningRef] =
    createSignal<HTMLInputElement>();
  const [channelRef, setChannelRef] = createSignal<HTMLSelectElement>();
  const [pingableRolesRef, setPingableRolesRef] =
    createSignal<HTMLInputElement>();

  const [timezone, setTimezone] = createSignal(guessTZ());
  const [payload] = createResource(
    params.guildId,
    async (id) => {
      const payload = await fetch(`http://localhost:3000/api/config/${id}`)
        .then(
          (res) =>
            res.json() as Promise<
              | {
                  success: false;
                  message: string;
                }
              | (ReturnType<typeof initialValue> & {
                  success: true;
                })
            >,
        )
        .catch((e) => console.warn(e, id));

      if (!payload) return initialValue(params);

      if (!payload.success) {
        console.log(payload);
        console.log(location.pathname, payload.message, "No success");
        // navigator("/config", { replace: false });
        return initialValue(params);
      }
      return payload;
    },
    { initialValue: initialValue(params) },
  );
  const [config, setConfig] = createStore({
    features: {
      timePlanning: {
        enabled: false,
        channelId: "833442323160891452",
        pingableRoles: false,
      },
    },
  });

  createEffect(() => console.log(payload.loading, payload()));
  createEffect(() => console.log("timezone", timezone()));
  createEffect(() =>
    console.log("timePlanning.enabled", config.features.timePlanning.enabled),
  );
  createEffect(() =>
    console.log(
      "timePlanning.channelId",
      config.features.timePlanning.channelId,
    ),
  );
  createEffect(() =>
    console.log(
      "timePlanning.pingableRoles",
      config.features.timePlanning.pingableRoles,
    ),
  );

  createEffect(() => {
    const ref = timezoneRef();
    if (!ref) return;
    ref.value = timezone();
  });
  createEffect(() => {
    const ref = timePlanningRef();
    if (!ref) return;
    ref.checked = config.features.timePlanning.enabled;
  });
  createEffect(() => {
    const channelId = payload().guild.channel;
    setConfig("features", "timePlanning", "channelId", channelId);
    console.log(channelId, payload());
    const ref = channelRef();
    if (!ref) return;
    if (
      !ref ||
      !channelId ||
      !payload().guild.channels.find((e) => e.id === channelId)
    )
      return;
    ref.value = channelId;
  });
  createEffect(() => {
    const ref = pingableRolesRef();
    if (!ref) return;
    ref.checked = config.features.timePlanning.pingableRoles;
  });
  createEffect(() => {
    const ref = timezoneRef();
    if (!ref) return;
    ref.value = timezone();
  });
  createEffect(() => {
    const ref = timePlanningRef();
    if (!ref) return;
    ref.checked = config.features.timePlanning.enabled;
  });
  createEffect(() => {
    const ref = pingableRolesRef();
    if (!ref) return;
    ref.checked = config.features.timePlanning.pingableRoles;
  });

  // console.log(payload());

  return (
    <Layout site="config">
      <h3 class="text-center">Configure li&apos;l Judd in</h3>
      <div>
        <div>
          <div class="flex-row centered">
            <img
              class="guildpfp"
              src={
                payload().guild.icon
                  ? `https://cdn.discordapp.com/icons/${payload().guild.id}/${
                      payload().guild.icon
                    }.webp?size=240`
                  : "https://cdn.discordapp.com/icons/1040502664506646548/bb5a51c4659cf47bdd942bb11e974da7.webp?size=240"
              }
              alt="Server pfp"
            />
            <h1>{payload().guild.name}</h1>
          </div>
        </div>

        <section>
          <h2>Guild</h2>
          <p>General settings for this guild.</p>
          <div class="flex-row">
            <label for="timezone">Timezone for your server:</label>
            <input
              type="text"
              list="timezones"
              id="timezone"
              ref={(e) => setTimezoneRef(e)}
              // disabled={!tzNames().find((e) => e === timezone())}
              onInput={(e) => setTimezone(e.target.value)}
            />

            <datalist id="timezones">
              <Index each={payload().tzNames}>
                {(zone) => <option value={zone()} />}
              </Index>
            </datalist>

            <button
              disabled={guessTZ() === timezone()}
              title={"Detected: " + guessTZ()}
              onClick={() => setTimezone(guessTZ())}
            >
              Auto-detect
            </button>
          </div>
        </section>

        <section>
          <h2>Features</h2>
          <p>Configure the features of the bot</p>
          <label for="timePlanning" class="flex-row">
            <p>Time Planning </p>
            <FontAwesomeIcon
              icon={
                config.features.timePlanning.enabled ? faToggleOn : faToggleOff
              }
              size="xl"
            />
          </label>
          <input
            hidden
            type="checkbox"
            id="timePlanning"
            ref={(e) => setTimePlanningRef(e)}
            onInput={(e) =>
              setConfig("features", "timePlanning", "enabled", e.target.checked)
            }
          />
          <div
            class="sub"
            classList={{ disabled: !config.features.timePlanning.enabled }}
          >
            <div class="flex-row">
              <label>Target channel:</label>
              <select
                ref={(e) => setChannelRef(e)}
                onInput={(e) =>
                  setConfig(
                    "features",
                    "timePlanning",
                    "channelId",
                    e.target.value,
                  )
                }
              >
                <option
                  disabled={!!config.features.timePlanning.channelId}
                  value=""
                >
                  --Select a Channel--
                </option>
                <For each={payload().guild.channels}>
                  {(channel) => (
                    <option value={channel.id}>{channel.name}</option>
                  )}
                </For>
              </select>
            </div>
            <div class="flex-row">
              <label for="pingableRoles" class="flex-row">
                <p>Enable pingable Roles:</p>
                <FontAwesomeIcon
                  icon={
                    config.features.timePlanning.pingableRoles
                      ? faToggleOn
                      : faToggleOff
                  }
                  size="xl"
                />
              </label>
              <input
                hidden
                type="checkbox"
                id="pingableRoles"
                ref={(e) => setPingableRolesRef(e)}
                onInput={(e) =>
                  setConfig(
                    "features",
                    "timePlanning",
                    "pingableRoles",
                    e.target.checked,
                  )
                }
              />
            </div>
          </div>
        </section>

        <section>
          <button>Apply</button>
          <button onClick={() => navigator("/config")}>Back</button>
        </section>
      </div>
    </Layout>
  );
}

export default config;