staging for pulling upstream for merging of team code

Author: ibeeliot

package.json

@@ -73,6 +73,7 @@
     "build-bin": "electron-builder -mwl",
     "test": "cross-env NODE_ENV=test jest --verbose",
     "test:clear": "cross-env NODE_ENV=test jest --clearCache",
+    "test:update-snap": "cross-env NODE_ENV=test jest --updateSnapshot",
     "linter": "eslint src",
     "develop": "concurrently \"npm run dev\" \"npm run electron\""
   },
@@ -92,7 +93,7 @@
       "js"
     ],
     "transform": {
-      "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
+      "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest"
     },
     "testRegex": "/__tests__/.*\\.(ts|tsx|js)$",
     "globals": {

src/actions/__tests__/actionCreator.test.tsx

@@ -0,0 +1,49 @@
+import * as actions from '../actionCreators';
+import * as types from '../../actionTypes/index';
+
+describe('Testing All of The Action Creators', () => {
+  it('addComponent returns a proper action', () => {
+    const payld = { title: 'Test' };
+    const expectedAction = {
+      type: types.ADD_COMPONENT,
+      payload: payld
+    };
+    expect(actions.addComponent(payld)).toEqual(expectedAction);
+  });
+
+  it('addChild returns a proper action', () => {
+    const payld = { title: 'Test', childType: 'COMP', HTMLInfo: {} };
+    const expectedAction = {
+      type: types.ADD_CHILD,
+      payload: payld
+    };
+    expect(actions.addChild(payld)).toEqual(expectedAction);
+  });
+
+  it('addProp returns a proper action', () => {
+    const payld = { key: 'Test', type: 'string' };
+    const expectedAction = {
+      type: types.ADD_PROP,
+      payload: payld
+    };
+    expect(actions.addProp(payld)).toEqual(expectedAction);
+  });
+
+  it('changeTutorial returns a proper action', () => {
+    const payld = 1;
+    const expectedAction = {
+      type: types.CHANGE_TUTORIAL,
+      payload: { tutorial: payld }
+    };
+    expect(actions.changeTutorial(payld)).toEqual(expectedAction);
+  });
+
+  it('changeImagePath returns a proper action', () => {
+    const payld = 'test/path';
+    const expectedAction = {
+      type: types.CHANGE_IMAGE_SOURCE,
+      payload: { imageSource: payld }
+    };
+    expect(actions.changeImagePath(payld)).toEqual(expectedAction);
+  });
+});

src/actions/actionCreators.ts

@@ -52,16 +52,22 @@ export const addChild = ({
   title: string;
   childType: string;
   HTMLInfo: object;
-}) => (dispatch: (arg: Action) => void) => {
-  dispatch({ type: ADD_CHILD, payload: { title, childType, HTMLInfo } });
-};
-
-export const addComponent = ({ title }: { title: string }) => (
-  dispatch: (arg: Action) => void
-) => {
-  dispatch({ type: ADD_COMPONENT, payload: { title } });
-};
+}): {
+  type: string;
+  payload: { title: string; childType: string; HTMLInfo: object };
+} => ({ type: ADD_CHILD, payload: { title, childType, HTMLInfo } });
 
