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

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

export default class SectionList extends React.Component<Props, any> {
    render() {
        return (
            <table>
14 15 16 17 18 19 20 21 22 23 24 25 26
                <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
27 28 29 30 31 32 33
            </table>
        );
    }

    renderRowsForSections(sections: Section[]): JSX.Element[] {
        return sections.map(section => {
            return (
34
                <tr key={section.id}>
Zac Wood's avatar
Zac Wood committed
35 36 37 38 39 40 41
                    <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>
42
                    {this.renderSelectSectionColumn(section.crn)}
Zac Wood's avatar
Zac Wood committed
43 44 45 46
                </tr>
            );
        });
    }
47 48 49 50 51 52

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

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