Port save logic to NewNote modal

components/icons.jsx

@@ -124,4 +124,11 @@ export const Send = ({ className = "" }) => (
     <path d="M9.48 14.42c-.787 0-1.9-.554-2.78-3.2l-.48-1.44-1.44-.48c-2.64-.88-3.193-1.994-3.193-2.78 0-.78.553-1.9 3.193-2.787l5.66-1.887c1.413-.473 2.593-.333 3.32.387.727.72.867 1.907.393 3.32l-1.886 5.66c-.887 2.653-2 3.207-2.787 3.207zM5.093 4.686C3.24 5.306 2.58 6.04 2.58 6.52s.66 1.213 2.513 1.826l1.68.56a.49.49 0 0 1 .314.314l.56 1.68C8.26 12.753 9 13.413 9.48 13.413s1.213-.66 1.833-2.513L13.2 5.24c.34-1.027.28-1.867-.153-2.3-.434-.434-1.274-.487-2.294-.147l-5.66 1.893z" fill="#fff" />
     <path d="M6.74 9.6a.494.494 0 0 1-.353-.146.503.503 0 0 1 0-.707l2.386-2.393a.503.503 0 0 1 .707 0 .503.503 0 0 1 0 .707L7.093 9.454a.484.484 0 0 1-.353.147z" fill="#fff" />
   </svg>
-)
+)
+
+export const TickCircle = ({ className = "" }) => (
+  <svg className={`${className}`} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor" d="M12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75ZM12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75Z" />
+    <path fill="currentColor" d="M10.5804 15.58C10.3804 15.58 10.1904 15.5 10.0504 15.36L7.22043 12.53C6.93043 12.24 6.93043 11.76 7.22043 11.47C7.51043 11.18 7.99043 11.18 8.28043 11.47L10.5804 13.77L15.7204 8.62998C16.0104 8.33998 16.4904 8.33998 16.7804 8.62998C17.0704 8.91998 17.0704 9.39998 16.7804 9.68998L11.1104 15.36C10.9704 15.5 10.7804 15.58 10.5804 15.58Z" />
+  </svg>
+)

components/inputs.jsx

@@ -8,7 +8,7 @@ export function Input({ className = '', inputClassName = '', ...props }) {
   return (
     <div className={`flex flex-col ${className}`}>
       <input className={`ipt ${validationClassName} ${inputClassName}`} {...props} />
-      {meta.error && (<span className="text-2xs uppercase text-ember pl-4">{meta.error.toString()}</span>)}
+      {meta.error && (<span className="ipt-error-message">{meta.error.toString()}</span>)}
     </div>
   )
 }

components/modals/NewNote.jsx

@@ -1,16 +1,91 @@
 import { useState, Fragment } from 'react'
 import { Formik } from 'formik'
 import { Transition, Dialog } from '@headlessui/react';
+import {
+  useStoreEditorState,
+  usePlateActions,
+} from "@udecode/plate";
+import { useWebId } from "swrlit";
+import { isThingLocal } from "@inrupt/solid-client";
 
 import { PrivacyToggle } from '../toggles'
-import { Close as CloseIcon } from '../icons'
+import { Close as CloseIcon, TickCircle } from '../icons'
 import { Input } from '../inputs'
-
+import { createOrUpdateSlateJSON, saveNote } from "../../model/note";
+import { createOrUpdateConceptIndex } from "../../model/concept";
+import { useCurrentWorkspace } from "../../hooks/app";
+import { useConcept, useConceptNames } from "../../hooks/concepts";
 import NoteEditor from "../NoteEditor"
+import { EmptySlateJSON } from "../../utils/slate";
+
+const TabId = {
+  Concept: "Concept",
+  Bookmark: "Bookmark",
+};
 
