fixed merging issues

Author: sean1292

.gitignore

@@ -1,5 +1,6 @@
 # Created by https://www.gitignore.io/api/node,linux,macos,windows,visualstudio,yarn
 yarn.lock
+package-lock.json
 ### Linux ###
 *~
 

main.js

@@ -1,12 +1,20 @@
 const path = require('path');
 
-const { app, BrowserWindow, Menu, shell, dialog, ipcMain } = require('electron');
+const {
+  app,
+  BrowserWindow,
+  Menu,
+  shell,
+  dialog,
+  ipcMain
+} = require('electron');
 
 // Uncomment below for hot reloading during development
 // require('electron-reload')(__dirname);
 
 // const isDev = true;
-const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
+const isDev =
+  process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -139,7 +147,8 @@ const createWindow = () => {
       submenu: [
         {
           label: 'Toggle Developer Tools',
-          accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
+          accelerator:
+            process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
           click() {
             mainWindow.webContents.toggleDevTools();
           }
@@ -195,6 +204,9 @@ const createWindow = () => {
     // when you should delete the corresponding element.
     mainWindow = null;
   });
+
+  // dev tools opened on every browser creation
+  mainWindow.webContents.openDevTools();
 };
 
 // This method will be called when Electron has finished

package-lock.json

@@ -88,9 +88,11 @@
   "dependencies": {
     "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^2.0.0",
+    "@types/prettier": "^1.19.0",
     "@types/react": "^16.8.14",
     "@types/react-dom": "^16.8.4",
     "@types/react-redux": "^7.0.8",
+    "@types/react-syntax-highlighter": "^11.0.4",
     "autoprefixer": "^9.0.1",
     "babel-polyfill": "^6.26.0",
     "classnames": "^2.2.6",

package.json

@@ -1,6 +1,6 @@
 import {
-  ComponentInt, ComponentsInt, PropInt, ChildInt, Action, ApplicationStateInt, LoadInitData, AddComponent
-} from '../utils/Interfaces.ts';
+  ComponentInt, ComponentsInt, PropInt, ChildInt, Action
+} from '../utils/Interfaces';
 
 import {
   LOAD_INIT_DATA,
@@ -26,14 +26,14 @@ import {
   ADD_PROP,
   DELETE_ALL_DATA,
   UPDATE_HTML_ATTR,
-  UPDATE_CHILDREN_SORT,
+ // UPDATE_CHILDREN_SORT, --The reason why this is commented out is because of the unused reducer of the same name, for the component that is unfinished with the same name. Check out the Sort Children component to see what it does.
   CHANGE_IMAGE_SOURCE,
   DELETE_IMAGE
-} from '../actionTypes/index.ts';
+} from '../actionTypes/index';
 
-import { loadState } from '../localStorage';
-import createFiles from '../utils/createFiles.util.ts';
-import createApplicationUtil from '../utils/createApplication.util.ts';
+import { loadState } from '../localStorage'; //this is a warning from 'localStorage' being a .js file instead of .ts. Convert to .ts to remove this warning.
+import createFiles from '../utils/createFiles.util';
+import createApplicationUtil from '../utils/createApplication.util';
 
 export const changeImagePath = (imageSource: string) => ({
   type: CHANGE_IMAGE_SOURCE,
@@ -51,7 +51,7 @@ export const loadInitData = () => (dispatch: (arg: Action) => void) => {
   });
 };
 
-export const addComponent = ({ title }: { title: string }) => (dispatch: (arg: AddComponent) => void) => {
+export const addComponent = ({ title }: { title: string }) => (dispatch: (arg: Action) => void) => {
   dispatch({ type: ADD_COMPONENT, payload: { title } });
 };
 
@@ -81,7 +81,7 @@ export const deleteComponent = ({
 }) => (dispatch: (arg: Action) => void) => {
   // find all places where the "to be deleted" is a child and do what u gotta do
   stateComponents.forEach((parent: ComponentInt) => {
-    parent.childrenArray
+    parent.childrenArrayChildInt
       .filter((child: ChildInt) => child.childComponentId === componentId)
       .forEach((child: ChildInt) => {
         dispatch({
@@ -146,9 +146,8 @@ export const exportFiles = ({
   dispatch({
     type: EXPORT_FILES
   });
-
   createFiles(components, path, appName, exportAppBool)
-    .then((dir: string) =>
+    .then((dir: any) =>
       dispatch({
         type: EXPORT_FILES_SUCCESS,
         payload: { status: true, dir: dir[0] }
@@ -195,7 +194,7 @@ export const createApplication = ({
   genOption: number;
   appName: string;
   exportAppBool: boolean;
-}) => (dispatch: (arg: Action) => void) => {
+}) => (dispatch: (arg: any) => void) => {
   if (genOption === 0) {
     exportAppBool = false;
     dispatch(

src/actions/components.ts

@@ -3,7 +3,7 @@ import '../public/styles/style.css';
 import AppContainer from '../containers/AppContainer';
 
 export const App: React.SFC = () => (
-  <div className="app">
+  <div className='app'>
     <div>
       <header style={{ height: '40px', width: '100%' }}>ReacType</header>
       <AppContainer />

src/components/App.tsx

@@ -26,7 +26,13 @@ class CodePreview extends Component<Props> {
         }}
       >
         <SyntaxHighlighter style={hybrid}>
-          {format(componentRender(focusComponent, components))}}
+          {format(componentRender(focusComponent, components), {
+          singleQuote: true,
+          trailingComma: 'es5',
+          bracketSpacing: true,
+          jsxBracketSameLine: true,
+          parser: 'typescript'
+        })}
         </SyntaxHighlighter>
       </div>
     );

src/components/CodePreview.tsx

@@ -2,6 +2,11 @@ import React, { Component } from "react";
 import { Rect, Group } from "react-konva";
 import { ComponentsInt, ComponentInt, ChildInt } from "../utils/Interfaces.ts";
 
+//////////////////////////////////////////////////////////////////////////////
+/////Logic in this component is mainly the same as Rectangle.tsx./////////////
+/////Not going to bother commenting too much in here for this reason./////////
+//////////////////////////////////////////////////////////////////////////////
+
 interface PropsInt {
   x: number;
   y: number;
@@ -45,6 +50,7 @@ class GrandchildRectangle extends Component<PropsInt, StateInt> {
     );
   }
 
+  //pretty sure this does nothing here because an image source is never passed down this deep...
   setImage = (imageSource: string): void => {
     if (!imageSource) return;
     const image = new window.Image();
@@ -75,7 +81,7 @@ class GrandchildRectangle extends Component<PropsInt, StateInt> {
     // the Rect emits changes to child width and height with help from Transformer
     return (
       <Group
-        draggable={false}
+        draggable={false} //this logic is necessary to make sure the user can't click on any grandchildren
         x={x}
         y={y}
         scaleX={scaleX}