diff --git a/src/components/EditReminder/Message.tsx b/src/components/EditReminder/Content.tsx similarity index 62% rename from src/components/EditReminder/Message.tsx rename to src/components/EditReminder/Content.tsx index e209f0c..5faa160 100644 --- a/src/components/EditReminder/Message.tsx +++ b/src/components/EditReminder/Content.tsx @@ -1,9 +1,9 @@ -export const Message = ({ value }) => ( +export const Content = ({ value }) => ( <> - + + + + ); +}; diff --git a/src/components/EditReminder/Embed/Description.tsx b/src/components/EditReminder/Embed/Description.tsx new file mode 100644 index 0000000..f1d1ec3 --- /dev/null +++ b/src/components/EditReminder/Embed/Description.tsx @@ -0,0 +1,15 @@ +export const Description = ({ description }) => ( + <> + + + +); diff --git a/src/components/EditReminder/Embed/Title.tsx b/src/components/EditReminder/Embed/Title.tsx new file mode 100644 index 0000000..4de182b --- /dev/null +++ b/src/components/EditReminder/Embed/Title.tsx @@ -0,0 +1,15 @@ +export const Title = ({ title }) => ( + <> + + + +); diff --git a/src/components/EditReminder/Embed/index.tsx b/src/components/EditReminder/Embed/index.tsx new file mode 100644 index 0000000..98a42a7 --- /dev/null +++ b/src/components/EditReminder/Embed/index.tsx @@ -0,0 +1,100 @@ +import { Author } from "./Author"; +import { Title } from "./Title"; +import { Description } from "./Description"; + +export const Embed = ({ reminder }) => { + return ( +
+
+ +
+ + +

+ +

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

+ + Square thumbnail embedded image + +

+
+
+ +

+ + Large embedded image + +

+ +
+

+ + Footer profile-like image + +

+ + + +
+
+ ); +}; diff --git a/src/components/EditReminder/IntervalSelector.tsx b/src/components/EditReminder/IntervalSelector.tsx new file mode 100644 index 0000000..24a5134 --- /dev/null +++ b/src/components/EditReminder/IntervalSelector.tsx @@ -0,0 +1,115 @@ +import { useState } from "preact/hooks"; + +function divmod(a: number, b: number) { + return [Math.floor(a / b), a % b]; +} + +function secondsToHMS(seconds: number) { + let hours: number, minutes: number; + + [minutes, seconds] = divmod(seconds, 60); + [hours, minutes] = divmod(minutes, 60); + + return [hours, minutes, seconds]; +} + +export const IntervalSelector = ({ months: monthsProp, days: daysProp, seconds: secondsProp }) => { + const [months, setMonths] = useState(monthsProp); + const [days, setDays] = useState(daysProp); + const [seconds, setSeconds] = useState(secondsProp); + + let [hours, minutes, secondsRem] = [0, 0, 0]; + if (seconds !== null) { + [hours, minutes, secondsRem] = secondsToHMS(seconds); + } + + return ( +
+
+
+ + + + + + + + + +
+ +
+
+ ); +}; diff --git a/src/components/EditReminder/index.tsx b/src/components/EditReminder/index.tsx index 79e65a0..32ecef9 100644 --- a/src/components/EditReminder/index.tsx +++ b/src/components/EditReminder/index.tsx @@ -1,11 +1,14 @@ import { fetchGuildChannels, fetchUserInfo, Reminder } from "../../api"; -import { useQueries, useQuery } from "react-query"; +import { useQueries } from "react-query"; import { QueryKeys } from "../../consts"; import { useParams } from "wouter"; import { Name } from "./Name"; import { Username } from "./Username"; -import { Message } from "./Message"; +import { Content } from "./Content"; import { ChannelSelector } from "./ChannelSelector"; +import { useState } from "preact/hooks"; +import { IntervalSelector } from "./IntervalSelector"; +import { Embed } from "./Embed"; type Props = { reminder: Reminder; @@ -14,7 +17,10 @@ type Props = { export const EditReminder = ({ reminder }: Props) => { const { guild } = useParams(); - const [{ isSuccess, data: channel }] = useQueries([ + const [ + { isSuccess: channelsFetched, data: guildChannels }, + { isSuccess: userFetched, data: userInfo }, + ] = useQueries([ { queryKey: [QueryKeys.GUILD_CHANNELS, guild], queryFn: () => fetchGuildChannels(guild), @@ -27,20 +33,27 @@ export const EditReminder = ({ reminder }: Props) => { }, ]); - if (!isSuccess) { + const [collapsed, setCollapsed] = useState(false); + + if (!channelsFetched || !userFetched) { // todo return <>; } - const channelInfo = channel.find((c) => c.id === reminder.channel); + const channelInfo = guildChannels.find((c) => c.id === reminder.channel); return ( -
+
#{channelInfo.name}
- @@ -63,145 +76,8 @@ export const EditReminder = ({ reminder }: Props) => {
- -
-
- -
-
-
-

- - Image for embed author - -

-
- -
- - -
-
- - - -

- - -

- -
-
- -
- - -
- - - -
-
-
- -
-

- - Square thumbnail embedded image - -

-
-
- -

- - Large embedded image - -

- -
-

- - Footer profile-like image - -

- - - -
-
+ +
@@ -225,7 +101,7 @@ export const EditReminder = ({ reminder }: Props) => { type="datetime-local" step="1" name="time" - value={reminder.utc_time.toISO()} + value={reminder.utc_time.toFormat("yyyy-LL-dd'T'HH:mm:ss")} >
@@ -233,7 +109,7 @@ export const EditReminder = ({ reminder }: Props) => {
-
+
Intervals available on{" "} Patreon or{" "} @@ -248,93 +124,11 @@ export const EditReminder = ({ reminder }: Props) => { -
-
-
- - - - - - - - - -
- -
-
+
@@ -346,6 +140,12 @@ export const EditReminder = ({ reminder }: Props) => { type="datetime-local" step="1" name="expiration" + value={ + reminder.expires !== null && + reminder.expires.toFormat( + "yyyy-LL-dd'T'HH:mm:ss", + ) + } >
diff --git a/src/components/Sidebar/GuildEntry.tsx b/src/components/Sidebar/GuildEntry.tsx index c5065ee..d65a7b7 100644 --- a/src/components/Sidebar/GuildEntry.tsx +++ b/src/components/Sidebar/GuildEntry.tsx @@ -12,7 +12,11 @@ export const GuildEntry = ({ guild }: Props) => { return (