reminder-dashboard/src/components/Reminder/LoadTemplate.tsx

import { useState } from "preact/hooks";
import { Modal } from "../Modal";
import { useQuery } from "react-query";
import { fetchGuildTemplates } from "../../api";
import { useParams } from "wouter";

export const LoadTemplate = ({ setReminder }) => {
    const [modalOpen, setModalOpen] = useState(false);

    return (
        <div>
            <button
                class="button is-outlined show-modal is-pulled-right"
                onClick={() => {
                    setModalOpen(true);
                }}
            >
                Load Template
            </button>
            {modalOpen && <LoadTemplateModal setModalOpen={setModalOpen}></LoadTemplateModal>}
        </div>
    );
};

const LoadTemplateModal = ({ setModalOpen }) => {
    const { guild } = useParams();
    const { status, data: templates } = useQuery(fetchGuildTemplates(guild));

    return (
        <Modal setModalOpen={setModalOpen} title={"Load Template"}>
            <div class="control has-icons-left">
                <div class="select is-fullwidth">
                    <select id="templateSelect">
                        {templates !== undefined &&
                            templates.map((template) => (
                                <option value={template.id}>{template.name}</option>
                            ))}
                    </select>
                </div>
                <div class="icon is-small is-left">
                    <i class="fas fa-file-spreadsheet"></i>
                </div>
            </div>
            <br></br>
            <div class="has-text-centered">
                <button class="button is-success close-modal" id="load-template">
                    Load Template
                </button>
                <button class="button is-danger" id="delete-template">
                    Delete
                </button>
            </div>
        </Modal>
    );
};