Merge pull request #54 from ibeeliot/master

Import "react-native" syntax fixed for React Native Components

Author: sean1292

src/components/left/HTMLComponentPanel.tsx

@@ -12,6 +12,7 @@ import Grid from '@material-ui/core/Grid';
 interface HTMLCompPropsInt {
   classes: any;
   addChild: any;
+  native: boolean;
 }
 
 interface StateInt {
@@ -35,7 +36,6 @@ class HTMLComponentPanel extends Component<HTMLCompPropsInt, StateInt> {
 
   render(): JSX.Element {
     const { classes } = this.props;
-
     // refactor of HTML elements panel
     const elementButtons = [
       {
@@ -72,7 +72,9 @@ class HTMLComponentPanel extends Component<HTMLCompPropsInt, StateInt> {
           className={classes.label}
           aria-label={element.name}
           size="medium"
-          onClick={() => this.handleCreateHTMLChild(element.name)}
+          onClick={() => {
+            this.handleCreateHTMLChild(element.name);
+          }}
         >
           <span className={classes.elemName}>{element.name}</span>
           {element.button}

src/components/left/LeftColExpansionPanel.tsx

@@ -100,7 +100,7 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
       (component: ComponentInt) => component.title === title
     );
 
-    const parentKeys: any[] = [];
+    const parentKeys: string[] = [];
     if (focusComponent.props.length > 0) {
       focusComponent.props.forEach(key => parentKeys.push(key.key));
     }

src/components/left/NativeComponentPanel.tsx

@@ -77,6 +77,7 @@ const NativeComponentPanel = (props: any) => {
 
   // onClick function to invoke dispatch/reducers for adding Native Element to component
   const handleCreateNativeChild = (type: string) => {
+    // if (native) type = 'RNTouchOpacity';
     addChild({ title: type, childType: type, HTMLInfo: {} });
   };
 
@@ -88,8 +89,10 @@ const NativeComponentPanel = (props: any) => {
         key={`button-${component.name}`}
         className={classes.label}
         aria-label={component.name}
-        size='medium'
-        onClick={() => handleCreateNativeChild(`${component.name}`)}
+        size="medium"
+        onClick={() => {
+          handleCreateNativeChild(`${component.name}`);
+        }}
       >
         <span className={classes.compName}>{component.name.slice(2)}</span>
         {component.button}

src/containers/LeftContainer.tsx

@@ -386,7 +386,7 @@ class LeftContainer extends Component<LeftContPropsInt, StateInt> {
         <div className={classes.expansionPanel}>{componentsExpansionPanel}</div>
         {native ? (
           // React Native Components will display when in 'Native' mode
-          <NativeComponentPanel addChild={addChild} />
+          <NativeComponentPanel native={native} addChild={addChild} />
         ) : (
           <HTMLComponentPanel
             className={classes.htmlCompWrapper}

src/helperFunctions/importNativeGenerator.ts

@@ -0,0 +1,27 @@
+import { ChildInt } from '../interfaces/Interfaces';
+export default function importNativeNameGenerator(child: ChildInt) {
+  switch (child.componentName) {
+    case 'RNView':
+      return 'View';
+    case 'RNSafeAreaView':
+      return 'SafeAreaView';
+    case 'RNButton':
+      return 'Button';
+    case 'RNFlatList':
+      return 'FlatList';
+    case 'RNImage':
+      return 'Image';
+    case 'RNModal':
+      return 'Modal';
+    case 'RNSwitch':
+      return 'Switch';
+    case 'RNText':
+      return 'Text';
+    case 'RNTextInput':
+      return 'TextInput';
+    case 'RNTouchOpacity':
+      return 'TouchableOpacity';
+    default:
+      return 'div';
+  }
+}

src/reducers/__tests__/leftReducers.test.ts

@@ -1,9 +1,9 @@
 import * as reducers from '../leftReducers';
-
+import cloneDeep from '../../helperFunctions/cloneDeep';
+import * as interfaces from '../../interfaces/Interfaces';
+import * as types from '../../actionTypes/index';
 describe('Left reducers', () => {
   let state: any;
-
-  // redefine the default state before each reducer test
   beforeEach(() => {
     state = {
       editMode: -1,
@@ -30,35 +30,95 @@ describe('Left reducers', () => {
           props: [],
           stateful: false,
           title: 'App'
+        },
+        {
+          changed: false,
+          childrenArray: [{}],
+          classBased: false,
+          code: '....',
+          color: '#FFF',
+          focusChild: {},
+          focusChildId: 0,
+          id: 99,
+          nextChildId: 9,
+          nextPropId: 9,
+          position: {
+            height: 850,
+            width: 500,
+            x: 70,
+            y: 100
+          },
+          props: [],
+          stateful: false,
+          title: 'TEST'
         }
-      ]
+      ],
+      focusComponent: 'App',
+      history: []
     };
   });
-
-  describe('toggleComponentState', () => {
-    it('inverts the statefulness of component passed in', () => {});
-  });
-
+  // describe('toggleComponentState', () => {
+  //   it('inverts the statefulness of component passed in', () => {});
+  // });
   // toggleEditMode reducer allows changing of component names in left container
   describe('toggleEditMode reducer', () => {
     it('should return the same state if id === 1', () => {
       const action = {
         type: 'EDIT_MODE',
         payload: { id: 1 }
       };
-
       const newState = reducers.toggleEditMode(state, action.payload);
       expect(newState).toStrictEqual(state);
     });
-
     it('should return new state with updated editMode', () => {
       const action = {
         type: 'EDIT_MODE',
         payload: { id: 2 }
       };
-
       const newState = reducers.toggleEditMode(state, action.payload);
       expect(newState.editMode).toEqual(action.payload.id);
     });
   });
+  // TEST CHANGE FOCUS COMPONENT: test component will add "look" for "test" after it's added
+  describe('changeFocusComponent reducer', () => {
+    it('should change the focus component title', () => {
+      const action = {
+        type: types.CHANGE_FOCUS_COMPONENT,
+        payload: { title: 'TEST' }
+      };
+      const newState = reducers.changeFocusComponent(state, action.payload);
+      // expecting new payload of "title" to the payload we just created
+      expect(newState.focusComponent.title).toEqual(action.payload.title);
+    });
+  });
+  // TEST IMAGE SOURCE CHANGE: image URL should be changed after local state is changed
+  describe('changeImageSource reducer', () => {
+    it('should change the change the image source', () => {
+      const action = {
+        type: types.CHANGE_IMAGE_SOURCE,
+        payload: { imageSource: 'www.test.com/test.img' }
+      };
+      const newState = reducers.changeImageSource(state, action.payload);
+      // expecting new payload of "title" to the payload we just created
+      expect(newState.imageSource).toEqual(action.payload.imageSource);
+    });
+  });
+  // TEST DELETE CHILD: test child should be deleted from local state components array
+  // describe('deleteChild reducer', () => {
+  //   it('should delete test component', () => {
+  //     //   const action = {
+  //     //     type: types.CHANGE_IMAGE_SOURCE,
+  //     //     payload: { imageSource: 'www.test.com/test.img' }
+  //     //   };
+  //     const model = {
+  //       parentId = state.focusComponent.id,
+  //       childId = state.focusChild.childId,
+  //       calledFromDeleteComponent = false
+  //     };
+  //     const newState = reducers.deleteChild();
+  //     // expecting new payload of "title" to the payload we just created
+  //     expect(newState.imageSource).toEqual(action.payload.imageSource);
+  //   });
+  // });
+  // NEXT TEST
 });

src/reducers/initialState.ts

@@ -88,3 +88,16 @@ export const initialComponentState: ComponentInt = {
   code: '',
   changed: false
 };
+
+export const nativeComponentTypes = [
+  'RNView',
+  'RNSafeAreaView',
+  'RNButton',
+  'RNFlatList',
+  'RNImage',
+  'RNModal',
+  'RNSwitch',
+  'RNText',
+  'RNTextInput',
+  'RNTouchOpacity'
+];

src/reducers/leftReducers.ts

@@ -6,7 +6,7 @@ import {
   ApplicationStateInt,
   ChildInt
 } from '../interfaces/Interfaces';
-import { initialComponentState } from './initialState';
+import { initialComponentState, nativeComponentTypes } from './initialState';
 import { createHistory } from '../helperFunctions/createHistory';
 import { getSize } from '../utils/htmlElements.util';
 import { generateNewCode } from '../helperFunctions/generateNewCode';
@@ -16,11 +16,13 @@ export const addChild = (
   {
     title,
     childType = '',
-    HTMLInfo = {}
+    HTMLInfo = {},
+    native
   }: {
     title: string;
     childType: string;
     HTMLInfo: { [index: string]: string };
+    native: boolean;
   }
 ) => {
   const strippedTitle = title;
@@ -30,11 +32,12 @@ export const addChild = (
     window.alert('addChild Error! no type specified');
   }
 
-  //weird use of a ternary operator, could've wrapped it in one if statement
   const htmlElement = childType !== 'COMP' ? childType : null;
-  if (childType !== 'COMP') {
-    childType = 'HTML';
-  }
+
+  // if childType is NOT included in the array of NATIVE React types && also not coming from left panel then the childType will revert to HTML
+  !nativeComponentTypes.includes(childType) && childType !== 'COMP'
+    ? (childType = 'HTML')
+    : (childType = 'NATIVE');
 
   // view represents the curretn FOCUSED COMPONENT - this is the component where the child is being added to
   // we only add childrent (or do any action) to the focused omconent

src/utils/componentRender.util.ts

@@ -6,6 +6,8 @@ import {
   PropInt
 } from '../interfaces/Interfaces';
 import cloneDeep from '../helperFunctions/cloneDeep';
+import { nativeComponentTypes } from '../reducers/initialState';
+import importNativeNameGenerator from '../helperFunctions/importNativeGenerator';
 
 const componentRender = (
   component: ComponentInt,
@@ -77,7 +79,7 @@ const componentRender = (
         .props.map((prop: PropInt) => `${prop.key}={${prop.value}}`)
         .join(' ');
     }
-    if (child.childType === 'HTML') {
+    if (child.childType === 'HTML' || child.childType === 'NATIVE') {
       const keys: string[] = Object.keys(child.HTMLInfo);
       return keys
         .map(key => {
@@ -118,6 +120,11 @@ const componentRender = (
           return 'p';
         // REACT NATIVE COMPONENTS
         // TO DO: UPDATE REDUCER LOGIC TO HAVE THESE COMPONENTS IN A SEPARATE FUNCTION
+        default:
+          return 'div';
+      }
+    } else if (child.childType === 'NATIVE') {
+      switch (child.componentName) {
         case 'RNView':
           return 'View';
         case 'RNSafeAreaView':
@@ -145,6 +152,7 @@ const componentRender = (
       return child.componentName;
     }
   }
+
   // logic below consists of conditional that will render depending
   // on the toggling of "state" and/or "class"
   // class components can optioally have a state which will
@@ -157,10 +165,14 @@ const componentRender = (
 
     ${childrenArray
       .filter(child => child.childType !== 'HTML')
-      .map(
-        child =>
-          `import ${child.componentName} from './${child.componentName}.tsx'`
-      )
+      .map(child => {
+        if (child.childType === 'NATIVE') {
+          return `import {${importNativeNameGenerator(
+            child
+          )}} from 'react-native'`;
+        } else
+          `import ${child.componentName} from './${child.componentName}.tsx'`;
+      })
       .reduce((acc: Array<string>, child) => {
         if (!acc.includes(child)) {
           acc.push(child);
@@ -169,6 +181,8 @@ const componentRender = (
         return acc;
       }, [])
       .join('\n')}
+
+    
     
     interface Props {
       ${props.map(prop => `${prop.key}: ${typeSwitcher(prop.type)}\n`)}