BookBus.js

import React, { useEffect, useState } from 'react';
import Axios from 'axios';
import moment from 'moment';
import { Link } from 'react-router-dom';
import styles from './Heading.module.css';
import './BookBus.css';
import Header from './Header';

function BookBus({ user, match, history, selectedBus }) {
  //Setting state for bus with temporary values
  const [bus, setBus] = useState({
    seats: 60,
    seatsTaken: [],
    selectedSeat: 0,
  });
  const [name, setName] = useState('');
  const [gender, setGender] = useState('female');
  const [selectedSeat, setSelectedSeat] = useState(0);
  const busId = match.params.id;
  useEffect(() => {
    const fetchBusData = async () => {
      const { data: currBus } = await Axios.get(
        `http://localhost:8080/bus/${busId}`
      );
      setBus(currBus);
      selectedBus.setSelectedBus(currBus);
    };
    fetchBusData();
  }, [busId]);
  //--------Displaying Seats for bus----------------------
  const getSeatMarkup = (
    <div className="seat-map-container border border-primary rounded">
      {Array(bus.seats)
        .fill(1)
        .map((_, index) => {
          let style = {
            color: 'grey',
            margin: 'auto',
          };
          if (bus.seatsTaken.includes(index + 1)) style.color = 'red';
          else if (selectedSeat === index + 1) style.color = 'green';
          return (
            <div
              style={{
                width: '16%',
                display: 'inline-block',
              }}
            >
              <div className="d-flex justify-content-center">
                <i
                  className="fas fa-chair"
                  onClick={
                    bus.seatsTaken.includes(index + 1)
                      ? () => {}
                      : () => setSelectedSeat(index + 1)
                  }
                  style={style}
                ></i>
              </div>
            </div>
          );
        })}
      <div className="m-2 d-flex flex-column align-items-center justify-content-center">
        <h5 className="display-5 alert-primary m-3">Ticket Fare</h5>
        <div>
          <span className="font-weight-bold">Selected Seat</span> :{' '}
          {selectedSeat === 0 ? 'None' : selectedSeat}
        </div>
        <div>
          <span className="font-weight-bold">Fare</span> : {700}
        </div>
        <div>
          <span className="font-weight-bold">Taxes</span> :
          {`18% of ${700} = ${700 * 0.18}`}
        </div>
        <div>
          <span className="font-weight-bold">Total Fare</span> :
          {`₹${700 + 700 * 0.18}`}
        </div>
      </div>
    </div>
  );

  const bookTicket = (e) => {
    e.preventDefault();
    history.push(`/bus/${bus.id}/${name}/${selectedSeat}/${gender}`);
  };

  return (
    <div>
      <Header />
      <div className="container">
        <div className="jumobtron">
          <h2 className={styles.trip}>Passenger Details</h2>
        </div>
        {bus ? (
          <div className="main-container mt-5">
            {getSeatMarkup}
            <div className="bus-info border border-primary rounded">
              <div className="d-flex flex-column align-items-center justify-content-center p-2">
                <h5 className="display-4 alert-primary m-3">Bus Information</h5>
                <div>
                  <span className="font-weight-bold">Type</span> : {bus.type}
                </div>
                <div>
                  <span className="font-weight-bold">From</span> : {bus.source}
                </div>
                <div>
                  <span className="font-weight-bold">Destination</span> :
                  {bus.destination}
                </div>
                <div>
                  <span className="font-weight-bold">Time</span> : {bus.time}
                </div>
                <div>
                  <span className="font-weight-bold">Date</span> :
                  {moment(bus.date).format('MMMM Do YYYY').toString()}
                </div>
                <h5 className="display-4 alert alert-primary m-3">
                  Passenger Information
                </h5>
                <form onSubmit={bookTicket}>
                  <div className="form-group">
                    <label htmlFor="name">Name</label>
                    <input
                      className="form-control"
                      id="name"
                      value={name}
                      type="text"
                      required
                      onChange={(e) => setName(e.target.value)}
                    />
                  </div>
                  <div className="form-group">
                    <label htmlFor="gender">Gender</label>
                    <select
                      id="name"
                      value={gender}
                      required
                      className="form-control"
                      onChange={(e) => setGender(e.target.value)}
                    >
                      <option disabled>Gender</option>
                      <option value="male">Male</option>
                      <option value="female">Female</option>
                    </select>
                  </div>
                  <button
                    disabled={user.user && selectedSeat !== 0 ? false : true}
                    className="btn-primary btn"
                  >
                    Book
                  </button>
                  {!user.user ? (
                    <div className="alert alert-danger mt-2">
                      You must my logged in to Book ticket.{' '}
                      <Link to="/">
                        <a href="/#">Login</a>
                      </Link>
                    </div>
                  ) : null}
                </form>
              </div>
            </div>
          </div>
        ) : (
          <h2>Getting bus data</h2>
        )}
      </div>
    </div>
  );
}

export default BookBus;