Begin seperation of smart, dumb components

schedules_web/src/components/App.tsx

+import * as React from 'react';
+import Search from '../containers/Search';
+import Header from './Header';
+
+const App = () => (
+    <div>
+        <Header />
+        <Search />
+    </div>
+);
+
+export default App;

schedules_web/src/components/Header.tsx

+import * as React from 'react';
+
+const Header = () => (
+    <h1 className="display-3">
+        <span className="fa-stack mr-3">
+            <i className="fas fa-circle fa-stack-2x" />
+            <i className="fas fa-flag fa-stack-1x fa-inverse" />
+        </span>
+        Schedules
+    </h1>
+);
+
+export default Header;

schedules_web/src/components/Search.tsx

+import * as React from 'react';
+import SearchBar from '../components/SearchBar';
+import SectionList from '../components/SectionList';
+import { Section } from '../util/section';
+
+interface SearchProps {
+    searchedSections: Section[];
+    searchSections: (crn: string) => any;
+    addSection: (section: Section) => any;
+}
+
+const Search = ({ searchedSections, searchSections, addSection }: SearchProps) => (
+    <div>
+        <SearchBar onSearch={searchSections} />
+        <SectionList sections={searchedSections} buttonText="Add to schedule" selectSectionCallback={addSection} />
+    </div>
+);
+
+export default Search;

schedules_web/src/containers/App.tsx

@@ -5,7 +5,6 @@ import SectionList from '../components/SectionList';
 import { State } from '../reducers';
 import { Section } from '../util/section';
 import { downloadCalendar, ENDPOINTS, postData } from '../util/utilities';
-import Search from './Search';
 
 interface AppProps {
     schedule: Section[];
@@ -20,15 +19,6 @@ class App extends React.Component<AppProps> {
     render() {
         return (
             <div>
-                <h1 className="display-3">
-                    <span className="fa-stack mr-3">
-                        <i className="fas fa-circle fa-stack-2x" />
-                        <i className="fas fa-flag fa-stack-1x fa-inverse" />
-                    </span>
-                    Schedules
-                </h1>
-                <h2>Search</h2>
-                <Search />
                 <h2>Your schedule</h2>
                 <SectionList
                     sections={this.props.schedule}

schedules_web/src/containers/Search.tsx

-import * as React from 'react';
 import { connect } from 'react-redux';
 import { addSection } from '../actions/schedule/schedule.actions';
 import { searchSections } from '../actions/search/search.actions';
-import SearchBar from '../components/SearchBar';
-import SectionList from '../components/SectionList';
+import Search from '../components/Search';
 import { State } from '../reducers';
-import { Section } from '../util/section';
-
-interface SearchProps {
-    searchedSections: Section[];
-    searchSections: (crn: string) => any;
-    addSection: (section: Section) => any;
-}
-
-class Search extends React.Component<SearchProps> {
-    constructor(props: SearchProps) {
-        super(props);
-    }
-
-    render() {
-        return (
-            <div>
-                <SearchBar onSearch={this.props.searchSections} />
-                <SectionList
-                    sections={this.props.searchedSections}
-                    buttonText="Add to schedule"
-                    selectSectionCallback={this.props.addSection}
-                />
-            </div>
-        );
-    }
-}
 
 const mapStateToProps = (state: State) => ({
     searchedSections: state.search.searchedSections,

schedules_web/src/index.tsx

@@ -13,7 +13,7 @@ import * as ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { applyMiddleware, compose, createStore } from 'redux';
 import ReduxThunk from 'redux-thunk';
-import App from './containers/App';
+import App from './components/App';
 import { allReducers } from './reducers';
 
 declare global {