From 0293ab6d5b0e21ad6f823ce935d49fcf13d3f377 Mon Sep 17 00:00:00 2001 From: Sheng Xiao Date: Sat, 6 Jun 2020 13:11:05 -0700 Subject: [PATCH 1/5] 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 | 33 +++++++++++++++++---------------- src/utils/index.js | 2 +- 2 files changed, 18 insertions(+), 17 deletions(-) diff --git a/src/context/AppContext.js b/src/context/AppContext.js index 31cd2eac..e9dcd73f 100644 --- a/src/context/AppContext.js +++ b/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; } }; diff --git a/src/utils/index.js b/src/utils/index.js index 0fab0818..f957ec45 100644 --- a/src/utils/index.js +++ b/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); From e2ed1813e167ec6ac90fffe52328c5c229a0adcd Mon Sep 17 00:00:00 2001 From: Sheng Xiao Date: Sat, 6 Jun 2020 14:33:20 -0700 Subject: [PATCH 2/5] chore: Using id in Skills and Hobbies - Build skills, hobbies as an array of object with id as a unique key --- src/assets/demo/data.json | 50 +++++++++++++++++++--- src/components/LeftSidebar/tabs/Hobbies.js | 17 +++++--- src/components/LeftSidebar/tabs/Skills.js | 21 ++++++--- src/templates/castform/Castform.js | 8 ++-- src/templates/celebi/Celebi.js | 8 ++-- src/templates/gengar/Gengar.js | 8 ++-- src/templates/glalie/Glalie.js | 8 ++-- src/templates/onyx/Onyx.js | 8 ++-- src/templates/pikachu/Pikachu.js | 8 ++-- 9 files changed, 93 insertions(+), 43 deletions(-) diff --git a/src/assets/demo/data.json b/src/assets/demo/data.json index 8333116f..a54ad066 100644 --- a/src/assets/demo/data.json +++ b/src/assets/demo/data.json @@ -142,18 +142,54 @@ "enable": true, "heading": "Skills", "items": [ - "Customer Service Expertise", - "High-Volume Call Center", - "Team Leader/Problem Solver", - "Call Center Management", - "Teambuilding & Training", - "Continuous Improvement" + { + "id": "2562d78a-3459-4370-8604-c81b00738db1", + "skill": "Customer Service Expertise" + }, + { + "id": "58c31587-9770-4522-a34c-f5ad92fe33e5", + "skill": "High-Volume Call Center" + }, + { + "id": "7aa9a4b1-a2bb-4bcd-8711-b66c0d246971", + "skill": "Team Leader/Problem Solver" + }, + { + "id": "e7fd33e8-5d77-462d-8115-5be57f52832e", + "skill": "Call Center Management" + }, + { + "id": "7bad2af1-c24d-4e01-b68b-be01cfa784ce", + "skill": "Teambuilding & Training" + }, + { + "id": "64fe1710-c2d1-4f53-922e-a5d751eee967", + "skill": "Continuous Improvement" + } ] }, "hobbies": { "enable": true, "heading": "Hobbies", - "items": ["Poetry", "Travelling", "Beatboxing", "Sketching"] + "items": [ + { + "id": "dd2efad7-e900-4384-bdc0-b2ab5f62bb71", + "hobby": "Poetry" + + }, + { + "id": "96023eb7-8c93-4b1d-b581-b8fc4107351a", + "hobby": "Travelling" + }, + { + "id": "7e5a6168-9cbe-4fe6-b9b9-43a47d8bb15a", + "hobby": "Beatboxing" + }, + { + "id": "dd7f4ffd-9c16-4dbf-8968-1165b9e30db8", + "hobby": "Sketching" + } + ] }, "languages": { "enable": true, diff --git a/src/components/LeftSidebar/tabs/Hobbies.js b/src/components/LeftSidebar/tabs/Hobbies.js index 1ba1a614..1c1a0867 100644 --- a/src/components/LeftSidebar/tabs/Hobbies.js +++ b/src/components/LeftSidebar/tabs/Hobbies.js @@ -1,4 +1,5 @@ import React, { useState, useContext } from 'react'; +import { v4 as uuidv4 } from 'uuid'; import AppContext from '../../../context/AppContext'; import Checkbox from '../../../shared/Checkbox'; @@ -44,7 +45,7 @@ const Form = ({ item, onChange }) => { onChange(e.target.value)} type="text" /> @@ -53,14 +54,20 @@ const Form = ({ item, onChange }) => { const AddItem = ({ heading, dispatch }) => { const [isOpen, setOpen] = useState(false); - const [item, setItem] = useState(''); + const [item, setItem] = useState({ + id: uuidv4(), + hobby: '' + }); const add = () => { - if (item === '') return; + if (item.hobby === '') return; addItem(dispatch, 'hobbies', item); - setItem(''); + setItem({ + id: uuidv4(), + hobby: '' + }); }; return ( @@ -70,7 +77,7 @@ const AddItem = ({ heading, dispatch }) => {
-
+ setItem({...item, hobby: v})} />