Refactor

schedules_web/src/Components/App.js

@@ -9,22 +9,25 @@ class App extends Component {
             sections: [],
         };
 
-        this.addToSchedule = this.addToSchedule.bind(this);
+        this.addSectionToScheduleIfUnique = this.addSectionToScheduleIfUnique.bind(this);
+        this.isSectionInSchedule = this.isSectionInSchedule.bind(this);
     }
 
-    addToSchedule(event, section) {
-        if (this.state.sections !== undefined && !this.state.sections.includes(section)) {
-            this.setState({
-                sections: [...this.state.sections, section],
-            });
+    addSectionToScheduleIfUnique(section) {
+        if (!this.isSectionInSchedule(section)) {
+            this.setState({ sections: [...this.state.sections, section] });
         }
     }
 
+    isSectionInSchedule(section) {
+        return this.state.sections !== undefined && this.state.sections.includes(section);
+    }
+
     render() {
         return (
             <div className="App">
                 <h1>Schedules</h1>
-                <Search addToSchedule={this.addToSchedule} />
+                <Search addToSchedule={this.addSectionToScheduleIfUnique} />
                 <Schedule sections={this.state.sections} />
             </div>
         );

schedules_web/src/Components/SectionsList.js

 import React, { Component } from 'react';
 
 export default class SectionsList extends Component {
+    constructor(props) {
+        super(props);
+
+        this.getRowsForSections = this.getRowsForSections.bind(this);
+        this.getRowForSection = this.getRowForSection.bind(this);
+        this.getLastColumn = this.getLastColumn.bind(this);
+    }
+
+    getRowsForSections() {
+        return this.props.sections.map(section => {
+            return this.getRowForSection(section);
+        });
+    }
+
+    getRowForSection(section) {
+        return (
+            <tr key={section.id}>
+                <td>{section.name}</td>
+                <td>{section.title}</td>
+                <td>{section.crn}</td>
+                <td>{section.instructor}</td>
+                <td>{section.location}</td>
+                <td>{section.days}</td>
+                <td>{[section.start_time, section.end_time].join(' - ')}</td>
+
+                {this.getLastColumn(section)}
+            </tr>
+        );
+    }
+
+    getLastColumn(section) {
+        if (this.props.addToSchedule) {
+            return (
+                <td>
+                    <button onClick={e => this.props.addToSchedule(section)}>Add to schedule</button>
+                </td>
+            );
+        } else {
+            return <td />;
+        }
+    }
+
     render() {
         return (
             <div>
@@ -17,31 +59,7 @@ export default class SectionsList extends Component {
                             <th>Times</th>
                             <th />
                         </tr>
-                        {this.props.sections.map(section => {
-                            return (
-                                <tr key={section.id}>
-                                    <td>{section.name}</td>
-                                    <td>{section.title}</td>
-                                    <td>{section.crn}</td>
-                                    <td>{section.instructor}</td>
-                                    <td>{section.location}</td>
-                                    <td>{section.days}</td>
-                                    <td>{[section.start_time, section.end_time].join(' - ')}</td>
-
-                                    {/* If the addToSchedule prop exists, include an
-                                    add to schedule button to the last column */}
-                                    {this.props.addToSchedule ? (
-                                        <td>
-                                            <button onClick={e => this.props.addToSchedule(e, section)}>
-                                                Add to schedule
-                                            </button>
-                                        </td>
-                                    ) : (
-                                        <td />
-                                    )}
-                                </tr>
-                            );
-                        })}
+                        {this.getRowsForSections()}
                     </tbody>
                 </table>
             </div>

schedules_web/yarn.lock

@@ -5575,9 +5575,9 @@ react-dev-utils@^5.0.1:
     strip-ansi "3.0.1"
     text-table "0.2.0"
 
-react-dom@16.3.1:
-  version "16.3.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.3.1.tgz#6a3c90a4fb62f915bdbcf6204422d93a7d4ca573"
+react-dom@^16.3.1:
+  version "16.3.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.3.2.tgz#cb90f107e09536d683d84ed5d4888e9640e0e4df"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
@@ -5633,9 +5633,9 @@ react-scripts@1.1.4:
   optionalDependencies:
     fsevents "^1.1.3"
 
-react@16.3.1:
-  version "16.3.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.3.1.tgz#4a2da433d471251c69b6033ada30e2ed1202cfd8"
+react@^16.3.1:
+  version "16.3.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.3.2.tgz#fdc8420398533a1e58872f59091b272ce2f91ea9"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"