From b83f1f2f3133842ef7434e4f071a8a56b3e3303c Mon Sep 17 00:00:00 2001 From: jude Date: Wed, 1 Nov 2023 22:10:56 +0000 Subject: [PATCH] Working on template loader --- src/api.ts | 67 +++++++++++++++------ src/components/GuildReminders/index.tsx | 5 +- src/components/Modal/index.tsx | 57 ++++++++++++++++++ src/components/Reminder/ChannelSelector.tsx | 6 +- src/components/Reminder/CreateReminder.tsx | 49 +++++++++++---- src/components/Reminder/EditReminder.tsx | 6 +- src/components/Reminder/Embed/Color.tsx | 67 ++++----------------- src/components/Reminder/LoadTemplate.tsx | 54 +++++++++++++++++ src/consts.ts | 1 - 9 files changed, 214 insertions(+), 98 deletions(-) create mode 100644 src/components/Modal/index.tsx create mode 100644 src/components/Reminder/LoadTemplate.tsx diff --git a/src/api.ts b/src/api.ts index 8a6edd6..b104d5a 100644 --- a/src/api.ts +++ b/src/api.ts @@ -52,6 +52,26 @@ type ChannelInfo = { name: string; }; +type Template = { + id: number; + name: string; + attachment: string | null; + attachment_name: string | null; + avatar: string | null; + channel: string; + content: string; + embed_author: string; + embed_author_url: string | null; + embed_color: number; + embed_description: string; + embed_footer: string; + embed_footer_url: string | null; + embed_image_url: string | null; + embed_thumbnail_url: string | null; + embed_title: string; + embed_fields: EmbedField[] | null; +}; + export function fetchUserInfo(): Promise { return axios.get("/dashboard/api/user").then((resp) => resp.data) as Promise; } @@ -62,21 +82,34 @@ export function fetchUserGuilds(): Promise { >; } -export function fetchGuildReminders(guild: string): Promise { - return axios - .get(`/dashboard/api/guild/${guild}/reminders`) - .then((resp) => resp.data) - .then((value) => - value.map((reminder) => ({ - ...reminder, - utc_time: DateTime.fromISO(reminder.utc_time), - expires: reminder.expires === null ? null : DateTime.fromISO(reminder.expires), - })), - ) as Promise; -} +export const fetchGuildReminders = (guild: string) => ({ + queryKey: ["GUILD_REMINDERS", guild], + queryFn: () => + axios + .get(`/dashboard/api/guild/${guild}/reminders`) + .then((resp) => resp.data) + .then((value) => + value.map((reminder) => ({ + ...reminder, + utc_time: DateTime.fromISO(reminder.utc_time), + expires: reminder.expires === null ? null : DateTime.fromISO(reminder.expires), + })), + ) as Promise, +}); -export function fetchGuildChannels(guild: string): Promise { - return axios.get(`/dashboard/api/guild/${guild}/channels`).then((resp) => resp.data) as Promise< - ChannelInfo[] - >; -} +export const fetchGuildChannels = (guild: string) => ({ + queryKey: ["GUILD_CHANNELS", guild], + queryFn: () => + axios.get(`/dashboard/api/guild/${guild}/channels`).then((resp) => resp.data) as Promise< + ChannelInfo[] + >, + staleTime: 300, +}); + +export const guildTemplatesQuery = (guild: string) => ({ + queryKey: ["GUILD_TEMPLATES", guild], + queryFn: () => + axios.get(`/dashboard/api/guild/${guild}/channels`).then((resp) => resp.data) as Promise< + Template[] + >, +}); diff --git a/src/components/GuildReminders/index.tsx b/src/components/GuildReminders/index.tsx index e273418..317edad 100644 --- a/src/components/GuildReminders/index.tsx +++ b/src/components/GuildReminders/index.tsx @@ -8,10 +8,7 @@ import { CreateReminder } from "../Reminder/CreateReminder"; export const GuildReminders = () => { const { guild } = useParams(); - const { isSuccess, data } = useQuery({ - queryKey: [QueryKeys.GUILD_REMINDERS, guild], - queryFn: () => fetchGuildReminders(guild), - }); + const { isSuccess, data } = useQuery(fetchGuildReminders(guild)); return (
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx new file mode 100644 index 0000000..82e8a84 --- /dev/null +++ b/src/components/Modal/index.tsx @@ -0,0 +1,57 @@ +import { JSX } from "preact"; + +type Props = { + setModalOpen: (open: boolean) => never; + title: string; + onSubmitText?: string; + onSubmit?: () => never; + children: string | JSX.Element | JSX.Element[] | (() => JSX.Element); +}; + +export const Modal = ({ setModalOpen, title, onSubmit, onSubmitText, children }: Props) => { + return ( +
+
{ + setModalOpen(false); + }} + >
+
+
+ + +
+
{children}
+ {onSubmit && ( +
+ + +
+ )} +
+ +
+ ); +}; diff --git a/src/components/Reminder/ChannelSelector.tsx b/src/components/Reminder/ChannelSelector.tsx index 14170b2..20b30c7 100644 --- a/src/components/Reminder/ChannelSelector.tsx +++ b/src/components/Reminder/ChannelSelector.tsx @@ -6,11 +6,7 @@ import { fetchGuildChannels } from "../../api"; export const ChannelSelector = ({ channel }) => { const { guild } = useParams(); - const { isSuccess, data } = useQuery({ - queryKey: [QueryKeys.GUILD_CHANNELS, guild], - queryFn: () => fetchGuildChannels(guild), - staleTime: 300, - }); + const { isSuccess, data } = useQuery(fetchGuildChannels(guild)); return (
diff --git a/src/components/Reminder/CreateReminder.tsx b/src/components/Reminder/CreateReminder.tsx index 7b6d3ea..f55cbcf 100644 --- a/src/components/Reminder/CreateReminder.tsx +++ b/src/components/Reminder/CreateReminder.tsx @@ -2,29 +2,56 @@ import { useParams } from "wouter"; import { useState } from "preact/hooks"; import { useQueries } from "react-query"; import { QueryKeys } from "../../consts"; -import { fetchGuildChannels, fetchUserInfo } from "../../api"; +import { fetchGuildChannels, fetchUserInfo, Reminder } from "../../api"; import { Name } from "./Name"; import { Username } from "./Username"; -import React from "react"; import { Content } from "./Content"; import { Embed } from "./Embed"; import { ChannelSelector } from "./ChannelSelector"; import { DateTime } from "luxon"; import { IntervalSelector } from "./IntervalSelector"; +import { LoadTemplate } from "./LoadTemplate"; + +function defaultReminder(): Reminder { + return { + attachment: "", + attachment_name: "", + avatar: "", + channel: "", + content: "", + embed_author: "", + embed_author_url: "", + embed_color: 0, + embed_description: "", + embed_fields: [], + embed_footer: "", + embed_footer_url: "", + embed_image_url: "", + embed_thumbnail_url: "", + embed_title: "", + enabled: true, + expires: null, + interval_days: null, + interval_months: null, + interval_seconds: null, + name: "", + restartable: false, + tts: false, + uid: "", + username: "", + utc_time: DateTime.now(), + }; +} export const CreateReminder = () => { const { guild } = useParams(); - const [reminder, setReminder] = useState({}); + const [reminder, setReminder] = useState(defaultReminder); const [ { isSuccess: channelsFetched, data: guildChannels }, { isSuccess: userFetched, data: userInfo }, ] = useQueries([ - { - queryKey: [QueryKeys.GUILD_CHANNELS, guild], - queryFn: () => fetchGuildChannels(guild), - staleTime: 300, - }, + fetchGuildChannels(guild), { queryKey: [QueryKeys.USER_DATA], queryFn: fetchUserInfo, @@ -101,7 +128,7 @@ export const CreateReminder = () => { Channel*
- +
@@ -220,9 +247,7 @@ export const CreateReminder = () => {
- +
diff --git a/src/components/Reminder/EditReminder.tsx b/src/components/Reminder/EditReminder.tsx index 54768d2..dc9e818 100644 --- a/src/components/Reminder/EditReminder.tsx +++ b/src/components/Reminder/EditReminder.tsx @@ -23,11 +23,7 @@ export const EditReminder = ({ reminder: initialReminder }: Props) => { { isSuccess: channelsFetched, data: guildChannels }, { isSuccess: userFetched, data: userInfo }, ] = useQueries([ - { - queryKey: [QueryKeys.GUILD_CHANNELS, guild], - queryFn: () => fetchGuildChannels(guild), - staleTime: 300, - }, + fetchGuildChannels(guild), { queryKey: [QueryKeys.USER_DATA], queryFn: fetchUserInfo, diff --git a/src/components/Reminder/Embed/Color.tsx b/src/components/Reminder/Embed/Color.tsx index 932f7d2..2137910 100644 --- a/src/components/Reminder/Embed/Color.tsx +++ b/src/components/Reminder/Embed/Color.tsx @@ -1,5 +1,6 @@ import { useState } from "preact/hooks"; import { HexColorPicker } from "react-colorful"; +import { Modal } from "../../Modal"; export const Color = ({ color: colorProp, onChange }) => { const [modalOpen, setModalOpen] = useState(false); @@ -31,61 +32,19 @@ const ColorModal = ({ setModalOpen, color: colorProp, onSave }) => { const [color, setColor] = useState(colorProp); return ( -