Merge pull request #1 from brianjshan/num-components

Num components

Author: stormikph

app/src/components/left/ComponentPanel.tsx

@@ -30,6 +30,8 @@ const ComponentPanel = (): JSX.Element => {
       setErrorMsg('Component name cannot be blank.');
     } else if (type === 'dupe') {
       setErrorMsg('Component name already exists.');
+    } else if (type === 'letters') {
+      setErrorMsg('Component name must start with a letter.');
     }
   };
 
@@ -45,6 +47,7 @@ const ComponentPanel = (): JSX.Element => {
   // check if name of new component is the same as an existing component
   const checkNameDupe = (inputName: String) => {
     let checkList = state.components.slice();
+
     // checks to see if inputted comp name already exists
     let dupe = false;
     checkList.forEach(comp => {
@@ -79,7 +82,16 @@ const ComponentPanel = (): JSX.Element => {
   };
 
   const handleNameSubmit = () => {
-    if (compName.trim() === '') {
+    let letters = /[a-z]/;
+    if (!compName.charAt(0).match(letters)) {
+      triggerError('letters');
+      return;
+      // }
+      // let firstChar = compName.charAt(0);
+      // if (firstChar <= '9' && firstChar >= '0') {
+      //   triggerError('number');
+      //   return;
+    } else if (compName.trim() === '') {
       triggerError('empty');
       return;
     } else if (checkNameDupe(compName)) {

app/src/containers/RightContainer.tsx

@@ -10,12 +10,10 @@ import Button from '@material-ui/core/Button';
 import { stateContext } from '../context/context';
 import HTMLTypes from '../context/HTMLTypes';
 
-
 import ProjectManager from '../components/right/ProjectManager';
 
 // need to pass in props to use the useHistory feature of react router
 const RightContainer = (props): JSX.Element => {
-
   const classes = useStyles();
   const [state, dispatch] = useContext(stateContext);
   const [displayMode, setDisplayMode] = useState('');
@@ -420,8 +418,7 @@ const useStyles = makeStyles({
       marginBottom: '0',
       marginTop: '10px'
     }
-  },
-
+  }
 });
 
 export default RightContainer;

app/src/interfaces/Interfaces.ts

@@ -1,8 +1,8 @@
 import { DragObjectWithType } from 'react-dnd';
 
 export interface State {
-  name: String;
-  isLoggedIn: Boolean;
+  name: string;
+  isLoggedIn: boolean;
   components: Component[];
   rootComponents: number[];
   projectType: string;