text: import React, {useState} from 'react';
  import {api, handleError} from 'helpers/api';
  import User from 'models/User';
  import {useHistory} from 'react-router-dom';
  import {Button} from 'components/ui/Button';
  import 'styles/views/Login.scss';
  import BaseContainer from "components/ui/BaseContainer";
  import PropTypes from "prop-types";
  
  /*
  It is possible to add multiple components inside a single file,
  however be sure not to clutter your files with an endless amount!
  As a rule of thumb, use one file per component and only add small,
  specific components that belong to the main one in the same file.
   */
  const FormField = props => {
    return (
      <div className="login field">
        <label className="login label">
          {props.label}
        </label>
        <input
          className="login input"
          placeholder="enter here.."
          value={props.value}
          onChange={e => props.onChange(e.target.value)}
        />
      </div>
    );
  };
  
  FormField.propTypes = {
    label: PropTypes.string,
    value: PropTypes.string,
    onChange: PropTypes.func
  };
  
  const Register = props => {
    const history = useHistory();
    const [password, setPassword] = useState(null);
    const [username, setUsername] = useState(null);
  
  
    /**
     * 2 functions: do login and do regisetr which are called when buttons are pressed
     */
  
    const doRegister = async () => {
      try {
  
        const requestBody = JSON.stringify({username, password});
        const response = await api.post('/users/register', requestBody); // TO DO: remove register
  
  
        // Get the returned user and update a new object.
        const user = new User(response.data);
  
        // Store the token into the local storage. CHECK
        localStorage.setItem('token', user.token);
        localStorage.setItem('id', user.id);
  
        // Register successfully worked --> navigate to the route /game in the GameRouter
        history.push(`/game`);
      } catch (error) {
        alert(`Something went wrong during the login: \n${handleError(error)}`);
      }
    };
  
  
    const doLogin = async () => {
  
      try {
        const requestBody = JSON.stringify({username, password});
        const response = await api.post('/users/login', requestBody);
  
        // Get the returned user and update a new object.
        const user = new User(response.data);
  
        // Store the token into the local storage. CHECK
        localStorage.setItem('token', user.token);
        localStorage.setItem('id', user.id);
  
        history.push(`/game`);
      } catch (error) {
        alert(`Something went wrong during the login: \n${handleError(error)}`);
      }
  
    };
  
  
    /**
     * below is what is displayed on the screen
     */
  
  
  
    return (
      <BaseContainer>
        <div className="login container">
          <div className="login form">
            <FormField
              label="Username"
              value={username}
              onChange={un => setUsername(un)}
            />
            <FormField
              label="Password"
              value={password}
              onChange={n => setPassword(n)}
            />
            <div className="login button-container">
              <Button
                disabled={!username || !password}
                width="100%"
                onClick={() => doRegister()}
              >
                Register
              </Button>
              &nbsp;&nbsp;
                <Button
                    disabled={!username || !password}
                    width="100%"
                    onClick={() => doLogin()}
                >
                  Login
                </Button>
            </div>
          </div>
        </div>
      </BaseContainer>
    );
  };
  
  /**
   * You can get access to the history object's properties via the withRouter.
   * withRouter will pass updated match, location, and history props to the wrapped component whenever it renders.
   */
  export default Register;
  