merge util files

util

Co-authored-by: Tolga Mizrakci <tolgamizrakci@gmail.com>
Co-authored-by: Adam Singer <spincycle01@yahoo.com>
Co-authored-by: Shlomo Porges <porges.s@gmail.com>

Author: 4 people

src/components/LeftColExpansionPanel.tsx

@@ -25,6 +25,12 @@ const LeftColExpansionPanel = (props: any) => {
   } = props;
   const { title, id, color } = component;
 
+  // show a string of all direct parents. SO the user can gaze at it.
+  const directParents = components
+    .filter((comp: ComponentInt) => comp.childrenArray.some((child: ChildInt) => child.childComponentId === id))
+    .map((comp: ComponentInt) => comp.title)
+    .join(',');
+
   function isFocused() {
     return focusComponent.id === id ? 'focused' : '';
   }

src/components/SimpleModal.tsx

@@ -6,7 +6,7 @@ import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 
-const styles = theme => ({
+const styles = (theme: any): any => ({
   paper: {
     position: 'absolute',
     width: 'auto',
@@ -28,7 +28,7 @@ const styles = theme => ({
   },
 });
 
-const SimpleModal = (props) => {
+const SimpleModal = (props: any) => {
   const {
     classes,
     open,
@@ -76,12 +76,22 @@ const SimpleModal = (props) => {
           <div>{children}</div>
           <div>
             {secBtnLabel ? (
-              <Button variant="contained" color="secondary" className={classes.button} onClick={secBtnAction}>
+              <Button
+                variant="contained"
+                color="secondary"
+                className={classes.button}
+                onClick={secBtnAction}
+              >
                 {secBtnLabel}
               </Button>
             ) : null}
             {primBtnLabel ? (
-              <Button variant="contained" color="primary" className={classes.button} onClick={primBtnAction}>
+              <Button
+                variant="contained"
+                color="primary"
+                className={classes.button}
+                onClick={primBtnAction}
+              >
                 {primBtnLabel}
               </Button>
             ) : null}

src/components/TransformerComponent.tsx

@@ -1,8 +1,12 @@
 import React, { Component } from 'react';
 import { Transformer } from 'react-konva';
-import { ChildInt } from '../utils/interfaces';
+import { ChildInt } from '../utils/interfaces.ts';
 
-export default class TransformerComponent extends Component {
+interface PropsInt {
+  focusChild: ChildInt;
+}
+
+export default class TransformerComponent extends Component<PropsInt> {
   componentDidMount() {
     this.checkNode();
   }

src/components/theme.ts

@@ -2,10 +2,14 @@ import { createMuiTheme } from '@material-ui/core/styles';
 import indigo from '@material-ui/core/colors/indigo';
 
 const theme = createMuiTheme({
+  typography: {
+    useNextVariants: true,
+  },
   palette: {
     primary: {
       light: '#00e676',
-      main: '#33eb91',
+      // main: '#33eb91',
+      main: '#01d46d', // less blinding green
       dark: '#14a37f',
       contrastText: '#fff',
     },

src/containers/AppContainer.tsx

@@ -48,6 +48,7 @@ class AppContainer extends Component<Props> {
         <div className="app-container">
           <LeftContainer
             components={components}
+            totalComponents={totalComponents}
             focusComponent={focusComponent}
             selectableChildren={selectableChildren}
           />

src/containers/LeftContainer.tsx

@@ -87,7 +87,7 @@ class LeftContainer extends Component<PropsInt, StateInt> {
   }
 
   handleChange = (event: any) => {
-    let newValue: string = event.target.value;
+    const newValue: string = event.target.value;
     this.setState({
       componentName: newValue,
     });
@@ -169,10 +169,8 @@ class LeftContainer extends Component<PropsInt, StateInt> {
   render(): JSX.Element {
     const {
       components,
-      updateComponent,
       deleteComponent,
       focusComponent,
-      totalComponents,
       classes,
       addChild,
       changeFocusComponent,
@@ -194,6 +192,8 @@ class LeftContainer extends Component<PropsInt, StateInt> {
           changeFocusComponent={changeFocusComponent}
           changeFocusChild={changeFocusChild}
           selectableChildren={selectableChildren}
+          deleteComponent={deleteComponent}
+          components={components}
         />
       ));
 
@@ -260,7 +260,7 @@ class LeftContainer extends Component<PropsInt, StateInt> {
               color="secondary"
               aria-label="Delete All"
               variant="contained"
-              fullwidth="true"
+              fullWidth
               onClick={this.clearWorkspace}
               disabled={this.props.components.length === 1}
               className={classes.clearButton}
@@ -278,12 +278,11 @@ class LeftContainer extends Component<PropsInt, StateInt> {
           >
             <Button
               color="primary"
+              aria-label="Export Code"
               variant="contained"
-              fullwidth="true"
+              fullWidth
               onClick={this.showGenerateAppModal}
               className={classes.clearButton}
-              disabled={totalComponents < 1}
-              onClick={this.showGenerateAppModal}
               style={{ borderRadius: 0 }}
             >
               <GetAppIcon style={{ paddingRight: '5px' }} />

src/reducers/componentReducer.ts

@@ -46,7 +46,7 @@ import {
 } from '../utils/componentReducer.util.ts';
 import cloneDeep from '../utils/cloneDeep.ts';
 
-const appComponent = {
+const appComponent: ComponentInt = {
   id: 1,
   stateful: false,
   title: 'App',
@@ -64,7 +64,7 @@ const appComponent = {
   focusChildId: 0,
 };
 
-const initialApplicationFocusChild = {
+const initialApplicationFocusChild: ChildInt = {
   childId: 0,
   componentName: null,
   position: {
@@ -81,7 +81,7 @@ const initialApplicationFocusChild = {
   HTMLInfo: null,
 };
 
-const initialApplicationState = {
+const initialApplicationState: ApplicationStateInt = {
   totalComponents: 1,
   nextId: 2,
   successOpen: false,
@@ -96,7 +96,7 @@ const initialApplicationState = {
   loading: false,
 };
 
-const componentReducer = (state = initialApplicationState, action) => {
+const componentReducer = (state = initialApplicationState, action: any) => {
   switch (action.type) {
     case LOAD_INIT_DATA:
       return {