Commit fb061711 authored by Zac Wood's avatar Zac Wood

Selected course sections show up in the schedule and can be removed

parent 12c63108
import ApiService from '../../util/ApiService';
import CourseSection from '../../util/CourseSection';
import { SET_SEARCH_RESULTS } from './search.action-types';
......@@ -7,8 +8,7 @@ export interface SearchAction {
}
export const searchCourseSections = (crn: string) => async (dispatch: any) => {
const response = await fetch(`http://localhost:3000/api/course_sections?crn=${crn}`);
const objects = await response.json();
const objects = await ApiService.searchCourseSections(crn);
const results: CourseSection[] = objects.map(
(object: any): CourseSection => ({
......
......@@ -6,6 +6,7 @@ interface CourseSectionCardProps {
courseSectionAction: (courseSection: CourseSection) => void;
courseSection: CourseSection;
courseSectionActionButtonText: string;
destructive?: boolean;
}
require('../css/button-text-override.css');
......@@ -14,6 +15,7 @@ const CourseSectionCard = ({
courseSection,
courseSectionAction,
courseSectionActionButtonText,
destructive,
}: CourseSectionCardProps) => (
<Row className="justify-content-center">
<Col md="9">
......@@ -38,11 +40,12 @@ const CourseSectionCard = ({
<Col md="6">
<Button
onClick={() => courseSectionAction(courseSection)}
color="primary"
color={destructive ? 'danger' : 'primary'}
size="lg"
block
className="shadow-sm mt-3">
<i className="fas fa-plus-circle mr-2 fa-fw" /> {courseSectionActionButtonText}
<i className={`fas fa-${destructive ? 'minus' : 'plus'}-circle mr-2 fa-fw`} />{' '}
{courseSectionActionButtonText}
</Button>
</Col>
</Row>
......
......@@ -6,12 +6,14 @@ interface CourseSectionListProps {
courseSections: CourseSection[];
courseSectionAction: (courseSection: CourseSection) => void;
courseSectionActionButtonText: string;
destructive?: boolean;
}
const CourseSectionList = ({
courseSections,
courseSectionAction,
courseSectionActionButtonText,
destructive,
}: CourseSectionListProps) => (
<div>
{courseSections.map(courseSection => (
......@@ -20,6 +22,7 @@ const CourseSectionList = ({
courseSection={courseSection}
courseSectionAction={courseSectionAction}
courseSectionActionButtonText={courseSectionActionButtonText}
destructive={destructive}
/>
))}
</div>
......
import * as React from 'react';
import { Button, Card, CardBody, CardTitle, Collapse, Row } from 'reactstrap';
import CourseSection from '../util/CourseSection';
import CourseSectionList from './CourseSectionList';
interface ScheduleBadgeProps {
schedule: CourseSection[];
removeCourseSection: (courseSection: CourseSection) => void;
}
interface State {
......@@ -15,14 +17,14 @@ require('../css/icon-badge.css');
class ScheduleBadge extends React.Component<ScheduleBadgeProps, State> {
constructor(props: ScheduleBadgeProps) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = { collapse: false };
}
toggle() {
this.setState({ collapse: !this.state.collapse });
}
toggle = () => this.setState({ collapse: !this.state.collapse });
render() {
const { schedule, removeCourseSection } = this.props;
return (
<div>
<Row className="justify-content-end">
......@@ -50,7 +52,14 @@ class ScheduleBadge extends React.Component<ScheduleBadgeProps, State> {
</Row>
</CardTitle>
<legend />
<CardBody />
<CardBody>
<CourseSectionList
courseSections={schedule}
courseSectionAction={removeCourseSection}
courseSectionActionButtonText="Remove from schedule"
destructive
/>
</CardBody>
</Card>
</Collapse>
</div>
......
......@@ -17,7 +17,7 @@ interface SearchRootProps {
const ScheduleRoot = ({ schedule, removeCourseSection }: SearchRootProps) => (
<div>
<ScheduleBadge schedule={schedule} />
<ScheduleBadge schedule={schedule} removeCourseSection={removeCourseSection} />
{/* <ScheduleList courses={schedule} selectCourseCallback={removeCourseSection} /> */}
{/* <button onClick={generateSchedule}>Generate Schedule</button> */}
</div>
......
......@@ -13,7 +13,7 @@ const SearchRoot = ({ searchResults, searchCourseSections, addCourseSection }: S
<div>
<SearchBar onSearch={searchCourseSections} />
<CourseSectionList
courseSectionActionButtonText="Add to section"
courseSectionActionButtonText="Add to schedule"
courseSections={searchResults}
courseSectionAction={addCourseSection}
/>
......
class ApiService {
private apiRoot: string;
public constructor(apiRoot: string) {
this.apiRoot = apiRoot;
}
searchCourseSections = async (crn: string) => fetchJson(`${this.apiRoot}/course_sections?crn=${crn}`);
}
const fetchJson = async (url: string): Promise<any> => fetch(url).then(response => response.json());
export default new ApiService('http://localhost:3000/api');
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