diff --git a/reminder-dashboard/package-lock.json b/reminder-dashboard/package-lock.json index 4bdf8ee..a405383 100644 --- a/reminder-dashboard/package-lock.json +++ b/reminder-dashboard/package-lock.json @@ -8,6 +8,7 @@ "dependencies": { "axios": "^1.5.1", "bulma": "^0.9.4", + "humanize-duration": "^3.31.0", "luxon": "^3.4.3", "preact": "^10.13.1", "react-colorful": "^5.6.1", @@ -3321,6 +3322,11 @@ "he": "bin/he" } }, + "node_modules/humanize-duration": { + "version": "3.31.0", + "resolved": "https://registry.npmjs.org/humanize-duration/-/humanize-duration-3.31.0.tgz", + "integrity": "sha512-fRrehgBG26NNZysRlTq1S+HPtDpp3u+Jzdc/d5A4cEzOD86YLAkDaJyJg8krSdCi7CJ+s7ht3fwRj8Dl+Btd0w==" + }, "node_modules/ignore": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz", diff --git a/reminder-dashboard/src/api.ts b/reminder-dashboard/src/api.ts index 1ac9e0d..c01c75a 100644 --- a/reminder-dashboard/src/api.ts +++ b/reminder-dashboard/src/api.ts @@ -37,7 +37,7 @@ export type Reminder = { embed_title: string; embed_fields: EmbedField[] | null; enabled: boolean; - expires: DateTime | null; + expires: string | null; interval_seconds: number | null; interval_days: number | null; interval_months: number | null; @@ -46,7 +46,7 @@ export type Reminder = { tts: boolean; uid: string; username: string; - utc_time: DateTime; + utc_time: string; }; export type ChannelInfo = { diff --git a/reminder-dashboard/src/components/Reminder/CreateReminder.tsx b/reminder-dashboard/src/components/Reminder/CreateReminder.tsx index dd33e7c..777009c 100644 --- a/reminder-dashboard/src/components/Reminder/CreateReminder.tsx +++ b/reminder-dashboard/src/components/Reminder/CreateReminder.tsx @@ -8,6 +8,7 @@ import { Settings } from "./Settings"; import { ReminderContext } from "./ReminderContext"; import { useQuery } from "react-query"; import { useParams } from "wouter"; +import "./styles.scss"; function defaultReminder(): Reminder { return { @@ -36,7 +37,7 @@ function defaultReminder(): Reminder { tts: false, uid: "", username: "", - utc_time: DateTime.now(), + utc_time: DateTime.now().toFormat("yyyy-LL-dd'T'HH:mm:ss"), }; } diff --git a/reminder-dashboard/src/components/Reminder/EditReminder.tsx b/reminder-dashboard/src/components/Reminder/EditReminder.tsx index b17db90..c242c78 100644 --- a/reminder-dashboard/src/components/Reminder/EditReminder.tsx +++ b/reminder-dashboard/src/components/Reminder/EditReminder.tsx @@ -5,6 +5,7 @@ import { Message } from "./Message"; import { Settings } from "./Settings"; import { ReminderContext } from "./ReminderContext"; import { TopBar } from "./TopBar"; +import "./styles.scss"; type Props = { reminder: Reminder; diff --git a/reminder-dashboard/src/components/Reminder/Settings.tsx b/reminder-dashboard/src/components/Reminder/Settings.tsx index 96085ef..df29897 100644 --- a/reminder-dashboard/src/components/Reminder/Settings.tsx +++ b/reminder-dashboard/src/components/Reminder/Settings.tsx @@ -7,13 +7,11 @@ import { useReminder } from "./ReminderContext"; import { Attachment } from "./Attachment"; import { TTS } from "./TTS"; import { TimeInput } from "./TimeInput"; -import { useTimezone } from "../App/TimezoneProvider"; export const Settings = () => { const { isSuccess: userFetched, data: userInfo } = useQuery(fetchUserInfo()); const [reminder, setReminder] = useReminder(); - const [timezone] = useTimezone(); if (!userFetched) { return <>; @@ -44,7 +42,7 @@ export const Settings = () => { Time* { + onInput={(time: string) => { setReminder((reminder) => ({ ...reminder, utc_time: time, @@ -99,7 +97,7 @@ export const Settings = () => { Expiration { + onInput={(time: string) => { setReminder((reminder) => ({ ...reminder, expires: time, diff --git a/reminder-dashboard/src/components/Reminder/TopBar.tsx b/reminder-dashboard/src/components/Reminder/TopBar.tsx index db1a618..5377d1f 100644 --- a/reminder-dashboard/src/components/Reminder/TopBar.tsx +++ b/reminder-dashboard/src/components/Reminder/TopBar.tsx @@ -3,6 +3,7 @@ import { Name } from "./Name"; import { fetchGuildChannels, Reminder } from "../../api"; import { useQuery } from "react-query"; import { useParams } from "wouter"; +import { DateTime } from "luxon"; export const TopBar = ({ toggleCollapsed }) => { const { guild } = useParams(); @@ -15,10 +16,43 @@ export const TopBar = ({ toggleCollapsed }) => { return channel === undefined ? "" : channel.name; }; + let days, hours, minutes, seconds; + + seconds = Math.floor( + DateTime.fromISO(reminder.utc_time, { zone: "UTC" }).diffNow("seconds").seconds, + ); + [days, seconds] = [Math.floor(seconds / 86400), seconds % 86400]; + [hours, seconds] = [Math.floor(seconds / 3600), seconds % 3600]; + [minutes, seconds] = [Math.floor(seconds / 60), seconds % 60]; + + let string; + if (days !== 0) { + if (hours !== 0) { + string = `${days} days, ${hours} hours`; + } else { + string = `${days} days`; + } + } else if (hours !== 0) { + if (minutes !== 0) { + string = `${hours} hours, ${minutes} minutes`; + } else { + string = `${hours} hours`; + } + } else if (minutes !== 0) { + if (seconds !== 0) { + string = `${minutes} minutes, ${seconds} seconds`; + } else { + string = `${minutes} minutes`; + } + } else { + string = `${seconds} seconds`; + } + return (
{isSuccess &&
#{channelName(reminder)}
} +
in {string}