From 5dc7ceb8aaa1688508b67c06c9375a4fdf7aa2e1 Mon Sep 17 00:00:00 2001 From: jude Date: Fri, 3 Nov 2023 19:17:16 +0000 Subject: [PATCH] Add modal for image picker --- src/api.ts | 31 ++++++++++---- src/components/Modal/index.tsx | 2 +- src/components/Reminder/CreateReminder.tsx | 32 +++++--------- src/components/Reminder/EditReminder.tsx | 9 +--- src/components/Reminder/Embed/Author.tsx | 15 +++---- src/components/Reminder/Embed/index.tsx | 30 +++++-------- src/components/Reminder/ImagePicker.tsx | 49 ++++++++++++++++++++++ src/consts.ts | 1 - 8 files changed, 103 insertions(+), 66 deletions(-) create mode 100644 src/components/Reminder/ImagePicker.tsx diff --git a/src/api.ts b/src/api.ts index b104d5a..f83afc4 100644 --- a/src/api.ts +++ b/src/api.ts @@ -52,6 +52,11 @@ type ChannelInfo = { name: string; }; +type RoleInfo = { + id: string; + name: string; +}; + type Template = { id: number; name: string; @@ -72,15 +77,16 @@ type Template = { embed_fields: EmbedField[] | null; }; -export function fetchUserInfo(): Promise { - return axios.get("/dashboard/api/user").then((resp) => resp.data) as Promise; -} +export const fetchUserInfo = () => ({ + queryKey: ["USER_INFO"], + queryFn: () => axios.get("/dashboard/api/user").then((resp) => resp.data) as Promise, +}); -export function fetchUserGuilds(): Promise { - return axios.get("/dashboard/api/user/guilds").then((resp) => resp.data) as Promise< - GuildInfo[] - >; -} +export const fetchUserGuilds = () => ({ + queryKey: ["USER_GUILDS"], + queryFn: () => + axios.get("/dashboard/api/user/guilds").then((resp) => resp.data) as Promise, +}); export const fetchGuildReminders = (guild: string) => ({ queryKey: ["GUILD_REMINDERS", guild], @@ -106,6 +112,15 @@ export const fetchGuildChannels = (guild: string) => ({ staleTime: 300, }); +export const fetchGuildRoles = (guild: string) => ({ + queryKey: ["GUILD_ROLES", guild], + queryFn: () => + axios.get(`/dashboard/api/guild/${guild}/roles`).then((resp) => resp.data) as Promise< + RoleInfo[] + >, + staleTime: 300, +}); + export const guildTemplatesQuery = (guild: string) => ({ queryKey: ["GUILD_TEMPLATES", guild], queryFn: () => diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index 82e8a84..c31ea2d 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -4,7 +4,7 @@ type Props = { setModalOpen: (open: boolean) => never; title: string; onSubmitText?: string; - onSubmit?: () => never; + onSubmit?: () => void; children: string | JSX.Element | JSX.Element[] | (() => JSX.Element); }; diff --git a/src/components/Reminder/CreateReminder.tsx b/src/components/Reminder/CreateReminder.tsx index f55cbcf..7faf692 100644 --- a/src/components/Reminder/CreateReminder.tsx +++ b/src/components/Reminder/CreateReminder.tsx @@ -1,8 +1,7 @@ import { useParams } from "wouter"; import { useState } from "preact/hooks"; -import { useQueries } from "react-query"; -import { QueryKeys } from "../../consts"; -import { fetchGuildChannels, fetchUserInfo, Reminder } from "../../api"; +import { useQuery } from "react-query"; +import { fetchUserInfo, Reminder } from "../../api"; import { Name } from "./Name"; import { Username } from "./Username"; import { Content } from "./Content"; @@ -11,6 +10,7 @@ import { ChannelSelector } from "./ChannelSelector"; import { DateTime } from "luxon"; import { IntervalSelector } from "./IntervalSelector"; import { LoadTemplate } from "./LoadTemplate"; +import { ImagePicker } from "./ImagePicker"; function defaultReminder(): Reminder { return { @@ -47,21 +47,11 @@ export const CreateReminder = () => { const { guild } = useParams(); const [reminder, setReminder] = useState(defaultReminder); - const [ - { isSuccess: channelsFetched, data: guildChannels }, - { isSuccess: userFetched, data: userInfo }, - ] = useQueries([ - fetchGuildChannels(guild), - { - queryKey: [QueryKeys.USER_DATA], - queryFn: fetchUserInfo, - staleTime: Infinity, - }, - ]); + const { isSuccess: userFetched, data: userInfo } = useQuery(fetchUserInfo()); const [collapsed, setCollapsed] = useState(false); - if (!channelsFetched || !userFetched) { + if (!userFetched) { // todo return <>; } @@ -87,13 +77,11 @@ export const CreateReminder = () => {

- - Image for discord avatar - + {}} + >

diff --git a/src/components/Reminder/EditReminder.tsx b/src/components/Reminder/EditReminder.tsx index dc9e818..2ec4384 100644 --- a/src/components/Reminder/EditReminder.tsx +++ b/src/components/Reminder/EditReminder.tsx @@ -22,14 +22,7 @@ export const EditReminder = ({ reminder: initialReminder }: Props) => { const [ { isSuccess: channelsFetched, data: guildChannels }, { isSuccess: userFetched, data: userInfo }, - ] = useQueries([ - fetchGuildChannels(guild), - { - queryKey: [QueryKeys.USER_DATA], - queryFn: fetchUserInfo, - staleTime: Infinity, - }, - ]); + ] = useQueries([fetchGuildChannels(guild), fetchUserInfo()]); const [collapsed, setCollapsed] = useState(false); diff --git a/src/components/Reminder/Embed/Author.tsx b/src/components/Reminder/Embed/Author.tsx index 5cc3910..832ae72 100644 --- a/src/components/Reminder/Embed/Author.tsx +++ b/src/components/Reminder/Embed/Author.tsx @@ -1,15 +1,16 @@ +import { ImagePicker } from "../ImagePicker"; + export const Author = ({ name, icon }) => { return (

- - Image for embed author - + {}} + >

diff --git a/src/components/Reminder/Embed/index.tsx b/src/components/Reminder/Embed/index.tsx index f10b595..9fa74da 100644 --- a/src/components/Reminder/Embed/index.tsx +++ b/src/components/Reminder/Embed/index.tsx @@ -4,11 +4,7 @@ import { Description } from "./Description"; import { Footer } from "./Footer"; import { Color } from "./Color"; import { Reminder } from "../../../api"; - -type Props = { - reminder: Reminder; - setReminder: (reminder: Reminder) => {}; -}; +import { ImagePicker } from "../ImagePicker"; function colorToInt(hex: string) { return parseInt(hex.substring(1), 16); @@ -85,25 +81,21 @@ export const Embed = ({ reminder, setReminder }) => {

- - Square thumbnail embedded image - + {}} + >

- - Large embedded image - + {}} + >

diff --git a/src/components/Reminder/ImagePicker.tsx b/src/components/Reminder/ImagePicker.tsx new file mode 100644 index 0000000..0230754 --- /dev/null +++ b/src/components/Reminder/ImagePicker.tsx @@ -0,0 +1,49 @@ +import { Modal } from "../Modal"; +import { useState } from "preact/hooks"; + +export const ImagePicker = ({ alt, url, setImage, ...props }) => { + const [modalOpen, setModalOpen] = useState(false); + + return ( + <> + { + setModalOpen(true); + }} + role={"button"} + > + {alt} + + {modalOpen && ( + + )} + + ); +}; + +const ImagePickerModal = ({ setModalOpen, setImage }) => { + const [value, setValue] = useState(""); + + return ( + { + setImage(value); + }} + onSubmitText={"Save"} + > + { + setValue(ev.currentTarget.value); + }} + > + + ); +}; diff --git a/src/consts.ts b/src/consts.ts index 911bca1..6efadbc 100644 --- a/src/consts.ts +++ b/src/consts.ts @@ -1,5 +1,4 @@ export enum QueryKeys { - USER_DATA = "userData", USER_GUILDS = "userGuilds", GUILD_REMINDERS = "guildReminders", }