Selected course sections show up in the schedule and can be removed

schedules_web/src/actions/search/search.actions.ts

+import ApiService from '../../util/ApiService';
 import CourseSection from '../../util/CourseSection';
 import { SET_SEARCH_RESULTS } from './search.action-types';
 
@@ -7,8 +8,7 @@ export interface SearchAction {
 }
 
 export const searchCourseSections = (crn: string) => async (dispatch: any) => {
-    const response = await fetch(`http://localhost:3000/api/course_sections?crn=${crn}`);
-    const objects = await response.json();
+    const objects = await ApiService.searchCourseSections(crn);
 
     const results: CourseSection[] = objects.map(
         (object: any): CourseSection => ({

schedules_web/src/components/CourseSectionCard.tsx

@@ -6,6 +6,7 @@ interface CourseSectionCardProps {
     courseSectionAction: (courseSection: CourseSection) => void;
     courseSection: CourseSection;
     courseSectionActionButtonText: string;
+    destructive?: boolean;
 }
 
 require('../css/button-text-override.css');
@@ -14,6 +15,7 @@ const CourseSectionCard = ({
     courseSection,
     courseSectionAction,
     courseSectionActionButtonText,
+    destructive,
 }: CourseSectionCardProps) => (
     <Row className="justify-content-center">
         <Col md="9">
@@ -38,11 +40,12 @@ const CourseSectionCard = ({
                         <Col md="6">
                             <Button
                                 onClick={() => courseSectionAction(courseSection)}
-                                color="primary"
+                                color={destructive ? 'danger' : 'primary'}
                                 size="lg"
                                 block
                                 className="shadow-sm mt-3">
-                                <i className="fas fa-plus-circle mr-2 fa-fw" /> {courseSectionActionButtonText}
+                                <i className={`fas fa-${destructive ? 'minus' : 'plus'}-circle mr-2 fa-fw`} />{' '}
+                                {courseSectionActionButtonText}
                             </Button>
                         </Col>
                     </Row>

schedules_web/src/components/CourseSectionList.tsx

@@ -6,12 +6,14 @@ interface CourseSectionListProps {
     courseSections: CourseSection[];
     courseSectionAction: (courseSection: CourseSection) => void;
     courseSectionActionButtonText: string;
+    destructive?: boolean;
 }
 
 const CourseSectionList = ({
     courseSections,
     courseSectionAction,
     courseSectionActionButtonText,
+    destructive,
 }: CourseSectionListProps) => (
     <div>
         {courseSections.map(courseSection => (
@@ -20,6 +22,7 @@ const CourseSectionList = ({
                 courseSection={courseSection}
                 courseSectionAction={courseSectionAction}
                 courseSectionActionButtonText={courseSectionActionButtonText}
+                destructive={destructive}
             />
         ))}
     </div>

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 CourseSectionList from './CourseSectionList';
 
 interface ScheduleBadgeProps {
     schedule: CourseSection[];
+    removeCourseSection: (courseSection: CourseSection) => void;
 }
 
 interface State {
@@ -15,14 +17,14 @@ require('../css/icon-badge.css');
 class ScheduleBadge extends React.Component<ScheduleBadgeProps, State> {
     constructor(props: ScheduleBadgeProps) {
         super(props);
-        this.toggle = this.toggle.bind(this);
+
         this.state = { collapse: false };
     }
 
-    toggle() {
-        this.setState({ collapse: !this.state.collapse });
-    }
+    toggle = () => this.setState({ collapse: !this.state.collapse });
+
     render() {
+        const { schedule, removeCourseSection } = this.props;
         return (
             <div>
                 <Row className="justify-content-end">
@@ -50,7 +52,14 @@ class ScheduleBadge extends React.Component<ScheduleBadgeProps, State> {
                             </Row>
                         </CardTitle>
                         <legend />
-                        <CardBody />
+                        <CardBody>
+                            <CourseSectionList
+                                courseSections={schedule}
+                                courseSectionAction={removeCourseSection}
+                                courseSectionActionButtonText="Remove from schedule"
+                                destructive
+                            />
+                        </CardBody>
                     </Card>
                 </Collapse>
             </div>

schedules_web/src/components/ScheduleRoot.tsx

@@ -17,7 +17,7 @@ interface SearchRootProps {
 
 const ScheduleRoot = ({ schedule, removeCourseSection }: SearchRootProps) => (
     <div>
-        <ScheduleBadge schedule={schedule} />
+        <ScheduleBadge schedule={schedule} removeCourseSection={removeCourseSection} />
         {/* <ScheduleList courses={schedule} selectCourseCallback={removeCourseSection} /> */}
         {/* <button onClick={generateSchedule}>Generate Schedule</button> */}
     </div>

schedules_web/src/components/SearchRoot.tsx

@@ -13,7 +13,7 @@ const SearchRoot = ({ searchResults, searchCourseSections, addCourseSection }: S
     <div>
         <SearchBar onSearch={searchCourseSections} />
         <CourseSectionList
-            courseSectionActionButtonText="Add to section"
+            courseSectionActionButtonText="Add to schedule"
             courseSections={searchResults}
             courseSectionAction={addCourseSection}
         />

schedules_web/src/util/ApiService.ts

+class ApiService {
+    private apiRoot: string;
+
+    public constructor(apiRoot: string) {
+        this.apiRoot = apiRoot;
+    }
+
+    searchCourseSections = async (crn: string) => fetchJson(`${this.apiRoot}/course_sections?crn=${crn}`);
+}
+
+const fetchJson = async (url: string): Promise<any> => fetch(url).then(response => response.json());
+
+export default new ApiService('http://localhost:3000/api');