fix: Move and remove should match item by id

- Button does not respond to move and remove due to compare object instead of the id of the object
This commit is contained in:
Sheng Xiao
2020-06-06 13:11:05 -07:00
parent 35f5589f95
commit 0293ab6d5b
2 changed files with 18 additions and 17 deletions

View File

@ -92,31 +92,32 @@ const initialState = {
const reducer = (state, { type, payload }) => { const reducer = (state, { type, payload }) => {
let items; let items;
const stateCopy = JSON.parse(JSON.stringify(state));
switch (type) { switch (type) {
case 'migrate_section': case 'migrate_section':
return set({ ...state }, `data.${payload.key}`, payload.value); return set({ ...stateCopy }, `data.${payload.key}`, payload.value);
case 'add_item': case 'add_item':
items = get({ ...state }, `data.${payload.key}.items`, []); items = get({ ...stateCopy }, `data.${payload.key}.items`, []);
items.push(payload.value); items.push(payload.value);
return set({ ...state }, `data.${payload.key}.items`, items); return set({ ...stateCopy }, `data.${payload.key}.items`, items);
case 'delete_item': case 'delete_item':
items = get({ ...state }, `data.${payload.key}.items`, []); items = get({ ...stateCopy }, `data.${payload.key}.items`, []);
remove(items, x => x === payload.value); remove(items, x => x.id === payload.value.id);
return set({ ...state }, `data.${payload.key}.items`, items); return set({ ...stateCopy }, `data.${payload.key}.items`, items);
case 'move_item_up': case 'move_item_up':
items = get({ ...state }, `data.${payload.key}.items`, []); items = get({ ...stateCopy }, `data.${payload.key}.items`, []);
move(items, payload.value, -1); move(items, payload.value, -1);
return set({ ...state }, `data.${payload.key}.items`, items); return set({ ...stateCopy }, `data.${payload.key}.items`, items);
case 'move_item_down': case 'move_item_down':
items = get({ ...state }, `data.${payload.key}.items`, []); items = get({ ...stateCopy }, `data.${payload.key}.items`, []);
move(items, payload.value, 1); move(items, payload.value, 1);
return set({ ...state }, `data.${payload.key}.items`, items); return set({ ...stateCopy }, `data.${payload.key}.items`, items);
case 'on_input': case 'on_input':
return set({ ...state }, payload.key, payload.value); return set({ ...stateCopy }, payload.key, payload.value);
case 'save_data': case 'save_data':
localStorage.setItem('state', JSON.stringify(state)); localStorage.setItem('state', JSON.stringify(stateCopy));
return state; return stateCopy;
case 'import_data': case 'import_data':
if (payload === null) return initialState; if (payload === null) return initialState;
@ -127,18 +128,18 @@ const reducer = (state, { type, payload }) => {
} }
return { return {
...state, ...stateCopy,
...payload, ...payload,
}; };
case 'load_demo_data': case 'load_demo_data':
return { return {
...state, ...stateCopy,
...demoData, ...demoData,
}; };
case 'reset': case 'reset':
return initialState; return initialState;
default: default:
return state; return stateCopy;
} }
}; };

View File

@ -3,7 +3,7 @@ import html2canvas from 'html2canvas';
import * as jsPDF from 'jspdf'; import * as jsPDF from 'jspdf';
const move = (array, element, delta) => { const move = (array, element, delta) => {
const index = array.indexOf(element); const index = array.findIndex(item => item.id === element.id);
const newIndex = index + delta; const newIndex = index + delta;
if (newIndex < 0 || newIndex === array.length) return; if (newIndex < 0 || newIndex === array.length) return;
const indexes = [index, newIndex].sort((a, b) => a - b); const indexes = [index, newIndex].sort((a, b) => a - b);