+
localforage.setItem('state', state);
-
-export const loadState = () => localforage.getItem('state');
+export const saveState = state => localforage.setItem('state-v1.0.1', state);
+export const loadState = () => localforage.getItem('state-v1.0.1');
diff --git a/src/reducers/componentReducer.js b/src/reducers/componentReducer.js
index d4c1bd9..caf5b09 100644
--- a/src/reducers/componentReducer.js
+++ b/src/reducers/componentReducer.js
@@ -3,8 +3,7 @@ import {
ADD_COMPONENT,
UPDATE_COMPONENT,
DELETE_COMPONENT,
- ADD_NEW_CHILD,
- DELETE_CHILD,
+ UPDATE_CHILDREN,
REASSIGN_PARENT,
SET_SELECTABLE_PARENTS,
EXPORT_FILES,
@@ -28,8 +27,7 @@ import {
addComponent,
updateComponent,
deleteComponent,
- addChild,
- deleteChild,
+ updateChildren,
reassignParent,
setSelectableP,
exportFilesSuccess,
@@ -74,10 +72,8 @@ const componentReducer = (state = initialApplicationState, action) => {
return updateComponent(state, action.payload);
case DELETE_COMPONENT:
return deleteComponent(state, action.payload);
- case ADD_NEW_CHILD:
- return addChild(state, action.payload);
- case DELETE_CHILD:
- return deleteChild(state, action.payload);
+ case UPDATE_CHILDREN:
+ return updateChildren(state, action.payload);
case REASSIGN_PARENT:
return reassignParent(state, action.payload);
case SET_SELECTABLE_PARENTS:
diff --git a/src/utils/componentReducer.util.js b/src/utils/componentReducer.util.js
index 74b8e93..5624455 100644
--- a/src/utils/componentReducer.util.js
+++ b/src/utils/componentReducer.util.js
@@ -5,7 +5,7 @@ const initialComponentState = {
id: null,
stateful: false,
title: '',
- parentId: '',
+ parentIds: [],
color: getColor(),
draggable: true,
childrenIds: [],
@@ -57,10 +57,14 @@ export const updateComponent = ((state, {
const components = state.components.map((comp) => {
if (comp.id === id) {
component = { ...comp };
- if (newParentId === 'null') {
- component.parentId = '';
- } else if (newParentId) {
- component.parentId = newParentId;
+ if (newParentId) {
+ const parentIdsSet = new Set(component.parentIds);
+ if (parentIdsSet.has(newParentId)) {
+ parentIdsSet.delete(newParentId);
+ } else {
+ parentIdsSet.add(newParentId);
+ }
+ component.parentIds = [...parentIdsSet];
}
if (props) {
component.props = props;
@@ -98,27 +102,20 @@ export const deleteComponent = (state, { index, id }) => {
};
};
-export const addChild = ((state, { id, childId }) => {
+// Add or remove children
+export const updateChildren = ((state, { parentIds, childId }) => {
const components = state.components.map((component) => {
- if (component.id === id) {
- const { childrenIds } = component;
- return { ...component, childrenIds: [...childrenIds, childId] };
- }
- return component;
- });
-
- return {
- ...state,
- components,
- };
-});
+ if (parentIds.includes(component.id)) {
+ const parentComp = { ...component };
+ const childrenIdsSet = new Set(parentComp.childrenIds);
+ if (childrenIdsSet.has(childId)) {
+ childrenIdsSet.delete(childId);
+ } else {
+ childrenIdsSet.add(childId);
+ }
-export const deleteChild = ((state, { parent, childId }) => {
- const components = state.components.map((component) => {
- if (component.id === parent.id) {
- // Find child with matching id and remove from children
- const childrenIds = component.childrenIds.filter(id => id !== childId);
- return { ...component, childrenIds };
+ parentComp.childrenIds = [...childrenIdsSet];
+ return parentComp;
}
return component;
});
@@ -158,16 +155,22 @@ export const changeImagePath = (state, imagePath) => ({
imagePath,
});
-export const reassignParent = ((state, { index, parent = {} }) => {
+
+// Assign comp's children to comp's parent
+export const reassignParent = ((state, { index, id, parentIds = [] }) => {
// Get all childrenIds of the component to be deleted
const { childrenIds } = state.components[index];
const components = state.components.map((comp) => {
// Give each child their previous parent's parent
if (childrenIds.includes(comp.id)) {
- return { ...comp, parentId: parent.id || '' };
+ const prevParentIds = comp.parentIds.filter(parentId => parentId !== id);
+ return {
+ ...comp,
+ parentIds: [...new Set(prevParentIds.concat(parentIds))],
+ };
}
// Give the parent all children of it's to be deleted child
- if (parent.id === comp.id) {
+ if (parentIds.includes(comp.id)) {
const prevChildrenIds = comp.childrenIds;
return { ...comp, childrenIds: [...new Set(prevChildrenIds.concat(childrenIds))] };
}
diff --git a/src/utils/convertIdsToObjs.util.js b/src/utils/convertIdsToObjs.util.js
index 6f00e50..db98f3b 100644
--- a/src/utils/convertIdsToObjs.util.js
+++ b/src/utils/convertIdsToObjs.util.js
@@ -1,20 +1,38 @@
-const convertChildAndParentIds = (components, component) => {
- const childrenAsObj = component.childrenIds.map((id) => {
- const child = components.find(comp => id === comp.id);
- if (!child.children || (child.childrenIds.length !== child.children.length)) {
- return convertChildAndParentIds(components, child);
- }
- if (!child.parent || (child.parentId.length !== child.parent.length)) {
- return convertChildAndParentIds(components, child);
- }
- return child;
- });
- const parentAsObj = components.find(parent => parent.id === component.parentId) || {};
- return { ...component, children: childrenAsObj, parent: parentAsObj };
+let convertChildAndParentIds;
+const convertComponentsArrToObj = components => components.reduce(
+ (obj, comp) => {
+ const compsObj = obj;
+ compsObj[comp.id] = comp;
+ return compsObj;
+ }, {},
+);
+
+const convertCompIdToObj = (id, compsObj) => {
+ const comp = compsObj[id];
+ if (!comp.children || (comp.childrenIds.length !== comp.children.length)) {
+ return convertChildAndParentIds(compsObj, comp);
+ }
+ if (!comp.parents || (comp.parentIds.length !== comp.parents.length)) {
+ return convertChildAndParentIds(compsObj, comp);
+ }
+ return comp;
};
-const convertIdToObjs = components => components.map(
- component => convertChildAndParentIds(components, component),
-);
+convertChildAndParentIds = (compsObj, component) => {
+ const childrenAsObj = component.childrenIds
+ .map(id => convertCompIdToObj(id, compsObj));
+
+ const parentsAsObj = component.parentIds
+ .map(id => compsObj[id]);
+
+ return { ...component, children: childrenAsObj, parents: parentsAsObj };
+};
+
+const convertIdsToObjs = (components) => {
+ const compsObj = convertComponentsArrToObj(components);
+ return components.map(
+ component => convertChildAndParentIds(compsObj, component),
+ );
+};
-export default convertIdToObjs;
+export default convertIdsToObjs;
diff --git a/src/utils/setSelectableParents.util.js b/src/utils/setSelectableParents.util.js
index 0d2d1bd..24d3582 100644
--- a/src/utils/setSelectableParents.util.js
+++ b/src/utils/setSelectableParents.util.js
@@ -10,8 +10,11 @@ const getAllChildren = (components, childrenIds, unSelectable = []) => {
return unSelectable;
};
-const getSelectableParents = ({ id, childrenIds, components }) => {
- const unSelectableParents = getAllChildren(components, childrenIds, [id]);
+const getSelectableParents = ({
+ id, childrenIds,
+ parentIds, components,
+}) => {
+ const unSelectableParents = getAllChildren(components, childrenIds, [id, ...parentIds]);
return components
.filter(comp => !unSelectableParents.includes(comp.id));
};
@@ -23,6 +26,7 @@ const setSelectableParents = components => components.map(
selectableParents: getSelectableParents({
id: comp.id,
childrenIds: comp.childrenIds,
+ parentIds: comp.parentIds,
components,
}),
}