Add dashboard to build

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

@@ -0,0 +1,144 @@
+import { Modal } from "../Modal";
+import { useRef, useState } from "preact/hooks";
+import { useParams } from "wouter";
+import axios from "axios";
+import { useFlash } from "../App/FlashContext";
+
+export const Import = () => {
+    const [modalOpen, setModalOpen] = useState(false);
+
+    return (
+        <>
+            <a
+                class="show-modal"
+                data-modal="chooseTimezoneModal"
+                onClick={() => {
+                    setModalOpen(true);
+                }}
+            >
+                <span class="icon">
+                    <i class="fas fa-exchange"></i>
+                </span>{" "}
+                Import/Export
+            </a>
+            {modalOpen && <ImportModal setModalOpen={setModalOpen} />}
+        </>
+    );
+};
+
+const ImportModal = ({ setModalOpen }) => {
+    const { guild } = useParams();
+
+    const aRef = useRef<HTMLAnchorElement>();
+    const inputRef = useRef<HTMLInputElement>();
+    const flash = useFlash();
+
+    const [isImporting, setIsImporting] = useState(false);
+
+    return (
+        <Modal
+            setModalOpen={setModalOpen}
+            title={
+                <>
+                    Import/Export Manager{" "}
+                    <a href="/help/iemanager">
+                        <span>
+                            <i class="fa fa-question-circle"></i>
+                        </span>
+                    </a>
+                </>
+            }
+        >
+            <>
+                <div class="control">
+                    <div class="field">
+                        <label>
+                            <input
+                                type="radio"
+                                class="default-width"
+                                name="exportSelect"
+                                value="reminders"
+                                checked
+                            />
+                            Reminders
+                        </label>
+                    </div>
+                </div>
+                <br />
+                <div class="has-text-centered">
+                    <div style="color: red">
+                        Please first read the <a href="/help/iemanager">support page</a>
+                    </div>
+                    <button
+                        class="button is-success is-outlined"
+                        style={{ margin: "2px" }}
+                        id="import-data"
+                        disabled={isImporting}
+                        onClick={() => {
+                            inputRef.current.click();
+                        }}
+                    >
+                        Import Data
+                    </button>
+                    <button
+                        class="button is-success"
+                        style={{ margin: "2px" }}
+                        id="export-data"
+                        onClick={() =>
+                            axios
+                                .get(`/dashboard/api/guild/${guild}/export/reminders`)
+                                .then(({ data, status }) => {
+                                    if (status === 200) {
+                                        aRef.current.href = `data:text/plain;charset=utf-8,${encodeURIComponent(
+                                            data.body,
+                                        )}`;
+                                        aRef.current.click();
+                                    } else {
+                                        flash({
+                                            message: `Unexpected status ${status}`,
+                                            type: "error",
+                                        });
+                                    }
+                                })
+                        }
+                    >
+                        Export Data
+                    </button>
+                </div>
+                <a ref={aRef} id="downloader" download="export.csv" class="is-hidden" />
+                <input
+                    ref={inputRef}
+                    id="uploader"
+                    type="file"
+                    hidden
+                    onChange={() => {
+                        new Promise((resolve) => {
+                            let fileReader = new FileReader();
+                            fileReader.onload = (e) => resolve(fileReader.result);
+                            fileReader.readAsDataURL(inputRef.current.files[0]);
+                        }).then((dataUrl: string) => {
+                            setIsImporting(true);
+
+                            axios
+                                .put(`/dashboard/api/guild/${guild}/export/reminders`, {
+                                    body: JSON.stringify({ body: dataUrl.split(",")[1] }),
+                                })
+                                .then(({ data }) => {
+                                    setIsImporting(false);
+
+                                    if (data.error) {
+                                        flash({ message: data.error, type: "error" });
+                                    } else {
+                                        flash({ message: data.message, type: "success" });
+                                    }
+                                })
+                                .then(() => {
+                                    delete inputRef.current.files[0];
+                                });
+                        });
+                    }}
+                />
+            </>
+        </Modal>
+    );
+};