Section.jsx 2.25 KB
Newer Older
1 2 3 4 5
import React from 'react';
import Cart from 'src/Cart';
import Stars from 'src/Stars';

export default class Section extends React.Component {
6 7 8 9
  constructor(props) {
    super(props);
    this.state = { inCart: Cart.includesCrn(this.props.crn) };
  }
10

11 12
  onClick = e => {
    e.stopPropagation();
13

14
    if (this.props.readOnly) return;
15

16
    if (e.target.tagName === 'A') return; // if we clicked on a link, don't add the section to the cart
17

18 19
    Cart.toggleCrn(this.props.crn);
    this.setState({ inCart: Cart.includesCrn(this.props.crn) });
20

21 22
    this.props.onClick && this.props.onClick(this.props.crn);
  };
23

24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
  render() {
    const {
      name,
      title,
      crn,
      readOnly,
      instructor_name,
      instructor_url,
      teaching_rating,
      location,
      days,
      start_time,
      end_time,
    } = this.props;
    const { inCart } = this.state;
39

40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91
    const percent = teaching_rating ? (
      <Stars percent={(teaching_rating[0] / 5) * 100} />
    ) : null;

    const remove = (
      <span
        className="float-right text-center add-remove-btn"
        style={inCart ? {} : { display: 'none' }}>
        <i id="icon" className="fas fa-minus" />
        <br />
        <span className="text">Remove</span>
      </span>
    );
    const add = (
      <span
        className="float-right text-center add-remove-btn"
        style={inCart ? { display: 'none' } : {}}>
        <i id="icon" className="fas fa-plus" />
        <br />
        <span className="text">Add</span>
      </span>
    );

    return (
      <li className="list-group-item section-item" onClick={this.onClick}>
        <p>
          <b>{name}</b>: {title}{' '}
          <em>
            (#
            {crn})
          </em>
        </p>
        {!readOnly && (
          <div>
            {remove}
            {add}
          </div>
        )}
        <i className="fas fa-chalkboard-teacher" />{' '}
        {instructor_name !== 'TBA' ? (
          <span>
            <a href={instructor_url}>{instructor_name}</a> {percent}
          </span>
        ) : (
          <span>{instructor_name}</span>
        )}
        <br />
        <i className="fas fa-map-marker-alt" /> {location} <br />
        <i className="fas fa-clock" /> {days}, {start_time} - {end_time} <br />
      </li>
    );
  }
92
}