electron build with tsx containers working

src/components/App.tsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import '../public/styles/style.css';
 import { MuiThemeProvider } from '@material-ui/core/styles';
 import theme from './theme';
-import AppContainer from '../containers/AppContainer.jsx';
+import AppContainer from '../containers/AppContainer.tsx';
 
 interface Adam {
   goodguy: boolean;

src/components/KonvaStage.jsx → src/components/KonvaStage.tsx

@@ -1,10 +1,10 @@
 import React, { Component, createRef } from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import {
   Stage, Layer, Image, Group,
 } from 'react-konva';
-import TransformerComponent from './TransformerComponent.jsx';
-import Rectangle from './Rectangle.jsx';
+import TransformerComponent from './TransformerComponent.tsx';
+import Rectangle from './Rectangle.tsx';
 
 
 class KonvaStage extends Component {
@@ -42,6 +42,7 @@ class KonvaStage extends Component {
     }
   };
 
+  //  WAS ALREADY COMMENTED OUT
   // handleStageDrag = () => {
   //   // const mainWindowHeight = this.main.current.clientHeight;
   //   // const mainWindowWidth = this.main.current.clientWidth;
@@ -54,7 +55,7 @@ class KonvaStage extends Component {
   // }
 
   componentDidMount() {
-    this.props.setImage();
+    // this.props.setImage();
   }
 
   render() {
@@ -105,19 +106,19 @@ class KonvaStage extends Component {
   }
 }
 
-KonvaStage.propTypes = {
-  draggable: PropTypes.bool.isRequired,
-  components: PropTypes.array.isRequired,
-  handleTransform: PropTypes.func.isRequired,
-  image: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object,
-  ]),
-  scaleX: PropTypes.number.isRequired,
-  scaleY: PropTypes.number.isRequired,
-  openExpansionPanel: PropTypes.func.isRequired,
-  setImage: PropTypes.func.isRequired,
-  focusComponent: PropTypes.object.isRequired,
-};
+// KonvaStage.propTypes = {
+//   draggable: PropTypes.bool.isRequired,
+//   components: PropTypes.array.isRequired,
+//   handleTransform: PropTypes.func.isRequired,
+//   image: PropTypes.oneOfType([
+//     PropTypes.string,
+//     PropTypes.object,
+//   ]),
+//   scaleX: PropTypes.number.isRequired,
+//   scaleY: PropTypes.number.isRequired,
+//   openExpansionPanel: PropTypes.func.isRequired,
+//   setImage: PropTypes.func.isRequired,
+//   focusComponent: PropTypes.object.isRequired,
+// };
 
 export default KonvaStage;

