can create new bins

readme
brian 4 years ago
parent dffdcfcd60
commit 8bac25ab2c

@ -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})
))
])
]);

@ -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'} );
};

@ -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};

@ -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 };

@ -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'

Loading…
Cancel
Save