Merge pull request #105 from ChristianEdwardPadilla/development

Merge with Shlomo, styling changes, additions to createApp

Author: ChristianEdwardPadilla

src/components/SortChildren.jsx

@@ -24,9 +24,10 @@ class SortChildren extends Component {
   } // end constrcutor
 
   setLocalArray = () => {
-    const localArray = this.props.focusComponent.childrenArray.map((child, idx) => {
-      return { childId: child.childId, childSort: child.childSort };
-    });
+    const localArray = this.props.focusComponent.childrenArray.map((child, idx) => ({
+      childId: child.childId,
+      childSort: child.childSort,
+    }));
     return localArray;
   };
 
@@ -62,11 +63,12 @@ class SortChildren extends Component {
     // put back the dragge item after the dragged Over
     currentSortValues.splice(this.state.draggedOverIndex, 0, draggedBaby);
 
-    currentSortValues = currentSortValues.map((child, idx) => {
-      return { childId: child.childId, childSort: idx + 1 };
-    });
+    currentSortValues = currentSortValues.map((child, idx) => ({
+      childId: child.childId,
+      childSort: idx + 1,
+    }));
 
-    console.log(`currentSortValues after updating the sort  `, JSON.stringify(currentSortValues));
+    console.log('currentSortValues after updating the sort  ', JSON.stringify(currentSortValues));
 
     this.props.updateChildrenSort({ newSortValues: currentSortValues });
 
@@ -89,25 +91,23 @@ class SortChildren extends Component {
       lineHeight: 1,
       cursor: 'move',
     };
-    //const children = this.props.focusComponent.childrenArray;
+    // const children = this.props.focusComponent.childrenArray;
     // const List = children
     const List = cloneDeep(this.props.focusComponent.childrenArray)
       .sort((a, b) => a.childSort - b.childSort)
-      .map((child, idx) => {
-        return (
-          <li style={liStyle} id={child.childId} key={idx}>
-            <div
-              className="drag"
-              draggable
-              onDragStart={e => this.onDragStart(e, idx)}
-              onDragOver={e => this.onDragOver(idx)}
-              onDragEnd={e => this.onDragEnd()}
-            >
-              {child.componentName + child.childId}
-            </div>
-          </li>
-        );
-      });
+      .map((child, idx) => (
+        <li style={liStyle} id={child.childId} key={idx}>
+          <div
+            className="drag"
+            draggable
+            onDragStart={e => this.onDragStart(e, idx)}
+            onDragOver={e => this.onDragOver(idx)}
+            onDragEnd={e => this.onDragEnd()}
+          >
+            {child.componentName + child.childId}
+          </div>
+        </li>
+      ));
     return (
       <div
         style={{
@@ -122,21 +122,19 @@ class SortChildren extends Component {
         <ul style={ulStyle}>
           {cloneDeep(this.props.focusComponent.childrenArray)
             .sort((a, b) => a.childSort - b.childSort)
-            .map((child, idx) => {
-              return (
-                <li style={liStyle} id={child.childId} key={idx}>
-                  <div
-                    className="drag"
-                    draggable
-                    onDragStart={e => this.onDragStart(e, idx)}
-                    onDragOver={e => this.onDragOver(idx)}
-                    onDragEnd={e => this.onDragEnd()}
-                  >
-                    {child.componentName + child.childId}
-                  </div>
-                </li>
-              );
-            })}
+            .map((child, idx) => (
+              <li style={liStyle} id={child.childId} key={idx}>
+                <div
+                  className="drag"
+                  draggable
+                  onDragStart={e => this.onDragStart(e, idx)}
+                  onDragOver={e => this.onDragOver(idx)}
+                  onDragEnd={e => this.onDragEnd()}
+                >
+                  {child.componentName + child.childId}
+                </div>
+              </li>
+            ))}
 
           {/* {List} */}
         </ul>

src/public/index.html

@@ -4,19 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <meta
-      http-equiv="Content-Security-Policy"
-      content="default-src 'self' https: filesystem: data: ws: 'unsafe-eval' 'unsafe-inline'"
-    />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self' https: filesystem: data: ws: 'unsafe-eval' 'unsafe-inline'" />
     <title>ReacType</title>
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
-    />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
-    />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
   </head>
 
   <body>

src/reducers/componentReducer.ts

@@ -70,8 +70,8 @@ const initialApplicationFocusChild = {
   position: {
     x: 25,
     y: 25,
-    width: 600,
-    height: 400,
+    width: 800,
+    height: 550,
   },
   childType: null,
   childSort: 0,