Search bar is now masonstrapified

schedules_web/src/components/App.tsx

 import * as React from 'react';
 import { Container } from 'reactstrap';
+import Search from '../containers/Search';
 import Header from './Header';
 
 require('../css/core.css');
@@ -8,8 +9,8 @@ const App = () => (
     <div>
         <Container>
             <Header />
-            {/* <Search />
-            <Schedule /> */}
+            <Search />
+            {/* <Schedule /> */}
         </Container>
     </div>
 );

schedules_web/src/components/SearchBar.tsx

 import * as React from 'react';
-
+import { Button, Col, FormGroup, Input, InputGroup, InputGroupAddon, Row } from 'reactstrap';
 interface Props {
     onSearch: (crn: string) => void;
 }
@@ -8,29 +8,20 @@ interface State {
     searchTerm: string;
 }
 
-export default class SearchBar extends React.Component<Props, State> {
+class SearchBar extends React.Component<Props, State> {
+    /**
+     * Render a search bar that manages its current searchTerm and submits
+     * that term to the API through an action function passed in.
+     * @param props The action function to handle the database query
+     */
     constructor(props: Props) {
         super(props);
         this.state = { searchTerm: '' };
     }
 
-    render() {
-        return (
-            <form onSubmit={this.onSearch}>
-                <input
-                    type="text"
-                    placeholder="Enter CRN..."
-                    value={this.state.searchTerm}
-                    onChange={this.updateSearchTerm}
-                />
-                <input type="submit" value="Search" />
-            </form>
-        );
-    }
-
     onSearch = (event: any) => {
-        this.props.onSearch(this.state.searchTerm);
         event.preventDefault();
+        this.props.onSearch(this.state.searchTerm);
     };
 
     updateSearchTerm = (event: any) => {
@@ -38,4 +29,35 @@ export default class SearchBar extends React.Component<Props, State> {
             searchTerm: event.target.value,
         });
     };
+
+    render() {
+        return (
+            <Row className="justify-content-center my-5">
+                <Col md="8">
+                    <form onSubmit={this.onSearch}>
+                        <FormGroup>
+                            <InputGroup>
+                                <Input
+                                    type="search"
+                                    name="search"
+                                    id="exampleSearch"
+                                    placeholder="Enter CRN..."
+                                    value={this.state.searchTerm}
+                                    onChange={this.updateSearchTerm}
+                                    className="shadow mb-3 bg-white"
+                                />
+                                <InputGroupAddon addonType="append">
+                                    <Button className="shadow mb-3 bg-white">
+                                        <i className="fas fa-search" />
+                                    </Button>
+                                </InputGroupAddon>
+                            </InputGroup>
+                        </FormGroup>
+                    </form>
+                </Col>
+            </Row>
+        );
+    }
 }
+
+export default SearchBar;

schedules_web/src/components/SearchRoot.tsx

 import * as React from 'react';
-import SectionList from '../components/ScheduleList';
 import SearchBar from '../components/SearchBar';
 import { CourseSection } from '../util/CourseSection';
 
@@ -12,7 +11,7 @@ interface SearchRootProps {
 const SearchRoot = ({ searchResults, searchCourseSections, addCourseSection }: SearchRootProps) => (
     <div>
         <SearchBar onSearch={searchCourseSections} />
-        <SectionList courses={searchResults} selectCourseCallback={addCourseSection} />
+        {/* <SectionList courses={searchResults} selectCourseCallback={addCourseSection} /> */}
     </div>
 );