ScheduleBadge.tsx 3.57 KB
Newer Older
1
import * as React from 'react';
2
import { Button, Card, CardBody, CardTitle, Collapse, Row } from 'reactstrap';
3
import CourseSection from '../util/CourseSection';
4
import CourseSectionList from './CourseSectionList';
5
import ExportModal from './ExportModal';
6
7
8

interface ScheduleBadgeProps {
    schedule: CourseSection[];
9
    removeCourseSection: (courseSection: CourseSection) => void;
10
11
12
    generateCalendarUrl: () => string;
    openCalendarAsWebcal: () => void;
    downloadIcs: () => Promise<void>;
13
14
}

15
16
interface State {
    collapse: boolean;
17
    isModalOpen: boolean;
18
19
20
21
}

require('../css/icon-badge.css');

22
23
24
25
26
27
/**
 * Contains all functionality for viewing your schedule, such as the
 * shopping cart, list of course sections, and the generate calendar modal.
 *
 * TODO: Split this component up
 */
28
29
30
class ScheduleBadge extends React.Component<ScheduleBadgeProps, State> {
    constructor(props: ScheduleBadgeProps) {
        super(props);
31

32
        this.state = { collapse: false, isModalOpen: false };
33
34
    }

35
36
    toggleCollapse = () => this.setState({ collapse: !this.state.collapse });
    toggleModal = () => this.setState({ isModalOpen: !this.state.isModalOpen });
37

38
    render() {
39
        const { schedule, removeCourseSection, generateCalendarUrl, openCalendarAsWebcal, downloadIcs } = this.props;
40
41
42
43
44
45
46
47
48
        return (
            <div>
                <Row className="justify-content-end">
                    <Button
                        children={
                            <span className="fa-stack fa-3x has-badge" data-count={this.props.schedule.length}>
                                <i className="fa fas fa-shopping-bag fa-stack-1x" />
                            </span>
                        }
49
                        onClick={this.toggleCollapse}
50
51
52
                        id="cart"
                    />
                </Row>
David Haynes's avatar
David Haynes committed
53

54
                <Collapse isOpen={this.state.collapse}>
David Haynes's avatar
David Haynes committed
55
                    <Card>
David Haynes's avatar
David Haynes committed
56
57
58
59
                        <CardBody>
                            <Row className="my-3">
                                <h1 className="px-5">Your Schedule</h1>

60
                                <Button className="ml-auto px-5" outline color="danger" onClick={this.toggleCollapse}>
61
62
                                    Close
                                </Button>
David Haynes's avatar
David Haynes committed
63
64
65
66
67
68
69
70
71
                            </Row>

                            <CourseSectionList
                                courseSections={schedule}
                                courseSectionAction={removeCourseSection}
                                courseSectionActionButtonText="Remove from schedule"
                                destructive
                            />
                            <Row className="justify-content-center">
72
73
74
75
                                <Button
                                    size="sm"
                                    outline
                                    color="primary"
76
                                    onClick={this.toggleModal}
77
                                    disabled={schedule.length === 0}>
78
                                    Generate
79
80
                                </Button>
                            </Row>
81
                        </CardBody>
82
83
                    </Card>
                </Collapse>
84
85
86
87
88
89
90
                <ExportModal
                    isModalOpen={this.state.isModalOpen}
                    toggleModal={this.toggleModal}
                    calendarUrl={generateCalendarUrl}
                    openCalendarAsWebcal={openCalendarAsWebcal}
                    downloadIcs={downloadIcs}
                />
91
92
93
94
            </div>
        );
    }
}
95
96

export default ScheduleBadge;