Add dashboard to build

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

@@ -0,0 +1,134 @@
+import { DateTime, SystemZone } from "luxon";
+import { useMutation, useQuery, useQueryClient } from "react-query";
+import { fetchUserInfo, patchUserInfo } from "../../api";
+import { Modal } from "../Modal";
+import { useState } from "preact/hooks";
+import { useTimezone } from "../App/TimezoneProvider";
+
+type DisplayProps = {
+    timezone: string;
+};
+
+const TimezoneDisplay = ({ timezone }: DisplayProps) => {
+    const now = DateTime.now().setZone(timezone);
+
+    const hour = now.hour;
+    const minute = now.minute;
+
+    return (
+        <>
+            <strong>
+                <span class="set-timezone">{timezone}</span>
+            </strong>{" "}
+            (
+            <span class="set-time">
+                {hour}:{minute}
+            </span>
+            )
+        </>
+    );
+};
+
+export const TimezonePicker = () => {
+    const [modalOpen, setModalOpen] = useState(false);
+
+    return (
+        <>
+            <a
+                class="show-modal"
+                data-modal="chooseTimezoneModal"
+                onClick={() => {
+                    setModalOpen(true);
+                }}
+            >
+                <span class="icon">
+                    <i class="fas fa-map-marked"></i>
+                </span>{" "}
+                Timezone
+            </a>
+            {modalOpen && <TimezoneModal setModalOpen={setModalOpen} />}
+        </>
+    );
+};
+
+const TimezoneModal = ({ setModalOpen }) => {
+    const browserTimezone = DateTime.now().zoneName;
+    const [selectedZone, setSelectedZone] = useTimezone();
+
+    const queryClient = useQueryClient();
+    const { isLoading, isError, data } = useQuery(fetchUserInfo());
+    const userInfoMutation = useMutation({
+        ...patchUserInfo(),
+        onSuccess: () => {
+            queryClient.invalidateQueries(["USER_INFO"]);
+        },
+    });
+
+    return (
+        <Modal title={"Timezone"} setModalOpen={setModalOpen}>
+            <p>
+                Your configured timezone is:{" "}
+                <TimezoneDisplay timezone={selectedZone}></TimezoneDisplay>
+                <br />
+                Your browser timezone is:{" "}
+                <TimezoneDisplay timezone={browserTimezone}></TimezoneDisplay>
+                <br />
+                {!isError && (
+                    <>
+                        Your bot timezone is:{" "}
+                        {isLoading ? (
+                            <i className="fas fa-cog fa-spin"></i>
+                        ) : (
+                            <TimezoneDisplay timezone={data.timezone || "UTC"}></TimezoneDisplay>
+                        )}
+                    </>
+                )}
+            </p>
+            <br></br>
+            <div class="has-text-centered">
+                <button
+                    class="button is-success"
+                    style={{
+                        margin: "2px",
+                    }}
+                    id="set-browser-timezone"
+                    onClick={() => {
+                        setSelectedZone(browserTimezone);
+                    }}
+                >
+                    <span>Use Browser Timezone</span>{" "}
+                    <span class="icon">
+                        <i class="fab fa-firefox-browser"></i>
+                    </span>
+                </button>
+                <button
+                    class="button is-success"
+                    id="set-bot-timezone"
+                    style={{
+                        margin: "2px",
+                    }}
+                    onClick={() => {
+                        setSelectedZone(data.timezone);
+                    }}
+                >
+                    <span>Use Bot Timezone</span>{" "}
+                    <span class="icon">
+                        <i class="fab fa-discord"></i>
+                    </span>
+                </button>
+                <button
+                    class="button is-warning"
+                    id="update-bot-timezone"
+                    style={{
+                        margin: "2px",
+                    }}
+                    onClick={() => {
+                        userInfoMutation.mutate(browserTimezone);
+                    }}
+                >
+                    Set Bot Timezone
+                </button>
+            </div>
+        </Modal>
+    );
+};