1 files changed, 70 insertions, 0 deletions
diff --git a/bs5/universal/native/shared/NoteEditor.re b/bs5/universal/native/shared/NoteEditor.re
new file mode 100644
index 0000000..265a5ae
--- /dev/null
+++ b/bs5/universal/native/shared/NoteEditor.re
@@ -0,0 +1,70 @@
+[@warning "-26-27-32"];
+
+open Melange_json.Primitives;
+
+[@react.client.component]
+let make =
+    (~noteId: option(int), ~initialTitle: string, ~initialBody: string) => {
+  let router: ClientRouter.t = ClientRouter.useRouter();
+  let (title, setTitle) = RR.useStateValue(initialTitle);
+  let (body, setBody) = RR.useStateValue(initialBody);
+  let (isNavigating, startNavigating) = React.useTransition();
+
+  let%browser_only onChangeTitle = e => {
+    let newValue = React.Event.Form.target(e)##value;
+    setTitle(newValue);
+  };
+
+  let%browser_only onChangeBody = e => {
+    let newValue = React.Event.Form.target(e)##value;
+    setBody(newValue);
+  };
+
+  <div className="flex flex-col gap-4">
+    <form
+      className="flex flex-col gap-2"
+      autoComplete="off"
+      onSubmit={e => React.Event.Form.preventDefault(e)}>
+      <InputText value=title onChange=onChangeTitle />
+      <Textarea rows=10 value=body onChange=onChangeBody />
+    </form>
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-row gap-2" role="menubar">
+        <button
+          className=Theme.button
+          disabled=isNavigating
+          onClick=[%browser_only
+            _ => {
+              let action =
+                switch (noteId) {
+                | Some(id) =>
+                  ServerFunctions.Notes.edit.call(~id, ~title, ~content=body)
+                | None =>
+                  ServerFunctions.Notes.create.call(~title, ~content=body)
+                };
+
+              action
+              |> Js.Promise.then_((result: Note.t) => {
+                   let id = result.id;
+                   router.navigate({
+                     selectedId: Some(id),
+                     isEditing: false,
+                     searchText: None,
+                   });
+                   Js.Promise.resolve();
+                 })
+              |> ignore;
+            }
+          ]
+          role="menuitem">
+          {React.string("Done")}
+        </button>
+        {switch (noteId) {
+         | Some(id) => <DeleteNoteButton noteId=id />
+         | None => React.null
+         }}
+      </div>
+      <NotePreview key="note-preview" body />
+    </div>
+  </div>;
+};