rolled back main container, removed applicationAction, added back MainContainerHeader. Current export function works

main.js

@@ -44,6 +44,7 @@ function exportComponents() {
 ipcMain.on('choose_app_dir', (event) => {
   const directory = dialog.showOpenDialog(mainWindow, {
     properties: ['openDirectory'],
+    buttonLabel: 'Export',
   });
 
   if (!directory) return;

package.json

@@ -79,6 +79,7 @@
     "@material-ui/icons": "^2.0.0",
     "@types/react": "^16.8.14",
     "@types/react-dom": "^16.8.4",
+    "@types/react-redux": "^7.0.8",
     "autoprefixer": "^9.0.1",
     "babel-polyfill": "^6.26.0",
     "classnames": "^2.2.6",

src/components/App.jsx → src/components/App.tsx

@@ -1,8 +1,8 @@
 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 theme from './theme.ts';
+import AppContainer from '../containers/AppContainer.tsx';
 
 class App extends Component {
   render() {

src/components/HTMLComponentPanel.jsx

@@ -10,8 +10,8 @@ import ButtonIcon from "@material-ui/icons/EditAttributes";
 import LinkIcon from "@material-ui/icons/Link";
 import ListIcon from "@material-ui/icons/List";
 import ParagraphIcon from "@material-ui/icons/LocalParking";
-import theme from "../components/theme";
-import Typography from "@material-ui/core/Typography";
+import theme from "../components/theme.ts";
+import Typography from '@material-ui/core/Typography';
 import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
 // import {HTMLelements,getSize} from "../utils/htmlElements.util";

src/components/ApplicationActions.jsx → src/components/MainContainerHeader.jsx

@@ -1,52 +1,53 @@
-import React from "react";
+import React from 'react';
 // import PropTypes from 'prop-types';
-import Button from "@material-ui/core/Button";
-import ZoomInIcon from "@material-ui/icons/ZoomIn";
-import ZoomOutIcon from "@material-ui/icons/ZoomOut";
-import ImageSearchIcon from "@material-ui/icons/ImageSearch";
-import OpenWithIcon from "@material-ui/icons/OpenWith";
-import KeyboardArrowLeftIcon from "@material-ui/icons/KeyboardArrowLeft";
-import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
-import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
-import GetAppIcon from "@material-ui/icons/GetApp";
-import { withStyles } from "@material-ui/core/styles";
-import Tooltip from "@material-ui/core/Tooltip";
+import Button from '@material-ui/core/Button';
+import ZoomInIcon from '@material-ui/icons/ZoomIn';
+import ZoomOutIcon from '@material-ui/icons/ZoomOut';
+import ImageSearchIcon from '@material-ui/icons/ImageSearch';
+import OpenWithIcon from '@material-ui/icons/OpenWith';
+import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
+import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
+import DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';
+import GetAppIcon from '@material-ui/icons/GetApp';
+import { withStyles } from '@material-ui/core/styles';
+import Tooltip from '@material-ui/core/Tooltip';
 
 const styles = () => ({
   iconSmall: {
-    fontSize: 10
+    fontSize: 10,
   },
   button: {
     // borderRight: '1px solid grey',
-    borderRadius: "0px",
-    backgroundColor: "#212121",
+    borderRadius: '0px',
+    backgroundColor: '#212121',
 
-    "&:hover > span > svg": {
-      color: "#1de9b6",
-      transition: "all .2s ease"
+    '&:hover > span > svg': {
+      color: '#1de9b6',
+      transition: 'all .2s ease',
     },
-    "&:hover": {
-      backgroundColor: "#212121"
+    '&:hover': {
+      backgroundColor: '#212121',
     },
-    "&:disabled": {
-      backgroundColor: "#424242"
+    '&:disabled': {
+      backgroundColor: '#424242',
     },
 
-    "&:disabled > span > svg": {
-      color: "#eee",
-      opacity: "0.3"
-    }
+    '&:disabled > span > svg': {
+      color: '#eee',
+      opacity: '0.3',
+    },
   },
   light: {
-    color: "#eee"
+    color: '#eee',
     // opacity: '0.7',
   },
   dark: {
-    color: "#1de9b6"
-  }
+    color: '#1de9b6',
+  },
 });
 
-const MainContainerHeader = props => {
+
+const MainContainerHeader = (props) => {
   const {
     classes,
     image,
@@ -55,13 +56,13 @@ const MainContainerHeader = props => {
     totalComponents,
     showGenerateAppModal,
     collapseColumn,
-    rightColumnOpen
+    rightColumnOpen,
   } = props;
 
   return (
     <div className="main-header">
       <div className="main-header-buttons">
-        <Tooltip title="remove image">
+        {/* <Tooltip title="remove image">
           <div>
             <Button
               disabled={!image}
@@ -73,18 +74,14 @@ const MainContainerHeader = props => {
             </Button>
           </div>
         </Tooltip>
-        <Tooltip title={image ? "update image" : "upload image"}>
+        <Tooltip title={image ? 'update image' : 'upload image'}>
           <div>
-            <Button
-              color="default"
-              className={classes.button}
-              onClick={updateImage}
-            >
+            <Button color="default" className={classes.button} onClick={updateImage}>
               <ImageSearchIcon className={classes.light} />
             </Button>
           </div>
-        </Tooltip>
-        <Tooltip title={"export"}>
+        </Tooltip> */}
+        <Tooltip title={'export'}>
           <div>
             <Button
               color="default"
@@ -115,4 +112,4 @@ const MainContainerHeader = props => {
 //   toggleClass: PropTypes.bool.isRequired,
 // };
 
-export default withStyles(styles)(MainContainerHeader);
+export default withStyles(styles)(MainContainerHeader);

src/components/__tests__/App.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
 // import '../../setupTests';
 import { shallow } from 'enzyme';
-import App from '../App.jsx';
-import AppContainer from '../../containers/AppContainer.jsx';
+import App from '../App.tsx';
+import AppContainer from '../../containers/AppContainer.tsx';
 
 it('contains a AppContainer', () => {
   // wrapped version of react component

src/components/theme.js → src/components/theme.ts

@@ -1,8 +1,18 @@
 import { createMuiTheme } from '@material-ui/core/styles';
 // import teal from '@material-ui/core/colors/teal';
 import indigo from '@material-ui/core/colors/indigo';
+import { Palette } from '@material-ui/core/styles/createPalette';
 
-const theme = createMuiTheme({
+interface palette {
+  primary: object;
+  secondary: any;
+}
+
+interface theme {
+  palette: palette;
+}
+
+const theme: theme = createMuiTheme({
   palette: {
     primary: {
       light: '#00e676',

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

@@ -7,7 +7,7 @@ import LeftContainer from './LeftContainer.jsx';
 import MainContainer from './MainContainer.jsx';
 import RightContainer from './RightContainer.jsx';
 import convertIdsToObjs from '../utils/convertIdsToObjs.util';
-import theme from '../components/theme';
+import theme from '../components/theme.ts';
 import { loadInitData } from '../actions/components';
 
 const mapStateToProps = store => ({

src/containers/LeftContainer.jsx

@@ -10,7 +10,7 @@ import Grid from "@material-ui/core/Grid";
 import { withStyles } from "@material-ui/core/styles";
 import LeftColExpansionPanel from "../components/LeftColExpansionPanel.jsx";
 import HTMLComponentPanel from "../components/HTMLComponentPanel.jsx";
-import ApplicationActions from "../components/ApplicationActions.jsx";
+// import ApplicationActions from "../components/ApplicationActions.jsx";
 
 // import createModal from '../utils/createModal.util';
 import * as actions from "../actions/components";
@@ -150,10 +150,10 @@ class LeftContainer extends Component {
           focusComponent={focusComponent}
           addChild={addChild}
         />
-        <ApplicationActions
-        // showImageDeleteModal={showImageDeleteModal}
-        // showGenerateAppModal={showGenerateAppModal}
-        />
+        {/* <ApplicationActions
+        showImageDeleteModal={showImageDeleteModal}
+        showGenerateAppModal={showGenerateAppModal}
+        /> */}
         {/* </div> */}
       </div>
     );