Section.jsx 2.38 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react';
import Cart from 'src/Cart';
import Stars from 'src/Stars';

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

    onClick = e => {
        e.stopPropagation();
        console.log(e.target.tagName);
Zac Wood's avatar
Zac Wood committed
14
        if (e.target.tagName === 'A') return; // if we clicked on a link, don't add the section to the cart
15
16
17
18
19
20
21
22

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

        this.props.onClick && this.props.onClick(this.props.crn);
    };

    render() {
Zac Wood's avatar
Zac Wood committed
23
        const { name, title, crn, instructor_name, instructor_url, teaching_rating, location, days, start_time, end_time } = this.props;
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
        const { inCart } = this.state;

        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>
                {remove}
                {add}
Zac Wood's avatar
Zac Wood committed
54
55
56
57
58
59
60
61
                <i className="fas fa-chalkboard-teacher" />{' '}
                {instructor_name !== 'TBA' ? (
                    <span>
                        <a href={instructor_url}>{instructor_name}</a> {percent}
                    </span>
                ) : (
                    <span>{instructor_name}</span>
                )}
62
63
64
65
66
67
68
                <br />
                <i className="fas fa-map-marker-alt" /> {location} <br />
                <i className="fas fa-clock" /> {days}, {start_time} - {end_time} <br />
            </li>
        );
    }
}