Merge pull request #84 from ShlomoPorges/development

types in components

Author: ShlomoPorges

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>
-//       );
-//     }
-//   }

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;
 

src/components/HtmlAttr.jsx

@@ -141,22 +141,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
@@ -170,24 +154,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}>
@@ -200,17 +171,6 @@ class HtmlAttr extends Component {
                 ? 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>

src/components/Rectangle.jsx

@@ -58,28 +58,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() {
@@ -102,9 +87,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
@@ -185,7 +167,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}

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;
@@ -55,23 +65,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={{

src/containers/LeftContainer.tsx

@@ -9,27 +9,30 @@ import { withStyles } from '@material-ui/core/styles';
 import LeftColExpansionPanel from '../components/LeftColExpansionPanel';
 import HTMLComponentPanel from '../components/HTMLComponentPanel';
 import * as actions from '../actions/components';
+import {ComponentInt, ComponentsInt, ChildInt} from '../utils/interfaces'
 
-const mapDispatchToProps = dispatch => ({
-  addComponent: ({ title }) => dispatch(actions.addComponent({ title })),
-  updateComponent: ({
-    id, index, newParentId = null, color = null, stateful = null,
-  }) => dispatch(
-    actions.updateComponent({
-      id,
-      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 }) => dispatch(actions.deleteComponent({ componentId, stateComponents })),
+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: '',
   };
@@ -47,7 +50,7 @@ class LeftContainer extends Component {
     });
   };
 
-  render() {
+  render()  : JSX.Element  {
     const {
       components,
       deleteComponent,
@@ -61,7 +64,7 @@ class LeftContainer extends Component {
     const { componentName } = this.state;
 
     const componentsExpansionPanel = components
-      .sort((b, a) => 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}
@@ -134,10 +137,6 @@ class LeftContainer extends Component {
 
 function styles() {
   return {
-    // htmlCompWrapper: {
-    //   bottom: 0,
-    //   height: "200px"
-    // },
     cssLabel: {
       color: 'white',