"Generate" button now downloads the generated calendar

schedules_api/start.sh

@@ -7,8 +7,8 @@ export SECRET_KEY_BASE=$(rails secret)
 #cp db/development.sqlite3 db/production.sqlite3
 
 # load data from patriot web into database
-rails db:migrate
-rails db:seed
+# rails db:migrate
+# rails db:seed
 
 # start the server
 rails s

schedules_web/src/components/ScheduleBadge.tsx

@@ -5,6 +5,7 @@ import CourseSectionList from './CourseSectionList';
 
 interface ScheduleBadgeProps {
     schedule: CourseSection[];
+    generateCalendar: (schedule: CourseSection[]) => Promise<void>;
     removeCourseSection: (courseSection: CourseSection) => void;
 }
 
@@ -24,7 +25,7 @@ class ScheduleBadge extends React.Component<ScheduleBadgeProps, State> {
     toggle = () => this.setState({ collapse: !this.state.collapse });
 
     render() {
-        const { schedule, removeCourseSection } = this.props;
+        const { schedule, removeCourseSection, generateCalendar } = this.props;
         return (
             <div>
                 <Row className="justify-content-end">
@@ -46,7 +47,7 @@ class ScheduleBadge extends React.Component<ScheduleBadgeProps, State> {
                                     Close
                                 </Button>
                                 <h1 className="px-3">Your Schedule</h1>
-                                <Button size="sm" outline color="primary">
+                                <Button size="sm" outline color="primary" onClick={() => generateCalendar(schedule)}>
                                     Generate
                                 </Button>
                             </Row>

schedules_web/src/components/ScheduleRoot.tsx

 import * as React from 'react';
 import CourseSection from '../util/CourseSection';
 import ScheduleBadge from './ScheduleBadge';
+import ApiService from '../util/ApiService';
+import { downloadFile } from '../util/utilities';
 
-interface SearchRootProps {
+interface ScheduleRootProps {
     schedule: CourseSection[];
     removeCourseSection: (courseSection: CourseSection) => any;
 }
 
-// const generateSchedule = (schedule: CourseEntry[]): void => {
-//     const crns = schedule.map(entry => entry.crn);
+const generateSchedule = async (schedule: CourseSection[]): Promise<void> => {
+    const crns = schedule.map(section => section.crn);
+    const calendar = await ApiService.generateCalendar(crns);
+    downloadFile(calendar, 'GMU Fall 2018.ics');
+};
 
-//     postData(ENDPOINTS.generateCalendar, crns)
-//         .then(response => response.text())
-//         .then(icalText => downloadCalendar(icalText));
-// };
-
-const ScheduleRoot = ({ schedule, removeCourseSection }: SearchRootProps) => (
+const ScheduleRoot = ({ schedule, removeCourseSection }: ScheduleRootProps) => (
     <div>
-        <ScheduleBadge schedule={schedule} removeCourseSection={removeCourseSection} />
+        <ScheduleBadge
+            schedule={schedule}
+            removeCourseSection={removeCourseSection}
+            generateCalendar={generateSchedule}
+        />
         {/* <ScheduleList courses={schedule} selectCourseCallback={removeCourseSection} /> */}
         {/* <button onClick={generateSchedule}>Generate Schedule</button> */}
     </div>

schedules_web/src/util/ApiService.ts

@@ -5,9 +5,20 @@ class ApiService {
         this.apiRoot = apiRoot;
     }
 
-    searchCourseSections = async (crn: string) => fetchJson(`${this.apiRoot}/course_sections?crn=${crn}`);
+    searchCourseSections = async (crn: string): Promise<string[]> =>
+        fetchJson(`${this.apiRoot}/course_sections?crn=${crn}`);
+    generateCalendar = async (crns: string[]): Promise<string> =>
+        postJson(`${this.apiRoot}/generate`, crns).then(response => response.text());
 }
 
 const fetchJson = async (url: string): Promise<any> => fetch(url).then(response => response.json());
+const postJson = (endpoint: string, data: any): Promise<Response> =>
+    fetch(endpoint, {
+        method: 'POST',
+        body: JSON.stringify(data),
+        headers: {
+            'Content-Type': 'application/json',
+        },
+    });
 
 export default new ApiService('http://localhost:3000/api');

schedules_web/src/util/utilities.ts

@@ -5,18 +5,5 @@
  */
 import * as FileSaver from 'file-saver';
 
-export const ENDPOINTS = {
-    generateCalendar: 'http://localhost:3000/api/generate',
-};
-
-export const postData = (endpoint: string, data: any): Promise<Response> =>
-    fetch(endpoint, {
-        method: 'POST',
-        body: JSON.stringify(data),
-        headers: {
-            'Content-Type': 'application/json',
-        },
-    });
-
-export const downloadCalendar = (calendarText: string) =>
-    FileSaver.saveAs(new Blob([calendarText], { type: 'text/plain;charset=utf-8' }), 'GMU Fall 2018.ics');
+export const downloadFile = (text: string, fileName: string) =>
+    FileSaver.saveAs(new Blob([text], { type: 'text/plain;charset=utf-8' }), fileName);