Merge pull request #7 from jinsoolim/addelements

Addelements

Author: jinsoolim

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;

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;

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;

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
   );
 

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],

app/src/helperFunctions/generateCode.ts

@@ -7,7 +7,7 @@ declare global {
   }
 }
 
-// generate code based on the component heirarchy
+// generate code based on the component hierarchy
 const generateUnformattedCode = (
   comps: Component[],
   componentId: number,
@@ -24,7 +24,7 @@ const generateUnformattedCode = (
 
   const isRoot = rootComponents.includes(componentId);
 
-  // get metadata for each child (e.g. the name/tag of the component/elemnt)
+  // get metadata for each child (e.g. the name/tag of the component/element)
   const getEnrichedChildren = (currentComponent: Component | ChildElement) => {
     const enrichedChildren = currentComponent.children.map((elem: any) => {
       const child = { ...elem };
@@ -38,8 +38,6 @@ const generateUnformattedCode = (
         return child;
       } else if (child.type === 'HTML Element') {
         const referencedHTML = HTMLTypes.find(elem => elem.id === child.typeId);
-        console.log("ARRAY OF HTMLS: ", HTMLTypes);
-        console.log("REF HTML: ", referencedHTML);
         child['tag'] = referencedHTML.tag;
         if (referencedHTML.tag === 'div') {
           child.children = getEnrichedChildren(child);
@@ -103,7 +101,7 @@ const generateUnformattedCode = (
             return `<${child.tag}${formatStyles(child.style)}></${child.tag}>`;
           }
         }
-        // route links are only a next.js feature. if the user creates a rotue link and then switches projects, generate code for a normal link instead
+        // route links are only a next.js feature. if the user creates a route link and then switches projects, generate code for a normal link instead
         else if (child.type === 'Route Link') {
           return projectType === 'Next.js'
             ? `<div><Link href="/${child.name}"><a>${child.name}</a></Link></div>`
@@ -113,7 +111,7 @@ const generateUnformattedCode = (
       .join('\n')}`;
   };
 
-  // format styles stored in object to match React's inline style format
+  // format styles stored in object to match React inline style format
   const formatStyles = (styleObj: any) => {
     if (Object.keys(styleObj).length === 0) return ``;
     const formattedStyles = [];
@@ -159,7 +157,7 @@ const generateUnformattedCode = (
       ${
         classBased
           ? `class ${currentComponent.name} extends Component {`
-          : `const ${currentComponent.name} = (props) => {`
+          : `const ${currentComponent.name} = (props): JSX.Element => {`
       }
       ${
         stateful && !classBased
@@ -195,7 +193,7 @@ const generateUnformattedCode = (
     import Head from 'next/head'
     ${links ? `import Link from 'next/link'` : ``}
 
-      const ${currentComponent.name} = (props) => {
+      const ${currentComponent.name} = (props): JSX.Element => {
 
         const  [value, setValue] = useState("INITIAL VALUE");
 
@@ -239,7 +237,7 @@ const formatCode = (code: string) => {
   }
 };
 
-// generate code based on component heirarchy and then return the rendered code
+// generate code based on component hierarchy and then return the rendered code
 const generateCode = (
   components: Component[],
   componentId: number,

app/src/reducers/componentReducer.ts

@@ -433,10 +433,8 @@ const reducer = (state: State, action: Action) => {
     }
 
     case 'ADD ELEMENT': {
-      console.log("REDUCER HIT");
       const HTMLTypes = [...state.HTMLTypes];
       HTMLTypes.push(action.payload);
-      console.log("MY NEW ARRAY: ", HTMLTypes);
       return {
         ...state,
         HTMLTypes