Commit 2d988fbd authored by David Haynes's avatar David Haynes 🙆
Browse files

Search bar is now masonstrapified

parent 5b738d79
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>
);
......
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;
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>
);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment