Show time until on collapsed reminders

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",

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 = {

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"),
     };
 }
 

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;

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*
                         <TimeInput
                             defaultValue={reminder.utc_time}
-                            onInput={(time: DateTime) => {
+                            onInput={(time: string) => {
                                 setReminder((reminder) => ({
                                     ...reminder,
                                     utc_time: time,
@@ -99,7 +97,7 @@ export const Settings = () => {
                                     Expiration
                                     <TimeInput
                                         defaultValue={reminder.expires}
-                                        onInput={(time: DateTime) => {
+                                        onInput={(time: string) => {
                                             setReminder((reminder) => ({
                                                 ...reminder,
                                                 expires: time,

reminder-dashboard/src/components/Reminder/TopBar.tsx

@@ -3,6 +3,8 @@ import { Name } from "./Name";
 import { fetchGuildChannels, Reminder } from "../../api";
 import { useQuery } from "react-query";
 import { useParams } from "wouter";
+import { DateTime } from "luxon";
+import humanizeDuration from "humanize-duration";
 
 export const TopBar = ({ toggleCollapsed }) => {
     const { guild } = useParams();
@@ -15,10 +17,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 (
         <div class="columns is-mobile column reminder-topbar">
             {isSuccess && <div class="invert-collapses channel-bar">#{channelName(reminder)}</div>}
             <Name />
+            <div class="invert-collapses time-bar">in {string}</div>
             <div class="hide-button-bar">
                 <button class="button hide-box" onClick={toggleCollapsed}>
                     <span class="is-sr-only">Hide reminder</span>

reminder-dashboard/src/components/Reminder/styles.scss

@@ -0,0 +1,6 @@
+.time-bar {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    font-style: italic;
+}

reminder-dashboard/src/components/Sidebar/index.tsx

@@ -6,7 +6,7 @@ import { Wave } from "./Wave";
 import { GuildEntry } from "./GuildEntry";
 import { fetchUserGuilds, GuildInfo } from "../../api";
 import { TimezonePicker } from "../TimezonePicker";
-import "./style.scss";
+import "./styles.scss";
 
 type ContentProps = {
     guilds: GuildInfo[];