React refactor

schedules_web/src/components/App.tsx

@@ -12,20 +12,30 @@ class App extends React.Component<any, State> {
     constructor(props: any) {
         super(props);
         this.state = { currentSchedule: [] };
+    }
 
-        this.addSectionToCurrentScheduleIfUnique = this.addSectionToCurrentScheduleIfUnique.bind(this);
-        this.generateSchedule = this.generateSchedule.bind(this);
+    render() {
+        return (
+            <div>
+                <h1>Schedules</h1>
+                <h2>Search</h2>
+                <Search addSearchResultCallback={this.addSectionToCurrentScheduleIfUnique} />
+                <h2>Your schedule</h2>
+                <SectionList sections={this.state.currentSchedule} />
+                <button onClick={this.generateSchedule}>Generate Schedule</button>
+            </div>
+        );
     }
 
-    addSectionToCurrentScheduleIfUnique(section: Section) {
+    addSectionToCurrentScheduleIfUnique = (section: Section) => {
         if (!this.state.currentSchedule.find(sectionInSchedule => section === sectionInSchedule)) {
             this.setState({
                 currentSchedule: [...this.state.currentSchedule, section],
             });
         }
-    }
+    };
 
-    generateSchedule() {
+    generateSchedule = () => {
         const crns = this.state.currentSchedule.map(section => section.crn);
         fetch('http://localhost:3000/api/generate', {
             method: 'POST',
@@ -39,19 +49,6 @@ class App extends React.Component<any, State> {
                 const blob = new Blob([text], { type: 'text/plain;charset=utf-9' });
                 FileSaver.saveAs(blob, 'GMU Fall 2018.ics');
             });
-    }
-
-    render() {
-        return (
-            <div>
-                <h1>Schedules</h1>
-                <h2>Search</h2>
-                <Search addSearchResultCallback={this.addSectionToCurrentScheduleIfUnique} />
-                <h2>Your schedule</h2>
-                <SectionList sections={this.state.currentSchedule} />
-                <button onClick={this.generateSchedule}>Generate Schedule</button>
-            </div>
-        );
-    }
+    };
 }
 export default App;

schedules_web/src/components/Search.tsx

@@ -14,13 +14,7 @@ interface State {
 export default class Search extends React.Component<Props, State> {
     constructor(props: Props) {
         super(props);
-
         this.state = { sections: [] };
-        this.searchForSections = this.searchForSections.bind(this);
-    }
-
-    searchForSections(crn: string) {
-        fetchSectionWithCRN(crn).then(section => this.setState({ sections: [section] }));
     }
 
     render() {
@@ -34,4 +28,8 @@ export default class Search extends React.Component<Props, State> {
             </div>
         );
     }
+
+    searchForSections = (crn: string) => {
+        fetchSectionWithCRN(crn).then(section => this.setState({ sections: [section] }));
+    };
 }

schedules_web/src/components/SearchBar.tsx

@@ -12,20 +12,6 @@ export default class SearchBar extends React.Component<Props, State> {
     constructor(props: Props) {
         super(props);
         this.state = { searchTerm: '' };
-
-        this.onSearch = this.onSearch.bind(this);
-        this.updateSearchTerm = this.updateSearchTerm.bind(this);
-    }
-
-    updateSearchTerm(event: any) {
-        this.setState({
-            searchTerm: event.target.value,
-        });
-    }
-
-    onSearch(event: any) {
-        this.props.onSearch(this.state.searchTerm);
-        event.preventDefault();
     }
 
     render() {
@@ -41,4 +27,15 @@ export default class SearchBar extends React.Component<Props, State> {
             </form>
         );
     }
+
+    onSearch = (event: any) => {
+        this.props.onSearch(this.state.searchTerm);
+        event.preventDefault();
+    };
+
+    updateSearchTerm = (event: any) => {
+        this.setState({
+            searchTerm: event.target.value,
+        });
+    };
 }

schedules_web/src/components/SectionList.tsx

@@ -7,13 +7,6 @@ interface Props {
 }
 
 export default class SectionList extends React.Component<Props, any> {
-    constructor(props: Props) {
-        super(props);
-
-        this.renderSelectSectionColumn = this.renderSelectSectionColumn.bind(this);
-        this.getSectionWithCRN = this.getSectionWithCRN.bind(this);
-    }
-
     render() {
         return (
             <table>