Load/create/delete templates
This commit is contained in:
parent
8ba7a39ce5
commit
5dde422ee5
19
src/api.ts
19
src/api.ts
@ -178,3 +178,22 @@ export const fetchGuildTemplates = (guild: string) => ({
|
||||
>,
|
||||
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,
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { LoadTemplate } from "../LoadTemplate";
|
||||
import { useReminder } from "../ReminderContext";
|
||||
import { useMutation, useQueryClient } from "react-query";
|
||||
import { postGuildReminder } from "../../../api";
|
||||
import { postGuildReminder, postGuildTemplate } from "../../../api";
|
||||
import { useParams } from "wouter";
|
||||
import { useState } from "preact/hooks";
|
||||
import { ICON_FLASH_TIME } from "../../../consts";
|
||||
@ -12,6 +12,7 @@ export const CreateButtonRow = () => {
|
||||
const [reminder] = useReminder();
|
||||
|
||||
const [recentlyCreated, setRecentlyCreated] = useState(false);
|
||||
const [templateRecentlyCreated, setTemplateRecentlyCreated] = useState(false);
|
||||
|
||||
const flash = useFlash();
|
||||
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 (
|
||||
<div class="button-row">
|
||||
<div class="button-row-reminder">
|
||||
@ -66,11 +91,26 @@ export const CreateButtonRow = () => {
|
||||
</div>
|
||||
<div class="button-row-template">
|
||||
<div>
|
||||
<button class="button is-success is-outlined">
|
||||
<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>
|
||||
|
@ -1,9 +1,11 @@
|
||||
import { useState } from "preact/hooks";
|
||||
import { Modal } from "../Modal";
|
||||
import { useQuery } from "react-query";
|
||||
import { fetchGuildTemplates } from "../../api";
|
||||
import { useMutation, useQuery, useQueryClient } from "react-query";
|
||||
import { deleteGuildTemplate, fetchGuildTemplates } from "../../api";
|
||||
import { useParams } from "wouter";
|
||||
import { useReminder } from "./ReminderContext";
|
||||
import { useFlash } from "../App/FlashContext";
|
||||
import { ICON_FLASH_TIME } from "../../consts";
|
||||
|
||||
export const LoadTemplate = () => {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
@ -26,9 +28,21 @@ export const LoadTemplate = () => {
|
||||
const LoadTemplateModal = ({ setModalOpen }) => {
|
||||
const { guild } = useParams();
|
||||
const [reminder, setReminder] = useReminder();
|
||||
const { isSuccess, data: templates } = useQuery(fetchGuildTemplates(guild));
|
||||
|
||||
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 (
|
||||
<Modal setModalOpen={setModalOpen} title={"Load Template"}>
|
||||
@ -39,6 +53,7 @@ const LoadTemplateModal = ({ setModalOpen }) => {
|
||||
onChange={(ev) => {
|
||||
setSelected(ev.currentTarget.value);
|
||||
}}
|
||||
disabled={mutation.isLoading}
|
||||
>
|
||||
<option disabled={true} selected={true}>
|
||||
Choose template...
|
||||
@ -58,17 +73,39 @@ const LoadTemplateModal = ({ setModalOpen }) => {
|
||||
<button
|
||||
class="button is-success close-modal"
|
||||
id="load-template"
|
||||
style={{ margin: "2px" }}
|
||||
onClick={() => {
|
||||
const template = templates.find(
|
||||
(template) => template.id.toString() === selected,
|
||||
);
|
||||
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
// todo this probably needs to exclude some things
|
||||
...templates.find((template) => template.id === selected),
|
||||
...template,
|
||||
// drop the template's ID
|
||||
id: undefined,
|
||||
}));
|
||||
|
||||
flash({ message: "Template loaded", type: "success" });
|
||||
setModalOpen(false);
|
||||
}}
|
||||
disabled={mutation.isLoading}
|
||||
>
|
||||
Load Template
|
||||
</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
|
||||
</button>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user