50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
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";
|
|
import "./styles.scss";
|
|
|
|
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]} key={reminder.uid}>
|
|
<div
|
|
class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}
|
|
id={`reminder-${reminder.uid.slice(0, 12)}`}
|
|
>
|
|
<TopBar
|
|
toggleCollapsed={() => {
|
|
setCollapsed(!collapsed);
|
|
}}
|
|
/>
|
|
<div class="columns reminder-settings">
|
|
<Message />
|
|
<Settings />
|
|
</div>
|
|
<EditButtonRow />
|
|
</div>
|
|
</ReminderContext.Provider>
|
|
);
|
|
};
|