From e36d2610dabc98c1cd6b4b99be84c0cf6615fe03 Mon Sep 17 00:00:00 2001
From: jude <jude@jellywx.com>
Date: Mon, 30 Oct 2023 21:24:05 +0000
Subject: [PATCH] Add reminder creator

---
 src/components/GuildReminders/index.tsx       |   5 +-
 .../ChannelSelector.tsx                       |   0
 .../{EditReminder => Reminder}/Content.tsx    |   0
 src/components/Reminder/CreateReminder.tsx    | 231 ++++++++++++++++++
 .../index.tsx => Reminder/EditReminder.tsx}   |   4 +-
 .../Embed/Author.tsx                          |   0
 .../Embed/Color.tsx                           |   0
 .../Embed/Description.tsx                     |   0
 .../Embed/Footer.tsx                          |   0
 .../Embed/Title.tsx                           |   0
 .../Embed/index.tsx                           |   0
 .../IntervalSelector.tsx                      |   0
 .../{EditReminder => Reminder}/Name.tsx       |   0
 .../{EditReminder => Reminder}/Username.tsx   |   0
 14 files changed, 237 insertions(+), 3 deletions(-)
 rename src/components/{EditReminder => Reminder}/ChannelSelector.tsx (100%)
 rename src/components/{EditReminder => Reminder}/Content.tsx (100%)
 create mode 100644 src/components/Reminder/CreateReminder.tsx
 rename src/components/{EditReminder/index.tsx => Reminder/EditReminder.tsx} (98%)
 rename src/components/{EditReminder => Reminder}/Embed/Author.tsx (100%)
 rename src/components/{EditReminder => Reminder}/Embed/Color.tsx (100%)
 rename src/components/{EditReminder => Reminder}/Embed/Description.tsx (100%)
 rename src/components/{EditReminder => Reminder}/Embed/Footer.tsx (100%)
 rename src/components/{EditReminder => Reminder}/Embed/Title.tsx (100%)
 rename src/components/{EditReminder => Reminder}/Embed/index.tsx (100%)
 rename src/components/{EditReminder => Reminder}/IntervalSelector.tsx (100%)
 rename src/components/{EditReminder => Reminder}/Name.tsx (100%)
 rename src/components/{EditReminder => Reminder}/Username.tsx (100%)

diff --git a/src/components/GuildReminders/index.tsx b/src/components/GuildReminders/index.tsx
index 76b7f83..e273418 100644
--- a/src/components/GuildReminders/index.tsx
+++ b/src/components/GuildReminders/index.tsx
@@ -2,7 +2,8 @@ import { useParams } from "wouter";
 import { useQuery } from "react-query";
 import { fetchGuildReminders } from "../../api";
 import { QueryKeys } from "../../consts";
