Course.jsx 2.64 KB
Newer Older
Zac Wood's avatar
Zac Wood committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import React from 'react';

import SectionList from 'src/SectionList';

export default class Course extends React.Component {
    constructor(props) {
        super(props);
        this.state = { expanded: false, sections: [] };
    }

    async onClick() {
        if (this.state.sections.length === 0) {
            const resp = await fetch(`/api/course_sections?course_id=${this.props.id}`);
            const json = await resp.json();
            this.setState({ sections: json });
        }
        this.setState({ expanded: !this.state.expanded });
    }

    prereqs = () => {
        if (this.props.prereqs) {
            const [first, rest] = this.props.prereqs.split(':');
            const [reqs, note] = rest.split('.');
            return (
                <p>
                    <strong>{first}</strong>
                    {reqs}
                    <sub>{note}</sub>
                </p>
            );
        }
        return <div />;
    };

    // <% first, rest = course.prereqs.split(':') %>
    // 	    <% prereqs, note = rest.split('.') %>
    // 	    <p><strong><%= first %>:</strong> <%= prereqs %> <sub><%= note %></sub></p>
    render() {
        const { id, subject, course_number, title, credits, description, url } = this.props;

        return (
            <div className="card course-card" onClick={() => this.onClick()}>
                <div className="card-header">
                    <div className="row">
                        <div className="col">
                            <a href={url}>
                                <h4 className="title">{`${subject} ${course_number}`}</h4>
                            </a>
                        </div>
                    </div>
                    <div className="d-md-flex justify-content-between">
                        <h5>
                            <em>{title}</em>
                        </h5>
                        <div className="attr-list justify-content-start">
                            <div className="attr">
                                <div className="icon">
                                    <i className="fa fa-book" />
                                </div>
                                {credits} credits
                            </div>
                        </div>
                    </div>
                </div>
                <div className="card-body">
                    <p>{description}</p>
                    {this.prereqs()}
                    <div className="list-group list-group-flush sections" style={{ display: 'none' }} />
                    <SectionList {...this.state} expandable={true} />
                </div>
            </div>
        );
    }
}