Merge pull request #84 from ShlomoPorges/development

ShlomoPorges · ChristianEdwardPadilla · commit e0ff11221e8a · 2019-05-18T16:17:07.000-04:00
types in components
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -14,15 +14,3 @@ export const App: React.SFC = () => (
 
 export default App;
 
-//  class App extends Component {
-//     // render() {
-//       return (
-//         <div className="app">
-//           <div>
-//             <header style={{ height: '40px', width: '100%' }}>ReacType</header>
-//             <AppContainer />
-//           </div>
-//         </div>
-//       );
-//     }
-//   }
diff --git a/src/components/CodePreview.tsx b/src/components/CodePreview.tsx
@@ -12,7 +12,6 @@ type Props = {
 
 class CodePreview extends Component<Props> {
   render(): JSX.Element {
-   //const {focusComponent, components } : {focusComponent:ComponentInt, components:ComponentsInt }  = this.props;
    const focusComponent : ComponentInt  = this.props.focusComponent;
    const components : ComponentsInt  = this.props.components;
  
diff --git a/src/components/HtmlAttr.jsx b/src/components/HtmlAttr.jsx
@@ -131,22 +131,6 @@ class HtmlAttr extends Component {
             onChange={this.handleChange}
             value={this.state[attr]}
           />
-
-          {/* <TextField
-            id={attr}
-            label={attr}
-            margin="normal"
-            autoFocus
-            // style={(marginLeft = "20px")}
-            onChange={this.handleChange}
-            value={this.state[attr]}
-            InputProps={{
-              className: classes.input
-            }}
-            InputLabelProps={{
-              className: classes.input
-            }}
-          /> */}
         </Grid>
         <Grid item xs={4}>
           <Fab
@@ -160,24 +144,11 @@ class HtmlAttr extends Component {
               marginTop: '5px',
               marginBottom: '10px',
             }}
-            // style={{ maxWidth: "20px" }}
-            // onClick={() => {
-            //   updateHtmlAttr({ attr, value: this.state[attr] });
-            // }}
             onClick={() => this.handleSave(attr)}
           >
             <SaveIcon className={classes.extendedIcon} />
             Save
           </Fab>
-
-          {/* <IconButton
-            aria-label="Update"
-            onClick={() => {
-              updateHtmlAttr({ attr, value: this.state[attr] });
-            }}
-          >
-            <SaveIcon style={{ color: "white" }} />
-          </IconButton> */}
         </Grid>
         <Grid item xs={4}>
           <Paper className={classes.root} elevation={1}>
@@ -188,17 +159,6 @@ class HtmlAttr extends Component {
             <p style={{ color: 'black' }}>
               {focusChild.HTMLInfo[attr] ? focusChild.HTMLInfo[attr] : 'no attribute assigned'}
             </p>
-
-            {/* <TextField
-              disabled
-              id="filled-disabled"
-              label={attr}
-              value={focusChild.HTMLInfo[attr]}
-              style={{ maxWidth: "20px" }}
-              className={classes.textField}
-              margin="normal"
-              // variant="filled"
-            /> */}
           </Paper>
         </Grid>
       </Grid>
diff --git a/src/components/Rectangle.tsx b/src/components/Rectangle.tsx
@@ -54,28 +54,13 @@ class Rectangle extends Component {
   }
 
   setImage = imageSource => {
-    console.log('IMAGE SOURCE', imageSource);
     if (!imageSource) return;
     const image = new window.Image();
-    // image.src = this.props.imagePath;
-    // image.src =
-    //   "/Users/tolgamizrakci/Traceroll/01_Product/02_UI&UX/Assets/Sample Content/Images/71tWqG7nD-L._SX355_.jpg";
-
-    // image.src =
-    //   "https://article.images.consumerreports.org/prod/content/dam/CRO%20Images%202019/Magazine/04April/CR-Cars-InlineHero-TopTen-BMW-X5-2-18v3";
 
     image.src = imageSource;
-    console.log('Image:');
-    console.log('image.height', image.height);
     // if there was an error grtting img; heigth should b Zero
     if (!image.height) return null;
     return image;
-
-    // image.onload = () => {
-    //   // setState will redraw layer
-    //   // because "image" property is changed
-    //   return image;
-    // };
   };
 
   render() {
@@ -98,9 +83,6 @@ class Rectangle extends Component {
       childType,
       imageSource,
     } = this.props;
-    //console.log("first call props", imageSource);
-
-    // const { rectImage } = this.state;
 
     // the Group is responsible for dragging of all children
     // the Rect emits changes to child width and height with help from Transformer
@@ -169,7 +151,6 @@ class Rectangle extends Component {
           components
             .find(comp => comp.title === childComponentName)
             .childrenArray.filter(child => child.childId !== -1)
-            // .sort((a, b) => parseInt(a.childId) - parseInt(b.childId)) // using i within map below, sorting by childId might be necessary
             .map((grandchild, i) => (
               <GrandchildRectangle
                 key={i}
diff --git a/src/containers/AppContainer.tsx b/src/containers/AppContainer.tsx
@@ -6,8 +6,18 @@ import LeftContainer from './LeftContainer';
 import MainContainer from './MainContainer';
 import theme from '../components/theme';
 import { loadInitData } from '../actions/components.js';
+import { ComponentInt, ComponentsInt, ChildInt } from '../utils/interfaces';
 
-const mapStateToProps = store => ({
+type Props = {
+  components: ComponentsInt;
+  focusComponent: ComponentInt;
+  totalComponents: number;
+  loading: boolean;
+  selectableChildren: Array<number>;
+  loadInitData: any;
+};
+
+const mapStateToProps = (store: any) => ({
   components: store.workspace.components,
   totalComponents: store.workspace.totalComponents,
   focusComponent: store.workspace.focusComponent,
@@ -17,31 +27,31 @@ const mapStateToProps = store => ({
 
 const mapDispatchToProps = { loadInitData };
 
-class AppContainer extends Component {
+class AppContainer extends Component<Props> {
   state = {
     width: 25,
     rightColumnOpen: true,
   };
 
-  collapseColumn = () => {
-    if (this.state.width === 25) {
-      this.setState({
-        width: 0,
-        rightColumnOpen: false,
-      });
-    } else {
-      this.setState({
-        width: 25,
-        rightColumnOpen: true,
-      });
-    }
-  };
+  // collapseColumn = () => {
+  //   if (this.state.width === 25) {
+  //     this.setState({
+  //       width: 0,
+  //       rightColumnOpen: false,
+  //     });
+  //   } else {
+  //     this.setState({
+  //       width: 25,
+  //       rightColumnOpen: true,
+  //     });
+  //   }
+  // };
 
   componentDidMount() {
     this.props.loadInitData();
   }
 
-  render() {
+  render(): JSX.Element {
     const { components, focusComponent, loading, selectableChildren } = this.props;
     const { width, rightColumnOpen } = this.state;
 
@@ -53,23 +63,15 @@ class AppContainer extends Component {
         <div className="app-container">
           <LeftContainer
             components={components}
-            // totalComponents={totalComponents}
             focusComponent={focusComponent}
             selectableChildren={selectableChildren}
           />
           <MainContainer
             components={components}
-            collapseColumn={this.collapseColumn}
+            // collapseColumn={this.collapseColumn}
             width={width}
             rightColumnOpen={rightColumnOpen}
-            // totalComponents={totalComponents}
           />
-          {/* <RightContainer
-            width={width}
-            components={updatedComponents}
-            rightColumnOpen={rightColumnOpen}
-            focusComponent={focusComponent}
-          /> */}
           {loading ? (
             <div
               style={{
diff --git a/src/containers/LeftContainer.tsx b/src/containers/LeftContainer.tsx
@@ -10,24 +10,32 @@ import { withStyles } from '@material-ui/core/styles';
 import LeftColExpansionPanel from '../components/LeftColExpansionPanel.jsx';
 import HTMLComponentPanel from '../components/HTMLComponentPanel.jsx';
 import * as actions from '../actions/components';
-const mapDispatchToProps = dispatch => ({
-  addComponent: ({ title }) => dispatch(actions.addComponent({ title })),
-    dispatch(
-      actions.updateComponent({
-        index,
-        newParentId,
-        color,
-        stateful,
-      }),
-    ),
-  addChild: ({ title, childType, HTMLInfo }) => dispatch(actions.addChild({ title, childType, HTMLInfo })),
-  changeFocusComponent: ({ title }) => dispatch(actions.changeFocusComponent({ title })),
-  changeFocusChild: ({ childId }) => dispatch(actions.changeFocusChild({ childId })),
-  deleteComponent: ({ componentId, stateComponents }) =>
+import { ComponentInt, ComponentsInt, ChildInt } from '../utils/interfaces';
+
+type Props = {
+  components: ComponentsInt;
+  focusComponent: ComponentInt;
+  selectableChildren: Array<number>;
+  classes: any;
+
+  addComponent: any;
+  addChild: any;
+  changeFocusComponent: any;
+  changeFocusChild: any;
+  deleteComponent: any;
+};
+
+const mapDispatchToProps = (dispatch: any) => ({
+  addComponent: ({ title }: { title: string }) => dispatch(actions.addComponent({ title })),
+  addChild: ({ title, childType, HTMLInfo }: { title: string; childType: string; HTMLInfo: object }) =>
+    dispatch(actions.addChild({ title, childType, HTMLInfo })),
+  changeFocusComponent: ({ title }: { title: string }) => dispatch(actions.changeFocusComponent({ title })),
+  changeFocusChild: ({ childId }: { childId: number }) => dispatch(actions.changeFocusChild({ childId })),
+  deleteComponent: ({ componentId, stateComponents }: { componentId: number; stateComponents: ComponentsInt }) =>
     dispatch(actions.deleteComponent({ componentId, stateComponents })),
 });
 
-class LeftContainer extends Component {
+class LeftContainer extends Component<Props> {
   state = {
     componentName: '',
   };
@@ -45,7 +53,7 @@ class LeftContainer extends Component {
     });
   };
 
-  render() {
+  render(): JSX.Element {
     const {
       components,
       updateComponent,
@@ -61,7 +69,7 @@ class LeftContainer extends Component {
     const { componentName } = this.state;
 
     const componentsExpansionPanel = components
-      .sort((a, b) => parseInt(b.id) - parseInt(a.id)) // sort by id value of comp
+      .sort((b: ComponentInt, a: ComponentInt) => b.id - a.id) // sort by id value of comp
       .map((component, i) => (
         <LeftColExpansionPanel
           key={component.id}
@@ -128,10 +136,6 @@ class LeftContainer extends Component {
 
 function styles() {
   return {
-    // htmlCompWrapper: {
-    //   bottom: 0,
-    //   height: "200px"
-    // },
     cssLabel: {
       color: 'white',
 
diff --git a/src/containers/MainContainer.tsx b/src/containers/MainContainer.tsx
@@ -20,7 +20,6 @@ import {
 import KonvaStage from '../components/KonvaStage';
 import MainContainerHeader from '../components/MainContainerHeader';
 import createModal from '../utils/createModal.util';
-import SortChildren from '../components/SortChildren.jsx';
 
 const IPC = require('electron').ipcRenderer;
 
@@ -52,7 +51,6 @@ const mapDispatchToProps = dispatch => ({
 });
 
 const mapStateToProps = store => ({
-  // totalComponents: store.workspace.totalComponents,
   focusComponent: store.workspace.focusComponent,
   focusChild: store.workspace.focusChild,
   stateComponents: store.workspace.components,
@@ -97,50 +95,6 @@ class MainContainer extends Component {
     });
   }
 
-  // setImage = () => {
-  //   const image = new window.Image();
-  //   image.src = this.props.imagePath;
-  //   image.onload = () => {
-  //     // setState will redraw layer
-  //     // because "image" property is changed
-  //     this.setState({
-  //       image,
-  //     });
-  //   };
-  // };
-
-  // componentDidMount() {
-  //   this.setImage();
-  // }
-
-  // updateImage = () => {
-  //   IPC.send('update-file');
-  // };
-
-  // deleteImage = () => {
-  //   this.props.changeImagePath('');
-  //   this.setState({ image: '' });
-  // };
-
-  closeModal = () => this.setState({ modal: null });
-
-  chooseAppDir = () => IPC.send('choose_app_dir');
-
-  // showImageDeleteModal = () => {
-  //   const { closeModal, deleteImage } = this;
-  //   this.setState({
-  //     modal: createModal({
-  //       closeModal,
-  //       message: 'Are you sure you want to delete image?',
-  //       secBtnLabel: 'Delete',
-  //       secBtnAction: () => {
-  //         deleteImage();
-  //         closeModal();
-  //       },
-  //     }),
-  //   });
-  // };
-
   chooseGenOptions = genOption => {
     // set option
     this.setState({ genOption });
@@ -247,25 +201,6 @@ class MainContainer extends Component {
               classes={classes}
             />
           </div>
-
-          <div className="button-wrapper" style={{ background: 'rgba(76, 175, 80, 0)' }}>
-            <Button onClick={deleteChild} style={{ width: '150px', display: 'inline-block' }}>
-              delete child
-            </Button>
-
-            <Button
-              style={{ width: '180px', display: 'inline-block' }}
-              onClick={() =>
-                deleteComponent({
-                  componentId: focusComponent.id,
-                  stateComponents,
-                })
-              }
-            >
-              delete component
-            </Button>
-            <span>{directParents ? `Used in: ${directParents}` : 'Not used in any other component'}</span>
-          </div>
           <BottomPanel focusComponent={focusComponent} />
         </div>
       </MuiThemeProvider>
diff --git a/src/containers/xxxRightContainer.jsx b/src/containers/xxxRightContainer.jsx
diff --git a/src/utils/XXXconvertIdsToObjs.util.js b/src/utils/XXXconvertIdsToObjs.util.js
diff --git a/src/utils/componentReducer.util.ts b/src/utils/componentReducer.util.ts
