From 45f5b6261a644f6fb8fe26e657b63e32ed0725ee Mon Sep 17 00:00:00 2001
From: jude <jude@jellywx.com>
Date: Mon, 26 Feb 2024 10:26:07 +0000
Subject: [PATCH] Convert times to/from UTC

---
 .../src/components/Reminder/Settings.tsx      | 10 +++++---
 .../src/components/Reminder/TimeInput.tsx     |  2 +-
 .../src/components/Sidebar/MobileSidebar.tsx  | 10 +++++++-
 .../src/components/Sidebar/index.tsx          | 25 +------------------
 .../src/components/TimezonePicker/index.tsx   |  8 +++---
 .../src/components/Welcome/index.tsx          |  4 +++
 6 files changed, 25 insertions(+), 34 deletions(-)

diff --git a/reminder-dashboard/src/components/Reminder/Settings.tsx b/reminder-dashboard/src/components/Reminder/Settings.tsx
index b8580ba..9df0285 100644
--- a/reminder-dashboard/src/components/Reminder/Settings.tsx
+++ b/reminder-dashboard/src/components/Reminder/Settings.tsx
@@ -7,11 +7,13 @@ 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 <></>;
@@ -41,11 +43,11 @@ export const Settings = () => {
                     <label class="label collapses">
                         Time*
                         <TimeInput
-                            defaultValue={reminder.utc_time}
+                            defaultValue={reminder.utc_time.setZone(timezone)}
                             onInput={(time: DateTime) => {
                                 setReminder((reminder) => ({
                                     ...reminder,
-                                    utc_time: time,
+                                    utc_time: time.toUTC(),
                                 }));
                             }}
                         />
@@ -96,11 +98,11 @@ export const Settings = () => {
                                 <label class="label">
                                     Expiration
                                     <TimeInput
-                                        defaultValue={reminder.expires}
+                                        defaultValue={reminder.expires?.setZone(timezone)}
                                         onInput={(time: DateTime) => {
                                             setReminder((reminder) => ({
                                                 ...reminder,
-                                                expires: time,
+                                                expires: time?.toUTC(),
                                             }));
                                         }}
                                     />
diff --git a/reminder-dashboard/src/components/Reminder/TimeInput.tsx b/reminder-dashboard/src/components/Reminder/TimeInput.tsx
index 16d5d71..1fa1d21 100644
--- a/reminder-dashboard/src/components/Reminder/TimeInput.tsx
+++ b/reminder-dashboard/src/components/Reminder/TimeInput.tsx
@@ -35,7 +35,7 @@ export const TimeInput = ({ defaultValue, onInput }) => {
                     }
 
                     flash({
-                        message: `Couldn't parse your clipboard data as a valid date-time`,
+                        message: "Couldn't parse your clipboard data as a valid date-time",
                         type: "error",
                     });
                 }}
diff --git a/reminder-dashboard/src/components/Sidebar/MobileSidebar.tsx b/reminder-dashboard/src/components/Sidebar/MobileSidebar.tsx
index 3741a3b..cd68f4c 100644
--- a/reminder-dashboard/src/components/Sidebar/MobileSidebar.tsx
+++ b/reminder-dashboard/src/components/Sidebar/MobileSidebar.tsx
@@ -12,7 +12,15 @@ export const MobileSidebar = ({ children }) => {
             >
                 <div class="navbar-brand">
                     <a class="navbar-item" href="/">
-                        <figure class="image">
+                        <figure
+                            class="image"
+                            style={{
+                                maxWidth: "28px",
+                                maxHeight: "28px",
+                                overflow: "hidden",
+                                display: "flex",
+                            }}
+                        >
                             <img
                                 width="28px"
                                 height="28px"
diff --git a/reminder-dashboard/src/components/Sidebar/index.tsx b/reminder-dashboard/src/components/Sidebar/index.tsx
index 38b2b37..ee98799 100644
--- a/reminder-dashboard/src/components/Sidebar/index.tsx
+++ b/reminder-dashboard/src/components/Sidebar/index.tsx
@@ -23,30 +23,7 @@ const SidebarContent = ({ guilds }: ContentProps) => {
             <Wave />
             <aside class="menu">
                 <p class="menu-label">Servers</p>
-                <ul class="menu-list guildList">
-                    {guildEntries}
-                    <GuildEntry guild={{ id: "1", name: "1", patreon: false }} />
-                    <GuildEntry guild={{ id: "2", name: "1", patreon: false }} />
-                    <GuildEntry guild={{ id: "3", name: "1", patreon: false }} />
-                    <GuildEntry guild={{ id: "4", name: "1", patreon: false }} />
-                    <GuildEntry guild={{ id: "5", name: "1", patreon: false }} />
-                    <GuildEntry guild={{ id: "6", name: "1", patreon: false }} />
-                    <GuildEntry guild={{ id: "7", name: "1", patreon: false }} />
-                    <GuildEntry guild={{ id: "8", name: "1", patreon: false }} />
-                    <GuildEntry guild={{ id: "9", name: "1", patreon: false }} />
-                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
-                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
-                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
-                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
-                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
-                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
-                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
-                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
-                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
-                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
-                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
-                    <GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
-                </ul>
+                <ul class="menu-list guildList">{guildEntries}</ul>
                 <div class="aside-footer">
                     <p class="menu-label">Options</p>
                     <ul class="menu-list">
diff --git a/reminder-dashboard/src/components/TimezonePicker/index.tsx b/reminder-dashboard/src/components/TimezonePicker/index.tsx
index 25904de..7fb8e07 100644
--- a/reminder-dashboard/src/components/TimezonePicker/index.tsx
+++ b/reminder-dashboard/src/components/TimezonePicker/index.tsx
@@ -1,4 +1,4 @@
-import { DateTime, SystemZone } from "luxon";
+import { DateTime } from "luxon";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { fetchUserInfo, patchUserInfo } from "../../api";
 import { Modal } from "../Modal";
@@ -12,8 +12,8 @@ type DisplayProps = {
 const TimezoneDisplay = ({ timezone }: DisplayProps) => {
     const now = DateTime.now().setZone(timezone);
 
-    const hour = now.hour;
-    const minute = now.minute;
+    const hour = now.hour.toString().padStart(2, "0");
+    const minute = now.minute.toString().padStart(2, "0");
 
     return (
         <>
@@ -117,7 +117,7 @@ const TimezoneModal = ({ setModalOpen }) => {
                     </span>
                 </button>
                 <button
-                    class="button is-warning"
+                    class="button is-success is-outlined"
                     id="update-bot-timezone"
                     style={{
                         margin: "2px",
diff --git a/reminder-dashboard/src/components/Welcome/index.tsx b/reminder-dashboard/src/components/Welcome/index.tsx
index d9c5597..522ce89 100644
--- a/reminder-dashboard/src/components/Welcome/index.tsx
+++ b/reminder-dashboard/src/components/Welcome/index.tsx
@@ -10,6 +10,10 @@ export const Welcome = () => (
                 </span>{" "}
                 to get started
             </p>
+            <br></br>
+            <p>
+                <strong>Please report bugs!</strong> I can't fix issues if I am unaware of them.
+            </p>
         </div>
     </section>
 );