diff --git a/api-stub.js b/api-stub.js index 334bf83..65622b3 100644 --- a/api-stub.js +++ b/api-stub.js @@ -24,8 +24,14 @@ endpoints.post['/load-notes'] = function(resolve, reject, body){ let i = 0; if(body.bin_id){ i = state.bins.findIndex(b=>b.id===body.bin_id); + // if there is no such bin, just return a well-formed response, but don't create such a bin server-side yet, until a save + if(i === -1){ + resolve( {status: 'ok', bin:{id:body.bin_id}, notes:[]} ); + return; + } } - resolve( {status: 'ok', notes: state.bins[i].notes} ); + const bin = state.bins[i]; + resolve( {status: 'ok', bin:{id:bin.id}, notes: bin.notes} ); }; endpoints.post['/search'] = function(resolve, reject, body){ diff --git a/handlers/App.js b/handlers/App.js index 22d8b66..eec0e3a 100644 --- a/handlers/App.js +++ b/handlers/App.js @@ -31,9 +31,9 @@ const sorting_change_handler = function(state, dispatch, e){ }; const new_bin_handler = function(state, dispatch){ const id = nanoid(); - // TODO: consolidate: this will cause two redraws: + // change browser location in address bar: + window.history.pushState(null,'','#'+id); dispatch('new-bin', {id}); - dispatch('notes-loaded', []); }; 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/index.js b/handlers/index.js new file mode 100644 index 0000000..75a2160 --- /dev/null +++ b/handlers/index.js @@ -0,0 +1,32 @@ +import api from '../api-stub.js'; + +const load_bin_handler = function(state, dispatch, bin_id){ + /* + api.post('/load-bin', {id: bin_id}) + .then(res => { + dispatch('bin-loaded', {bin:res.bin, _notes:res.notes}); + }); + */ + api.post('/load-notes', {bin_id}) + .then(res => { + dispatch('notes-loaded', res.notes); + }); + }; + +const hash_change_handler = function(state, dispatch, e){ + // get bin id from URL + let bin_id = window.location.hash.substring(1); // extract the leading '#' + if(bin_id === ''){ + const old_bin_id = state.bin.id; + window.history.replaceState(null,'', '#'+old_bin_id); + } + else{ + dispatch('bin-requested', bin_id); + api.post('/load-notes', {bin_id}) + .then(res => { + dispatch('notes-loaded', res.notes); + }); + } + }; + +export {load_bin_handler, hash_change_handler}; \ No newline at end of file diff --git a/index.js b/index.js index 6694dae..e02ae70 100644 --- a/index.js +++ b/index.js @@ -1,5 +1,6 @@ import App from './App.js'; import nanoid from './nanoid.min.js'; +import {load_bin_handler, hash_change_handler} from './handlers/index.js'; const produce = immer.produce; immer.setAutoFreeze(false); // needed for high-frequency updated values, like onkeyup->note.temp_text; only once 'save' is called will it produce a new immutable state tree @@ -13,8 +14,18 @@ const handleActions = (actionsMap, defaultState) => action && action(draft, payload); }); +// get bin id from URL, and load notes from that bin; if a bin id isn't specified in the URL, create a new one and update the URL +let bin_id = window.location.hash.substring(1); // extract the leading '#' +if(bin_id === ''){ + bin_id = nanoid(); + window.history.replaceState(null,'', '#'+bin_id); + } +// the actual loading from server is done later, after store and dispatch are defined + const reducer = handleActions({ - 'new-bin': (s, bin) => { s.bin=bin; }, + 'new-bin': (s, bin) => { s.bin=bin; s.notes=[]; }, + 'bin-requested': (s, bin_id) => { s.bin={id:bin_id}; s.notes = []; }, + 'bin-loaded': (s, {bin, _notes}) => { s.bin=bin; s.notes=_notes.map(n=>({is_editing: false, temp_text: n.text, bin_id: bin.id, note:n})); }, 'update-search-term': (s, search_term) => { s.search_term=search_term; }, 'update-search-results': (s, _notes) => { s.notes =_notes.map(n=>({is_editing: false, temp_text: '', bin_id: s.bin.id, note:n})); }, 'add-note': (s, {id, date}) => { s.notes.unshift({is_editing: true, temp_text: '', bin_id: s.bin.id, is_focused:true, note: {id: id, text: '', modified: date}}); }, @@ -24,7 +35,7 @@ const reducer = handleActions({ 'save-note-edit': (s, {id, text}) => { const note_s=s.notes.find(n=>n.note.id===id); note_s.note.text=text; note_s.temp_text=text; note_s.is_editing=false; }, 'update-sorting': (s, sorting) => { s.sorting=sorting; } }, { - bin: {id: nanoid()}, + bin: {id: bin_id}, notes: [ //{is_editing: false, temp_text: '', bin_id: '', note: {id: nanoid(), text: 'Note one', modified: 1}}, ], @@ -42,7 +53,11 @@ store.subscribe(()=>{ m.render(root, m(App, {state: store.getState(), dispatch})); }); +window.addEventListener("hashchange", (e)=>hash_change_handler(store.getState(), dispatch, e), false); + +let state = store.getState(); +load_bin_handler(state, dispatch, bin_id); // we don't want Mithril auto-redraw system in place, since Redux will manually re-render when necessary with store.subscribe(): // m.mount(root, App); -m.render(root, m(App, {state: store.getState(), dispatch})) \ No newline at end of file +m.render(root, m(App, {state, dispatch})) \ No newline at end of file