Skip to content

GitLab

Commit ec6ff95e authored by Zac Wood's avatar Zac Wood
Browse files

Completed Typescript conversion -- now at feature parity with old version

parent b13cda05
Expand all Hide whitespace changes
Inline Side-by-side
schedules_web/dist/bundle.js
View file @ ec6ff95e
......@@ -88,19 +88,20 @@ class App extends React.Component {
constructor(props) {
super(props);
this.state = { currentSchedule: [] };
this.addSectionToCurrentSchedule = this.addSectionToCurrentSchedule.bind(this);
this.addSectionToCurrentScheduleIfUnique = this.addSectionToCurrentScheduleIfUnique.bind(this);
}
addSectionToCurrentSchedule(section) {
this.setState({
currentSchedule: [...this.state.currentSchedule, section],
});
addSectionToCurrentScheduleIfUnique(section) {
if (!this.state.currentSchedule.find(sectionInSchedule => section === sectionInSchedule)) {
this.setState({
currentSchedule: [...this.state.currentSchedule, section],
});
}
}
render() {
return (React.createElement("div", null,
React.createElement("h1", null, "Schedules"),
React.createElement(Search_1.default, null),
React.createElement(SectionList_1.default, { addToScheduleCallback: this.addSectionToCurrentSchedule }),
React.createElement(SectionList_1.default, null)));
React.createElement(Search_1.default, { addSearchResultCallback: this.addSectionToCurrentScheduleIfUnique }),
React.createElement(SectionList_1.default, { sections: this.state.currentSchedule })));
}
}
exports.default = App;
......@@ -119,7 +120,41 @@ exports.default = App;
Object.defineProperty(exports, "__esModule", { value: true });
const React = __webpack_require__(/*! react */ "react");
const section_1 = __webpack_require__(/*! ../section */ "./src/section.ts");
const SearchBar_1 = __webpack_require__(/*! ./SearchBar */ "./src/components/SearchBar.tsx");
const SectionList_1 = __webpack_require__(/*! ./SectionList */ "./src/components/SectionList.tsx");
class Search extends React.Component {
constructor(props) {
super(props);
this.state = { sections: [] };
this.searchForSections = this.searchForSections.bind(this);
}
searchForSections(crn) {
section_1.fetchSectionWithCRN(crn).then(section => this.setState({ sections: [section] }));
}
render() {
return (React.createElement("div", null,
React.createElement(SearchBar_1.default, { onSearch: this.searchForSections }),
React.createElement(SectionList_1.default, { sections: this.state.sections, selectSectionCallback: this.props.addSearchResultCallback })));
}
}
exports.default = Search;
/***/ }),
/***/ "./src/components/SearchBar.tsx":
/*!**************************************!*\
!*** ./src/components/SearchBar.tsx ***!
\**************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = __webpack_require__(/*! react */ "react");
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.state = { searchTerm: '' };
......@@ -132,6 +167,7 @@ class Search extends React.Component {
});
}
onSearch(event) {
this.props.onSearch(this.state.searchTerm);
event.preventDefault();
}
render() {
......@@ -140,7 +176,7 @@ class Search extends React.Component {
React.createElement("input", { type: "submit", value: "Search" })));
}
}
exports.default = Search;
exports.default = SearchBar;
/***/ }),
......@@ -156,43 +192,52 @@ exports.default = Search;
Object.defineProperty(exports, "__esModule", { value: true });
const React = __webpack_require__(/*! react */ "react");
const section_1 = __webpack_require__(/*! ../section */ "./src/section.ts");
class SectionList extends React.Component {
constructor(props) {
super(props);
this.state = { sections: [] };
section_1.fetchSections().then(sections => this.updateStateWithSections(sections));
this.updateStateWithSections = this.updateStateWithSections.bind(this);
}
updateStateWithSections(sections) {
this.setState({
sections,
});
this.renderSelectSectionColumn = this.renderSelectSectionColumn.bind(this);
this.getSectionWithCRN = this.getSectionWithCRN.bind(this);
}
render() {
return (React.createElement("table", null,
React.createElement("tr", null,
React.createElement("th", null, "Course"),
React.createElement("th", null, "Section Name"),
React.createElement("th", null, "CRN"),
React.createElement("th", null, "Days"),
React.createElement("th", null, "Instructor"),
React.createElement("th", null, "Location"),
React.createElement("th", null, "Time")),
this.renderRowsForSections(this.state.sections)));
React.createElement("tbody", null,
React.createElement("tr", null,
React.createElement("th", null, "Course"),
React.createElement("th", null, "Section Name"),
React.createElement("th", null, "CRN"),
React.createElement("th", null, "Days"),
React.createElement("th", null, "Instructor"),
React.createElement("th", null, "Location"),
React.createElement("th", null, "Time"),
React.createElement("th", null)),
this.renderRowsForSections(this.props.sections))));
}
renderRowsForSections(sections) {
return sections.map(section => {
return (React.createElement("tr", null,
return (React.createElement("tr", { key: section.id },
React.createElement("td", null, section.name),
React.createElement("td", null, section.title),
React.createElement("td", null, section.crn),
React.createElement("td", null, section.days),
React.createElement("td", null, section.instructor),
React.createElement("td", null, section.location),
React.createElement("td", null, [section.startTime, section.endTime].join(' - '))));
React.createElement("td", null, [section.startTime, section.endTime].join(' - ')),
this.renderSelectSectionColumn(section.crn)));
});
}
renderSelectSectionColumn(rowCRN) {
if (this.props.selectSectionCallback) {
const sectionWithCRN = this.getSectionWithCRN(rowCRN);
return (React.createElement("td", null,
React.createElement("button", { onClick: () => this.props.selectSectionCallback(sectionWithCRN) }, "Add to schedule")));
}
else {
return React.createElement("td", null);
}
}
getSectionWithCRN(crn) {
return this.props.sections.find(section => section.crn === crn);
}
}
exports.default = SectionList;
......@@ -235,28 +280,24 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
});
};
Object.defineProperty(exports, "__esModule", { value: true });
function fetchSections() {
function fetchSectionWithCRN(crn) {
return __awaiter(this, void 0, void 0, function* () {
const response = yield fetch('http://localhost:3001/api/courses/1/sections');
const jsonObjects = yield response.json();
let sections = [];
jsonObjects.forEach((object) => {
sections.push({
id: object.id,
name: object.name,
title: object.title,
crn: object.crn,
instructor: object.instructor,
location: object.location,
days: object.days,
startTime: object.start_time,
endTime: object.end_time,
});
});
return sections;
const response = yield fetch(`http://localhost:3001/api/search?crn=${crn}`);
const object = yield response.json();
return {
id: object.id,
name: object.name,
title: object.title,
crn: object.crn,
instructor: object.instructor,
location: object.location,
days: object.days,
startTime: object.start_time,
endTime: object.end_time,
};
});
}
exports.fetchSections = fetchSections;
exports.fetchSectionWithCRN = fetchSectionWithCRN;
/***/ }),
......
schedules_web/dist/bundle.js.map
View file @ ec6ff95e
This diff is collapsed.
schedules_web/src/components/App.tsx
View file @ ec6ff95e
......@@ -12,20 +12,22 @@ class App extends React.Component<any, State> {
super(props);
this.state = { currentSchedule: [] };
this.addSectionToCurrentSchedule = this.addSectionToCurrentSchedule.bind(this);
this.addSectionToCurrentScheduleIfUnique = this.addSectionToCurrentScheduleIfUnique.bind(this);
}
addSectionToCurrentSchedule(section: Section) {
this.setState({
currentSchedule: [...this.state.currentSchedule, section],
});
addSectionToCurrentScheduleIfUnique(section: Section) {
if (!this.state.currentSchedule.find(sectionInSchedule => section === sectionInSchedule)) {
this.setState({
currentSchedule: [...this.state.currentSchedule, section],
});
}
}
render() {
return (
<div>
<h1>Schedules</h1>
<Search />
<Search addSearchResultCallback={this.addSectionToCurrentScheduleIfUnique} />
<SectionList sections={this.state.currentSchedule} />
</div>
);
......
schedules_web/src/components/Hello.tsx deleted 100644 → 0
View file @ b13cda05
import * as React from 'react';
export interface Props {
compilier: string;
framework: string;
}
export const Hello = (props: Props) => (
<h1>
Hello from {props.compilier} and {props.framework}
</h1>
);
schedules_web/src/components/Search.tsx
View file @ ec6ff95e
import * as React from 'react';
import Section, { fetchSectionsWithCRN } from '../section';
import Section, { fetchSectionWithCRN } from '../section';
import SearchBar from './SearchBar';
import SectionList from './SectionList';
......@@ -15,18 +15,22 @@ export default class Search extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.setState({ sections: [] });
this.state = { sections: [] };
this.searchForSections = this.searchForSections.bind(this);
}
searchForSections(crn: string) {
fetchSectionsWithCRN(crn).then(sections => this.setState({ sections }));
fetchSectionWithCRN(crn).then(section => this.setState({ sections: [section] }));
}
render() {
return (
<div>
<SearchBar onSearch={this.searchForSections} />
<SectionList sections={this.state.sections} />
<SectionList
sections={this.state.sections}
selectSectionCallback={this.props.addSearchResultCallback}
/>
</div>
);
}
......
schedules_web/src/components/SectionList.tsx
View file @ ec6ff95e
......@@ -3,23 +3,32 @@ import Section from '../section';
interface Props {
sections: Section[];
addToScheduleCallback?: (section: Section) => void;
selectSectionCallback?: (section: Section) => void;
}
export default class SectionList extends React.Component<Props, any> {
constructor(props: Props) {
super(props);
this.renderSelectSectionColumn = this.renderSelectSectionColumn.bind(this);
this.getSectionWithCRN = this.getSectionWithCRN.bind(this);
}
render() {
return (
<table>
<tr>
<th>Course</th>
<th>Section Name</th>
<th>CRN</th>
<th>Days</th>
<th>Instructor</th>
<th>Location</th>
<th>Time</th>
</tr>
{this.renderRowsForSections(this.state.sections)}
<tbody>
<tr>
<th>Course</th>
<th>Section Name</th>
<th>CRN</th>
<th>Days</th>
<th>Instructor</th>
<th>Location</th>
<th>Time</th>
<th />
</tr>
{this.renderRowsForSections(this.props.sections)}
</tbody>
</table>
);
}
......@@ -27,7 +36,7 @@ export default class SectionList extends React.Component<Props, any> {
renderRowsForSections(sections: Section[]): JSX.Element[] {
return sections.map(section => {
return (
<tr>
<tr key={section.id}>
<td>{section.name}</td>
<td>{section.title}</td>
<td>{section.crn}</td>
......@@ -35,8 +44,26 @@ export default class SectionList extends React.Component<Props, any> {
<td>{section.instructor}</td>
<td>{section.location}</td>
<td>{[section.startTime, section.endTime].join(' - ')}</td>
{this.renderSelectSectionColumn(section.crn)}
</tr>
);
});
}
renderSelectSectionColumn(rowCRN: string): JSX.Element {
if (this.props.selectSectionCallback) {
const sectionWithCRN = this.getSectionWithCRN(rowCRN);
return (
<td>
<button onClick={() => this.props.selectSectionCallback(sectionWithCRN)}>Add to schedule</button>
</td>
);
} else {
return <td />;
}
}
getSectionWithCRN(crn: string): Section {
return this.props.sections.find(section => section.crn === crn);
}
}
schedules_web/src/section.ts
View file @ ec6ff95e
......@@ -10,22 +10,19 @@ export default interface Section {
endTime: string;
}
export async function fetchSectionsWithCRN(crn: string): Promise<Section[]> {
const response = await fetch('http://localhost:3001/api/courses/1/sections');
const jsonObjects = await response.json();
let sections: Section[] = [];
jsonObjects.forEach((object: any) => {
sections.push({
id: object.id,
name: object.name,
title: object.title,
crn: object.crn,
instructor: object.instructor,
location: object.location,
days: object.days,
startTime: object.start_time,
endTime: object.end_time,
});
});
return sections;
export async function fetchSectionWithCRN(crn: string): Promise<Section> {
const response = await fetch(`http://localhost:3001/api/search?crn=${crn}`);
const object = await response.json();
return {
id: object.id,
name: object.name,
title: object.title,
crn: object.crn,
instructor: object.instructor,
location: object.location,
days: object.days,
startTime: object.start_time,
endTime: object.end_time,
};
}
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