Merge pull request #46 from sean1292/ace

Code export fixed as well as proper code for App component was added

Author: jzuniga206

src/components/bottom/CodePreview.tsx

@@ -17,7 +17,6 @@ type CodePreviewProps = {
   toggleCodeEdit(): void;
   codeReadOnly: boolean;
 };
-
 class CodePreview extends Component<CodePreviewProps> {
   //checking if the code has been asigned yet or not
   //if no then generate code and asign to a focus component
@@ -66,34 +65,37 @@ class CodePreview extends Component<CodePreviewProps> {
         }}
       >
         <AceEditor
-          mode='javascript'
-          theme='monokai'
-          width='100%'
-          height='100%'
+          mode="javascript"
+          theme="monokai"
+          width="100%"
+          height="100%"
           style={{
             border: '2px solid #33eb91',
             borderRadius: '8px'
           }}
+          enableLiveAutocompletion={true}
           onChange={code =>
             this.props.updateCode({
               componentId: this.props.focusComponent.id,
               code
             })
           }
           value={this.props.focusComponent.code}
-          name='Code_div'
+          name="Code_div"
           readOnly={this.props.codeReadOnly}
           editorProps={{ $blockScrolling: true }}
           fontSize={16}
+          // enableBasicAutocompletion={true}
+          tabSize={2}
         />
         <div style={{ display: 'flex', flexDirection: 'column' }}>
           <Button
-            color='primary'
-            aria-label='Add'
-            type='submit'
+            color="primary"
+            aria-label="Add"
+            type="submit"
             // disabled={!this.state.propKey || !this.state.propType}
-            variant='contained'
-            size='large'
+            variant="contained"
+            size="large"
             style={{ justifySelf: 'center' }}
             className={this.props.classes.startEdit}
             onClick={e => {

src/reducers/bottomReducers.ts

@@ -26,6 +26,16 @@ export const addProp = (
     (comp: ComponentInt) => comp.id === state.focusComponent.id
   );
 
+  if (!state.codeReadOnly) {
+    const check = window.confirm(
+      `Are you sure you want to add a Prop to the ${state.focusComponent.title} component while the program is in the "Edit Mode"? \n\nAll of the changes to the "Code Preview" for the ${state.focusComponent.title} component will be overridden!`
+    );
+    if (!check) {
+      return {
+        ...state
+      };
+    }
+  }
   const newProp: PropInt = {
     id: selectedComponent.nextPropId,
     key,
@@ -54,7 +64,8 @@ export const addProp = (
     focusComponent: modifiedComponent,
     historyIndex,
     history,
-    future
+    future,
+    codeReadOnly: true
   };
 };
 
@@ -69,6 +80,16 @@ export const deleteProp = (state: ApplicationStateInt, propId: number) => {
       (comp: ComponentInt) => comp.id === state.focusComponent.id
     )
   );
+  if (!state.codeReadOnly) {
+    const check = window.confirm(
+      `Are you sure you want to delete a Prop from the ${state.focusComponent.title} component while the program is in the "Edit Mode"? \n\nAll of the changes to the "Code Preview" for the ${state.focusComponent.title} component will be overridden!`
+    );
+    if (!check) {
+      return {
+        ...state
+      };
+    }
+  }
 
   const indexToDelete = modifiedComponent.props.findIndex(
     (prop: PropInt) => prop.id === propId
@@ -182,6 +203,16 @@ export const updateHtmlAttr = (
     return state;
   }
 
+  if (!state.codeReadOnly) {
+    const check = window.confirm(
+      `Are you sure you want to update the HTML attributes of the ${state.focusComponent.title} component while the program is in the "Edit Mode"? \n\nAll of the changes to the "Code Preview" for the ${state.focusComponent.title} component will be overridden!`
+    );
+    if (!check) {
+      return {
+        ...state
+      };
+    }
+  }
   const modifiedChild: any = cloneDeep(state.focusChild);
   modifiedChild.HTMLInfo[attr] = value;
 
@@ -211,6 +242,7 @@ export const updateHtmlAttr = (
     focusChild: modifiedChild,
     history,
     historyIndex,
-    future
+    future,
+    codeReadOnly: true
   };
 };

src/reducers/leftReducers.ts

@@ -462,20 +462,64 @@ export const editComponent = (
 ) => {
   let components = cloneDeep(state.components);
   let toEdit = components.find((element: ComponentInt) => element.id === id);
-  toEdit.title = title;
+
+  if (!state.codeReadOnly) {
+    const check = window.confirm(
+      `Are you sure you want to change the name of the ${state.focusComponent.title} component while the program is in the "Edit Mode"? \n\nAll of the changes to the "Code Preview" for the ${state.focusComponent.title} component will be overridden!`
+    );
+    if (!check) {
+      return {
+        ...state
+      };
+    }
+  }
+
+  // remove whitespace and digits, capitalize first char
+  const strippedTitle = title
+    .replace(/[a-z]+/gi, word => word[0].toUpperCase() + word.slice(1))
+    .replace(/[-_\s0-9\W]+/gi, '');
+  // duplicate component names not allowed
+  if (
+    state.components.find(
+      (comp: ComponentInt) => comp.title === strippedTitle
+    ) &&
+    toEdit.title !== strippedTitle
+  ) {
+    window.alert(
+      `A component with the name: "${strippedTitle}" already exists.\nPlease think of another name.`
+    );
+    return {
+      ...state
+    };
+  }
+
+  // empty component name not allowed
+  if (strippedTitle === '') {
+    window.alert(
+      `Can't leave the name of the component blank.\nPlease enter a name.`
+    );
+    return {
+      ...state
+    };
+  }
+  toEdit.title = strippedTitle;
+  toEdit.changed = true;
   for (const [index, each] of components.entries()) {
+    each.changed = true;
     for (const value of each.childrenArray) {
       if (value.childComponentId === id) {
-        value.componentName = title;
+        value.componentName = strippedTitle;
       }
     }
   }
 
   return {
     ...state,
     focusChild: state.initialApplicationFocusChild,
+    focusComponent: toEdit,
     editMode: -1,
-    components
+    components,
+    codeReadOnly: true
   };
 };
 

src/theme.ts

@@ -3,17 +3,17 @@ import indigo from '@material-ui/core/colors/indigo';
 
 const theme = createMuiTheme({
   typography: {
-    useNextVariants: true,
+    useNextVariants: true
   },
   palette: {
     primary: {
       light: '#00e676',
       // main: '#33eb91',
       main: '#01d46d', // less blinding green
       dark: '#14a37f',
-      contrastText: '#fff',
+      contrastText: '#fff'
     },
-    secondary: indigo,
+    secondary: indigo
   }
 });
 

src/utils/componentRender.util.ts

@@ -34,16 +34,10 @@ const componentRender = (
         return 'object';
       case 'array':
         return 'any[]';
-      case 'bool':
+      case 'boolean':
         return 'boolean';
       case 'function':
         return '() => any';
-      // case 'symbol':
-      //   return 'string';
-      case 'node':
-        return 'string';
-      case 'element':
-        return 'string';
       case 'tuple':
         return '[any]';
       case 'enum':
@@ -147,13 +141,20 @@ const componentRender = (
       }, [])
       .join('\n')}
     
