Commit 51929d98 authored by David Haynes's avatar David Haynes 🙆
Browse files

Search is 90% done

- ability to search for CourseSections
- add to searchResults state
- if something in there, render cards (with static data for now)
parent 450a77b7
...@@ -2,7 +2,6 @@ import * as React from 'react'; ...@@ -2,7 +2,6 @@ import * as React from 'react';
import { Container } from 'reactstrap'; import { Container } from 'reactstrap';
import Schedule from '../containers/Schedule'; import Schedule from '../containers/Schedule';
import Search from '../containers/Search'; import Search from '../containers/Search';
import CourseSectionCard from './CourseSectionCard';
import Header from './Header'; import Header from './Header';
require('../css/core.css'); require('../css/core.css');
...@@ -13,7 +12,6 @@ const App = () => ( ...@@ -13,7 +12,6 @@ const App = () => (
<Schedule /> <Schedule />
<Header /> <Header />
<Search /> <Search />
<CourseSectionCard />
</Container> </Container>
</div> </div>
); );
......
import * as React from 'react'; import * as React from 'react';
import { Button, Card, CardBody, CardTitle, Col, Row } from 'reactstrap'; import { Button, Card, CardBody, CardTitle, Col, Row } from 'reactstrap';
import CourseSection from '../util/CourseSection';
interface CourseSectionCardProps {
courseSectionAction: (courseSection: CourseSection) => void;
courseSection: CourseSection;
courseSectionActionButtonText: string;
}
require('../css/button-text-override.css'); require('../css/button-text-override.css');
const CourseSectionCard = () => ( const CourseSectionCard = ({
courseSection,
courseSectionAction,
courseSectionActionButtonText,
}: CourseSectionCardProps) => (
<Row className="justify-content-center"> <Row className="justify-content-center">
<Col md="9"> <Col md="9">
<Card> <Card>
...@@ -24,8 +35,13 @@ const CourseSectionCard = () => ( ...@@ -24,8 +35,13 @@ const CourseSectionCard = () => (
<i className="fas fa-school fa-fw" /> James Buchanan Hall D023 <i className="fas fa-school fa-fw" /> James Buchanan Hall D023
</Col> </Col>
<Col md="6"> <Col md="6">
<Button color="primary" size="lg" block className="shadow-sm mt-3"> <Button
<i className="fas fa-plus-circle mr-2 fa-fw" /> Add to schedule onClick={() => courseSectionAction(courseSection)}
color="primary"
size="lg"
block
className="shadow-sm mt-3">
<i className="fas fa-plus-circle mr-2 fa-fw" /> {courseSectionActionButtonText}
</Button> </Button>
</Col> </Col>
</Row> </Row>
......
import * as React from 'react';
import CourseSection from '../util/CourseSection';
import CourseSectionCard from './CourseSectionCard';
interface CourseSectionListProps {
courseSections: CourseSection[];
courseSectionAction: (courseSection: CourseSection) => void;
courseSectionActionButtonText: string;
}
const CourseSectionList = ({
courseSections,
courseSectionAction,
courseSectionActionButtonText,
}: CourseSectionListProps) => (
<div>
{courseSections.map(courseSection => (
<CourseSectionCard
key={courseSection.crn}
courseSection={courseSection}
courseSectionAction={courseSectionAction}
courseSectionActionButtonText={courseSectionActionButtonText}
/>
))}
</div>
);
export default CourseSectionList;
import * as React from 'react'; import * as React from 'react';
import { Button, Card, CardBody, CardTitle, Collapse, Row } from 'reactstrap'; import { Button, Card, CardBody, CardTitle, Collapse, Row } from 'reactstrap';
import CourseSection from '../util/CourseSection'; import CourseSection from '../util/CourseSection';
import CourseSectionCard from './CourseSectionCard';
interface ScheduleBadgeProps { interface ScheduleBadgeProps {
schedule: CourseSection[]; schedule: CourseSection[];
...@@ -38,7 +37,7 @@ class ScheduleBadge extends React.Component<ScheduleBadgeProps, State> { ...@@ -38,7 +37,7 @@ class ScheduleBadge extends React.Component<ScheduleBadgeProps, State> {
/> />
</Row> </Row>
<Collapse isOpen={this.state.collapse}> <Collapse isOpen={this.state.collapse}>
<Card shadow> <Card>
<CardTitle className="mt-3"> <CardTitle className="mt-3">
<Row className="justify-content-center"> <Row className="justify-content-center">
<Button size="sm" outline color="danger" onClick={this.toggle}> <Button size="sm" outline color="danger" onClick={this.toggle}>
...@@ -51,13 +50,7 @@ class ScheduleBadge extends React.Component<ScheduleBadgeProps, State> { ...@@ -51,13 +50,7 @@ class ScheduleBadge extends React.Component<ScheduleBadgeProps, State> {
</Row> </Row>
</CardTitle> </CardTitle>
<legend /> <legend />
<CardBody> <CardBody />
<CourseSectionCard />
<CourseSectionCard />
<CourseSectionCard />
<CourseSectionCard />
<CourseSectionCard />
</CardBody>
</Card> </Card>
</Collapse> </Collapse>
</div> </div>
......
import * as React from 'react';
import CourseSection from '../util/CourseSection';
interface Props {
courses: CourseSection[];
selectCourseCallback?: (courseSection: CourseSection) => void;
}
export default class ScheduleList extends React.Component<Props, any> {
constructor(props: Props) {
super(props);
}
render() {
return (
<table>
<tbody>
<tr>
<th>Course</th>
<th>course Name</th>
<th>CRN</th>
<th>Days</th>
<th>Instructor</th>
<th>Location</th>
<th>Time</th>
<th />
</tr>
{this.renderRowsForCourses(this.props.courses)}
</tbody>
</table>
);
}
renderRowsForCourses(courses: CourseSection[]): JSX.Element[] {
return courses.map(course => {
return (
<tr key={course.id}>
<td>{course.name}</td>
<td>{course.title}</td>
<td>{course.crn}</td>
<td>{course.days}</td>
<td>{course.instructor}</td>
<td>{course.location}</td>
<td>{[course.startTime, course.endTime].join(' - ')}</td>
{this.renderSelectCourseColumn(course.crn)}
</tr>
);
});
}
renderSelectCourseColumn(rowCRN: string): JSX.Element {
if (this.props.selectCourseCallback) {
const courseWithCRN = this.getcourseWithCRN(rowCRN);
return (
<td>
<button onClick={() => this.props.selectCourseCallback(courseWithCRN)}>"Add to schedule"</button>
</td>
);
} else {
return <td />;
}
}
getcourseWithCRN(crn: string): CourseSection {
return this.props.courses.find(course => course.crn === crn);
}
}
import * as React from 'react'; import * as React from 'react';
import { Button, Col, FormGroup, Input, InputGroup, InputGroupAddon, Row } from 'reactstrap'; import { Button, Col, FormGroup, Input, InputGroup, InputGroupAddon, Row } from 'reactstrap';
interface Props { interface Props {
onSearch: (crn: string) => void; onSearch: (crn: string) => void;
} }
......
import * as React from 'react'; import * as React from 'react';
import SearchBar from '../components/SearchBar'; import SearchBar from '../components/SearchBar';
import CourseSection from '../util/CourseSection'; import CourseSection from '../util/CourseSection';
import CourseSectionList from './CourseSectionList';
interface SearchRootProps { interface SearchRootProps {
searchResults: CourseSection[]; searchResults: CourseSection[];
...@@ -11,7 +12,11 @@ interface SearchRootProps { ...@@ -11,7 +12,11 @@ interface SearchRootProps {
const SearchRoot = ({ searchResults, searchCourseSections, addCourseSection }: SearchRootProps) => ( const SearchRoot = ({ searchResults, searchCourseSections, addCourseSection }: SearchRootProps) => (
<div> <div>
<SearchBar onSearch={searchCourseSections} /> <SearchBar onSearch={searchCourseSections} />
{/* <SectionList courses={searchResults} selectCourseCallback={addCourseSection} /> */} <CourseSectionList
courseSectionActionButtonText="Add to section"
courseSections={searchResults}
courseSectionAction={addCourseSection}
/>
</div> </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