src/components/RightTabs.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
@@ -87,11 +87,11 @@ class RightTabs extends Component {
           onChange={this.handleChange}
           classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
         >
-          <Tab
+          {/* <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="Hierarchy"
-          />
+          /> */}
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
@@ -107,8 +107,8 @@ class RightTabs extends Component {
             }
           />
         </Tabs>
-        {value === 0 && <SortableComponent components={components} />}
-        {value === 1 && <Props
+        {/* {value === 0 && <SortableComponent components={components} />} */}
+        {value === 0 && <Props
           rightColumnOpen={rightColumnOpen}
           focusComponent={focusComponent}
           deleteProp={deleteProp}
@@ -120,13 +120,13 @@ class RightTabs extends Component {
   }
 }
 
-RightTabs.propTypes = {
-  classes: PropTypes.object.isRequired,
-  components: PropTypes.array.isRequired,
-  focusComponent: PropTypes.object.isRequired,
-  deleteProp: PropTypes.func.isRequired,
-  addProp: PropTypes.func.isRequired,
-  rightColumnOpen: PropTypes.bool.isRequired,
-};
+// RightTabs.propTypes = {
+//   classes: PropTypes.object.isRequired,
+//   components: PropTypes.array.isRequired,
+//   focusComponent: PropTypes.object.isRequired,
+//   deleteProp: PropTypes.func.isRequired,
+//   addProp: PropTypes.func.isRequired,
+//   rightColumnOpen: PropTypes.bool.isRequired,
+// };
 
 export default withStyles(styles)(RightTabs);

src/components/Snackbars.jsx

@@ -1,60 +1,60 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Button from '@material-ui/core/Button';
-import Snackbar from '@material-ui/core/Snackbar';
-import SnackbarContentWrapper from './SnackbarContentWrapper.jsx';
+// import React from 'react';
+// import PropTypes from 'prop-types';
+// import Button from '@material-ui/core/Button';
+// import Snackbar from '@material-ui/core/Snackbar';
+// import SnackbarContentWrapper from './SnackbarContentWrapper.jsx';
 
-const Snackbars = (props) => {
-  const {
-    successOpen, errorOpen, handleNotificationClose, msg, viewAppDir,
-  } = props;
-  const successMsg = <div>Your files were successfully created. <Button
-      variant='fab'
-      mini
-      aria-label='View app directory'
-      onClick={viewAppDir}
-    >View</Button></div>;
-  const errMsg = `There was an error while creating your files. ${msg}`;
-  return (
-    <div>
-      <Snackbar
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left',
-        }}
-        open={successOpen}
-        autoHideDuration={5000}
-      >
-        <SnackbarContentWrapper
-          onClose={handleNotificationClose}
-          variant="success"
-          message={successMsg}
-        />
-      </Snackbar>
-      <Snackbar
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left',
-        }}
-        open={errorOpen}
-        autoHideDuration={5000}
-      >
-        <SnackbarContentWrapper
-          onClose={handleNotificationClose}
-          variant="error"
-          message={errMsg}
-        />
-      </Snackbar>
-    </div>
-  );
-};
+// const Snackbars = (props) => {
+//   const {
+//     successOpen, errorOpen, handleNotificationClose, msg, viewAppDir,
+//   } = props;
+//   const successMsg = <div>Your files were successfully created. <Button
+//       variant='fab'
+//       mini
+//       aria-label='View app directory'
+//       onClick={viewAppDir}
+//     >View</Button></div>;
+//   const errMsg = `There was an error while creating your files. ${msg}`;
+//   return (
+//     <div>
+//       <Snackbar
+//         anchorOrigin={{
+//           vertical: 'bottom',
+//           horizontal: 'left',
+//         }}
+//         open={successOpen}
+//         autoHideDuration={5000}
+//       >
+//         <SnackbarContentWrapper
+//           onClose={handleNotificationClose}
+//           variant="success"
+//           message={successMsg}
+//         />
+//       </Snackbar>
+//       <Snackbar
+//         anchorOrigin={{
+//           vertical: 'bottom',
+//           horizontal: 'left',
+//         }}
+//         open={errorOpen}
+//         autoHideDuration={5000}
+//       >
+//         <SnackbarContentWrapper
+//           onClose={handleNotificationClose}
+//           variant="error"
+//           message={errMsg}
+//         />
+//       </Snackbar>
+//     </div>
+//   );
+// };
 
-Snackbars.propTypes = {
-  successOpen: PropTypes.bool.isRequired,
-  errorOpen: PropTypes.bool.isRequired,
-  msg: PropTypes.string.isRequired,
-  viewAppDir: PropTypes.func.isRequired,
-  handleNotificationClose: PropTypes.func.isRequired,
-};
+// Snackbars.propTypes = {
+//   successOpen: PropTypes.bool.isRequired,
+//   errorOpen: PropTypes.bool.isRequired,
+//   msg: PropTypes.string.isRequired,
+//   viewAppDir: PropTypes.func.isRequired,
+//   handleNotificationClose: PropTypes.func.isRequired,
+// };
 
-export default Snackbars;
+// export default Snackbars;

src/containers/AppContainer.jsx → src/containers/AppContainer.tsx

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import { MuiThemeProvider } from '@material-ui/core/styles';
 import LinearProgress from '@material-ui/core/LinearProgress';
-import LeftContainer from './LeftContainer.jsx';
-import MainContainer from './MainContainer.jsx';
-import RightContainer from './RightContainer.jsx';
+import LeftContainer from './LeftContainer.tsx';
+import MainContainer from './MainContainer.tsx';
+import RightContainer from './RightContainer.tsx';
 import convertIdsToObjs from '../utils/convertIdsToObjs.util';
 import theme from '../components/theme';
 import { loadInitData } from '../actions/components';
@@ -86,10 +86,10 @@ class AppContainer extends Component {
 
 export default connect(mapStateToProps, mapDispatchToProps)(AppContainer);
 
-AppContainer.propTypes = {
-  components: PropTypes.array.isRequired,
-  totalComponents: PropTypes.number.isRequired,
-  focusComponent: PropTypes.object.isRequired,
-  loadInitData: PropTypes.func.isRequired,
-  loading: PropTypes.bool,
-};
+// AppContainer.propTypes = {
+//   components: PropTypes.array.isRequired,
+//   totalComponents: PropTypes.number.isRequired,
+//   focusComponent: PropTypes.object.isRequired,
+//   loadInitData: PropTypes.func.isRequired,
+//   loading: PropTypes.bool,
+// };