SectionList.tsx 2.12 KB
Newer Older
Zac Wood's avatar
Zac Wood committed
1
import * as React from 'react';
2
import { Section } from '../util/section';
Zac Wood's avatar
Zac Wood committed
3 4 5

interface Props {
    sections: Section[];
6
    buttonText: string;
7
    selectSectionCallback?: (section: Section) => void;
Zac Wood's avatar
Zac Wood committed
8 9 10
}

export default class SectionList extends React.Component<Props, any> {
11 12 13 14
    constructor(props: Props) {
        super(props);
    }

Zac Wood's avatar
Zac Wood committed
15 16 17
    render() {
        return (
            <table>
18 19 20 21 22 23 24 25 26 27 28 29 30
                <tbody>
                    <tr>
                        <th>Course</th>
                        <th>Section Name</th>
                        <th>CRN</th>
                        <th>Days</th>
                        <th>Instructor</th>
                        <th>Location</th>
                        <th>Time</th>
                        <th />
                    </tr>
                    {this.renderRowsForSections(this.props.sections)}
                </tbody>
Zac Wood's avatar
Zac Wood committed
31 32 33 34 35 36 37
            </table>
        );
    }

    renderRowsForSections(sections: Section[]): JSX.Element[] {
        return sections.map(section => {
            return (
38
                <tr key={section.id}>
Zac Wood's avatar
Zac Wood committed
39 40 41 42 43 44 45
                    <td>{section.name}</td>
                    <td>{section.title}</td>
                    <td>{section.crn}</td>
                    <td>{section.days}</td>
                    <td>{section.instructor}</td>
                    <td>{section.location}</td>
                    <td>{[section.startTime, section.endTime].join(' - ')}</td>
46
                    {this.renderSelectSectionColumn(section.crn)}
Zac Wood's avatar
Zac Wood committed
47 48 49 50
                </tr>
            );
        });
    }
51 52 53 54 55 56

    renderSelectSectionColumn(rowCRN: string): JSX.Element {
        if (this.props.selectSectionCallback) {
            const sectionWithCRN = this.getSectionWithCRN(rowCRN);
            return (
                <td>
57 58 59
                    <button onClick={() => this.props.selectSectionCallback(sectionWithCRN)}>
                        {this.props.buttonText}
                    </button>
60 61 62 63 64 65 66 67 68 69
                </td>
            );
        } else {
            return <td />;
        }
    }

    getSectionWithCRN(crn: string): Section {
        return this.props.sections.find(section => section.crn === crn);
    }
Zac Wood's avatar
Zac Wood committed
70
}