-    interface Props {
+    ${
+      title == 'App'
+        ? ''
+        : `interface Props {
       ${props.map(prop => `${prop.key}: ${typeSwitcher(prop.type)}\n`)}
-    };
+    };`
+    }
+    
 
       ${
         classBased
           ? `class ${title} extends Component {`
+          : title == 'App'
+          ? `const ${title} = () => {`
           : `const ${title} = (props: Props) => {`
       }
       ${
@@ -170,9 +171,13 @@ const componentRender = (
           : ``
       }
       ${classBased ? `render(): JSX.Element {` : ``}
-      const {${props.map(el => el.key).join(', ')}} = ${
-    classBased ? `this.props` : `props`
-  };
+      ${
+        title === 'App'
+          ? ''
+          : `const {${props.map(el => el.key).join(', ')}} = ${
+              classBased ? `this.props` : `props`
+            }`
+      }
       
       return (
         <div>

src/utils/createFiles.util.ts

@@ -6,7 +6,7 @@ const createFiles = (
   components: any,
   path: string,
   appName: string,
-  exportAppBool: boolean,
+  exportAppBool: boolean
 ) => {
   let dir = path;
   if (exportAppBool === false) {
@@ -30,17 +30,11 @@ const createFiles = (
     const newPromise = new Promise((resolve, reject) => {
       fs.writeFile(
         `${dir}/${component.title}.tsx`,
-        format(componentRender(component, components), {
-          singleQuote: true,
-          trailingComma: 'es5',
-          bracketSpacing: true,
-          jsxBracketSameLine: true,
-          parser: 'typescript',
-        }),
+        component.code,
         (err: any) => {
           if (err) return reject(err.message);
           return resolve(path);
-        },
+        }
       );
     });