From 5dde422ee5ad8c1ebca1d94ec64407b170824980 Mon Sep 17 00:00:00 2001 From: jude Date: Mon, 6 Nov 2023 18:11:18 +0000 Subject: [PATCH] Load/create/delete templates --- src/api.ts | 19 +++++++ .../Reminder/ButtonRow/CreateButtonRow.tsx | 50 +++++++++++++++++-- src/components/Reminder/LoadTemplate.tsx | 49 +++++++++++++++--- 3 files changed, 107 insertions(+), 11 deletions(-) diff --git a/src/api.ts b/src/api.ts index bb24cf8..2e745b1 100644 --- a/src/api.ts +++ b/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, + }, + }), +}); diff --git a/src/components/Reminder/ButtonRow/CreateButtonRow.tsx b/src/components/Reminder/ButtonRow/CreateButtonRow.tsx index ef579d2..72434f7 100644 --- a/src/components/Reminder/ButtonRow/CreateButtonRow.tsx +++ b/src/components/Reminder/ButtonRow/CreateButtonRow.tsx @@ -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 (
@@ -66,11 +91,26 @@ export const CreateButtonRow = () => {
-
diff --git a/src/components/Reminder/LoadTemplate.tsx b/src/components/Reminder/LoadTemplate.tsx index ed03d81..8f58e95 100644 --- a/src/components/Reminder/LoadTemplate.tsx +++ b/src/components/Reminder/LoadTemplate.tsx @@ -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 ( @@ -39,6 +53,7 @@ const LoadTemplateModal = ({ setModalOpen }) => { onChange={(ev) => { setSelected(ev.currentTarget.value); }} + disabled={mutation.isLoading} >