Initial abstraction of ScheduleBadge

schedules_web/src/actions/schedule/schedule.actions.ts

-import { CourseSection } from '../../util/CourseSection';
+import CourseSection from '../../util/CourseSection';
 import { ADD_COURSE_SECTION, REMOVE_COURSE_SECTION } from './schedule.action-types';
 
 export interface ScheduleAction {

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

-import { CourseSection } from '../../util/CourseSection';
+import CourseSection from '../../util/CourseSection';
 import { SET_SEARCH_RESULTS } from './search.action-types';
 
 export interface SearchAction {

schedules_web/src/components/App.tsx

 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';
@@ -9,10 +10,10 @@ require('../css/core.css');
 const App = () => (
     <div>
         <Container>
+            <Schedule />
             <Header />
             <Search />
             <CourseSectionCard />
-            {/* <Schedule /> */}
         </Container>
     </div>
 );

schedules_web/src/components/Header.tsx

@@ -5,12 +5,6 @@ require('../css/icon-badge.css');
 
 const Header = () => (
     <div>
-        {/* TODO Extract into its own components with state management. */}
-        <Row className="justify-content-end my-5 px-3">
-            <span className="fa-stack fa-3x has-badge" data-count="0">
-                <i className="fa fas fa-shopping-bag fa-stack-1x" />
-            </span>
-        </Row>
         <Row className="justify-content-center my-5">
             <h1>
                 <i className="far fa-calendar-alt" /> Schedules

schedules_web/src/components/ScheduleBadge.tsx

+import * as React from 'react';
+import { Row } from 'reactstrap';
+import CourseSection from '../util/CourseSection';
+
+interface ScheduleBadgeProps {
+    schedule: CourseSection[];
+}
+
+const ScheduleBadge = ({ schedule }: ScheduleBadgeProps) => (
+    <Row className="justify-content-end my-5 px-3">
+        <span className="fa-stack fa-3x has-badge" data-count={schedule.length}>
+            <i className="fa fas fa-shopping-bag fa-stack-1x" />
+        </span>
+    </Row>
+);
+
+export default ScheduleBadge;

schedules_web/src/components/ScheduleList.tsx

 import * as React from 'react';
-import { CourseSection } from '../util/CourseSection';
+import CourseSection from '../util/CourseSection';
 
 interface Props {
     courses: CourseSection[];

schedules_web/src/components/ScheduleRoot.tsx

 import * as React from 'react';
-import { CourseSection } from '../util/CourseSection';
-import ScheduleList from './ScheduleList';
+import CourseSection from '../util/CourseSection';
+import ScheduleBadge from './ScheduleBadge';
 
 interface SearchRootProps {
     schedule: CourseSection[];
@@ -17,7 +17,8 @@ interface SearchRootProps {
 
 const ScheduleRoot = ({ schedule, removeCourseSection }: SearchRootProps) => (
     <div>
-        <ScheduleList courses={schedule} selectCourseCallback={removeCourseSection} />
+        <ScheduleBadge schedule={schedule} />
+        {/* <ScheduleList courses={schedule} selectCourseCallback={removeCourseSection} /> */}
         {/* <button onClick={generateSchedule}>Generate Schedule</button> */}
     </div>
 );

schedules_web/src/components/SearchRoot.tsx

 import * as React from 'react';
 import SearchBar from '../components/SearchBar';
-import { CourseSection } from '../util/CourseSection';
+import CourseSection from '../util/CourseSection';
 
 interface SearchRootProps {
     searchResults: CourseSection[];

schedules_web/src/reducers/schedule.reducer.ts

@@ -6,7 +6,7 @@
  */
 import { ADD_COURSE_SECTION, REMOVE_COURSE_SECTION } from '../actions/schedule/schedule.action-types';
 import { ScheduleAction } from '../actions/schedule/schedule.actions';
-import { CourseSection } from '../util/CourseSection';
+import CourseSection from '../util/CourseSection';
 
 export type ScheduleState = CourseSection[];
 

schedules_web/src/reducers/search.reducer.ts

@@ -6,7 +6,7 @@
  */
 import { SET_SEARCH_RESULTS } from '../actions/search/search.action-types';
 import { SearchAction } from '../actions/search/search.actions';
-import { CourseSection } from '../util/CourseSection';
+import CourseSection from '../util/CourseSection';
 
 export type SearchState = CourseSection[];
 

schedules_web/src/util/CourseSection.ts

@@ -3,7 +3,7 @@
  *
  * Common object interface for all "Section"s.
  */
-export interface CourseSection {
+interface CourseSection {
     id: number;
     name: string;
     title: string;
@@ -14,3 +14,5 @@ export interface CourseSection {
     startTime: string;
     endTime: string;
 }
+
+export default CourseSection;