reminder-dashboard/src/components/EditReminder/index.tsx

import { fetchGuildChannels, fetchUserInfo, Reminder } from "../../api";
import { useQueries } from "react-query";
import { QueryKeys } from "../../consts";
import { useParams } from "wouter";
import { Name } from "./Name";
import { Username } from "./Username";
import { Content } from "./Content";
import { ChannelSelector } from "./ChannelSelector";
import { useState } from "preact/hooks";
import { IntervalSelector } from "./IntervalSelector";
import { Embed } from "./Embed";

type Props = {
    reminder: Reminder;
};

export const EditReminder = ({ reminder }: Props) => {
    const { guild } = useParams();

    const [
        { isSuccess: channelsFetched, data: guildChannels },
        { isSuccess: userFetched, data: userInfo },
    ] = useQueries([
        {
            queryKey: [QueryKeys.GUILD_CHANNELS, guild],
            queryFn: () => fetchGuildChannels(guild),
            staleTime: 300,
        },
        {
            queryKey: [QueryKeys.USER_DATA],
            queryFn: fetchUserInfo,
            staleTime: Infinity,
        },
    ]);

    const [collapsed, setCollapsed] = useState(false);

    if (!channelsFetched || !userFetched) {
        // todo
        return <></>;
    }

    const channelInfo = guildChannels.find((c) => c.id === reminder.channel);

    return (
        <div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>
            <div class="columns is-mobile column reminder-topbar">
                <div class="invert-collapses channel-bar">#{channelInfo.name}</div>
                <Name value={reminder.name}></Name>
                <div class="hide-button-bar">
                    <button
                        class="button hide-box"
                        onClick={() => {
                            setCollapsed(!collapsed);
                        }}
                    >
                        <span class="is-sr-only">Hide reminder</span>
                        <i class="fas fa-chevron-down"></i>
                    </button>
                </div>
            </div>
            <div class="columns reminder-settings">
                <div class="column discord-frame">
                    <article class="media">
                        <figure class="media-left">
                            <p class="image is-32x32 customizable">
                                <a>
                                    <img
                                        class="is-rounded avatar"
                                        src="/static/img/bg.webp"
                                        alt="Image for discord avatar"
                                    ></img>
                                </a>
                            </p>
                        </figure>
                        <div class="media-content">
                            <div class="content">
                                <Username value={reminder.username}></Username>
                                <Content value={reminder.content}></Content>
                                <Embed reminder={reminder}></Embed>
                            </div>
                        </div>
                    </article>
                </div>
                <div class="column settings">
                    <div class="field channel-field">
                        <div class="collapses">
                            <label class="label" for="channelOption">
                                Channel*
                            </label>
                        </div>
                        <ChannelSelector channel={reminder.channel}></ChannelSelector>
                    </div>

                    <div class="field">
                        <div class="control">
                            <label class="label collapses">
                                Time*
                                <input
                                    class="input"
                                    type="datetime-local"
                                    step="1"
                                    name="time"
                                    value={reminder.utc_time.toFormat("yyyy-LL-dd'T'HH:mm:ss")}
                                ></input>
                            </label>
                        </div>
                    </div>

                    <div class="collapses split-controls">
                        <div>
                            <div class={!userInfo.patreon && "is-locked"}>
                                <div class="patreon-invert foreground">
                                    Intervals available on{" "}
                                    <a href="https://patreon.com/jellywx">Patreon</a> or{" "}
                                    <a href="https://gitea.jellypro.xyz/jude/reminder-bot">
                                        self-hosting
                                    </a>
                                </div>
                                <div class="field">
                                    <label class="label">
                                        Interval{" "}
                                        <a class="foreground" href="/help/intervals">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                    </label>
                                    <IntervalSelector
                                        months={reminder.interval_months}
                                        days={reminder.interval_days}
                                        seconds={reminder.interval_seconds}
                                    ></IntervalSelector>
                                </div>

                                <div class="field">
                                    <div class="control">
                                        <label class="label">
                                            Expiration
                                            <input
                                                class="input"
                                                type="datetime-local"
                                                step="1"
                                                name="expiration"
                                                value={
                                                    reminder.expires !== null &&
                                                    reminder.expires.toFormat(
                                                        "yyyy-LL-dd'T'HH:mm:ss",
                                                    )
                                                }
                                            ></input>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="columns is-mobile tts-row">
                                <div class="column has-text-centered">
                                    <div class="is-boxed">
                                        <label class="label">
                                            Enable TTS <input type="checkbox" name="tts"></input>
                                        </label>
                                    </div>
                                </div>
                                <div class="column has-text-centered">
                                    <div class="file is-small is-boxed">
                                        <label class="file-label">
                                            <input
                                                class="file-input"
                                                type="file"
                                                name="attachment"
                                            ></input>
                                            <span class="file-cta">
                                                <span class="file-label">Add Attachment</span>
                                                <span class="file-icon">
                                                    <i class="fas fa-upload"></i>
                                                </span>
                                            </span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="button-row-edit">
                <button class="button is-success save-btn">
                    <span>Save</span>{" "}
                    <span class="icon">
                        <i class="fas fa-save"></i>
                    </span>
                </button>
                <button class="button is-warning">{reminder.enabled ? "Disable" : "Enable"}</button>
                <button class="button is-danger delete-reminder">Delete</button>
            </div>
        </div>
    );
};