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

src/context/AppContext.js

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

src/utils/index.js

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