-import { EditReminder } from "../EditReminder";
+import { EditReminder } from "../Reminder/EditReminder";
+import { CreateReminder } from "../Reminder/CreateReminder";
 
 export const GuildReminders = () => {
     const { guild } = useParams();
@@ -16,7 +17,7 @@ export const GuildReminders = () => {
         <div style={{ margin: "0 12px 12px 12px" }}>
             <strong>Create Reminder</strong>
             <div id={"reminderCreator"}>
-                <></>
+                <CreateReminder></CreateReminder>
             </div>
             <br></br>
             <div class={"field"}>
diff --git a/src/components/EditReminder/ChannelSelector.tsx b/src/components/Reminder/ChannelSelector.tsx
similarity index 100%
rename from src/components/EditReminder/ChannelSelector.tsx
rename to src/components/Reminder/ChannelSelector.tsx
diff --git a/src/components/EditReminder/Content.tsx b/src/components/Reminder/Content.tsx
similarity index 100%
rename from src/components/EditReminder/Content.tsx
rename to src/components/Reminder/Content.tsx
diff --git a/src/components/Reminder/CreateReminder.tsx b/src/components/Reminder/CreateReminder.tsx
new file mode 100644
index 0000000..7b6d3ea
--- /dev/null
+++ b/src/components/Reminder/CreateReminder.tsx
@@ -0,0 +1,231 @@
+import { useParams } from "wouter";
+import { useState } from "preact/hooks";
+import { useQueries } from "react-query";
+import { QueryKeys } from "../../consts";
+import { fetchGuildChannels, fetchUserInfo } from "../../api";
+import { Name } from "./Name";
+import { Username } from "./Username";
+import React from "react";
+import { Content } from "./Content";
+import { Embed } from "./Embed";
+import { ChannelSelector } from "./ChannelSelector";
+import { DateTime } from "luxon";
+import { IntervalSelector } from "./IntervalSelector";
+
+export const CreateReminder = () => {
+    const { guild } = useParams();
+    const [reminder, setReminder] = useState({});
+
+    const [
+        { isSuccess: channelsFetched, data: guildChannels },
+        { isSuccess: userFetched, data: userInfo },
+    ] = useQueries([
+        {
+            queryKey: [QueryKeys.GUILD_CHANNELS, guild],
+            queryFn: () => fetchGuildChannels(guild),
+            staleTime: 300,
+        },
+        {
+            queryKey: [QueryKeys.USER_DATA],
+            queryFn: fetchUserInfo,
+            staleTime: Infinity,
+        },
+    ]);
+
+    const [collapsed, setCollapsed] = useState(false);
+
+    if (!channelsFetched || !userFetched) {
+        // todo
+        return <></>;
+    }
+
+    return (
+        <div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>
+            <div class="columns is-mobile column reminder-topbar">
+                <Name value={""}></Name>
+                <div class="hide-button-bar">
+                    <button
+                        class="button hide-box"
+                        onClick={() => {
+                            setCollapsed(!collapsed);
+                        }}
+                    >
+                        <span class="is-sr-only">Hide reminder</span>
+                        <i class="fas fa-chevron-down"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="columns reminder-settings">
+                <div class="column discord-frame">
+                    <article class="media">
+                        <figure class="media-left">
+                            <p class="image is-32x32 customizable">
+                                <a>
+                                    <img
+                                        class="is-rounded avatar"
+                                        src="/static/img/bg.webp"
+                                        alt="Image for discord avatar"
+                                    ></img>
+                                </a>
+                            </p>
+                        </figure>
+                        <div class="media-content">
+                            <div class="content">
+                                <Username
+                                    value={""}
+                                    onChange={(username: string) => {
+                                        setReminder((reminder) => ({
+                                            ...reminder,
+                                            username,
+                                        }));
+                                    }}
+                                ></Username>
+                                <Content
+                                    value={""}
+                                    onChange={(content: string) => {
+                                        setReminder((reminder) => ({
+                                            ...reminder,
+                                            content,
+                                        }));
+                                    }}
+                                ></Content>
+                                <Embed reminder={{}} setReminder={setReminder}></Embed>
+                            </div>
+                        </div>
+                    </article>
+                </div>
+                <div class="column settings">
+                    <div class="field channel-field">
+                        <div class="collapses">
+                            <label class="label" for="channelOption">
+                                Channel*
+                            </label>
+                        </div>
+                        <ChannelSelector channel={null}></ChannelSelector>
+                    </div>
+
+                    <div class="field">
+                        <div class="control">
+                            <label class="label collapses">
+                                Time*
+                                <input
+                                    class="input"
+                                    type="datetime-local"
+                                    step="1"
+                                    name="time"
+                                    value={DateTime.now().toFormat("yyyy-LL-dd'T'HH:mm:ss")}
+                                    onChange={(ev) => {
+                                        setReminder((reminder) => ({
+                                            ...reminder,
+                                            utc_time: DateTime.fromISO(
+                                                ev.currentTarget.value,
+                                            ).toUTC(),
+                                        }));
+                                    }}
+                                ></input>
+                            </label>
+                        </div>
+                    </div>
+
+                    <div class="collapses split-controls">
+                        <div>
+                            <div
+                                class={userInfo.patreon ? "patreon-only" : "patreon-only is-locked"}
+                            >
+                                <div class="patreon-invert foreground">
+                                    Intervals available on{" "}
+                                    <a href="https://patreon.com/jellywx">Patreon</a> or{" "}
+                                    <a href="https://gitea.jellypro.xyz/jude/reminder-bot">
+                                        self-hosting
+                                    </a>
+                                </div>
+                                <div class="field">
+                                    <label class="label">
+                                        Interval{" "}
+                                        <a class="foreground" href="/help/intervals">
+                                            <i class="fas fa-question-circle"></i>
+                                        </a>
+                                    </label>
+                                    <IntervalSelector
+                                        months={0}
+                                        days={0}
+                                        seconds={0}
+                                    ></IntervalSelector>
+                                </div>
+
+                                <div class="field">
+                                    <div class="control">
+                                        <label class="label">
+                                            Expiration
+                                            <input
+                                                class="input"
+                                                type="datetime-local"
+                                                step="1"
+                                                name="expiration"
+                                                value={DateTime.now().toFormat(
+                                                    "yyyy-LL-dd'T'HH:mm:ss",
+                                                )}
+                                            ></input>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <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>
+                                </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>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="button-row">
+                <div class="button-row-reminder">
+                    <button class="button is-success">
+                        <span>Create Reminder</span>{" "}
+                        <span class="icon">
+                            <i class="fas fa-sparkles"></i>
+                        </span>
+                    </button>
+                </div>
+                <div class="button-row-template">
+                    <div>
+                        <button class="button is-success is-outlined">
+                            <span>Create Template</span>{" "}
+                            <span class="icon">
+                                <i class="fas fa-file-spreadsheet"></i>
+                            </span>
+                        </button>
+                    </div>
+                    <div>
+                        <button class="button is-outlined show-modal is-pulled-right">
+                            Load Template
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/src/components/EditReminder/index.tsx b/src/components/Reminder/EditReminder.tsx
similarity index 98%
rename from src/components/EditReminder/index.tsx
rename to src/components/Reminder/EditReminder.tsx
index 6f4dfc9..54768d2 100644
--- a/src/components/EditReminder/index.tsx
+++ b/src/components/Reminder/EditReminder.tsx
@@ -137,7 +137,9 @@ export const EditReminder = ({ reminder: initialReminder }: Props) => {
 
                     <div class="collapses split-controls">
                         <div>
-                            <div class={!userInfo.patreon && "is-locked"}>
+                            <div
+                                class={userInfo.patreon ? "patreon-only" : "patreon-only is-locked"}
+                            >
                                 <div class="patreon-invert foreground">
                                     Intervals available on{" "}
                                     <a href="https://patreon.com/jellywx">Patreon</a> or{" "}
diff --git a/src/components/EditReminder/Embed/Author.tsx b/src/components/Reminder/Embed/Author.tsx
similarity index 100%
rename from src/components/EditReminder/Embed/Author.tsx
rename to src/components/Reminder/Embed/Author.tsx
diff --git a/src/components/EditReminder/Embed/Color.tsx b/src/components/Reminder/Embed/Color.tsx
similarity index 100%
rename from src/components/EditReminder/Embed/Color.tsx
rename to src/components/Reminder/Embed/Color.tsx
diff --git a/src/components/EditReminder/Embed/Description.tsx b/src/components/Reminder/Embed/Description.tsx
similarity index 100%
rename from src/components/EditReminder/Embed/Description.tsx
rename to src/components/Reminder/Embed/Description.tsx
diff --git a/src/components/EditReminder/Embed/Footer.tsx b/src/components/Reminder/Embed/Footer.tsx
similarity index 100%
rename from src/components/EditReminder/Embed/Footer.tsx
rename to src/components/Reminder/Embed/Footer.tsx
diff --git a/src/components/EditReminder/Embed/Title.tsx b/src/components/Reminder/Embed/Title.tsx
similarity index 100%
rename from src/components/EditReminder/Embed/Title.tsx
rename to src/components/Reminder/Embed/Title.tsx
diff --git a/src/components/EditReminder/Embed/index.tsx b/src/components/Reminder/Embed/index.tsx
similarity index 100%
rename from src/components/EditReminder/Embed/index.tsx
rename to src/components/Reminder/Embed/index.tsx
diff --git a/src/components/EditReminder/IntervalSelector.tsx b/src/components/Reminder/IntervalSelector.tsx
similarity index 100%
rename from src/components/EditReminder/IntervalSelector.tsx
rename to src/components/Reminder/IntervalSelector.tsx
diff --git a/src/components/EditReminder/Name.tsx b/src/components/Reminder/Name.tsx
similarity index 100%
rename from src/components/EditReminder/Name.tsx
rename to src/components/Reminder/Name.tsx
diff --git a/src/components/EditReminder/Username.tsx b/src/components/Reminder/Username.tsx
similarity index 100%
rename from src/components/EditReminder/Username.tsx
rename to src/components/Reminder/Username.tsx