added formatting fro the user input on the props tab-app stopped crashing

Author: sean1292

src/components/Props.tsx

@@ -1,60 +1,60 @@
-import React, { Component, Fragment } from "react";
-import { connect } from "react-redux";
-import { withStyles } from "@material-ui/core/styles";
-import FormControl from "@material-ui/core/FormControl";
-import Grid from "@material-ui/core/Grid";
-import TextField from "@material-ui/core/TextField";
-import Button from "@material-ui/core/Button";
-import Select from "@material-ui/core/Select";
-import Switch from "@material-ui/core/Switch";
-import InputLabel from "@material-ui/core/InputLabel";
-import { addProp, deleteProp } from "../actions/components.ts";
-import DataTable from "./DataTable.tsx";
-import { ComponentInt } from "../utils/Interfaces.ts";
+import React, { Component, Fragment } from 'react';
+import { connect } from 'react-redux';
+import { withStyles } from '@material-ui/core/styles';
+import FormControl from '@material-ui/core/FormControl';
+import Grid from '@material-ui/core/Grid';
+import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+import Select from '@material-ui/core/Select';
+import Switch from '@material-ui/core/Switch';
+import InputLabel from '@material-ui/core/InputLabel';
+import { addProp, deleteProp } from '../actions/components.ts';
+import DataTable from './DataTable.tsx';
+import { ComponentInt } from '../utils/Interfaces.ts';
 
 const styles = theme => ({
   root: {
-    display: "flex",
-    justifyContent: "center",
-    flexWrap: "wrap"
+    display: 'flex',
+    justifyContent: 'center',
+    flexWrap: 'wrap'
   },
   chip: {
-    color: "#eee",
-    backgroundColor: "#333333"
+    color: '#eee',
+    backgroundColor: '#333333'
   },
   column: {
-    display: "inline-flex",
-    alignItems: "baseline"
+    display: 'inline-flex',
+    alignItems: 'baseline'
   },
   icon: {
-    fontSize: "20px",
-    color: "#eee",
-    opacity: "0.7",
-    transition: "all .2s ease",
+    fontSize: '20px',
+    color: '#eee',
+    opacity: '0.7',
+    transition: 'all .2s ease',
 
-    "&:hover": {
-      color: "red"
+    '&:hover': {
+      color: 'red'
     }
   },
   cssLabel: {
-    color: "white",
+    color: 'white',
 
-    "&$cssFocused": {
-      color: "green"
+    '&$cssFocused': {
+      color: 'green'
     }
   },
   cssFocused: {},
   input: {
-    color: "#eee",
-    marginBottom: "10px",
-    width: "60%"
+    color: '#eee',
+    marginBottom: '10px',
+    width: '60%'
   },
   light: {
-    color: "#eee"
+    color: '#eee'
   },
   avatar: {
-    color: "#eee",
-    fontSize: "10px"
+    color: '#eee',
+    fontSize: '10px'
   }
 });
 
@@ -86,39 +86,39 @@ const mapStateToProps = (store: any) => ({
 });
 
 const availablePropTypes = {
-  string: "STR",
-  number: "NUM",
-  object: "OBJ",
-  array: "ARR",
-  boolean: "BOOL",
-  function: "FUNC",
+  string: 'STR',
+  number: 'NUM',
+  object: 'OBJ',
+  array: 'ARR',
+  boolean: 'BOOL',
+  function: 'FUNC',
   // symbol: 'SYM',
-  node: "NODE",
-  element: "ELEM",
-  any: "ANY",
-  tuple: "TUP",
-  enum: "ENUM"
+  node: 'NODE',
+  element: 'ELEM',
+  any: 'ANY',
+  tuple: 'TUP',
+  enum: 'ENUM'
 };
 
 const typeOptions = [
   <option value="" key="" />,
   ...Object.keys(availablePropTypes).map(type => (
-    <option value={type} key={type} style={{ color: "#000" }}>
+    <option value={type} key={type} style={{ color: '#000' }}>
       {type}
     </option>
   ))
 ];
 
 class Props extends Component {
   state = {
-    propKey: "",
-    propValue: "",
+    propKey: '',
+    propValue: '',
     propRequired: true,
-    propType: ""
+    propType: ''
   };
 
   handleChange = event => {
-    if (event.target.id === "propKey") {
+    if (event.target.id === 'propKey') {
       this.setState({
         [event.target.id]: event.target.value.trim()
       });
@@ -135,10 +135,15 @@ class Props extends Component {
     });
   };
 
+  // function that handles the addition of props to a given componnent
+  // added regex to strip usr input from non alpha numeric properties
+  // presence of these characters crashes the app and should not be a valid input anyways
   handleAddProp = event => {
     event.preventDefault();
 
-    const { propKey, propValue, propRequired, propType } = this.state;
+    let { propKey, propValue, propRequired, propType } = this.state;
+    propKey = propKey.replace(/\W+/gi, '');
+    propValue = propKey.replace(/\W+/gi, '');
 
     // check if prop exists with same key. CANNOT have duplicates
     const savedPropKeys = this.props.focusComponent.props.map(p => p.key);
@@ -149,7 +154,7 @@ class Props extends Component {
 
     // check if prop starts with digits. Digits at string start breaks indexedDB
     if (/^\d/.test(propKey)) {
-      window.alert("Props are not allowed to begin with digits");
+      window.alert('Props are not allowed to begin with digits');
       return;
     }
 
@@ -161,17 +166,17 @@ class Props extends Component {
     });
 
     this.setState({
-      propKey: "",
-      propValue: "",
+      propKey: '',
+      propValue: '',
       propRequired: true,
-      propType: ""
+      propType: ''
     });
   };
 
   render() {
     const { focusComponent, classes, deleteProp, addProp } = this.props;
 
-    const rowHeader = ["_Key", "Value", "Type", "Required"];
+    const rowHeader = ['_Key', 'Value', 'Type', 'Required'];
     // prepare the saved Props in a nice way, so you can sent them to TableData
     const propsRows = focusComponent.props.map(prop => ({
       _Key: prop.key,
@@ -182,17 +187,17 @@ class Props extends Component {
     }));
 
     return (
-      <div className={"htmlattr"}>
-        {" "}
+      <div className={'htmlattr'}>
+        {' '}
         {Object.keys(focusComponent).length < 1 ? (
-          <div style={{ marginTop: "20px", width: "90%" }}>
+          <div style={{ marginTop: '20px', width: '90%' }}>
             Click a component to view its props.
           </div>
         ) : (
           <Fragment>
             <div
               className="props-container"
-              style={{ marginTop: "20px", width: "90%", height: "80%" }}
+              style={{ marginTop: '20px', width: '90%', height: '80%' }}
             >
               <Grid container spacing={8}>
                 <Grid item xs={3}>
@@ -232,10 +237,7 @@ class Props extends Component {
                       </Grid>
                       <Grid item xs={6}>
                         <FormControl required>
-                          <InputLabel
-                            className={classes.light}
-                            htmlFor="propType"
-                          >
+                          <InputLabel className={classes.light} htmlFor="propType">
                             Type
                           </InputLabel>
                           <Select
@@ -253,10 +255,7 @@ class Props extends Component {
                       </Grid>
                       <Grid item xs={6}>
                         <div className={classes.column}>
-                          <InputLabel
-                            className={classes.light}
-                            htmlFor="propRequired"
-                          >
+                          <InputLabel className={classes.light} htmlFor="propRequired">
                             Required?
                           </InputLabel>
                           <Switch
@@ -300,7 +299,4 @@ class Props extends Component {
   }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withStyles(styles)(Props));
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Props));