Add dashboard to build

reminder-dashboard/src/components/Reminder/EditReminder.tsx

@@ -0,0 +1,45 @@
+import { Reminder } from "../../api";
+import { useEffect, useState } from "preact/hooks";
+import { EditButtonRow } from "./ButtonRow/EditButtonRow";
+import { Message } from "./Message";
+import { Settings } from "./Settings";
+import { ReminderContext } from "./ReminderContext";
+import { TopBar } from "./TopBar";
+
+type Props = {
+    reminder: Reminder;
+    globalCollapse: boolean;
+};
+
+export const EditReminder = ({ reminder: initialReminder, globalCollapse }: Props) => {
+    const [propReminder, setPropReminder] = useState(initialReminder);
+    const [reminder, setReminder] = useState(initialReminder);
+    const [collapsed, setCollapsed] = useState(false);
+
+    useEffect(() => {
+        setCollapsed(globalCollapse);
+    }, [globalCollapse]);
+
+    // Reminder updated from web response
+    if (propReminder !== initialReminder) {
+        setReminder(initialReminder);
+        setPropReminder(initialReminder);
+    }
+
+    return (
+        <ReminderContext.Provider value={[reminder, setReminder]}>
+            <div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>
+                <TopBar
+                    toggleCollapsed={() => {
+                        setCollapsed(!collapsed);
+                    }}
+                />
+                <div class="columns reminder-settings">
+                    <Message />
+                    <Settings />
+                </div>
+                <EditButtonRow />
+            </div>
+        </ReminderContext.Provider>
+    );
+};