reminder-bot/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, postUserReminder } from "../../../api";
import { useState } from "preact/hooks";
import { ICON_FLASH_TIME } from "../../../consts";
import { useFlash } from "../../App/FlashContext";
import { useGuild } from "../../App/useGuild";

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

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

    const flash = useFlash();
    const queryClient = useQueryClient();
    const mutation = useMutation({
        ...(guild ? postGuildReminder(guild) : postUserReminder()),
        onSuccess: (data) => {
            if (data.error) {
                flash({
                    message: data.error,
                    type: "error",
                });
            } else {
                flash({
                    message: "Reminder created",
                    type: "success",
                });
                if (guild) {
                    queryClient.invalidateQueries({
                        queryKey: ["GUILD_REMINDERS", guild],
                    });
                } else {
                    queryClient.invalidateQueries({
                        queryKey: ["USER_REMINDERS"],
                    });
                }
                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>
            {guild && (
                <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>
    );
};