From 0f259824fcbeb39bca3547544ff491dd50b1d080 Mon Sep 17 00:00:00 2001
From: jude <jude@jellywx.com>
Date: Mon, 30 Oct 2023 20:31:07 +0000
Subject: [PATCH] Prop drilling

---
 src/components/EditReminder/Content.tsx       |  5 ++-
 .../EditReminder/Embed/Description.tsx        |  5 ++-
 src/components/EditReminder/Embed/Title.tsx   |  5 ++-
 src/components/EditReminder/Embed/index.tsx   | 42 +++++++++++++++++--
 src/components/EditReminder/Username.tsx      | 29 +++++++------
 src/components/EditReminder/index.tsx         | 38 ++++++++++++++---
 6 files changed, 100 insertions(+), 24 deletions(-)

diff --git a/src/components/EditReminder/Content.tsx b/src/components/EditReminder/Content.tsx
index 5faa160..a648209 100644
--- a/src/components/EditReminder/Content.tsx
+++ b/src/components/EditReminder/Content.tsx
@@ -1,4 +1,4 @@
-export const Content = ({ value }) => (
+export const Content = ({ value, onChange }) => (
     <>
         <label class="is-sr-only">Content</label>
         <textarea
@@ -8,6 +8,9 @@ export const Content = ({ value }) => (
             name="content"
             rows={1}
             value={value}
+            onChange={(ev) => {
+                onChange(ev.currentTarget.value);
+            }}
         ></textarea>
     </>
 );
diff --git a/src/components/EditReminder/Embed/Description.tsx b/src/components/EditReminder/Embed/Description.tsx
index f1d1ec3..30c2c5d 100644
--- a/src/components/EditReminder/Embed/Description.tsx
+++ b/src/components/EditReminder/Embed/Description.tsx
@@ -1,4 +1,4 @@
-export const Description = ({ description }) => (
+export const Description = ({ description, onChange }) => (
     <>
         <label class="is-sr-only" for="embedDescription">
             Embed Description
@@ -10,6 +10,9 @@ export const Description = ({ description }) => (
             name="embed_description"
             rows={1}
             value={description}
+            onChange={(ev) => {
+                onChange(ev.currentTarget.value);
+            }}
         ></textarea>
     </>
 );
diff --git a/src/components/EditReminder/Embed/Title.tsx b/src/components/EditReminder/Embed/Title.tsx
index 4de182b..20e3118 100644
--- a/src/components/EditReminder/Embed/Title.tsx
+++ b/src/components/EditReminder/Embed/Title.tsx
@@ -1,4 +1,4 @@
-export const Title = ({ title }) => (
+export const Title = ({ title, onChange }) => (
     <>
         <label class="is-sr-only" for="embedTitle">
             Embed Title
@@ -10,6 +10,9 @@ export const Title = ({ title }) => (
             rows={1}
             name="embed_title"
             value={title}
+            onChange={(ev) => {
+                onChange(ev.currentTarget.value);
+            }}
         ></textarea>
     </>
 );
diff --git a/src/components/EditReminder/Embed/index.tsx b/src/components/EditReminder/Embed/index.tsx
index a2f4fae..f10b595 100644
--- a/src/components/EditReminder/Embed/index.tsx
+++ b/src/components/EditReminder/Embed/index.tsx
@@ -3,17 +3,51 @@ import { Title } from "./Title";
 import { Description } from "./Description";
 import { Footer } from "./Footer";
 import { Color } from "./Color";
+import { Reminder } from "../../../api";
 
-export const Embed = ({ reminder }) => {
+type Props = {
+    reminder: Reminder;
+    setReminder: (reminder: Reminder) => {};
+};
+
+function colorToInt(hex: string) {
+    return parseInt(hex.substring(1), 16);
+}
+
+export const Embed = ({ reminder, setReminder }) => {
     return (
         <div class="discord-embed">
             <div class="embed-body">
-                <Color color={reminder.embed_color} onChange={() => {}}></Color>
+                <Color
+                    color={reminder.embed_color}
+                    onChange={(color: string) => {
+                        setReminder((reminder: Reminder) => ({
+                            ...reminder,
+                            embed_color: colorToInt(color),
+                        }));
+                    }}
+                ></Color>
                 <div class="a">
                     <Author name={reminder.embed_author} icon={reminder.embed_author_url}></Author>
-                    <Title title={reminder.embed_title}></Title>
+                    <Title
+                        title={reminder.embed_title}
+                        onChange={(title: string) =>
+                            setReminder((reminder: Reminder) => ({
+                                ...reminder,
+                                embed_title: title,
+                            }))
+                        }
+                    ></Title>
                     <br></br>
-                    <Description description={reminder.embed_description}></Description>
+                    <Description
+                        description={reminder.embed_description}
+                        onChange={(description: string) =>
+                            setReminder((reminder: Reminder) => ({
+                                ...reminder,
+                                embed_description: description,
+                            }))
+                        }
+                    ></Description>
                     <br></br>
 
                     <div class="embed-multifield-box">
diff --git a/src/components/EditReminder/Username.tsx b/src/components/EditReminder/Username.tsx
index bdfe3f4..cec93cf 100644
--- a/src/components/EditReminder/Username.tsx
+++ b/src/components/EditReminder/Username.tsx
@@ -1,12 +1,17 @@
-export const Username = ({ value }) => (
-    <div class="discord-message-header">
-        <label class="is-sr-only">Username Override</label>
-        <input
-            class="discord-username message-input"
-            placeholder="Username Override"
-            maxlength={32}
-            name="username"
-            value={value}
-        ></input>
-    </div>
-);
+export const Username = ({ value, onChange }) => {
+    return (
+        <div class="discord-message-header">
+            <label class="is-sr-only">Username Override</label>
+            <input
+                class="discord-username message-input"
+                placeholder="Username Override"
+                maxlength={32}
+                name="username"
+                value={value}
+                onChange={(ev) => {
+                    onChange(ev.currentTarget.value);
+                }}
+            ></input>
+        </div>
+    );
+};
diff --git a/src/components/EditReminder/index.tsx b/src/components/EditReminder/index.tsx
index 32ecef9..6f4dfc9 100644
--- a/src/components/EditReminder/index.tsx
+++ b/src/components/EditReminder/index.tsx
@@ -9,13 +9,15 @@ import { ChannelSelector } from "./ChannelSelector";
 import { useState } from "preact/hooks";
 import { IntervalSelector } from "./IntervalSelector";
 import { Embed } from "./Embed";
+import { DateTime } from "luxon";
 
 type Props = {
     reminder: Reminder;
 };
 
-export const EditReminder = ({ reminder }: Props) => {
+export const EditReminder = ({ reminder: initialReminder }: Props) => {
     const { guild } = useParams();
+    const [reminder, setReminder] = useState(initialReminder);
 
     const [
         { isSuccess: channelsFetched, data: guildChannels },
@@ -75,9 +77,25 @@ export const EditReminder = ({ reminder }: Props) => {
                         </figure>
                         <div class="media-content">
                             <div class="content">
-                                <Username value={reminder.username}></Username>
-                                <Content value={reminder.content}></Content>
-                                <Embed reminder={reminder}></Embed>
+                                <Username
+                                    value={reminder.username}
+                                    onChange={(username: string) => {
+                                        setReminder((reminder) => ({
+                                            ...reminder,
+                                            username,
+                                        }));
+                                    }}
+                                ></Username>
+                                <Content
+                                    value={reminder.content}
+                                    onChange={(content: string) => {
+                                        setReminder((reminder) => ({
+                                            ...reminder,
+                                            content,
+                                        }));
+                                    }}
+                                ></Content>
+                                <Embed reminder={reminder} setReminder={setReminder}></Embed>
                             </div>
                         </div>
                     </article>
@@ -101,7 +119,17 @@ export const EditReminder = ({ reminder }: Props) => {
                                     type="datetime-local"
                                     step="1"
                                     name="time"
-                                    value={reminder.utc_time.toFormat("yyyy-LL-dd'T'HH:mm:ss")}
+                                    value={reminder.utc_time
+                                        .toLocal()
+                                        .toFormat("yyyy-LL-dd'T'HH:mm:ss")}
+                                    onChange={(ev) => {
+                                        setReminder((reminder) => ({
+                                            ...reminder,
+                                            utc_time: DateTime.fromISO(
+                                                ev.currentTarget.value,
+                                            ).toUTC(),
+                                        }));
+                                    }}
                                 ></input>
                             </label>
                         </div>