From 640bf16875749d6518a06995675da8dedcb759f2 Mon Sep 17 00:00:00 2001 From: jude Date: Sat, 28 Oct 2023 19:21:13 +0100 Subject: [PATCH] Adding reminder editor --- src/api.ts | 66 ++- .../EditReminder/ChannelSelector.tsx | 27 ++ src/components/EditReminder/Message.tsx | 13 + src/components/EditReminder/Name.tsx | 17 + src/components/EditReminder/Username.tsx | 12 + src/components/EditReminder/index.tsx | 397 ++++++++++++++++++ src/components/GuildReminders/index.tsx | 63 ++- src/consts.ts | 2 + 8 files changed, 593 insertions(+), 4 deletions(-) create mode 100644 src/components/EditReminder/ChannelSelector.tsx create mode 100644 src/components/EditReminder/Message.tsx create mode 100644 src/components/EditReminder/Name.tsx create mode 100644 src/components/EditReminder/Username.tsx create mode 100644 src/components/EditReminder/index.tsx diff --git a/src/api.ts b/src/api.ts index 6f85c5b..8a6edd6 100644 --- a/src/api.ts +++ b/src/api.ts @@ -1,4 +1,5 @@ import axios from "axios"; +import { DateTime } from "luxon"; type UserInfo = { name: string; @@ -11,10 +12,71 @@ export type GuildInfo = { name: string; }; +type EmbedField = { + title: string; + value: string; + inline: boolean; +}; + +export type Reminder = { + 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; + enabled: boolean; + expires: DateTime | null; + interval_seconds: number | null; + interval_days: number | null; + interval_months: number | null; + name: string; + restartable: boolean; + tts: boolean; + uid: string; + username: string; + utc_time: DateTime; +}; + +type ChannelInfo = { + id: string; + name: string; +}; + export function fetchUserInfo(): Promise { - return axios.get("/api/user").then((resp) => resp.data) as Promise; + return axios.get("/dashboard/api/user").then((resp) => resp.data) as Promise; } export function fetchUserGuilds(): Promise { - return axios.get("/api/user/guilds").then((resp) => resp.data) as Promise; + return axios.get("/dashboard/api/user/guilds").then((resp) => resp.data) as Promise< + GuildInfo[] + >; +} + +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 function fetchGuildChannels(guild: string): Promise { + return axios.get(`/dashboard/api/guild/${guild}/channels`).then((resp) => resp.data) as Promise< + ChannelInfo[] + >; } diff --git a/src/components/EditReminder/ChannelSelector.tsx b/src/components/EditReminder/ChannelSelector.tsx new file mode 100644 index 0000000..14170b2 --- /dev/null +++ b/src/components/EditReminder/ChannelSelector.tsx @@ -0,0 +1,27 @@ +import { useQuery } from "react-query"; +import { QueryKeys } from "../../consts"; +import { useParams } from "wouter"; +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, + }); + + return ( +
+
+ +
+
+ +
+
+ ); +}; diff --git a/src/components/EditReminder/Message.tsx b/src/components/EditReminder/Message.tsx new file mode 100644 index 0000000..e209f0c --- /dev/null +++ b/src/components/EditReminder/Message.tsx @@ -0,0 +1,13 @@ +export const Message = ({ value }) => ( + <> + + + +); diff --git a/src/components/EditReminder/Name.tsx b/src/components/EditReminder/Name.tsx new file mode 100644 index 0000000..e82cba8 --- /dev/null +++ b/src/components/EditReminder/Name.tsx @@ -0,0 +1,17 @@ +export const Name = ({ value }) => ( +
+
+
+ + +
+
+
+); diff --git a/src/components/EditReminder/Username.tsx b/src/components/EditReminder/Username.tsx new file mode 100644 index 0000000..bdfe3f4 --- /dev/null +++ b/src/components/EditReminder/Username.tsx @@ -0,0 +1,12 @@ +export const Username = ({ value }) => ( +
+ + +
+); diff --git a/src/components/EditReminder/index.tsx b/src/components/EditReminder/index.tsx new file mode 100644 index 0000000..79e65a0 --- /dev/null +++ b/src/components/EditReminder/index.tsx @@ -0,0 +1,397 @@ +import { fetchGuildChannels, fetchUserInfo, Reminder } from "../../api"; +import { useQueries, useQuery } from "react-query"; +import { QueryKeys } from "../../consts"; +import { useParams } from "wouter"; +import { Name } from "./Name"; +import { Username } from "./Username"; +import { Message } from "./Message"; +import { ChannelSelector } from "./ChannelSelector"; + +type Props = { + reminder: Reminder; +}; + +export const EditReminder = ({ reminder }: Props) => { + const { guild } = useParams(); + + const [{ isSuccess, data: channel }] = useQueries([ + { + queryKey: [QueryKeys.GUILD_CHANNELS, guild], + queryFn: () => fetchGuildChannels(guild), + staleTime: 300, + }, + { + queryKey: [QueryKeys.USER_DATA], + queryFn: fetchUserInfo, + staleTime: Infinity, + }, + ]); + + if (!isSuccess) { + // todo + return <>; + } + + const channelInfo = channel.find((c) => c.id === reminder.channel); + + return ( +
+
+
#{channelInfo.name}
+ +
+ +
+
+
+
+
+
+

+ + Image for discord avatar + +

+
+
+
+ + +
+
+ +
+
+
+

+ + Image for embed author + +

+
+ +
+ + +
+
+ + + +

+ + +

+ +
+
+ +
+ + +
+ + + +
+
+
+ +
+

+ + Square thumbnail embedded image + +

+
+
+ +

+ + Large embedded image + +

+ +
+

+ + Footer profile-like image + +

+ + + +
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+ +
+
+ +
+
+
+
+ Intervals available on{" "} + Patreon or{" "} + + self-hosting + +
+
+ +
+
+
+ + + + + + + + + +
+ +
+
+
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ + + +
+
+ ); +}; diff --git a/src/components/GuildReminders/index.tsx b/src/components/GuildReminders/index.tsx index 4dda175..76b7f83 100644 --- a/src/components/GuildReminders/index.tsx +++ b/src/components/GuildReminders/index.tsx @@ -1,7 +1,66 @@ import { useParams } from "wouter"; +import { useQuery } from "react-query"; +import { fetchGuildReminders } from "../../api"; +import { QueryKeys } from "../../consts"; +import { EditReminder } from "../EditReminder"; export const GuildReminders = () => { - const params = useParams(); + const { guild } = useParams(); - return <>{params.guild}; + const { isSuccess, data } = useQuery({ + queryKey: [QueryKeys.GUILD_REMINDERS, guild], + queryFn: () => fetchGuildReminders(guild), + }); + + return ( +
+ Create Reminder +
+ <> +
+

+
+
+
+ Reminders +
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ +
+ {isSuccess && + data.map((reminder) => )} +
+
+ ); }; diff --git a/src/consts.ts b/src/consts.ts index 15f0cac..52d664a 100644 --- a/src/consts.ts +++ b/src/consts.ts @@ -1,4 +1,6 @@ export enum QueryKeys { USER_DATA = "userData", USER_GUILDS = "userGuilds", + GUILD_REMINDERS = "guildReminders", + GUILD_CHANNELS = "guildChannels", }