Merge pull request #87 from React-Proto/revert-76-feat/multiple_parents

Revert "Allow component to have multiple parents."

Author: adriansun1

src/actionTypes/index.js

@@ -2,7 +2,8 @@ export const LOAD_INIT_DATA = 'LOAD_INIT_DATA';
 export const ADD_COMPONENT = 'ADD_COMPONENT';
 export const UPDATE_COMPONENT = 'UPDATE_COMPONENT';
 export const DELETE_COMPONENT = 'DELETE_COMPONENT';
-export const UPDATE_CHILDREN = 'UPDATE_CHILDREN';
+export const ADD_NEW_CHILD = 'ADD_NEW_CHILD';
+export const DELETE_CHILD = 'DELETE_CHILD';
 export const REASSIGN_PARENT = 'REASSIGN_PARENT';
 export const SET_SELECTABLE_PARENTS = 'SET_SELECTABLE_PARENTS';
 export const EXPORT_FILES = 'EXPORT_FILES';

src/actions/components.js

@@ -3,7 +3,8 @@ import {
   ADD_COMPONENT,
   UPDATE_COMPONENT,
   DELETE_COMPONENT,
-  UPDATE_CHILDREN,
+  ADD_NEW_CHILD,
+  DELETE_CHILD,
   REASSIGN_PARENT,
   SET_SELECTABLE_PARENTS,
   EXPORT_FILES,
@@ -39,21 +40,30 @@ export const loadInitData = () => (dispatch) => {
     }));
 };
 
