Commit b13cda05 authored by Zac Wood's avatar Zac Wood

Started typescript conversion

parent ff0fd7a4
{
"prettier.printWidth": 120,
"prettier.tabWidth": 4,
"prettier.singleQuote": true,
"prettier.useTabs": false,
"prettier.jsxBracketSameLine": true,
"prettier.stylelintIntegration": true,
"prettier.trailingComma": "es5",
"editor.formatOnSave": true
}
This diff is collapsed.
This diff is collapsed.
{
"name": "schedules_web",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no tests specified\" && exit 1",
"build": "webpack"
},
"license": "Apache",
"private": true,
"devDependencies": {
"awesome-typescript-loader": "^5.0.0",
"source-map-loader": "^0.2.3",
"typescript": "^2.8.3",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15"
},
"dependencies": {
"@types/react": "^16.3.12",
"@types/react-dom": "^16.0.5",
"react": "^16.3.2",
"react-dom": "^16.3.2"
}
"name": "schedules_web",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no tests specified\" && exit 1",
"build": "webpack",
"start": "yarn build && open index.html"
},
"license": "Apache",
"private": true,
"devDependencies": {
"@types/node": "^9.6.6",
"awesome-typescript-loader": "^5.0.0",
"source-map-loader": "^0.2.3",
"typescript": "^2.8.3",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15"
},
"dependencies": {
"@types/react": "^16.3.12",
"@types/react-dom": "^16.0.5",
"react": "^16.3.2",
"react-dom": "^16.3.2"
}
}
import * as React from 'react';
import Section from '../section';
import SectionList from './SectionList';
import Search from './Search';
interface State {
currentSchedule: Section[];
}
class App extends React.Component<any, State> {
constructor(props: any) {
super(props);
this.state = { currentSchedule: [] };
this.addSectionToCurrentSchedule = this.addSectionToCurrentSchedule.bind(this);
}
addSectionToCurrentSchedule(section: Section) {
this.setState({
currentSchedule: [...this.state.currentSchedule, section],
});
}
render() {
return (
<div>
<h1>Schedules</h1>
<Search />
<SectionList sections={this.state.currentSchedule} />
</div>
);
}
}
export default App;
......@@ -5,4 +5,8 @@ export interface Props {
framework: string;
}
export const Hello = (props: Props) => <h1>Hello from {props.compilier} and {props.framework}</h1>;
\ No newline at end of file
export const Hello = (props: Props) => (
<h1>
Hello from {props.compilier} and {props.framework}
</h1>
);
import * as React from 'react';
import Section, { fetchSectionsWithCRN } from '../section';
import SearchBar from './SearchBar';
import SectionList from './SectionList';
interface Props {
addSearchResultCallback?: (section: Section) => void;
}
interface State {
sections: Section[];
}
export default class Search extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.setState({ sections: [] });
}
searchForSections(crn: string) {
fetchSectionsWithCRN(crn).then(sections => this.setState({ sections }));
}
render() {
return (
<div>
<SearchBar onSearch={this.searchForSections} />
<SectionList sections={this.state.sections} />
</div>
);
}
}
import * as React from 'react';
interface Props {
onSearch: (searchTerm: string) => void;
}
interface State {
searchTerm: string;
}
export default class SearchBar extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = { searchTerm: '' };
this.onSearch = this.onSearch.bind(this);
this.updateSearchTerm = this.updateSearchTerm.bind(this);
}
updateSearchTerm(event: any) {
this.setState({
searchTerm: event.target.value,
});
}
onSearch(event: any) {
this.props.onSearch(this.state.searchTerm);
event.preventDefault();
}
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>
);
}
}
import * as React from 'react';
import Section from '../section';
interface Props {
sections: Section[];
addToScheduleCallback?: (section: Section) => void;
}
export default class SectionList extends React.Component<Props, any> {
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)}
</table>
);
}
renderRowsForSections(sections: Section[]): JSX.Element[] {
return sections.map(section => {
return (
<tr>
<td>{section.name}</td>
<td>{section.title}</td>
<td>{section.crn}</td>
<td>{section.days}</td>
<td>{section.instructor}</td>
<td>{section.location}</td>
<td>{[section.startTime, section.endTime].join(' - ')}</td>
</tr>
);
});
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Hello } from './components/Hello';
import App from './components/App';
ReactDOM.render(
<Hello compilier="TypeScript" framework="React" />,
document.getElementById("root")
);
\ No newline at end of file
ReactDOM.render(<App />, document.getElementById('root'));
export default interface Section {
id: number;
name: string;
title: string;
crn: string;
instructor: string;
location: string;
days: string;
startTime: string;
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;
}
......@@ -4,10 +4,8 @@
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"target": "es6",
"jsx": "react"
},
"include": [
"./src/**/*"
]
}
\ No newline at end of file
"include": ["./src/**/*"]
}
......@@ -4,24 +4,26 @@ module.exports = {
entry: './src/index.tsx',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
path: path.resolve(__dirname, 'dist'),
},
devtool: 'source-map',
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json']
extensions: ['.ts', '.tsx', '.js', '.json'],
},
module: {
rules: [
{ test: /\.tsx?$/, loader: 'awesome-typescript-loader' },
{ enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' }
]
{ enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' },
],
},
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
}
};
\ No newline at end of file
react: 'React',
'react-dom': 'ReactDOM',
},
mode: 'development',
};
......@@ -6,7 +6,7 @@
version "0.7.0"
resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
"@types/node@*":
"@types/node@*", "@types/node@^9.6.6":
version "9.6.6"
resolved "https://registry.yarnpkg.com/@types/node/-/node-9.6.6.tgz#439b91f9caf3983cad2eef1e11f6bedcbf9431d2"
......
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