Add dashboard to build
This commit is contained in:
jude
@ -0,0 +1,122 @@
|
||||
import { LoadTemplate } from "../LoadTemplate";
|
||||
import { useReminder } from "../ReminderContext";
|
||||
import { useMutation, useQueryClient } from "react-query";
|
||||
import { postGuildReminder, postGuildTemplate } from "../../../api";
|
||||
import { useParams } from "wouter";
|
||||
import { useState } from "preact/hooks";
|
||||
import { ICON_FLASH_TIME } from "../../../consts";
|
||||
import { useFlash } from "../../App/FlashContext";
|
||||
|
||||
export const CreateButtonRow = () => {
|
||||
const { guild } = useParams();
|
||||
const [reminder] = useReminder();
|
||||
|
||||
const [recentlyCreated, setRecentlyCreated] = useState(false);
|
||||
const [templateRecentlyCreated, setTemplateRecentlyCreated] = useState(false);
|
||||
|
||||
const flash = useFlash();
|
||||
const queryClient = useQueryClient();
|
||||
const mutation = useMutation({
|
||||
...postGuildReminder(guild),
|
||||
onSuccess: (data) => {
|
||||
if (data.error) {
|
||||
flash({
|
||||
message: data.error,
|
||||
type: "error",
|
||||
});
|
||||
} else {
|
||||
flash({
|
||||
message: "Reminder created",
|
||||
type: "success",
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["GUILD_REMINDERS", guild],
|
||||
});
|
||||
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>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,74 @@
|
||||
import { useState } from "preact/hooks";
|
||||
import { Modal } from "../../Modal";
|
||||
import { useMutation, useQueryClient } from "react-query";
|
||||
import { useReminder } from "../ReminderContext";
|
||||
import { deleteGuildReminder } from "../../../api";
|
||||
import { useParams } from "wouter";
|
||||
import { useFlash } from "../../App/FlashContext";
|
||||
|
||||
export const DeleteButton = () => {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
class="button is-danger delete-reminder"
|
||||
onClick={() => {
|
||||
setModalOpen(true);
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
{modalOpen && <DeleteModal setModalOpen={setModalOpen}></DeleteModal>}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const DeleteModal = ({ setModalOpen }) => {
|
||||
const [reminder] = useReminder();
|
||||
const { guild } = useParams();
|
||||
|
||||
const flash = useFlash();
|
||||
const queryClient = useQueryClient();
|
||||
const mutation = useMutation({
|
||||
...deleteGuildReminder(guild),
|
||||
onSuccess: () => {
|
||||
flash({
|
||||
message: "Reminder deleted",
|
||||
type: "success",
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["GUILD_REMINDERS", guild],
|
||||
});
|
||||
setModalOpen(false);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<Modal setModalOpen={setModalOpen} title={"Delete Reminder"}>
|
||||
<>
|
||||
<p>This reminder will be permanently deleted. Are you sure?</p>
|
||||
<br></br>
|
||||
<div class="has-text-centered">
|
||||
<button
|
||||
class="button is-danger"
|
||||
onClick={() => {
|
||||
mutation.mutate(reminder);
|
||||
}}
|
||||
disabled={mutation.isLoading}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
<button
|
||||
class="button is-light close-modal"
|
||||
onClick={() => {
|
||||
setModalOpen(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,88 @@
|
||||
import { useRef, useState } from "preact/hooks";
|
||||
import { useMutation, useQueryClient } from "react-query";
|
||||
import { patchGuildReminder } from "../../../api";
|
||||
import { useParams } from "wouter";
|
||||
import { ICON_FLASH_TIME } from "../../../consts";
|
||||
import { DeleteButton } from "./DeleteButton";
|
||||
import { useReminder } from "../ReminderContext";
|
||||
import { useFlash } from "../../App/FlashContext";
|
||||
|
||||
export const EditButtonRow = () => {
|
||||
const { guild } = useParams();
|
||||
const [reminder, setReminder] = useReminder();
|
||||
|
||||
const [recentlySaved, setRecentlySaved] = useState(false);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const iconFlashTimeout = useRef(0);
|
||||
|
||||
const flash = useFlash();
|
||||
const mutation = useMutation({
|
||||
...patchGuildReminder(guild),
|
||||
onSuccess: (response) => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["GUILD_REMINDERS", guild],
|
||||
});
|
||||
|
||||
if (iconFlashTimeout.current !== null) {
|
||||
clearTimeout(iconFlashTimeout.current);
|
||||
}
|
||||
|
||||
if (response.data.errors.length > 0) {
|
||||
setRecentlySaved(false);
|
||||
|
||||
for (const error of response.data.errors) {
|
||||
flash({ message: error, type: "error" });
|
||||
}
|
||||
} else {
|
||||
setRecentlySaved(true);
|
||||
|
||||
iconFlashTimeout.current = setTimeout(() => {
|
||||
setRecentlySaved(false);
|
||||
}, ICON_FLASH_TIME);
|
||||
|
||||
setReminder(response.data.reminder);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="button-row-edit">
|
||||
<button
|
||||
class="button is-success save-btn"
|
||||
onClick={() => {
|
||||
mutation.mutate(reminder);
|
||||
}}
|
||||
disabled={mutation.isLoading}
|
||||
>
|
||||
<span>Save</span>{" "}
|
||||
{mutation.isLoading ? (
|
||||
<span class="icon">
|
||||
<i class="fas fa-spin fa-cog"></i>
|
||||
</span>
|
||||
) : recentlySaved ? (
|
||||
<span class="icon">
|
||||
<i class="fas fa-check"></i>
|
||||
</span>
|
||||
) : (
|
||||
<span class="icon">
|
||||
<i class="fas fa-save"></i>
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
class="button is-warning"
|
||||
onClick={() => {
|
||||
mutation.mutate({
|
||||
...reminder,
|
||||
enabled: !reminder.enabled,
|
||||
});
|
||||
}}
|
||||
disabled={mutation.isLoading}
|
||||
>
|
||||
{reminder.enabled ? "Disable" : "Enable"}
|
||||
</button>
|
||||
<DeleteButton />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user