Form styling and live placeholder and version, css prefixing update

Author: jacobkrol

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "myapp",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "private": true,
   "homepage": "https://kroljs.com/LP-Timer",
   "dependencies": {
@@ -9,7 +9,8 @@
     "react-icons": "^3.10.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
-    "gh-pages": "3.0.0"
+    "gh-pages": "3.0.0",
+    "whatwg-fetch": "3.2.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -22,9 +23,7 @@
   },
   "browserslist": {
     "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
+      "since 2010"
     ],
     "development": [
       "last 1 chrome version",

package.json

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 function Footer() {
     return (
         <footer>
-            <p>LP Timer PWA v1.2.1 - Copyright 2020 <a href="https://kroljs.com" target="_blank" rel="noopener noreferrer">Jacob Krol</a> - <Link to="/about">Learn More</Link></p>
+            <p>LP Timer PWA v1.2.2 - Copyright 2020 <a href="https://kroljs.com" target="_blank" rel="noopener noreferrer">Jacob Krol</a> - <Link to="/about">Learn More</Link></p>
         </footer>
     )
 }

src/components/utilities/Footer.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import 'whatwg-fetch';
 import '../../styles/Form.css';
 
 class Form extends React.Component {
@@ -8,12 +9,37 @@ class Form extends React.Component {
         title: '',
         type: '',
         details: '',
+        detailsPH: '',
         disabled: false
     };
 
     handleChange = (evt) => {
-        //update state with changed input value
-        this.setState({[evt.target.name]: evt.target.value});
+        //change details placeholder when type is selected
+        if(evt.target.name === 'type') {
+            let placeholder = '';
+            switch(evt.target.value) {
+                case 'bug':
+                    placeholder = "Please provide as many details as possible, including your device and browser, if possible";
+                    break;
+                case 'enhancement':
+                    placeholder = "Describe how your feature might work here";
+                    break;
+                case 'question':
+                    placeholder = "What's up?"
+                    break;
+                default:
+                    placeholder = "";
+                    break;
+            }
+            //update changed input value and details placeholder text
+            this.setState({
+                [evt.target.name]: evt.target.value,
+                detailsPH: placeholder
+            });
+        } else {
+            //update state with changed input value
+            this.setState({[evt.target.name]: evt.target.value});
+        }
     }
 
     handleSubmit = (evt) => {
@@ -27,13 +53,14 @@ class Form extends React.Component {
             headers: {
                 'Content-Type': 'application/json',
             },
-            body: JSON.stringify(this.state)
+            credentials: "same-origin",
+            body: this.getFormData()
         };
         //define variables needed for user feedback
         let status = null;
         const errText = "An error has occurred submitting your feedback. Please verify your internet connection and try again later.\n\nError Code: ";
         //make api fetch call to server
-        fetch('https://lp-timer.herokuapp.com/add',requestOptions)
+        fetch('http://192.168.0.6:5000/add',requestOptions)
             //save http status, return response text
             .then(res => {
                 status = res.status;
@@ -58,25 +85,34 @@ class Form extends React.Component {
         evt.preventDefault();
     }
 
+    getFormData = () => {
+        let data = {...this.state};
+        delete data.disabled;
+        data['version'] = "1.2.2";
+        return JSON.stringify(data);
+    }
+
     render() {
         return (
             <form onSubmit={this.handleSubmit}>
-                <label>Your Name:</label>
+            <span className="required"> required field</span>
+                <label className="required">Your Name:</label>
                 <input type="text" name="name" onChange={this.handleChange} value={this.state.name} disabled={this.state.disabled} required />
-                <label>Your Email:</label>
+                <label className="required">Your Email:</label>
                 <input type="email" name="email" placeholder="[email protected]" onChange={this.handleChange} value={this.state.email} disabled={this.state.disabled} required />
-                <label>Title of Feedback:</label>
+                <label className="required">Title of Feedback:</label>
                 <input type="text" name="title" className="extend" placeholder="Ex: Verbals not working" onChange={this.handleChange} value={this.state.title} disabled={this.state.disabled} required />
-                <label>Type of Feedback:</label>
+                <label className="required">Type of Feedback:</label>
                 <select name="type" onChange={this.handleChange} value={this.state.type} disabled={this.state.disabled} required>
                     <option value="">Choose one...</option>
                     <option value="bug">Bug (something isn't working)</option>
                     <option value="enhancement">Enhancement (new feature or request)</option>
                     <option value="question">Question (further information is requested)&nbsp;&nbsp;</option>
                 </select>
                 <label>Feedback Details:</label>
-                <textarea name="details" className="extend" placeholder="(optional, but encouraged)" onChange={this.handleChange} value={this.state.details} disabled={this.state.disabled} />
+                <textarea name="details" className="extend" placeholder={this.state.detailsPH} onChange={this.handleChange} value={this.state.details} disabled={this.state.disabled} />
                 <input type="submit" disabled={this.state.disabled} />
+
             </form>
         )
     }

src/components/utilities/Form.js

@@ -1,4 +1,4 @@
-form * {
+form > * {
     display: block;
     text-align: left;
 }
@@ -29,3 +29,13 @@ form input[type="submit"]:disabled {
 form option {
     font-size: 11pt;
 }
+
+form .required:not(span)::after {
+    content: '*';
+    color: red;
+}
+
+form span.required::before {
+    content: '*';
+    color: red;
+}