Load/create/delete templates

This commit is contained in:
jude 2023-11-06 18:11:18 +00:00
parent 8ba7a39ce5
commit 5dde422ee5
3 changed files with 107 additions and 11 deletions

View File

@ -178,3 +178,22 @@ export const fetchGuildTemplates = (guild: string) => ({
>, >,
staleTime: OTHER_STALE_TIME, staleTime: OTHER_STALE_TIME,
}); });
export const postGuildTemplate = (guild: string) => ({
mutationFn: (reminder: Reminder) =>
axios
.post(`/dashboard/api/guild/${guild}/templates`, {
...reminder,
utc_time: reminder.utc_time.toFormat("yyyy-LL-dd'T'HH:mm:ss"),
})
.then((resp) => resp.data),
});
export const deleteGuildTemplate = (guild: string) => ({
mutationFn: (template: Template) =>
axios.delete(`/dashboard/api/guild/${guild}/templates`, {
data: {
id: template.id,
},
}),
});

View File

@ -1,7 +1,7 @@
import { LoadTemplate } from "../LoadTemplate"; import { LoadTemplate } from "../LoadTemplate";
import { useReminder } from "../ReminderContext"; import { useReminder } from "../ReminderContext";
import { useMutation, useQueryClient } from "react-query"; import { useMutation, useQueryClient } from "react-query";
import { postGuildReminder } from "../../../api"; import { postGuildReminder, postGuildTemplate } from "../../../api";
import { useParams } from "wouter"; import { useParams } from "wouter";
import { useState } from "preact/hooks"; import { useState } from "preact/hooks";
import { ICON_FLASH_TIME } from "../../../consts"; import { ICON_FLASH_TIME } from "../../../consts";
@ -12,6 +12,7 @@ export const CreateButtonRow = () => {
const [reminder] = useReminder(); const [reminder] = useReminder();
const [recentlyCreated, setRecentlyCreated] = useState(false); const [recentlyCreated, setRecentlyCreated] = useState(false);
const [templateRecentlyCreated, setTemplateRecentlyCreated] = useState(false);
const flash = useFlash(); const flash = useFlash();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@ -39,6 +40,30 @@ export const CreateButtonRow = () => {
}, },
}); });
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 ( return (
<div class="button-row"> <div class="button-row">
<div class="button-row-reminder"> <div class="button-row-reminder">
@ -66,11 +91,26 @@ export const CreateButtonRow = () => {
</div> </div>
<div class="button-row-template"> <div class="button-row-template">
<div> <div>
<button class="button is-success is-outlined"> <button
class="button is-success is-outlined"
onClick={() => {
templateMutation.mutate(reminder);
}}
>
<span>Create Template</span>{" "} <span>Create Template</span>{" "}
<span class="icon"> {templateMutation.isLoading ? (
<i class="fas fa-file-spreadsheet"></i> <span class="icon">
</span> <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> </button>
</div> </div>
<div> <div>

View File

@ -1,9 +1,11 @@
import { useState } from "preact/hooks"; import { useState } from "preact/hooks";
import { Modal } from "../Modal"; import { Modal } from "../Modal";
import { useQuery } from "react-query"; import { useMutation, useQuery, useQueryClient } from "react-query";
import { fetchGuildTemplates } from "../../api"; import { deleteGuildTemplate, fetchGuildTemplates } from "../../api";
import { useParams } from "wouter"; import { useParams } from "wouter";
import { useReminder } from "./ReminderContext"; import { useReminder } from "./ReminderContext";
import { useFlash } from "../App/FlashContext";
import { ICON_FLASH_TIME } from "../../consts";
export const LoadTemplate = () => { export const LoadTemplate = () => {
const [modalOpen, setModalOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false);
@ -26,9 +28,21 @@ export const LoadTemplate = () => {
const LoadTemplateModal = ({ setModalOpen }) => { const LoadTemplateModal = ({ setModalOpen }) => {
const { guild } = useParams(); const { guild } = useParams();
const [reminder, setReminder] = useReminder(); const [reminder, setReminder] = useReminder();
const { isSuccess, data: templates } = useQuery(fetchGuildTemplates(guild));
const [selected, setSelected] = useState(null); const [selected, setSelected] = useState(null);
const flash = useFlash();
const queryClient = useQueryClient();
const { isSuccess, data: templates } = useQuery(fetchGuildTemplates(guild));
const mutation = useMutation({
...deleteGuildTemplate(guild),
onSuccess: () => {
flash({ message: "Template deleted", type: "success" });
queryClient.invalidateQueries({
queryKey: ["GUILD_TEMPLATES", guild],
});
},
});
return ( return (
<Modal setModalOpen={setModalOpen} title={"Load Template"}> <Modal setModalOpen={setModalOpen} title={"Load Template"}>
@ -39,6 +53,7 @@ const LoadTemplateModal = ({ setModalOpen }) => {
onChange={(ev) => { onChange={(ev) => {
setSelected(ev.currentTarget.value); setSelected(ev.currentTarget.value);
}} }}
disabled={mutation.isLoading}
> >
<option disabled={true} selected={true}> <option disabled={true} selected={true}>
Choose template... Choose template...
@ -58,17 +73,39 @@ const LoadTemplateModal = ({ setModalOpen }) => {
<button <button
class="button is-success close-modal" class="button is-success close-modal"
id="load-template" id="load-template"
style={{ margin: "2px" }}
onClick={() => { onClick={() => {
const template = templates.find(
(template) => template.id.toString() === selected,
);
setReminder((reminder) => ({ setReminder((reminder) => ({
...reminder, ...reminder,
// todo this probably needs to exclude some things ...template,
...templates.find((template) => template.id === selected), // drop the template's ID
id: undefined,
})); }));
flash({ message: "Template loaded", type: "success" });
setModalOpen(false);
}} }}
disabled={mutation.isLoading}
> >
Load Template Load Template
</button> </button>
<button class="button is-danger" id="delete-template"> <button
class="button is-danger"
id="delete-template"
style={{ margin: "2px" }}
onClick={() => {
const template = templates.find(
(template) => template.id.toString() === selected,
);
mutation.mutate(template);
}}
disabled={mutation.isLoading}
>
Delete Delete
</button> </button>
</div> </div>