Store categories in note.
authorAlexandre Segura <mex.zktk@gmail.com>
Fri, 09 Jun 2017 15:24:53 +0200
changeset 26 930e486ad0a8
parent 25 e04714a1d4eb
child 27 6161392ca928
Store categories in note.
client/src/actions/notesActions.js
client/src/components/NoteInput.js
client/src/components/SlateEditor.js
client/src/store/noteRecord.js
--- a/client/src/actions/notesActions.js	Thu Jun 08 18:54:36 2017 +0200
+++ b/client/src/actions/notesActions.js	Fri Jun 09 15:24:53 2017 +0200
@@ -12,7 +12,8 @@
       plain: data.plain,
       html: data.html,
       startedAt: data.startedAt,
-      finishedAt: data.finishedAt
+      finishedAt: data.finishedAt,
+      categories: data.categories,
     }
   };
 }
--- a/client/src/components/NoteInput.js	Thu Jun 08 18:54:36 2017 +0200
+++ b/client/src/components/NoteInput.js	Fri Jun 09 15:24:53 2017 +0200
@@ -26,6 +26,7 @@
     const plain = this.refs.editor.asPlain();
     const raw = this.refs.editor.asRaw();
     const html = this.refs.editor.asHtml();
+    const categories = this.refs.editor.asCategories();
 
     this.props.addNote(this.props.session, {
       plain: plain,
@@ -33,7 +34,8 @@
       html: html,
 
       startedAt: this.state.startedAt,
-      finishedAt: moment().format('H:mm:ss')
+      finishedAt: moment().format('H:mm:ss'),
+      categories: categories,
     });
 
     this.refs.editor.clear();
--- a/client/src/components/SlateEditor.js	Thu Jun 08 18:54:36 2017 +0200
+++ b/client/src/components/SlateEditor.js	Fri Jun 09 15:24:53 2017 +0200
@@ -2,6 +2,7 @@
 import React from 'react'
 import Portal from 'react-portal'
 import moment from 'moment'
+import Immutable from 'immutable'
 import HtmlSerializer from '../HtmlSerializer'
 import AnnotationPlugin from '../AnnotationPlugin'
 import CategoriesTooltip from './CategoriesTooltip'
@@ -80,7 +81,8 @@
       finishedAt: null,
       currentSelectionText: '',
       hoveringMenu: null,
-      isPortalOpen: false
+      isPortalOpen: false,
+      categories: Immutable.List([]),
     };
   }
 
@@ -166,6 +168,15 @@
     return HtmlSerializer.serialize(this.state.state);
   }
 
+  asCategories = () => {
+    return this.state.categories
+  }
+
+  removeCategory = (categories, key, text) => {
+    const categoryIndex = categories.findIndex(category => category.key === key && category.text === text)
+    return categories.delete(categoryIndex)
+  }
+
   clear = () => {
     const state = Plain.deserialize('');
     this.onChange(state);
@@ -221,6 +232,7 @@
   onClickMark = (e, type) => {
     e.preventDefault()
     const { state } = this.state
+    let { categories } = this.state
     const transform = state.transform()
 
     let isPortalOpen = false;
@@ -229,7 +241,15 @@
       // Can't use toggleMark here, because it expects the same object
       // @see https://github.com/ianstormtaylor/slate/issues/873
       if (this.hasMark('category')) {
-        state.marks.forEach(mark => transform.removeMark(mark));
+        const categoryMarks = state.marks.filter(mark => mark.type === 'category')
+        categoryMarks.forEach(mark => {
+          const key = mark.data.get('key');
+          const text = mark.data.get('text');
+
+          categories = this.removeCategory(categories, key, text)
+          transform.removeMark(mark)
+        })
+
       } else {
         isPortalOpen = !this.state.isPortalOpen;
       }
@@ -239,7 +259,8 @@
 
     this.setState({
       state: transform.apply(),
-      isPortalOpen: isPortalOpen
+      isPortalOpen: isPortalOpen,
+      categories: categories
     })
   }
 
@@ -318,22 +339,31 @@
 
   onCategoryClick = (category) => {
 
-    const { state } = this.state;
+    const { state, currentSelectionText } = this.state;
+    let { categories } = this.state;
     const transform = state.transform();
 
-    state.marks.forEach(mark => transform.removeMark(mark));
+    const categoryMarks = state.marks.filter(mark => mark.type === 'category')
+    categoryMarks.forEach(mark => transform.removeMark(mark));
+
     transform.addMark({
       type: 'category',
       data: {
-        text: this.state.currentSelectionText,
+        text: currentSelectionText,
         color: category.color,
         key: category.key
       }
     })
 
+    Object.assign(category, {
+      text: currentSelectionText
+    });
+    categories = categories.push(category);
+
     this.setState({
       state: transform.apply(),
-      isPortalOpen: false
+      isPortalOpen: false,
+      categories: categories
     });
   }
 
--- a/client/src/store/noteRecord.js	Thu Jun 08 18:54:36 2017 +0200
+++ b/client/src/store/noteRecord.js	Fri Jun 09 15:24:53 2017 +0200
@@ -10,4 +10,6 @@
 
   startedAt: '',
   finishedAt: '',
+
+  categories: []
 });