removed ToS, some ESlint minor refactors

Author: samsaksfithian

src/components/registration/LogIn.js

@@ -1,74 +1,89 @@
-import React,{Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Axios from 'axios';
 import '../../css/registration/LogIn.scss';
 
+const { REACT_APP_SVR_API } = process.env;
 
-class LogIn extends Component{
+class LogIn extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
       email: '',
       password: '',
-    }
+    };
   }
 
-  LogInHandler = () =>{
+  LogInHandler = () => {
     const { email, password } = this.state;
     const data = {
       email,
       password,
-    }
-    
-    Axios.post('http://localhost:5000/api/user/login',data)
-      .then(response=>{
+    };
+
+    Axios.post(`${REACT_APP_SVR_API}/user/login`, data)
+      .then(response => {
         localStorage.setItem('app-token', response.data.token);
         // this.props.history.push("/dashboard");
         this.props.handleLogin();
       })
-      .catch(error=>{
-         try {
+      .catch(error => {
+        try {
           // Handles errors that are not HTTP specific
-          console.log(error)
+          console.error(error);
           this.setState({ showRegistrationFailure: true });
           if (!error.status) {
-            console.log('A network error has occured.')
+            console.error('A network error has occured.');
           } else if (error.response.status === 400) {
-            console.log('Bad Request');
+            console.error('Bad Request');
           } else if (error.response.status === 500) {
-            console.log('Something bad happended on the server.');
+            console.error('Something bad happended on the server.');
           } else {
-            console.log('An unknown error has occurred');
+            console.error('An unknown error has occurred');
           }
         } catch (ex) {
           Promise.reject(ex);
         }
-      })
-  }
+      });
+  };
 
-  render(){
+  render() {
     const { email, password } = this.state;
     const { changeToSignup } = this.props;
     return (
       <div id="login-container">
-        <h1 id="title" >Login</h1>
+        <h1 id="title">Login</h1>
         <form id="login-form">
           <h3>Email</h3>
-          <input type="email"  value={email} onChange={event => this.setState({email:event.target.value})}/>
+          <input
+            type="email"
+            value={email}
+            onChange={event => this.setState({ email: event.target.value })}
+          />
           <h3>Password</h3>
-          <input type="password" value={password} onChange={event => this.setState({password:event.target.value})}/>
-          <button id="submit-button" type="button" onClick={this.LogInHandler}>Submit</button>
+          <input
+            type="password"
+            value={password}
+            onChange={event => this.setState({ password: event.target.value })}
+          />
+          <button id="submit-button" type="button" onClick={this.LogInHandler}>
+            Submit
+          </button>
         </form>
-        <p>Don't have an account, <button id='signup-button' type="button" onClick={changeToSignup()}>Sign up!</button></p>
+        <p>
+          Don't have an account,{' '}
+          <button id="signup-button" type="button" onClick={changeToSignup()}>
+            Sign up!
+          </button>
+        </p>
       </div>
     );
   }
 }
 
-
 LogIn.propTypes = {
   handleLogin: PropTypes.func.isRequired,
 };
 
-export default LogIn;
+export default LogIn;

src/components/registration/SignUp.js

@@ -1,10 +1,26 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Axios from 'axios';
+import axios from 'axios';
 import '../../css/registration/SignUp.scss';
 
+const { REACT_APP_SVR_API } = process.env;
+
+/**
+ * @description Validates all inputs to theses constraints
+ */
+const validate = (email, password, confirmedPassword, fullName, location) => ({
+  email: email.length === 0,
+  password: password.length < 8 || password !== confirmedPassword,
+  fullName: fullName.length === 0,
+  location: location.length === 0,
+});
+
+const WarningBanner = warn_data =>
+  // eslint-disable-next-line implicit-arrow-linebreak
+  warn_data.warn ? <div className="warning">{warn_data.message}</div> : null;
+
 class SignUp extends Component {
-  constructor(props){
+  constructor(props) {
     super(props);
 
     this.state = {
@@ -14,46 +30,48 @@ class SignUp extends Component {
       confirmPassword: '',
       location: '',
       fullName: '',
-      // Might have to refactored this...
+      // Might have to refactor this...
       touched: {
         email: false,
         password: false,
       },
     };
   }
-  
+
   /**
    * Creates a user with the server
    */
   createUserHandler = () => {
     const { email, password, location, fullName } = this.state;
+    const { handleSignup } = this.props;
     const data = {
       email,
       password,
       location,
       fullName,
     };
-    Axios.post('http://localhost:5000/api/user/', data)
+    axios
+      .post(`${REACT_APP_SVR_API}/user/`, data)
       .then(response => {
         console.log(response);
         // Stores token in local storeage for the time being
         localStorage.setItem('app-token', response.data.token);
         // Sweet Alert for successful registration
-        this.props.handleSignup();
+        handleSignup();
       })
       .catch(error => {
         try {
           // Handles errors that are not HTTP specific
-          console.log(error);
+          console.error(error);
           this.setState({ showRegistrationFailure: true });
           if (!error.status) {
-            console.log('A network error has occured.');
+            console.error('A network error has occured.');
           } else if (error.response.status === 400) {
-            console.log('Bad Request');
+            console.error('Bad Request');
           } else if (error.response.status === 500) {
-            console.log('Something bad happended on the server.');
+            console.error('Something bad happended on the server.');
           } else {
-            console.log('An unknown error has occurred');
+            console.error('An unknown error has occurred');
           }
         } catch (ex) {
           Promise.reject(ex);
@@ -84,11 +102,11 @@ class SignUp extends Component {
   };
 
   handleBlur = field => event => {
-    this.setState({
-      touched: { ...this.state.touched, [field]: true },
-    });
+    this.setState(prevState => ({
+      touched: { ...prevState.touched, [field]: true },
+    }));
   };
-  
+
   /**
    * @description Controls the submit button
    */
@@ -102,34 +120,27 @@ class SignUp extends Component {
   };
 
   canBeSubmitted() {
-    const { email, password, confirmPassword,  location, fullName } = this.state;
+    const { email, password, confirmPassword, location, fullName } = this.state;
     const errors = validate(
       email,
       password,
-      confirmPassword,// Moda
+      confirmPassword, // Moda
       fullName,
-      location
+      location,
     );
     const isDisabled = Object.keys(errors).some(x => errors[x]);
     return !isDisabled;
   }
-  
 
   render() {
-    const { email, password, confirmPassword,  location, fullName } = this.state;
+    const { email, password, confirmPassword, location, fullName, touched } = this.state;
     const { backToLogin } = this.props;
-    const errors = validate(
-      email,
-      password,
-      confirmPassword,
-      fullName,
-      location
-    );
+    const errors = validate(email, password, confirmPassword, fullName, location);
     const isDisabled = Object.keys(errors).some(x => errors[x]);
 
     const shouldMarkError = field => {
       const hasError = errors[field];
-      const shouldShow = this.state.touched[field];
+      const shouldShow = touched[field];
 
       return hasError ? shouldShow : false;
     };
@@ -141,64 +152,63 @@ class SignUp extends Component {
           <input
             className={shouldMarkError('email') ? 'error' : ''}
             type="text"
-            value={this.state.email}
+            value={email}
             onChange={this.handleEmailChange}
             onBlur={this.handleBlur('email')}
-            placeholder='[email protected]'
+            placeholder="[email protected]"
           />
           <h3 className="input-labels">Password</h3>
           <input
             className={shouldMarkError('password') ? 'error' : ''}
             type="password"
-            value={this.state.password}
+            value={password}
             onChange={this.handlePasswordChange}
             onBlur={this.handleBlur('password')}
-            placeholder='Minimum length 8 characters'
+            placeholder="Minimum length 8 characters"
           />
           <h3 className="input-labels">Confirm Password</h3>
           <input
             className={shouldMarkError('confirmedPassword') ? 'error' : ''}
             type="password"
-            value={this.state.confirmPassword}
+            value={confirmPassword}
             onChange={this.handleConfirmPassword}
             onBlur={this.handleBlur('confirmPassword')}
           />
           <h3 className="input-labels">Full Name</h3>
           <input
             className={shouldMarkError('fullName') ? 'error' : ''}
             type="text"
-            value={this.state.fullName}
+            value={fullName}
             onChange={this.handleFullName}
             onBlur={this.handleBlur('fullName')}
-            placeholder='Jane Doe'
+            placeholder="Jane Doe"
           />
           <h3 className="input-labels">Location</h3>
           <input
             className={shouldMarkError('location') ? 'error' : ''}
             type="text"
-            value={this.state.location}
+            value={location}
             onChange={this.handleLocation}
             onBlur={this.handleBlur('location')}
-            placeholder='Example: Neverwinter'
+            placeholder="Example: Neverwinter"
           />
-          <p>
-              By clicking "Sign Up" you are agreeing
-              to our
-            {' '}
+          {/* <p>
+              {`By clicking "Sign Up" you are agreeing to our `} 
             <a href="https://www.termsandcondiitionssample.com/live.php?token=bYAxBa2kby8ugr9x4eWMbKKgXnxOQyNg" rel="noopener noreferrer" target="_blank">Terms and Agreement</a>
-          </p>
+          </p> */}
           <button
             id="register-button"
             type="button"
             onClick={this.createUserHandler}
             disabled={isDisabled}
           >
-              Sign Up
+            {`Sign Up`}
           </button>
           <p>
-Go back to
-            {' '}
-            <button id='login-button' type="button" onClick={backToLogin()}>Log in!</button>
+            {`Go back to `}
+            <button id="login-button" type="button" onClick={backToLogin()}>
+              {`Log in!`}
+            </button>
           </p>
         </form>
         <WarningBanner
@@ -210,26 +220,6 @@ Go back to
   }
 }
 
-/**
- * @description Validates all inputs to theses constraints
- */
-const validate = (email, password, confirmedPassword, fullName, location) => ({
-  email: email.length === 0,
-  password: password.length < 8 || password !== confirmedPassword,
-  fullName: fullName.length === 0,
-  location: location.length === 0,
-});
-
-function WarningBanner(props) {
-  if (!props.warn) {
-    return null;
-  }
-  return <div className="warning">
-    {' '}
-    {props.message}
-  </div>;
-}
-
 SignUp.propTypes = {
   handleSignup: PropTypes.func.isRequired,
 };