can create new bins
This commit is contained in:
@@ -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})
|
||||
))
|
||||
])
|
||||
]);
|
||||
|
||||
+18
-4
@@ -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'} );
|
||||
};
|
||||
|
||||
+8
-3
@@ -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};
|
||||
+1
-1
@@ -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,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'
|
||||
|
||||
Reference in New Issue
Block a user