ReactTraining.jsx

import React from 'react';
import './App.css';
import Rating from './components/Rating';
import FaceBook from './components/FaceBook';

function DriverCard({ name, rating }) {
  return (
    <div>
      <h1>{name}</h1>
      <Rating>{rating}</Rating>
    </div>
  );
}

function BoxColor({ r, g, b }) {
  const averageLightness =
    [r, g, b].reduce((total, value) => total + value, 0) / 3;

  const textColor = averageLightness > 255 / 2 ? 'black' : 'white';

  return (
    <div
      style={{
        backgroundColor: `rgb(${r}, ${g}, ${b})`,
        padding: 16,
        color: textColor
      }}
    >
      <span>
        rgb({r}, {g}, {b})
      </span>
    </div>
  );
}

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      total: 0
    };
  }

  handleButtonClick = () => {
    this.setState({
      total: this.state.total + 1
    });
  };

  render() {
    const COLORS = ['purple', 'blue', 'green', 'yellow', 'orange', 'red'];

    return (
      <button
        style={{ backgroundColor: COLORS[this.state.total % COLORS.length] }}
        onClick={this.handleButtonClick}
      >
        {this.state.total} Like{this.state.total !== 1 && 's'}
      </button>
    );
  }
}

class ClickablePicture extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      clicked: false
    };
  }

  toggleClicked = () => {
    this.setState({
      clicked: !this.state.clicked
    });
  };

  render() {
    return (
      <img
        src={this.state.clicked ? this.props.imgClicked : this.props.img}
        alt=""
        onClick={this.toggleClicked}
      />
    );
  }
}

class Dice extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      image: '/img/dice3.png'
    };
  }

  handleClick = () => {
    this.setState({
      image: '/img/dice-empty.png'
    });
    setTimeout(() => {
      if (this.state.image === '/img/dice-empty.png') {
        const dots = Math.ceil(Math.random() * 6);
        this.setState({
          image: `/img/dice${dots}.png`
        });
      }
    }, 1000);
  };

  render() {
    return <img onClick={this.handleClick} src={this.state.image} alt="Dice" />;
  }
}

class SignupPage extends React.Component {
  state = {
    email: '',
    password: '',
    nationality: 'PT'
  };

  handleFormSubmission = (event) => {
    event.preventDefault();
  };

  handleInputChange = (event) => {
    const value = event.target.value;
    const name = event.target.name;
    this.setState({
      [name]: value
    });
  };

  render() {
    // const passwordIsValid = this.state.password.length >= 7;
    const passwordIsValid = /^(?=.*[A-Z].*[A-Z])(?=.*[!@#$&*])(?=.*[0-9].*[0-9])(?=.*[a-z].*[a-z].*[a-z]).{8}$/.test(
      this.state.password
    );
    const emailIsValid = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/.test(
      this.state.email
    );

    return (
      <div>
        <form onSubmit={this.handleFormSubmission}>
          <label htmlFor="email-input">Email</label>
          <input
            id="email-input"
            type="email"
            placeholder="Your Email"
            name="email"
            value={this.state.email}
            onChange={this.handleInputChange}
          />
          {!emailIsValid && <small>Your email is invalid</small>}

          <label htmlFor="password-input">Password</label>
          <input
            id="password-input"
            type="password"
            placeholder="Your Password"
            name="password"
            value={this.state.password}
            onChange={this.handleInputChange}
          />
          {!passwordIsValid && <small>Your password is too weak</small>}

          <label htmlFor="nationality-input">Nationality</label>
          <select
            id="nationality-input"
            name="nationality"
            value={this.state.select}
            onChange={this.handleInputChange}
          >
            <option value="PT">Portugal</option>
            <option value="AT">Austria</option>
            <option value="ES">Spain</option>
          </select>

          <button>Sign Up</button>
        </form>

        <hr />

        <p>Hallo!</p>

        <p>Your email address is {this.state.email}.</p>

        <p>Your nationality is {this.state.nationality}.</p>

        <p>Your password is {this.state.password.length} characters long.</p>

        <p>Your email address is correct</p>
      </div>
    );
  }
}

function App() {
  return (
    <div className="App">
      <SignupPage />
      <Dice />
      <FaceBook />
      <Rating>0</Rating>
      <Rating>1.49</Rating>
      <Rating>1.5</Rating>
      <Rating>3</Rating>
      <Rating>4</Rating>
      <Rating>5</Rating>
      <DriverCard name="José" rating={3.7} />
      <BoxColor r={255} g={0} b={0} />
      <BoxColor r={128} g={255} b={0} />
      <LikeButton />
      <LikeButton />
      <ClickablePicture
        img="/img/persons/maxence.png"
        imgClicked="/img/persons/maxence-glasses.png"
        foo="bar"
      />
    </div>
  );
}

export default App;