reminder-dashboard/src/components/Reminder/ButtonRow/CreateButtonRow.tsx

import { LoadTemplate } from "../LoadTemplate";
import { useReminder } from "../ReminderContext";
import { useMutation, useQueryClient } from "react-query";
import { postGuildReminder, postGuildTemplate } from "../../../api";
import { useParams } from "wouter";
import { useState } from "preact/hooks";
import { ICON_FLASH_TIME } from "../../../consts";
import { useFlash } from "../../App/FlashContext";

export const CreateButtonRow = () => {
    const { guild } = useParams();
    const [reminder] = useReminder();

    const [recentlyCreated, setRecentlyCreated] = useState(false);
    const [templateRecentlyCreated, setTemplateRecentlyCreated] = useState(false);

    const flash = useFlash();
    const queryClient = useQueryClient();
    const mutation = useMutation({
        ...postGuildReminder(guild),
        onSuccess: (data) => {
            if (data.error) {
                flash({
                    message: data.error,
                    type: "error",
                });
            } else {
                flash({
                    message: "Reminder created",
                    type: "success",
                });
                queryClient.invalidateQueries({
                    queryKey: ["GUILD_REMINDERS", guild],
                });
                setRecentlyCreated(true);
                setTimeout(() => {
                    setRecentlyCreated(false);
                }, ICON_FLASH_TIME);
            }
        },
    });

    const templateMutation = useMutation({
        ...postGuildTemplate(guild),
        onSuccess: (data) => {
            if (data.error) {
                flash({
                    message: data.error,
                    type: "error",
                });
            } else {
                flash({
                    message: "Template created",
                    type: "success",
                });
                queryClient.invalidateQueries({
                    queryKey: ["GUILD_TEMPLATES", guild],
                });
                setTemplateRecentlyCreated(true);
                setTimeout(() => {
                    setTemplateRecentlyCreated(false);
                }, ICON_FLASH_TIME);
            }
        },
    });

    return (
        <div class="button-row">
            <div class="button-row-reminder">
                <button
                    class="button is-success"
                    onClick={() => {
                        mutation.mutate(reminder);
                    }}
                >
                    <span>Create Reminder</span>{" "}
                    {mutation.isLoading ? (
                        <span class="icon">
                            <i class="fas fa-spin fa-cog"></i>
                        </span>
                    ) : recentlyCreated ? (
                        <span class="icon">
                            <i class="fas fa-check"></i>
                        </span>
                    ) : (
                        <span class="icon">
                            <i class="fas fa-sparkles"></i>
                        </span>
                    )}
                </button>
            </div>
            <div class="button-row-template">
                <div>
                    <button
                        class="button is-success is-outlined"
                        onClick={() => {
                            templateMutation.mutate(reminder);
                        }}
                    >
                        <span>Create Template</span>{" "}
                        {templateMutation.isLoading ? (
                            <span class="icon">
                                <i class="fas fa-spin fa-cog"></i>
                            </span>
                        ) : templateRecentlyCreated ? (
                            <span class="icon">
                                <i class="fas fa-check"></i>
                            </span>
                        ) : (
                            <span class="icon">
                                <i class="fas fa-file-spreadsheet"></i>
                            </span>
                        )}
                    </button>
                </div>
                <div>
                    <LoadTemplate />
                </div>
            </div>
        </div>
    );
};