diff --git a/src/api.ts b/src/api.ts index 7666998..868b829 100644 --- a/src/api.ts +++ b/src/api.ts @@ -122,8 +122,11 @@ export const fetchGuildReminders = (guild: string) => ({ .then((value) => value.map((reminder) => ({ ...reminder, - utc_time: DateTime.fromISO(reminder.utc_time), - expires: reminder.expires === null ? null : DateTime.fromISO(reminder.expires), + utc_time: DateTime.fromISO(reminder.utc_time, { zone: "UTC" }), + expires: + reminder.expires === null + ? null + : DateTime.fromISO(reminder.expires, { zone: "UTC" }), })), ) as Promise, staleTime: OTHER_STALE_TIME, @@ -137,6 +140,14 @@ export const patchGuildReminder = (guild: string) => ({ }), }); +export const postGuildReminder = (guild: string) => ({ + mutationFn: (reminder: Reminder) => + axios.post(`/dashboard/api/guild/${guild}/reminders`, { + ...reminder, + utc_time: reminder.utc_time.toFormat("yyyy-LL-dd'T'HH:mm:ss"), + }), +}); + export const deleteGuildReminder = (guild: string) => ({ mutationFn: (reminder: Reminder) => axios.delete(`/dashboard/api/guild/${guild}/reminders`, { diff --git a/src/components/Reminder/ButtonRow/CreateButtonRow.tsx b/src/components/Reminder/ButtonRow/CreateButtonRow.tsx new file mode 100644 index 0000000..48b7730 --- /dev/null +++ b/src/components/Reminder/ButtonRow/CreateButtonRow.tsx @@ -0,0 +1,69 @@ +import { LoadTemplate } from "../LoadTemplate"; +import { useReminder } from "../ReminderContext"; +import { useMutation, useQueryClient } from "react-query"; +import { postGuildReminder } from "../../../api"; +import { useParams } from "wouter"; +import { useState } from "preact/hooks"; +import { ICON_FLASH_TIME } from "../../../consts"; + +export const CreateButtonRow = () => { + const { guild } = useParams(); + const [reminder] = useReminder(); + + const [recentlyCreated, setRecentlyCreated] = useState(false); + + const queryClient = useQueryClient(); + const mutation = useMutation({ + ...postGuildReminder(guild), + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: ["GUILD_REMINDERS", guild], + }); + setRecentlyCreated(true); + setTimeout(() => { + setRecentlyCreated(false); + }, ICON_FLASH_TIME); + }, + }); + + return ( +
+
+ +
+
+
+ +
+
+ +
+
+
+ ); +}; diff --git a/src/components/Reminder/ButtonRow/EditButtonRow.tsx b/src/components/Reminder/ButtonRow/EditButtonRow.tsx index 8522964..d9aea80 100644 --- a/src/components/Reminder/ButtonRow/EditButtonRow.tsx +++ b/src/components/Reminder/ButtonRow/EditButtonRow.tsx @@ -62,7 +62,7 @@ export const EditButtonRow = () => { > {reminder.enabled ? "Disable" : "Enable"} - + ); }; diff --git a/src/components/Reminder/CreateReminder.tsx b/src/components/Reminder/CreateReminder.tsx index 7faf692..b2a3f30 100644 --- a/src/components/Reminder/CreateReminder.tsx +++ b/src/components/Reminder/CreateReminder.tsx @@ -2,15 +2,12 @@ import { useParams } from "wouter"; import { useState } from "preact/hooks"; import { useQuery } from "react-query"; import { fetchUserInfo, Reminder } from "../../api"; -import { Name } from "./Name"; -import { Username } from "./Username"; -import { Content } from "./Content"; -import { Embed } from "./Embed"; -import { ChannelSelector } from "./ChannelSelector"; import { DateTime } from "luxon"; -import { IntervalSelector } from "./IntervalSelector"; -import { LoadTemplate } from "./LoadTemplate"; -import { ImagePicker } from "./ImagePicker"; +import { CreateButtonRow } from "./ButtonRow/CreateButtonRow"; +import { TopBar } from "./TopBar"; +import { Message } from "./Message"; +import { Settings } from "./Settings"; +import { ReminderContext } from "./ReminderContext"; function defaultReminder(): Reminder { return { @@ -44,201 +41,23 @@ function defaultReminder(): Reminder { } export const CreateReminder = () => { - const { guild } = useParams(); const [reminder, setReminder] = useState(defaultReminder); - - const { isSuccess: userFetched, data: userInfo } = useQuery(fetchUserInfo()); - const [collapsed, setCollapsed] = useState(false); - if (!userFetched) { - // todo - return <>; - } - return ( -
-
- -
- + +
+ { + setCollapsed(!collapsed); + }} + /> +
+ +
+
-
-
-
-
-

- {}} - > -

-
-
-
- { - setReminder((reminder) => ({ - ...reminder, - username, - })); - }} - > - { - setReminder((reminder) => ({ - ...reminder, - content, - })); - }} - > - -
-
-
-
-
-
-
- -
- -
- -
-
- -
-
- -
-
-
-
- Intervals available on{" "} - Patreon or{" "} - - self-hosting - -
-
- - -
- -
-
- -
-
-
- -
-
-
- -
-
-
-
- -
-
-
-
-
-
-
-
-
- -
-
-
- -
-
- -
-
-
-
+ ); }; diff --git a/src/components/Reminder/EditReminder.tsx b/src/components/Reminder/EditReminder.tsx index 6324504..188e527 100644 --- a/src/components/Reminder/EditReminder.tsx +++ b/src/components/Reminder/EditReminder.tsx @@ -1,49 +1,28 @@ -import { fetchGuildChannels, Reminder } from "../../api"; -import { useQuery } from "react-query"; -import { useParams } from "wouter"; -import { Name } from "./Name"; +import { Reminder } from "../../api"; import { useState } from "preact/hooks"; import { EditButtonRow } from "./ButtonRow/EditButtonRow"; import { Message } from "./Message"; import { Settings } from "./Settings"; import { ReminderContext } from "./ReminderContext"; +import { TopBar } from "./TopBar"; type Props = { reminder: Reminder; }; export const EditReminder = ({ reminder: initialReminder }: Props) => { - const { guild } = useParams(); const [reminder, setReminder] = useState(initialReminder); - const { isSuccess: channelsFetched, data: guildChannels } = useQuery(fetchGuildChannels(guild)); - const [collapsed, setCollapsed] = useState(false); - if (!channelsFetched) { - return <>; - } - - const channelInfo = guildChannels.find((c) => c.id === reminder.channel); - return (
-
-
#{channelInfo.name}
- -
- -
-
+ { + setCollapsed(!collapsed); + }} + />
diff --git a/src/components/Reminder/LoadTemplate.tsx b/src/components/Reminder/LoadTemplate.tsx index 80381c1..b1787aa 100644 --- a/src/components/Reminder/LoadTemplate.tsx +++ b/src/components/Reminder/LoadTemplate.tsx @@ -3,8 +3,9 @@ import { Modal } from "../Modal"; import { useQuery } from "react-query"; import { fetchGuildTemplates } from "../../api"; import { useParams } from "wouter"; +import { useReminder } from "./ReminderContext"; -export const LoadTemplate = ({ setReminder }) => { +export const LoadTemplate = () => { const [modalOpen, setModalOpen] = useState(false); return ( diff --git a/src/components/Reminder/TopBar.tsx b/src/components/Reminder/TopBar.tsx new file mode 100644 index 0000000..2ed6df6 --- /dev/null +++ b/src/components/Reminder/TopBar.tsx @@ -0,0 +1,28 @@ +import { useReminder } from "./ReminderContext"; +import { Name } from "./Name"; +import { fetchGuildChannels, Reminder } from "../../api"; +import { useQuery } from "react-query"; +import { useParams } from "wouter"; + +export const TopBar = ({ toggleCollapsed }) => { + const { guild } = useParams(); + const [reminder] = useReminder(); + + const { isSuccess, data: guildChannels } = useQuery(fetchGuildChannels(guild)); + + const channelName = (reminder: Reminder) => + guildChannels.find((c) => c.id === reminder.channel); + + return ( +
+ {isSuccess &&
#{channelName(reminder)}
} + +
+ +
+
+ ); +};