-export const NewNote = ({ setOpen, conceptNames, isPublic = false }) => {
+export const NewNote = ({ setOpen, isPublic = false }) => {
   const [pub, setPublic] = useState(isPublic)
-  const [noteValue, setNoteValue] = useState()
+  const [value, setNoteValue] = useState()
+
+  const tabs = [TabId.Concept, TabId.Bookmark];
+  const [selectedTab, setSelectedTab] = useState(tabs[0]);
+  const [createAnother, setCreateAnother] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const editorId = "create-modal";
+  const { setValue, resetEditor } = usePlateActions(editorId);
+
+  const webId = useWebId();
+  const { workspace, slug: workspaceSlug } = useCurrentWorkspace();
+  const [name, setName] = useState("");
+
+  const {
+    concept,
+    index: conceptIndex,
+    saveIndex: saveConceptIndex,
+  } = useConcept(webId, workspaceSlug, name, pub ? 'public' : 'private');
+  const conceptNames = useConceptNames(webId)
+  const conceptExists = concept && !isThingLocal(concept);
+
+  const save = async function save() {
+    const newNote = createOrUpdateSlateJSON(value);
+    const newConceptIndex = createOrUpdateConceptIndex(
+      value,
+      workspace,
+      conceptIndex,
+      concept,
+      name
+    );
+    setSaving(true);
+    try {
+      await saveConceptIndex(newConceptIndex);
+      await saveNote(newNote, concept);
+    } catch (e) {
+      console.log("error saving note", e);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const reset = () => {
+    resetEditor();
+    setValue(EmptySlateJSON);
+    setName("");
+  };
+
+  const close = () => {
+    reset();
+    setOpen(false);
+  };
+
+  const onSubmit = () => {
+    save();
+    if (createAnother) {
+      reset();
+    } else {
+      close();
+    }
+  };
+
   return (
     <div className="mx-auto rounded-lg overflow-hidden bg-white flex flex-col items-stretch">
       <div className={`flex flex-row justify-between self-stretch h-18 p-6 ${pub ? 'bg-my-green' : 'bg-gray-500'}`}>
@@ -28,24 +103,36 @@ export const NewNote = ({ setOpen, conceptNames, isPublic = false }) => {
               <label htmlFor="name" className="text-sm font-medium text-gray-900">
                 Note Name
               </label>
-              <div className="mt-1 sm:mt-0 sm:col-span-2">
-                <Input
+              <div className="mt-1 sm:mt-0 sm:col-span-2 flex flex-col">
+                <input
                   type="text"
                   name="name"
                   id="name"
-                  className=""
+                  className={`ipt ${conceptExists ? 'error' : ''}`}
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
                 />
+                {conceptExists && (
+                  <span className="ipt-error-message">
+                    concept already exists
+                  </span>
+                )}
               </div>
             </div>
             <div className="px-6 py-5 h-96">
-              <NoteEditor editorId="new-note" onNoteBodyChange={setNoteValue} conceptNames={conceptNames}
-              editableProps={{className: "overflow-scroll h-5/6"}} />
+              <NoteEditor editorId={editorId} onNoteBodyChange={setNoteValue} conceptNames={conceptNames}
+                editableProps={{ className: "overflow-scroll h-5/6" }} />
             </div>
           </>
         </Formik>
       </div>
-      <div className="h-20 bg-gray-50">
-
+      <div className="h-20 bg-gray-50 flex flex-row justify-end items-center px-6">
+        <button onClick={close} className="btn-md btn-filled btn-square h-10 mr-1">Cancel</button>
+        <button type="submit" onClick={onSubmit}
+          className="btn-md btn-filled btn-square h-10 ring-my-green text-my-green flex flex-row justify-center items-center" disabled={conceptExists}>
+          Create
+          <TickCircle className="ml-1 text-my-green h-4 w-4"/>
+        </button>
       </div>
     </div>
   )

styles/index.css

@@ -104,6 +104,9 @@ strong {
   @apply text-white h-5 w-5;
 }
 
+.ipt-error-message {
+  @apply text-2xs uppercase text-ember pl-4;
+}
 .menu-item {
   @apply block text-gray-700 text-sm hover:bg-gray-100 w-full pt-1.5 pb-1.5 text-left px-4;
 }