+export const addComponent = ({
+  title
+}: {
+  title: string;
+}): {
+  type: string;
+  payload: { title: string };
+} => ({
+  type: ADD_COMPONENT,
+  payload: { title }
+});
 export const addProp = ({ key, type }: { key: string; type: string }) => ({
   type: ADD_PROP,
   payload: { key, type }
@@ -102,7 +108,6 @@ export const changeFocusChild = ({ childId }: { childId: number }) => (
   dispatch({ type: CHANGE_FOCUS_CHILD, payload: { childId } });
 };
 
-
 export const changeFocusComponent = ({ title }: { title: string }) => (
   dispatch: (arg: Action) => void
 ) => {
@@ -168,7 +173,6 @@ export const deleteAllData = () => ({
   type: DELETE_ALL_DATA
 });
 
-
 export const deleteComponent = ({
   componentId,
   stateComponents
@@ -306,7 +310,7 @@ export const toggleEditMode = ({ id }: { id: number }) => (
 };
 
 export const toggleNative = () => ({
-  type: TOGGLE_NATIVE,
+  type: TOGGLE_NATIVE
 });
 
 export const undo = () => ({

src/components/bottom/BottomTabs.tsx

@@ -137,6 +137,13 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
         tree.children.push(
           this.generateComponentTree(child.childComponentId, components)
         );
+      } else if (child.componentName.slice(0, 2) == 'RN') {
+        let str = { Type: 'React Native Component' };
+        tree.children.push({
+          name: child.componentName,
+          attributes: str,
+          children: []
+        });
       } else {
         let str = { Type: 'HTML Element' };
         tree.children.push({

src/components/left/SimpleModal.tsx

@@ -12,20 +12,20 @@ const styles = (theme: any): any => ({
     width: 'auto',
     maxWidth: '500px',
     height: 'auto',
-    maxHeight: '300px',
+    maxHeight: '500px',
     backgroundColor: theme.palette.background.paper,
     boxShadow: theme.shadows[5],
     padding: '4%',
     minWidth: '500px',
-    minHeight: '300px',
+    minHeight: '300px'
   },
   button: {
     marginTop: '0%',
     height: 'auto',
     marginLeft: '3%',
     borderRadius: '4px',
-    float: 'right',
-  },
+    float: 'right'
+  }
 });
 
 const SimpleModal = (props: any) => {
@@ -38,7 +38,7 @@ const SimpleModal = (props: any) => {
     primBtnAction,
     secBtnAction,
     closeModal,
-    children = null,
+    children = null
   } = props;
 
   return (
@@ -53,7 +53,7 @@ const SimpleModal = (props: any) => {
           style={{
             top: '50%',
             left: '50%',
-            transform: 'translate(-50%, -50%)',
+            transform: 'translate(-50%, -50%)'
           }}
           className={classes.paper}
         >
@@ -65,7 +65,7 @@ const SimpleModal = (props: any) => {
               top: '2%',
               right: '1%',
               fontSize: '17px',
-              fontWeight: 'bold',
+              fontWeight: 'bold'
             }}
           >
             <CloseIcon />

src/reducers/bottomReducers.ts

@@ -7,6 +7,7 @@ import {
   PropInt
 } from '../interfaces/Interfaces';
 import { createHistory } from '../helperFunctions/createHistory';
+import { initialApplicationState } from './initialState';
 
 export const addProp = (
   state: ApplicationStateInt,
@@ -112,13 +113,23 @@ export const toggleCodeEdit = (state: ApplicationStateInt) => ({
 });
 
 export const toggleNative = (state: ApplicationStateInt) => {
-  const components = cloneDeep(state.components);
-  const app = components.find(e => e.id === 1);
+  let check = window.confirm(
+    `Are you sure you want to switch to ${
+      state.native ? 'React Mode' : 'React Native Mode'
+    }?\n\nSwitching to ${
+      state.native ? 'React Mode' : 'React Native Mode'
+    } will clear the workspace!\n\nMake sure to export your current code before changing modes!`
+  );
+  if (!check) {
+    return { ...state };
+  }
+  const components = cloneDeep(initialApplicationState.components);
+  const app = components.find((e: ComponentInt) => e.id === 1);
   app.position.width = !state.native ? 500 : 1200;
   app.position.height = !state.native ? 850 : 800;
 
   return {
-    ...state,
+    ...initialApplicationState,
     native: !state.native,
     components
   };

src/reducers/leftReducers.ts

@@ -502,7 +502,11 @@ export const exportFilesError = (
   loading: false
 });
 
-//Reducer that toggles the component class
+/*
+Reducer that toggles the component class
+lets the user choose whether the current 
+component is a class components or not
+*/
 export const toggleComponentClass = (
   state: ApplicationStateInt,
   { id }: { id: number }