can create new bins

App.js

@@ -1,10 +1,10 @@
 import Note from './Note.js';
-import {new_note_handler, search_term_change_handler, sorting_change_handler, load_notes} from './handlers/App.js';
+import {new_note_handler, search_term_change_handler, sorting_change_handler, load_notes, new_bin_handler} from './handlers/App.js';
 
 
 function App(vnode_init){
   const {state, dispatch} = vnode_init.attrs;
-  load_notes(state, dispatch);
+  //load_notes(state, dispatch);
   return {
     view: function(vnode){
       const s = vnode.attrs.state;
@@ -20,12 +20,12 @@ function App(vnode_init){
             ]),
           m('.top-right', {key: 'top-right'}, [
             m('.bin-id', {key: 'bin-id'}, s.bin.id),
-            m('button', {key: 'new-bin-button'}, 'New Bin...')
+            m('button', {key: 'new-bin-button', onclick: new_bin_handler.bind(null, s, dispatch)}, 'New Bin...')
             ])
           ]),
         m('.main', {key: 'main'}, [
           m('.notes', s.notes.map(note_state =>
-            m(Note, {note_state, dispatch, key: note_state.note.id})
+            m(Note, {state, note_state, dispatch, key: note_state.note.id})
             ))
           ])
         ]);

api-stub.js

@@ -4,11 +4,16 @@ const api_stub = {};
 
 // for mocking persistent state, for use by the fake endpoints, just as a real server endpoint would have DB access for state:
 const state = {
+  bins: [
+    {
+      id: nanoid(),
       notes: [
         {id: nanoid(), text: 'Note one', modified: Date.now()},
         {id: nanoid(), text: 'Note two', modified: Date.now()},
         {id: nanoid(), text: 'Note three', modified: Date.now()}
         ]
+      }
+    ]
   };
 
 const endpoints = {
@@ -16,11 +21,15 @@ const endpoints = {
   };
 
 endpoints.post['/load-notes'] = function(resolve, reject, body){
-  resolve( {status: 'ok', notes: state.notes} );
+  let i = 0;
+  if(body.bin_id){
+    i = state.bins.findIndex(b=>b.id===body.bin_id);
+    }
+  resolve( {status: 'ok', notes: state.bins[i].notes} );
   };
 
 endpoints.post['/search'] = function(resolve, reject, body){
-  const notes = state.notes.filter(n => n.text.indexOf(body.search_term) !== -1 )
+  const notes = state.bins.find(b=>b.id===body.bin_id).notes.filter(n => n.text.indexOf(body.search_term) !== -1 )
   if(body.sorting==='new->old'){
     notes.sort((a,b) => a.modified-b.modified);
     }
@@ -32,13 +41,18 @@ endpoints.post['/search'] = function(resolve, reject, body){
 
 endpoints.post['/save'] = function(resolve, reject, body){
   const {note_id, text} = body;
-  const note = state.notes.find( n => n.id===note_id );
+  let bin = state.bins.find(b=>b.id===body.bin_id);
+  if(!bin){
+    bin = {id: body.bin_id, notes: []};
+    state.bins.push(bin);
+    }
+  const note = bin.notes.find( n => n.id===note_id );
   if(note){
     note.text = text;
     note.modified = Date.now();
     }
   else{
-    state.notes.push({id: note_id, text, modified: Date.now()});
+    bin.notes.push({id: note_id, text, modified: Date.now()});
     }
   resolve( {status: 'ok'} );
   };

handlers/App.js

@@ -5,11 +5,11 @@ import api from '../api-stub.js';
 const load_notes = function(state, dispatch){
   api.post('/load-notes', {bin_id: state.bin.id})
     .then(res=>{
-      dispatch({type: 'notes-loaded', notes: res.notes});
+      dispatch({type: 'notes-loaded', notes: res.notes, bin_id: state.bin.id});
       });
   };
 const runSearch = function(state, dispatch){
-  api.post('/search', {search_term: state.search_term, sorting: state.sorting})
+  api.post('/search', {search_term: state.search_term, sorting: state.sorting, bin_id: state.bin.id})
   .then(res=>{
     dispatch({type:'update-search-results', notes: res.notes});
     });
@@ -29,5 +29,10 @@ const sorting_change_handler = function(state, dispatch, e){
   runSearch(state, dispatch);
   dispatch({type:'update-sorting', sorting: e.target.value});
   };
+const new_bin_handler = function(state, dispatch){
+  const id = nanoid();
+  dispatch({type: 'new-bin', bin: {id}});
+  dispatch({type: 'notes-loaded', notes: [], bin_id: id});
+  };
 
-export {new_note_handler, search_term_change_handler, sorting_change_handler, load_notes};
+export {new_note_handler, search_term_change_handler, sorting_change_handler, load_notes, new_bin_handler};

handlers/Note.js

@@ -15,7 +15,7 @@ const save_handler = function(note_state, dispatch){
   dispatch({type: 'update-note-text', note_id: note_state.note.id, text: note_state.temp_text});
   //note.text = temp_text;
   dispatch({type: 'update-note-editing', note_id: note_state.note.id, is_editing: false});
-  api.post('/save', {note_id: note_state.note.id, text: note_state.temp_text})
+  api.post('/save', {bin_id: note_state.bin_id, note_id: note_state.note.id, text: note_state.temp_text})
   };
 
 export { edit_handler, cancel_handler, text_change_handler, save_handler };

index.js

@@ -4,15 +4,20 @@ import nanoid from './nanoid.min.js';
 var root = document.body;
 
 function bin_reducer(old_state, new_state, action){
+  if(action.type === 'new-bin'){
+    new_state.bin = action.bin;
+    }
+  else{
     new_state.bin = old_state.bin;
     }
+  }
 
 function search_reducer(old_state, new_state, action){
   if(action.type === 'update-search-term'){
     new_state.search_term = action.search_term;
     }
   else if(action.type === 'update-search-results'){
-    new_state.notes = action.notes.map(note=>({is_editing: false, temp_text: '', note}));
+    new_state.notes = action.notes.map(note=>({is_editing: false, temp_text: '', bin_id: old_state.bin.id, note}));
     new_state.search_term = old_state.search_term;
     }
   else{
@@ -22,10 +27,10 @@ function search_reducer(old_state, new_state, action){
 
 function notes_reducer(old_state, new_state, action){
   if(action.type === 'add-note'){
-    new_state.notes = ([{is_editing: true, note: {id: action.id, text: '', modified: Date.now()}}]).concat(old_state.notes)
+    new_state.notes = ([{is_editing: true, temp_text: '', bin_id: old_state.bin.id, note: {id: action.id, text: '', modified: Date.now()}}]).concat(old_state.notes)
     }
   else if(action.type === 'notes-loaded'){
-    new_state.notes = action.notes.map(note=>({is_editing: false, temp_text: note.text, note}));
+    new_state.notes = action.notes.map(note=>({is_editing: false, temp_text: note.text, bin_id: action.bin_id, note}));
     }
   else if(action.type === 'update-note-text'){
     const i = old_state.notes.findIndex(note_state => note_state.note.id === action.note_id);
@@ -64,7 +69,7 @@ function reducer(old_state, action){
 const store = Redux.createStore(reducer, /* preloadedState, */ {
     bin: {id: nanoid()},
     notes: [
-      //{is_editing: false, note: {id: nanoid(), text: 'Note one', modified: 1}},
+      //{is_editing: false, temp_text: '', bin_id: '', note: {id: nanoid(), text: 'Note one', modified: 1}},
       ],
     search_term: '',
     sorting: 'new->old'