added additional regex to components and custom elements

jinsoolim · jinsoolim · commit e7318919d7e7 · 2020-10-24T12:13:57.000-07:00
diff --git a/app/src/components/bottom/CodePreview.tsx b/app/src/components/bottom/CodePreview.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { stateContext } from '../../context/context';
 import AceEditor from 'react-ace';
 import { makeStyles } from '@material-ui/core/styles';
@@ -13,6 +13,10 @@ const CodePreview = () => {
     (elem: Component) => elem.id === state.canvasFocus.componentId
   );
 
+  const handleCodeSnipChange = val => {
+    currentComponent.code = val;
+  }
+
   return (
     <div
       style={{
@@ -41,10 +45,11 @@ const CodePreview = () => {
         //     code
         //   })
         // }
+        onChange={handleCodeSnipChange}
         value={currentComponent.code}
         name="Code_div"
         // readOnly={this.props.codeReadOnly}
-        readOnly={true}
+        readOnly={false}
         editorProps={{ $blockScrolling: true }}
         fontSize={16}
         tabSize={2}
diff --git a/app/src/components/left/ComponentPanel.tsx b/app/src/components/left/ComponentPanel.tsx
@@ -32,6 +32,8 @@ const ComponentPanel = (): JSX.Element => {
       setErrorMsg('Component name already exists.');
     } else if (type === 'letters') {
       setErrorMsg('Component name must start with a letter.');
+    } else if (type === 'symbolsDetected') {
+      setErrorMsg('Component name must not contain symbols.');
     }
   };
 
@@ -81,11 +83,20 @@ const ComponentPanel = (): JSX.Element => {
     setCompName('');
   };
 
+  const alphanumeric = input => {
+    let letterNumber = /^[0-9a-zA-Z]+$/;
+    if (input.match(letterNumber)) return true;
+    return false;
+  }
+
   const handleNameSubmit = () => {
     let letters = /[a-zA-Z]/;
     if (!compName.charAt(0).match(letters)) {
       triggerError('letters');
       return;
+    } else if (!alphanumeric(compName)) {
+      triggerError('symbolsDetected');
+      return;
     } else if (compName.trim() === '') {
       triggerError('empty');
       return;
@@ -101,11 +112,11 @@ const ComponentPanel = (): JSX.Element => {
     return state.canvasFocus.componentId === targetId ? true : false;
   };
 
-  const deleteReusableComponent = (id) => {
-    // reducer to modify state.components
-    // make sure the component is not a root
-    // 
-  }
+  // const deleteReusableComponent = (id) => {
+  //   // reducer to modify state.components
+  //   // make sure the component is not a root
+  //   //
+  // }
 
   return (
     <div className={classes.panelWrapper}>
diff --git a/app/src/components/left/HTMLPanel.tsx b/app/src/components/left/HTMLPanel.tsx
@@ -2,27 +2,68 @@ import React, { useState, useContext } from 'react';
 import Grid from '@material-ui/core/Grid';
 import { stateContext } from '../../context/context';
 import HTMLItem from './HTMLItem';
+import { makeStyles } from '@material-ui/core/styles';
 
 const HTMLPanel = (): JSX.Element => {
+  const classes = useStyles();
+
   const [tag, setTag] = useState('');
   const [name, setName] = useState('');
   const [currentID, setCurrentID] = useState(12);
   const [state, dispatch] = useContext(stateContext);
+  const [errorMsg, setErrorMsg] = useState('');
+  const [errorStatus, setErrorStatus] = useState(false);
+
 
   const handleTagChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    resetError();
     setTag(e.target.value);
-  }
+  };
 
   const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    resetError();
     setName(e.target.value);
-  }
+  };
 
-  const handleSubmit = (e) => {
-    e.preventDefault();
+  const checkNameDupe = (inputName: String) => {
+    let checkList = state.HTMLTypes.slice();
+
+    // checks to see if inputted comp name already exists
+    let dupe = false;
+    checkList.forEach(HTMLTag => {
+      if ((HTMLTag.name.toLowerCase() === inputName.toLowerCase()) || (HTMLTag.tag.toLowerCase() === inputName.toLowerCase())) {
+        dupe = true;
+      }
+    });
+    return dupe;
+  };
+
+  const triggerError = (type: String) => {
+    setErrorStatus(true);
+    if (type === 'empty') {
+      setErrorMsg('Tag/ Tag name cannot be blank.');
+    } else if (type === 'dupe') {
+      setErrorMsg('Tag/ Tag name already exists.');
+    } else if (type === 'letters') {
+      setErrorMsg('Tag/ Tag name must start with a letter.');
+    } else if (type === 'symbolsDetected') {
+      setErrorMsg('Tag/ Tag name must not contain symbols.');
+    }
+  };
+
+  const resetError = () => {
+    setErrorStatus(false);
+  };
+
+  const createOption = (inputTag: String, inputName: String) => {
+    // format name so first letter is capitalized and there are no whitespaces
+    let inputNameClean = inputName.replace(/\s+/g, '');
+    const formattedName = inputNameClean.charAt(0).toUpperCase() + inputNameClean.slice(1);
+    // add new component to state
     const newElement = {
       id: currentID,
-      tag,
-      name,
+      tag: inputTag,
+      name: formattedName,
       style: {},
       placeHolderShort: name,
       placeHolderLong: '',
@@ -35,25 +76,56 @@ const HTMLPanel = (): JSX.Element => {
     setCurrentID(currentID + 1);
     setTag('');
     setName('');
-    console.log("SUBMIT BUTTON CLICKED: ", newElement);
+  };
+
+  const alphanumeric = input => {
+    let letterNumber = /^[0-9a-zA-Z]+$/;
+    if (input.match(letterNumber)) return true;
+    return false;
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    let letters = /[a-zA-Z]/;
+    if ((!tag.charAt(0).match(letters)) || (!name.charAt(0).match(letters))) {
+      triggerError('letters');
+      return;
+    } else if (!alphanumeric(tag) || !alphanumeric(name)) {
+      triggerError('symbolsDetected');
+      return;
+    } else if ((tag.trim() === '') || (name.trim() === '')) {
+      triggerError('empty');
+      return;
+    } else if (checkNameDupe(tag) || checkNameDupe(name)) {
+      triggerError('dupe');
+      return;
+    }
+    createOption(tag, name);
+    resetError();
   }
 
   return (
     <div>
       <h4> HTML Elements</h4>
-      <div>
-        <form onSubmit={handleSubmit}>
-          <h4>Create New Element: </h4>
-          <label>
-            Tag:
-            <input type="text" name="Tag" value={tag} onChange={handleTagChange} />
-          </label>
-          <label>
-            Tag Name:
-            <input type="text" name="Tag Name" value={name} onChange={handleNameChange} />
-          </label>
-          <input type="submit" value="Add Element" />
-        </form>
+      <div className={classes.addComponentWrapper}>
+        <div className={classes.inputWrapper} >
+          <form onSubmit={handleSubmit} >
+            <h4>Create New Element: </h4>
+            <label className={classes.inputLabel}>
+              Tag:
+              <input color={'primary'} type="text" name="Tag" value={tag} onChange={handleTagChange} className={classes.input} />
+              {errorStatus &&
+              <span>{errorMsg}</span>}
+            </label>
+            <label className={classes.inputLabel}>
+              Tag Name:
+              <input color={'primary'} type="text" name="Tag Name" value={name} onChange={handleNameChange} className={classes.input} />
+              {errorStatus &&
+              <span>{errorMsg}</span>}
+            </label>
+            <input className={classes.button} color="primary" type="submit" value="Add Element" />
+          </form>
+        </div>
       </div>
       <Grid
         container
@@ -75,4 +147,78 @@ const HTMLPanel = (): JSX.Element => {
   );
 };
 
+const useStyles = makeStyles({
+  inputField: {
+    marginTop: '15px'
+  },
+  inputWrapper: {
+    // height: '115px',
+    textAlign: 'center',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    // paddingLeft: '35px',
+    marginBottom: '15px'
+  },
+  addComponentWrapper: {
+    border: '1px solid rgba(70,131,83)',
+    padding: '20px',
+    margin: '20px'
+  },
+  rootCheckBox: {},
+  rootCheckBoxLabel: {
+    color: 'white'
+  },
+  panelWrapper: {
+    width: '100%',
+    marginTop: '15px'
+  },
+  panelWrapperList: {
+    // maxHeight: '400px',
+    minHeight: '120px',
+    // overflowY: 'auto',
+    marginLeft: '-15px',
+    marginRight: '-15px'
+  },
+  panelSubheader: {
+    textAlign: 'center',
+    color: '#fff'
+  },
+  input: {
+    color: '#fff',
+    borderRadius: '5px',
+    paddingLeft: '15px',
+    paddingRight: '10px',
+    whiteSpace: 'nowrap',
+    overflowX: 'hidden',
+    textOverflow: 'ellipsis',
+    border: '1px solid rgba(51,235,145,0.75)',
+    backgroundColor: 'rgba(255,255,255,0.15)'
+  },
+  inputLabel: {
+    fontSize: '14px',
+    zIndex: 20,
+    color: '#fff',
+    marginTop: '-10px'
+  },
+  btnGroup: {
+    display: 'flex',
+    flexDirection: 'column',
+    paddingTop: '10px',
+    marginLeft: '10px'
+  },
+  button: {
+    fontSize: '1rem',
+    height: '40px',
+    maginTop: '10px',
+    width: '100%',
+    // border: '1px solid rgba(70,131,83)',
+    backgroundColor: 'rgba(1,212,109,0.1)'
+  },
+  rootToggle: {
+    color: '#01d46d',
+    fontSize: '0.85rem'
+  }
+});
+
 export default HTMLPanel;
diff --git a/app/src/components/main/DirectChildComponent.tsx b/app/src/components/main/DirectChildComponent.tsx
@@ -10,7 +10,6 @@ import { ItemTypes } from '../../constants/ItemTypes';
 import { stateContext } from '../../context/context';
 import { combineStyles } from '../../helperFunctions/combineStyles';
 import IndirectChild from './IndirectChild';
-import HTMLTypes from '../../context/HTMLTypes';
 import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
 
 function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
@@ -104,7 +103,7 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
         // if the HTML element has children, then also render its children
         // get the default style/placeholder value for that type of HTML element
         // combine the default style of that HTML element and combine in with the custom styles applied to that element
-        const HTMLType: HTMLType = HTMLTypes.find(
+        const HTMLType: HTMLType = state.HTMLTypes.find(
           (type: HTMLType) => type.id === child.typeId
         );
         const HTMLDefaultStyle = HTMLType.style;
diff --git a/app/src/components/main/DirectChildHTMLNestable.tsx b/app/src/components/main/DirectChildHTMLNestable.tsx
@@ -4,7 +4,6 @@ import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
 import { stateContext } from '../../context/context';
 import { combineStyles } from '../../helperFunctions/combineStyles';
-import HTMLTypes from '../../context/HTMLTypes';
 import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
 import renderChildren from '../../helperFunctions/renderChildren';
 
@@ -20,7 +19,7 @@ function DirectChildHTMLNestable({
 
   // find the HTML element corresponding with this instance of an HTML element
   // find the current component to render on the canvas
-  const HTMLType: HTMLType = HTMLTypes.find(
+  const HTMLType: HTMLType = state.HTMLTypes.find(
     (type: HTMLType) => type.id === typeId
   );
 
diff --git a/app/src/components/right/DeleteProjects.tsx b/app/src/components/right/DeleteProjects.tsx
@@ -118,7 +118,7 @@ const useStyles = makeStyles({
     fontSize: '1em',
     minWidth: '300px',
     marginTop: '10px',
-    marginBotton: '10px'
+    marginBottom: '10px'
   },
   avatar: {
     backgroundColor: blue[100],
diff --git a/app/src/helperFunctions/generateCode.ts b/app/src/helperFunctions/generateCode.ts
