deconstructed props in all modal components

Author: stephenhyang

app/modals/AddModal/ServiceDBType.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 
 const ServiceDBType = (props) => {
+  const { typeOfService, handleChange, database } = props
   return (
     <>
       <div>
@@ -11,8 +12,8 @@ const ServiceDBType = (props) => {
           <select
             id="serv-type"
             name="typeOfService"
-            value={props.typeOfService}
-            onChange={e => props.handleChange(e)}
+            value={typeOfService}
+            onChange={e => handleChange(e)}
           >
             <option value="Docker">Docker</option>
             <option value="gRPC">gRPC</option>
@@ -24,7 +25,7 @@ const ServiceDBType = (props) => {
           <label htmlFor="db-type">
             Type of Database<span>*</span>
           </label>
-          <select id="db-type" name="database" value={props.database} onChange={e => props.handleChange(e)}>
+          <select id="db-type" name="database" value={database} onChange={e => handleChange(e)}>
             <option value="SQL">SQL</option>
             <option value="MongoDB">MongoDB</option>
           </select>

app/modals/AddModal/ServicesDescription.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 const ServicesDescription = (props) => {
+  const { URI, handleChange, name, description } = props;
   return (
     <>
       <div>
@@ -10,8 +11,8 @@ const ServicesDescription = (props) => {
           <input
             id="db-uri"
             name="URI"
-            value={props.URI}
-            onChange={e => props.handleChange(e)}
+            value={URI}
+            onChange={e => handleChange(e)}
             placeholder="Database URI"
             required
           />
@@ -24,8 +25,8 @@ const ServicesDescription = (props) => {
             id="db-name"
             type="text"
             name="name"
-            value={props.name}
-            onChange={e => props.handleChange(e)}
+            value={name}
+            onChange={e => handleChange(e)}
             placeholder="Add a name for your new service"
             required
           />
@@ -35,8 +36,8 @@ const ServicesDescription = (props) => {
           <textarea
             id="db-desc"
             name="description"
-            value={props.description}
-            onChange={e => props.handleChange(e)}
+            value={description}
+            onChange={e => handleChange(e)}
             placeholder="Add a short description"
           />
         </div>

app/modals/AwsModal/AwsDescription.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 const AwsDescription = (props) => {
+  const { name, handleChange, description } = props;
   return (
     <>
       <div>
@@ -11,8 +12,8 @@ const AwsDescription = (props) => {
           id="aws-name"
           type="text"
           name="name"
-          value={props.name}
-          onChange={e => props.handleChange(e)}
+          value={name}
+          onChange={e => handleChange(e)}
           placeholder="Add a name for your new service"
           required
         />
@@ -22,8 +23,8 @@ const AwsDescription = (props) => {
         <textarea
           id="db-desc"
           name="description"
-          value={props.description}
-          onChange={e => props.handleChange(e)}
+          value={description}
+          onChange={e => handleChange(e)}
           placeholder="Add a short description"
         />
       </div>

app/modals/AwsModal/AwsKeyUrl.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 const AwsKeyUrl = (props) => {
+  const { typeOfService, accessKey, handleChange, secretAccessKey, awsUrl } = props;
   return (
     <>
       <div>
@@ -10,13 +11,13 @@ const AwsKeyUrl = (props) => {
           id="aws-access-key"
           type="password"
           name="accessKey"
-          value={props.accessKey}
-          onChange={e => props.handleChange(e)}
-          placeholder={props.typeOfService === 'AWS/EKS' ? 'Grafana Bearer Token' : 'AWS Access Key'}
+          value={accessKey}
+          onChange={e => handleChange(e)}
+          placeholder={typeOfService === 'AWS/EKS' ? 'Grafana Bearer Token' : 'AWS Access Key'}
           required
         />
       </div>
-      {(props.typeOfService !== 'AWS/EKS') && (
+      {(typeOfService !== 'AWS/EKS') && (
         <div>
         <label htmlFor="aws-secret-access-key">
           Secret Access Key<span>*</span>
@@ -25,24 +26,24 @@ const AwsKeyUrl = (props) => {
           id="aws-secret-access-key"
           type="password"
           name="secretAccessKey"
-          value={props.secretAccessKey}
-          onChange={e => props.handleChange(e)}
+          value={secretAccessKey}
+          onChange={e => handleChange(e)}
           placeholder="AWS Secret Access Key"
           required
         />
       </div>
       )}        
       <div>
         <label htmlFor="aws-url">
-          {(props.typeOfService === 'AWS/EKS') ? 'Grafana URL' : 'Access Key'}<span>*</span>
+          {(typeOfService === 'AWS/EKS') ? 'Grafana URL' : 'Access Key'}<span>*</span>
         </label>
         <input
           id="aws-url"
           type="string"
           name="awsUrl"
-          value={props.awsUrl}
-          onChange={e => props.handleChange(e)}
-          placeholder={props.typeOfService === 'AWS/EKS'? 'Grafana Provided URL': 'AWS Url'}
+          value={awsUrl}
+          onChange={e => handleChange(e)}
+          placeholder={typeOfService === 'AWS/EKS'? 'Grafana Provided URL': 'AWS Url'}
         />
       </div>
     </>

app/modals/AwsModal/AwsRegion.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 const AwsRegion = (props) => {
+  const { region, handleChange } = props;
   return (
     <div>
       <label htmlFor="region">
@@ -9,8 +10,8 @@ const AwsRegion = (props) => {
       <select
         id="aws-region"
         name="region"
-        value={props.region}
-        onChange={e => props.handleChange(e)}
+        value={region}
+        onChange={e => handleChange(e)}
         placeholder="AWS Region"
         required
       >

app/modals/AwsModal/AwsServiceInstance.tsx

@@ -1,31 +1,32 @@
 import React from 'react';
 
 const AwsServiceInstance = (props) => {
+  const { typeOfService, handleChange, instance } = props;
   return (
     <>
       <div>
         <label htmlFor="serv-type">Type of Service</label>
         <select
           id="serv-type"
           name="typeOfService"
-          value={props.typeOfService}
-          onChange={e => props.handleChange(e)}
+          value={typeOfService}
+          onChange={e => handleChange(e)}
         >
           <option value="AWS/EC2">Elastic Compute Cloud (EC2)</option>
           <option value="AWS/ECS">Elastic Container Service (ECS)</option>
           <option value="AWS/EKS">Elastic Kubernetes Service (EKS)</option>
         </select>
       </div>
-      {props.typeOfService === 'AWS/EC2' && (
+      {typeOfService === 'AWS/EC2' && (
         <div>
           <label htmlFor="instance">
             AWS Instance ID<span>*</span>
           </label>
           <input
             id="aws-instance"
             name="instance"
-            value={props.instance}
-            onChange={e => props.handleChange(e)}
+            value={instance}
+            onChange={e => handleChange(e)}
             placeholder="AWS Instance ID"
             required
           />