feat: allow locking from everywhere

apps/web/src/components/checkbox/index.js

@@ -10,9 +10,12 @@ const CheckBox = props => {
   return (
     <Flex
       onClick={() => {
-        setChecked(!checked);
         if (props.onChecked) {
           props.onChecked(!checked);
+          setChecked(!checked);
+        }
+        if (props.onClick) {
+          props.onClick();
         }
       }}
       width="full"

apps/web/src/components/dialogs/password-dialog.js

@@ -5,17 +5,17 @@ import Dialog, { showDialog } from "./dialog";
 import * as Icon from "react-feather";
 
 function PasswordDialog(props) {
-  let password = "";
   const [isWrong, setIsWrong] = useState(false);
   const passwordRef = useRef();
   const submit = useCallback(async () => {
+    const password = passwordRef.current.value;
     if (await props.validate(password)) {
       props.onDone();
     } else {
       setIsWrong(true);
       passwordRef.current.focus();
     }
-  }, [setIsWrong, password, props]);
+  }, [setIsWrong, props]);
   return (
     <Dialog
       isOpen={true}
@@ -28,7 +28,6 @@ function PasswordDialog(props) {
             autoFocus
             variant={isWrong ? "error" : "default"}
             type="password"
-            onChange={e => (password = e.target.value)}
             placeholder="Enter vault password"
             onKeyUp={async e => {
               if (e.key === "Enter") {

apps/web/src/components/note/index.js

@@ -25,7 +25,7 @@ const menuItems = (note, index) => [
   },
   {
     title: note.favorite ? "Unfavorite" : "Favorite",
-    onClick: () => store.getState().favorite(note, index)
+    onClick: () => store.getState().favorite(note)
   },
   { title: "Edit", onClick: () => editorStore.getState().openSession(note) },
   {
@@ -33,9 +33,9 @@ const menuItems = (note, index) => [
     onClick: async () => {
       const { unlock, lock } = store.getState();
       if (!note.locked) {
-        lock(note, index);
+        lock(note.id);
       } else {
-        unlock(note, index);
+        unlock(note.id);
       }
     }
   },
@@ -80,7 +80,7 @@ function Note(props) {
           {note.favorite && <Icon.Star size={13} style={{ marginLeft: 5 }} />}
         </Flex>
       }
-      pinned={note.pinned}
+      pinned={props.pinnable && note.pinned}
       menuData={note}
       menuItems={menuItems(note, index)}
       dropdownRefs={dropdownRefs}

apps/web/src/components/properties/index.js

@@ -12,12 +12,15 @@ import { useStore as useAppStore } from "../../stores/app-store";
 const Properties = props => {
   const pinned = useStore(store => store.session.pinned);
   const favorite = useStore(store => store.session.favorite);
+  const locked = useStore(store => store.session.locked);
   const colors = useStore(store => store.session.colors);
   const tags = useStore(store => store.session.tags);
 
   const setSession = useStore(store => store.setSession);
   const setColor = useStore(store => store.setColor);
   const setTag = useStore(store => store.setTag);
+  const toggleLocked = useStore(store => store.toggleLocked);
+
   function changeState(prop, value) {
     setSession(state => {
       state.session[prop] = value;
@@ -92,13 +95,13 @@ const Properties = props => {
           label="Pin"
           onChecked={state => changeState("pinned", state)}
         />
+        <CheckBox icon={Icon.Star} checked={favorite} label="Favorite" />
         <CheckBox
-          icon={Icon.Star}
-          checked={favorite}
-          label="Favorite"
-          onChecked={state => changeState("favorite", state)}
+          icon={Icon.Lock}
+          label="Lock"
+          checked={locked}
+          onClick={toggleLocked}
         />
-        <CheckBox icon={Icon.Lock} label="Lock" onChecked={props.onLocked} />
         <Flex fontSize="body" sx={{ marginBottom: 3 }} alignItems="center">
           <Icon.Book size={18} />
           <Text sx={{ marginLeft: 1 }}>Move to notebook</Text>

apps/web/src/stores/editor-store.js

@@ -17,6 +17,7 @@ const DEFAULT_SESSION = {
   id: "",
   pinned: false,
   favorite: false,
+  locked: false,
   tags: [],
   colors: [],
   dateEdited: 0,
@@ -58,8 +59,8 @@ function editorStore(set, get) {
               return true;
             })
             .catch(e => {
-              console.log(e);
-              return false;
+              if (e.message === "ERR_WRNG_PwD") return false;
+              else console.error(e);
             });
         });
         if (!result) return;
@@ -73,6 +74,7 @@ function editorStore(set, get) {
           pinned: note.pinned,
           favorite: note.favorite,
           colors: note.colors,
+          locked: note.locked,
           tags: note.tags,
           dateEdited: note.dateEdited,
           content,
@@ -86,7 +88,17 @@ function editorStore(set, get) {
         state.session.isSaving = true;
       });
       const { session } = get();
-      const { title, id, content, pinned, favorite, tags, colors } = session;
+      const {
+        title,
+        id,
+        content,
+        pinned,
+        favorite,
+        locked,
+        tags,
+        colors
+      } = session;
+
       let note = {
         content,
         title,
@@ -96,6 +108,7 @@ function editorStore(set, get) {
         tags,
         colors
       };
+
       db.notes.add(note).then(id => {
         if (tags.length > 0) updateContext("tags", tags);
         if (colors.length > 0) {
@@ -113,7 +126,7 @@ function editorStore(set, get) {
         });
 
         notesState.refresh();
-        saveLastOpenedNote(id);
+        saveLastOpenedNote(locked ? undefined : id);
 
         // we update favorites only if favorite has changed
         if (!oldSession || oldSession.favorite !== session.favorite) {
@@ -144,6 +157,14 @@ function editorStore(set, get) {
       saveLastOpenedNote();
       noteStore.getState().setSelectedNote(0);
     },
+    toggleLocked: function() {
+      const { session } = get();
+      if (session.locked) {
+        noteStore.getState().unlock(session.id);
+      } else {
+        noteStore.getState().lock(session.id);
+      }
+    },
     setColor: function(color) {
       setTagOrColor(get().session, "colors", color, "color", get().setSession);
     },

apps/web/src/stores/note-store.js

@@ -36,6 +36,7 @@ function noteStore(set, get) {
       });
     },
     setSelectedContext: function(context) {
+      console.log("setting context");
       let notes = [];
       switch (context.type) {
         case "tag":
@@ -77,44 +78,34 @@ function noteStore(set, get) {
       await db.notes.note(note).pin();
       set(state => {
         state.notes = db.notes.group(undefined, true);
-        syncEditor(note, "pinned");
       });
+      syncEditor(note.id, "pinned");
     },
-    favorite: async function(note, index) {
+    favorite: async function(note) {
       await db.notes.note(note).favorite();
-      set(state => {
-        if (index < 0 || !index) {
-          index = state.notes.items.findIndex(n => n.id === note.id);
-          if (index < 0) return;
-        }
-        state.notes.items[index].favorite = !note.favorite;
-      });
-      syncEditor(note, "favorite");
+      setValue(set, note.id, "favorite", !note.favorite);
       get().refreshList(LIST_TYPES.fav);
     },
-    unlock: function(note, index) {
+    unlock: function(noteId) {
       showPasswordDialog("unlock_note", password => {
         return db.vault
-          .remove(note.id, password)
+          .remove(noteId, password)
           .then(() => true)
-          .catch(() => false);
+          .catch(e => {
+            if (e.message === "ERR_WRNG_PWD") return false;
+            else console.error(e);
+          });
       }).then(res => {
         if (res) {
-          set(state => {
-            state.notes.items[index].locked = false;
-          });
-          syncEditor(note, "locked");
+          setValue(set, noteId, "locked", false);
         }
       });
     },
-    lock: function lock(note, index) {
+    lock: function lock(noteId) {
       db.vault
-        .add(note.id)
+        .add(noteId)
         .then(() => {
-          set(state => {
-            state.notes.items[index].locked = true;
-          });
-          syncEditor(note, "locked");
+          setValue(set, noteId, "locked", true);
         })
         .catch(async ({ message }) => {
           switch (message) {
@@ -128,22 +119,34 @@ function noteStore(set, get) {
         })
         .then(result => {
           if (result === true) {
-            lock(note, index);
+            lock(noteId);
           }
         });
     }
   };
 }
 
-function syncEditor(note, action) {
+function syncEditor(noteId, action) {
   const editorState = editorStore.getState();
-  if (editorState.session.id === note.id) {
+  if (editorState.session.id === noteId) {
     editorState.setSession(
       state => (state.session[action] = !state.session[action])
     );
   }
 }
 
+function setValue(set, noteId, prop, value) {
+  set(state => {
+    const arr = !state.selectedNotes.length
+      ? state.notes.items
+      : state.selectedNotes;
+    let index = arr.findIndex(n => n.id === noteId);
+    if (index < 0) return;
+    arr[index][prop] = value;
+  });
+  syncEditor(noteId, prop);
+}
+
 const [useStore, store] = createStore(noteStore);
 
 export { useStore, store, LIST_TYPES };

apps/web/src/views/Home.js

@@ -64,6 +64,7 @@ function Home() {
           notes.groupCounts[groupIndex] && (
             <Note
               index={index}
+              pinnable={true}
               groupIndex={groupIndex}
               item={notes.items[index]}
             />

apps/web/src/views/Notes.js

@@ -16,9 +16,12 @@ const Notes = props => {
       clearSelectedContext();
     };
   }, [clearSelectedContext]);
+  console.log("refreshing notesssss", selectedNotes);
   return (
     <ListContainer
-      item={index => <Note index={index} item={selectedNotes[index]} />}
+      item={index => (
+        <Note index={index} pinnable={false} item={selectedNotes[index]} />
+      )}
       itemsLength={selectedNotes.length}
       button={{
         content: "Make a new note",