147 lines
5.1 KiB
TypeScript
147 lines
5.1 KiB
TypeScript
import { LoadTemplate } from "../LoadTemplate";
|
|
import { useReminder } from "../ReminderContext";
|
|
import { useMutation, useQuery, useQueryClient } from "react-query";
|
|
import {
|
|
fetchUserInfo,
|
|
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";
|
|
import { defaultReminder } from "../CreateReminder";
|
|
|
|
export const CreateButtonRow = () => {
|
|
const guild = useGuild();
|
|
const [reminder, setReminder] = useReminder();
|
|
|
|
const [recentlyCreated, setRecentlyCreated] = useState(false);
|
|
const [templateRecentlyCreated, setTemplateRecentlyCreated] = useState(false);
|
|
|
|
const flash = useFlash();
|
|
const queryClient = useQueryClient();
|
|
const { data: userInfo } = useQuery({ ...fetchUserInfo() });
|
|
const mutation = useMutation({
|
|
...(guild ? postGuildReminder(guild) : postUserReminder()),
|
|
onError: (error) => {
|
|
flash({
|
|
message: `An error occurred: ${error}`,
|
|
type: "error",
|
|
});
|
|
},
|
|
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"],
|
|
});
|
|
}
|
|
if (userInfo.reset_inputs_on_create) {
|
|
setReminder(() => defaultReminder());
|
|
}
|
|
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>
|
|
);
|
|
};
|