Search is 90% done

- ability to search for CourseSections
- add to searchResults state
- if something in there, render cards (with static data for now)

schedules_web/src/components/App.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { Container } from 'reactstrap';
 import Schedule from '../containers/Schedule';
 import Search from '../containers/Search';
-import CourseSectionCard from './CourseSectionCard';
 import Header from './Header';
 
 require('../css/core.css');
@@ -13,7 +12,6 @@ const App = () => (
             <Schedule />
             <Header />
             <Search />
-            <CourseSectionCard />
         </Container>
     </div>
 );

schedules_web/src/components/CourseSectionCard.tsx

 import * as React from 'react';
 import { Button, Card, CardBody, CardTitle, Col, Row } from 'reactstrap';
+import CourseSection from '../util/CourseSection';
+
+interface CourseSectionCardProps {
+    courseSectionAction: (courseSection: CourseSection) => void;
+    courseSection: CourseSection;
+    courseSectionActionButtonText: string;
+}
 
 require('../css/button-text-override.css');
 
-const CourseSectionCard = () => (
+const CourseSectionCard = ({
+    courseSection,
+    courseSectionAction,
+    courseSectionActionButtonText,
+}: CourseSectionCardProps) => (
     <Row className="justify-content-center">
         <Col md="9">
             <Card>
@@ -24,8 +35,13 @@ const CourseSectionCard = () => (
                             <i className="fas fa-school fa-fw" /> James Buchanan Hall D023
                         </Col>
                         <Col md="6">
-                            <Button color="primary" size="lg" block className="shadow-sm mt-3">
-                                <i className="fas fa-plus-circle mr-2 fa-fw" /> Add to schedule
+                            <Button
+                                onClick={() => courseSectionAction(courseSection)}
+                                color="primary"
+                                size="lg"
+                                block
+                                className="shadow-sm mt-3">
+                                <i className="fas fa-plus-circle mr-2 fa-fw" /> {courseSectionActionButtonText}
                             </Button>
                         </Col>
                     </Row>

schedules_web/src/components/CourseSectionList.tsx

+import * as React from 'react';
+import CourseSection from '../util/CourseSection';
+import CourseSectionCard from './CourseSectionCard';
+
+interface CourseSectionListProps {
+    courseSections: CourseSection[];
+    courseSectionAction: (courseSection: CourseSection) => void;
+    courseSectionActionButtonText: string;
+}
+
+const CourseSectionList = ({
+    courseSections,
+    courseSectionAction,
+    courseSectionActionButtonText,
+}: CourseSectionListProps) => (
+    <div>
+        {courseSections.map(courseSection => (
+            <CourseSectionCard
+                key={courseSection.crn}
+                courseSection={courseSection}
+                courseSectionAction={courseSectionAction}
+                courseSectionActionButtonText={courseSectionActionButtonText}
+            />
+        ))}
+    </div>
+);
+
+export default CourseSectionList;

schedules_web/src/components/ScheduleBadge.tsx

 import * as React from 'react';
 import { Button, Card, CardBody, CardTitle, Collapse, Row } from 'reactstrap';
 import CourseSection from '../util/CourseSection';
-import CourseSectionCard from './CourseSectionCard';
 
 interface ScheduleBadgeProps {
     schedule: CourseSection[];
@@ -38,7 +37,7 @@ class ScheduleBadge extends React.Component<ScheduleBadgeProps, State> {
                     />
                 </Row>
                 <Collapse isOpen={this.state.collapse}>
-                    <Card shadow>
+                    <Card>
                         <CardTitle className="mt-3">
                             <Row className="justify-content-center">
                                 <Button size="sm" outline color="danger" onClick={this.toggle}>
@@ -51,13 +50,7 @@ class ScheduleBadge extends React.Component<ScheduleBadgeProps, State> {
                             </Row>
                         </CardTitle>
                         <legend />
-                        <CardBody>
-                            <CourseSectionCard />
-                            <CourseSectionCard />
-                            <CourseSectionCard />
-                            <CourseSectionCard />
-                            <CourseSectionCard />
-                        </CardBody>
+                        <CardBody />
                     </Card>
                 </Collapse>
             </div>

schedules_web/src/components/ScheduleList.tsx

-import * as React from 'react';
-import CourseSection from '../util/CourseSection';
-
-interface Props {
-    courses: CourseSection[];
-    selectCourseCallback?: (courseSection: CourseSection) => void;
-}
-
-export default class ScheduleList extends React.Component<Props, any> {
-    constructor(props: Props) {
-        super(props);
-    }
-
-    render() {
-        return (
-            <table>
-                <tbody>
-                    <tr>
-                        <th>Course</th>
-                        <th>course Name</th>
-                        <th>CRN</th>
-                        <th>Days</th>
-                        <th>Instructor</th>
-                        <th>Location</th>
-                        <th>Time</th>
-                        <th />
-                    </tr>
-                    {this.renderRowsForCourses(this.props.courses)}
-                </tbody>
-            </table>
-        );
-    }
-
-    renderRowsForCourses(courses: CourseSection[]): JSX.Element[] {
-        return courses.map(course => {
-            return (
-                <tr key={course.id}>
-                    <td>{course.name}</td>
-                    <td>{course.title}</td>
-                    <td>{course.crn}</td>
-                    <td>{course.days}</td>
-                    <td>{course.instructor}</td>
-                    <td>{course.location}</td>
-                    <td>{[course.startTime, course.endTime].join(' - ')}</td>
-                    {this.renderSelectCourseColumn(course.crn)}
-                </tr>
-            );
-        });
-    }
-
-    renderSelectCourseColumn(rowCRN: string): JSX.Element {
-        if (this.props.selectCourseCallback) {
-            const courseWithCRN = this.getcourseWithCRN(rowCRN);
-            return (
-                <td>
-                    <button onClick={() => this.props.selectCourseCallback(courseWithCRN)}>"Add to schedule"</button>
-                </td>
-            );
-        } else {
-            return <td />;
-        }
-    }
-
-    getcourseWithCRN(crn: string): CourseSection {
-        return this.props.courses.find(course => course.crn === crn);
-    }
-}

schedules_web/src/components/SearchBar.tsx

 import * as React from 'react';
 import { Button, Col, FormGroup, Input, InputGroup, InputGroupAddon, Row } from 'reactstrap';
+
 interface Props {
     onSearch: (crn: string) => void;
 }

schedules_web/src/components/SearchRoot.tsx

 import * as React from 'react';
 import SearchBar from '../components/SearchBar';
 import CourseSection from '../util/CourseSection';
+import CourseSectionList from './CourseSectionList';
 
 interface SearchRootProps {
     searchResults: CourseSection[];
@@ -11,7 +12,11 @@ interface SearchRootProps {
 const SearchRoot = ({ searchResults, searchCourseSections, addCourseSection }: SearchRootProps) => (
     <div>
         <SearchBar onSearch={searchCourseSections} />
-        {/* <SectionList courses={searchResults} selectCourseCallback={addCourseSection} /> */}
+        <CourseSectionList
+            courseSectionActionButtonText="Add to section"
+            courseSections={searchResults}
+            courseSectionAction={addCourseSection}
+        />
     </div>
 );