-export const updateChildren = (({
-  parentIds, childIndex, childId,
+export const addNewChild = (({
+  id, childIndex, childId,
 }) => ({
-  type: UPDATE_CHILDREN,
+  type: ADD_NEW_CHILD,
   payload: {
-    parentIds, childIndex, childId,
+    id, childIndex, childId,
   },
 }));
 
-export const parentReassignment = (({ index, id, parentIds }) => ({
+export const deleteChild = (({
+  parent, childIndex, childId,
+}) => ({
+  type: DELETE_CHILD,
+  payload: {
+    parent, childIndex, childId,
+  },
+}));
+
+export const parentReassignment = (({ index, id, parent }) => ({
   type: REASSIGN_PARENT,
   payload: {
     index,
     id,
-    parentIds,
+    parent,
   },
 }));
 
@@ -62,20 +72,19 @@ export const addComponent = ({ title }) => (dispatch) => {
   dispatch({ type: SET_SELECTABLE_PARENTS });
 };
 
-export const deleteComponent = ({ index, id, parentIds = [] }) => (dispatch) => {
-  if (parentIds.length) {
-    // Delete Component  from its parent if it has a parent.
-    dispatch(updateChildren({ parentIds, childId: id, childIndex: index }));
+export const deleteComponent = ({ index, id, parent }) => (dispatch) => {
+  // Delete Component  from its parent if it has a parent.
+  if (parent && parent.id) {
+    dispatch(deleteChild({ parent, childId: id, childIndex: index }));
   }
   // Reassign Component's children to its parent if it has one or make them orphans
-  dispatch(parentReassignment({ index, id, parentIds }));
-
+  dispatch(parentReassignment({ index, id, parent }));
   dispatch({ type: DELETE_COMPONENT, payload: { index, id } });
   dispatch({ type: SET_SELECTABLE_PARENTS });
 };
 
 export const updateComponent = ({
-  id, index, newParentId = null, color = null, stateful = null,
+  id, index, parent = null, newParentId = null, color = null, stateful = null,
 }) => (dispatch) => {
   dispatch({
     type: UPDATE_COMPONENT,
@@ -84,8 +93,12 @@ export const updateComponent = ({
     },
   });
 
-  if (newParentId) {
-    dispatch(updateChildren({ parentIds: [newParentId], childId: id, childIndex: index }));
+  if (newParentId && newParentId !== 'null') {
+    dispatch(addNewChild({ id: newParentId, childId: id, childIndex: index }));
+  }
+
+  if (parent && parent.id) {
+    dispatch(deleteChild({ parent, index, childId: id }));
   }
 
   dispatch({ type: SET_SELECTABLE_PARENTS });

src/components/LeftColExpansionPanel.jsx

@@ -7,12 +7,8 @@ import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions';
 import Typography from '@material-ui/core/Typography';
 import Input from '@material-ui/core/Input';
-import MenuItem from '@material-ui/core/MenuItem';
-import RemoveCircleOutlineIcon from '@material-ui/icons/RemoveCircleOutline';
-import ListItemText from '@material-ui/core/ListItemText';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import Switch from '@material-ui/core/Switch';
-import Chip from '@material-ui/core/Chip';
 import IconButton from '@material-ui/core/IconButton';
 import DeleteIcon from '@material-ui/icons/Delete';
 import FlipToBackIcon from '@material-ui/icons/FlipToBack';
@@ -32,13 +28,6 @@ const styles = theme => ({
     fontSize: theme.typography.pxToRem(15),
     fontWeight: theme.typography.fontWeightRegular,
   },
-  chips: {
-    display: 'flex',
-    flexWrap: 'wrap',
-  },
-  chip: {
-    margin: theme.spacing.unit / 4,
-  },
   panel: {
     backgroundColor: '#333333',
   },
@@ -71,15 +60,6 @@ const styles = theme => ({
   group: {
     margin: `${theme.spacing.unit}px 0`,
   },
-  icon: {
-    fontSize: '20px',
-    color: '#000',
-    transition: 'all .2s ease',
-
-    '&:hover': {
-      color: 'red',
-    },
-  },
 });
 
 const LeftColExpansionPanel = (props) => {
@@ -99,24 +79,23 @@ const LeftColExpansionPanel = (props) => {
     id,
     stateful,
     color,
-    parents,
-    parentIds,
+    parent,
     selectableParents,
   } = component;
 
-  const handleParentChange = (event, parentId = null) => {
-    let newParentId = parentId;
-    if (event) {
-      const selectedParents = event.target.value;
-      newParentId = selectedParents[selectedParents.length - 1].id;
-    }
-
-    return updateComponent({
-      index,
-      id,
-      newParentId,
-    });
-  };
+  const parentOptions = [
+    <option value='null' key=''>
+      None
+    </option>,
+    ...selectableParents.map(
+      selectableParent => <option
+        value={selectableParent.id}
+        key={selectableParent.id}
+      >
+        {selectableParent.title}
+      </option>,
+    ),
+  ];
 
   return (
     <div className={classes.root}>
@@ -151,35 +130,24 @@ const LeftColExpansionPanel = (props) => {
             />
           </div>
           <div className={classes.column}>
-            <InputLabel className={classes.label} htmlFor='parentSelect'>selectedParents</InputLabel>
+            <InputLabel className={classes.label} htmlFor='parentSelect'>Parent</InputLabel>
             <Select
               className={classes.light}
-              multiple
-              value={parents}
+              native
+              value={parent.id}
               id='parentSelect'
               name='parentName'
-              disabled={selectableParents.length < 1}
-              onChange={handleParentChange}
-              input={<Input id='parentSelect' />}
-              renderValue={selectedP => (
-                <div className={classes.chips}>
-                  {selectedP.map(parent => (
-                    <Chip
-                      key={parent.id}
-                      label={parent.title}
-                      className={classes.chip}
-                      onDelete={() => handleParentChange(null, parent.id)}
-                      deleteIcon={<RemoveCircleOutlineIcon className={classes.icon} />}
-                      />
-                  ))}
-                </div>
-              )}
+              onChange={(event) => {
+                const newParentId = event.target.value;
+                updateComponent({
+                  newParentId,
+                  index,
+                  id,
+                  parent,
+                });
+              }}
             >
-            {selectableParents.map(parentObj => (
-              <MenuItem key={parentObj.id} value={parentObj}>
-                <ListItemText primary={parentObj.title} />
-              </MenuItem>
-            ))}
+              {parentOptions}
             </Select>
           </div>
         </ExpansionPanelDetails>
@@ -205,7 +173,7 @@ const LeftColExpansionPanel = (props) => {
             className={classes.button}
             onClick={() => {
               deleteComponent({
-                index, id, parentIds,
+                index, id, parent,
               });
             }}
             aria-label='Delete'>

src/components/SortableComponent.jsx

@@ -5,16 +5,15 @@ import 'react-sortable-tree/style.css';
 
 const SortableComponent = (props) => {
   const rootComponents = props.components.filter(
-    comp => comp.parentIds.length === 0,
+    comp => comp.parentId.length === 0,
   ).reverse();
-
   return (
     <div className="sortable-tree">
       <SortableTree
         style={{ backgroundColor: 'rgb(37, 37, 38)' }}
         treeData={rootComponents}
         canDrag={false}
-        onChange={() => {}}
+        onChange={treeData => this.setState({ treeData })}
       />
     </div>
   );
@@ -23,5 +22,5 @@ const SortableComponent = (props) => {
 export default SortableComponent;
 
 SortableComponent.propTypes = {
-  components: PropTypes.array.isRequired,
+  components: PropTypes.array,
 };

src/containers/AppContainer.jsx

@@ -6,7 +6,7 @@ import LinearProgress from '@material-ui/core/LinearProgress';
 import LeftContainer from './LeftContainer.jsx';
 import MainContainer from './MainContainer.jsx';
 import RightContainer from './RightContainer.jsx';
-import convertIdsToObjs from '../utils/convertIdsToObjs.util';
+import convertIdToObjs from '../utils/convertIdsToObjs.util';
 import theme from '../components/theme';
 import { loadInitData } from '../actions/components';
 
@@ -51,7 +51,7 @@ class AppContainer extends Component {
       loading,
     } = this.props;
     const { width, rightColumnOpen } = this.state;
-    const updatedComponents = convertIdsToObjs(components);
+    const updatedComponents = convertIdToObjs(components);
 
     return (
       <MuiThemeProvider theme={theme}>

src/containers/LeftContainer.jsx

@@ -16,20 +16,20 @@ const mapDispatchToProps = dispatch => ({
   addComponent: ({ title }) => dispatch(actions.addComponent({ title })),
   updateComponent:
     ({
-      id, index, newParentId = null, color = null, stateful = null,
+      id, index, parent = null, newParentId = null, color = null, stateful = null,
     }) => dispatch(actions.updateComponent({
-      id, index, newParentId, color, stateful,
+      id, index, parent, newParentId, color, stateful,
     })),
   deleteComponent: ({
-    index, id, parentIds,
-  }) => dispatch(actions.deleteComponent({ index, id, parentIds })),
+    index, id, parent,
+  }) => dispatch(actions.deleteComponent({ index, id, parent })),
   moveToBottom: componentId => dispatch(actions.moveToBottom(componentId)),
   moveToTop: componentId => dispatch(actions.moveToTop(componentId)),
   openExpansionPanel: component => dispatch(actions.openExpansionPanel(component)),
   deleteAllData: () => dispatch(actions.deleteAllData()),
 });
 
-const styles = () => ({
+const styles = theme => ({
   cssLabel: {
     color: 'white',
 

src/containers/MainContainer.jsx

@@ -221,13 +221,10 @@ class MainContainer extends Component {
       showGenerateAppModal,
       setImage,
     } = this;
-    const cursor = this.state.draggable ? 'move' : 'default';
 
     return (
       <MuiThemeProvider theme={theme}>
-        <div
-          className="main-container"
-          style={{ cursor }}>
+        <div className="main-container">
           <MainContainerHeader
             image={image}
             increaseHeight={increaseHeight}

src/containers/RightContainer.jsx

@@ -77,7 +77,6 @@ RightContainer.propTypes = {
   deleteProp: PropTypes.func.isRequired,
   addProp: PropTypes.func.isRequired,
   width: PropTypes.number.isRequired,
-  rightColumnOpen: PropTypes.bool.isRequired,
 };
 
 

src/localStorage.js

@@ -1,4 +1,5 @@
 import localforage from 'localforage';
 
-export const saveState = state => localforage.setItem('state-v1.0.1', state);
-export const loadState = () => localforage.getItem('state-v1.0.1');
+export const saveState = state => localforage.setItem('state', state);
+
+export const loadState = () => localforage.getItem('state');

src/reducers/componentReducer.js

@@ -3,7 +3,8 @@ import {
   ADD_COMPONENT,
   UPDATE_COMPONENT,
   DELETE_COMPONENT,
-  UPDATE_CHILDREN,
+  ADD_NEW_CHILD,
+  DELETE_CHILD,
   REASSIGN_PARENT,
   SET_SELECTABLE_PARENTS,
   EXPORT_FILES,
@@ -27,7 +28,8 @@ import {
   addComponent,
   updateComponent,
   deleteComponent,
-  updateChildren,
+  addChild,
+  deleteChild,
   reassignParent,
   setSelectableP,
   exportFilesSuccess,
@@ -72,8 +74,10 @@ const componentReducer = (state = initialApplicationState, action) => {
       return updateComponent(state, action.payload);
     case DELETE_COMPONENT:
       return deleteComponent(state, action.payload);
-    case UPDATE_CHILDREN:
-      return updateChildren(state, action.payload);
+    case ADD_NEW_CHILD:
+      return addChild(state, action.payload);
+    case DELETE_CHILD:
+      return deleteChild(state, action.payload);
     case REASSIGN_PARENT:
       return reassignParent(state, action.payload);
     case SET_SELECTABLE_PARENTS: