From 5ee1fa60dbd2edf6d49dda9bfe24a7d7b9b21713 Mon Sep 17 00:00:00 2001
From: jude <judesouthworth@pm.me>
Date: Fri, 10 Nov 2023 16:01:35 +0000
Subject: [PATCH] Create components for TTS and attachment settings

---
 src/components/Reminder/Attachment.tsx | 19 ++++++++++++
 src/components/Reminder/Settings.tsx   | 40 ++++++++++++++------------
 src/components/Reminder/TTS.tsx        | 24 ++++++++++++++++
 3 files changed, 65 insertions(+), 18 deletions(-)
 create mode 100644 src/components/Reminder/Attachment.tsx
 create mode 100644 src/components/Reminder/TTS.tsx

diff --git a/src/components/Reminder/Attachment.tsx b/src/components/Reminder/Attachment.tsx
new file mode 100644
index 0000000..6c2914b
--- /dev/null
+++ b/src/components/Reminder/Attachment.tsx
@@ -0,0 +1,19 @@
+import { useReminder } from "./ReminderContext";
+
+export const Attachment = () => {
+    const [{ attachment, attachment_name }, setReminder] = useReminder();
+
+    return (
+        <div class="file is-small is-boxed">
+            <label class="file-label">
+                <input class="file-input" type="file" name="attachment"></input>
+                <span class="file-cta">
+                    <span class="file-label">{attachment_name || "Add Attachment"}</span>
+                    <span class="file-icon">
+                        <i class="fas fa-upload"></i>
+                    </span>
+                </span>
+            </label>
+        </div>
+    );
+};
diff --git a/src/components/Reminder/Settings.tsx b/src/components/Reminder/Settings.tsx
index a289695..0321e4b 100644
--- a/src/components/Reminder/Settings.tsx
+++ b/src/components/Reminder/Settings.tsx
@@ -4,11 +4,15 @@ import { IntervalSelector } from "./IntervalSelector";
 import { useQuery } from "react-query";
 import { fetchUserInfo } from "../../api";
 import { useReminder } from "./ReminderContext";
+import { Attachment } from "./Attachment";
+import { TTS } from "./TTS";
+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 <></>;
@@ -42,7 +46,9 @@ export const Settings = () => {
                             type="datetime-local"
                             step="1"
                             name="time"
-                            value={reminder.utc_time.toLocal().toFormat("yyyy-LL-dd'T'HH:mm:ss")}
+                            value={reminder.utc_time
+                                .setZone(timezone)
+                                .toFormat("yyyy-LL-dd'T'HH:mm:ss")}
                             onInput={(ev) => {
                                 setReminder((reminder) => ({
                                     ...reminder,
@@ -103,8 +109,20 @@ export const Settings = () => {
                                         name="expiration"
                                         value={
                                             reminder.expires !== null &&
-                                            reminder.expires.toFormat("yyyy-LL-dd'T'HH:mm:ss")
+                                            reminder.expires
+                                                .setZone(timezone)
+                                                .toFormat("yyyy-LL-dd'T'HH:mm:ss")
                                         }
+                                        onInput={(ev) => {
+                                            setReminder((reminder) => ({
+                                                ...reminder,
+                                                expires: ev.currentTarget.value
+                                                    ? DateTime.fromISO(
+                                                          ev.currentTarget.value,
+                                                      ).toUTC()
+                                                    : null,
+                                            }));
+                                        }}
                                     ></input>
                                 </label>
                             </div>
@@ -113,24 +131,10 @@ export const Settings = () => {
 
                     <div class="columns is-mobile tts-row">
                         <div class="column has-text-centered">
-                            <div class="is-boxed">
-                                <label class="label">
-                                    Enable TTS <input type="checkbox" name="tts"></input>
-                                </label>
-                            </div>
+                            <TTS />
                         </div>
                         <div class="column has-text-centered">
-                            <div class="file is-small is-boxed">
-                                <label class="file-label">
-                                    <input class="file-input" type="file" name="attachment"></input>
-                                    <span class="file-cta">
-                                        <span class="file-label">Add Attachment</span>
-                                        <span class="file-icon">
-                                            <i class="fas fa-upload"></i>
-                                        </span>
-                                    </span>
-                                </label>
-                            </div>
+                            <Attachment />
                         </div>
                     </div>
                 </div>
diff --git a/src/components/Reminder/TTS.tsx b/src/components/Reminder/TTS.tsx
new file mode 100644
index 0000000..b803eb3
--- /dev/null
+++ b/src/components/Reminder/TTS.tsx
@@ -0,0 +1,24 @@
+import { useReminder } from "./ReminderContext";
+
+export const TTS = () => {
+    const [{ tts }, setReminder] = useReminder();
+
+    return (
+        <div class="is-boxed">
+            <label class="label">
+                Enable TTS{" "}
+                <input
+                    type="checkbox"
+                    name="tts"
+                    checked={tts}
+                    onInput={(ev) => {
+                        setReminder((reminder) => ({
+                            ...reminder,
+                            tts: ev.currentTarget.checked,
+                        }));
+                    }}
+                ></input>
+            </label>
+        </div>
+    );
+};