From 8bac25ab2c2bfbc91d9e01f8200c57be8b7a861e Mon Sep 17 00:00:00 2001 From: brian Date: Mon, 15 Mar 2021 20:19:00 -0400 Subject: [PATCH] can create new bins --- App.js | 8 ++++---- api-stub.js | 30 ++++++++++++++++++++++-------- handlers/App.js | 11 ++++++++--- handlers/Note.js | 2 +- index.js | 15 ++++++++++----- 5 files changed, 45 insertions(+), 21 deletions(-) diff --git a/App.js b/App.js index 5c5353f..2b7721e 100644 --- a/App.js +++ b/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}) )) ]) ]); diff --git a/api-stub.js b/api-stub.js index d264224..334bf83 100644 --- a/api-stub.js +++ b/api-stub.js @@ -4,10 +4,15 @@ 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 = { - 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()} + 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()} + ] + } ] }; @@ -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'} ); }; diff --git a/handlers/App.js b/handlers/App.js index 7c48668..40733b5 100644 --- a/handlers/App.js +++ b/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}; \ No newline at end of file +export {new_note_handler, search_term_change_handler, sorting_change_handler, load_notes, new_bin_handler}; \ No newline at end of file diff --git a/handlers/Note.js b/handlers/Note.js index 911be87..4f0636c 100644 --- a/handlers/Note.js +++ b/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 }; \ No newline at end of file diff --git a/index.js b/index.js index 4c71024..9b40569 100644 --- a/index.js +++ b/index.js @@ -4,7 +4,12 @@ import nanoid from './nanoid.min.js'; var root = document.body; function bin_reducer(old_state, new_state, action){ - new_state.bin = old_state.bin; + 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){ @@ -12,7 +17,7 @@ function search_reducer(old_state, new_state, action){ 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'