115 lines
4.0 KiB
TypeScript
115 lines
4.0 KiB
TypeScript
import { useState } from "preact/hooks";
|
|
import { Modal } from "../Modal";
|
|
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);
|
|
|
|
return (
|
|
<div>
|
|
<button
|
|
class="button is-outlined show-modal is-pulled-right"
|
|
onClick={() => {
|
|
setModalOpen(true);
|
|
}}
|
|
>
|
|
Load Template
|
|
</button>
|
|
{modalOpen && <LoadTemplateModal setModalOpen={setModalOpen}></LoadTemplateModal>}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const LoadTemplateModal = ({ setModalOpen }) => {
|
|
const { guild } = useParams();
|
|
const [reminder, setReminder] = useReminder();
|
|
|
|
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"}>
|
|
<div class="control has-icons-left">
|
|
<div class="select is-fullwidth">
|
|
<select
|
|
id="templateSelect"
|
|
onChange={(ev) => {
|
|
setSelected(ev.currentTarget.value);
|
|
}}
|
|
disabled={mutation.isLoading}
|
|
>
|
|
<option disabled={true} selected={true}>
|
|
Choose template...
|
|
</option>
|
|
{isSuccess &&
|
|
templates.map((template) => (
|
|
<option value={template.id}>{template.name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div class="icon is-small is-left">
|
|
<i class="fas fa-file-spreadsheet"></i>
|
|
</div>
|
|
</div>
|
|
<br></br>
|
|
<div class="has-text-centered">
|
|
<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,
|
|
...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"
|
|
style={{ margin: "2px" }}
|
|
onClick={() => {
|
|
const template = templates.find(
|
|
(template) => template.id.toString() === selected,
|
|
);
|
|
|
|
mutation.mutate(template);
|
|
}}
|
|
disabled={mutation.isLoading}
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
};
|