prehistoric-systems/FilterLists
1
0
Fork 0
mirror of https://github.com/collinbarrett/FilterLists.git synced 2026-03-11 09:04:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

move fetchdata to home, remove other sample pages

Browse source
This commit is contained in:
Collin M. Barrett 2017-10-31 10:00:24 -05:00
parent 8c38cb79b1
commit 7ee5b82144
5 changed files with 61 additions and 137 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/FilterLists.Web/ClientApp/components/Counter.tsx
View file

@ -1,33 +0,0 @@
import * as React from "react";
import { RouteComponentProps } from "react-router";
interface CounterState {
currentCount: number;
}
export class Counter extends React.Component<RouteComponentProps<{}>, CounterState> {
constructor() {
super();
this.state = { currentCount: 0 };
}
render() {
return <div>
<h1>Counter</h1>
<p>This is a simple example of a React component.</p>
<p>
Current count: <strong>{ this.state.currentCount }</strong>
</p>
<button onClick={ () => { this.incrementCounter() } }>Increment</button>
</div>;
}
incrementCounter() {
this.setState({
currentCount: this.state.currentCount + 1
});
}
}

65
src/FilterLists.Web/ClientApp/components/FetchData.tsx
View file

@ -1,65 +0,0 @@
import * as React from "react";
import { RouteComponentProps } from "react-router";
import "isomorphic-fetch";
interface FetchDataExampleState {
forecasts: WeatherForecast[];
loading: boolean;
}
export class FetchData extends React.Component<RouteComponentProps<{}>, FetchDataExampleState> {
constructor() {
super();
this.state = { forecasts: [], loading: true };
fetch("api/SampleData/WeatherForecasts")
.then(response => response.json() as Promise<WeatherForecast[]>)
.then(data => {
this.setState({ forecasts: data, loading: false });
});
}
render() {
const contents = this.state.loading
? <p>
<em>Loading...</em>
</p>
: FetchData.renderForecastsTable(this.state.forecasts);
return <div>
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
{ contents }
</div>;
}
private static renderForecastsTable(forecasts: WeatherForecast[]) {
return <table className="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
{forecasts.map(forecast =>
<tr key={ forecast.dateFormatted }>
<td>{ forecast.dateFormatted }</td>
<td>{ forecast.temperatureC }</td>
<td>{ forecast.temperatureF }</td>
<td>{ forecast.summary }</td>
</tr>
)}
</tbody>
</table>;
}
}
interface WeatherForecast {
dateFormatted: string;
temperatureC: number;
temperatureF: number;
summary: string;
}

86
src/FilterLists.Web/ClientApp/components/Home.tsx
View file

@ -1,29 +1,65 @@
import * as React from "react";
import { RouteComponentProps } from "react-router";
import "isomorphic-fetch";
export class Home extends React.Component<RouteComponentProps<{}>, {}> {
render() {
return <div>
<h1>Hello, world!</h1>
<p>Welcome to your new single-page application, built with:</p>
<ul>
<li><a href="https://get.asp.net/">ASP.NET Core</a> and <a href="https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx">C#</a> for cross-platform server-side code</li>
<li><a href="https://facebook.github.io/react/">React</a> and <a href="http://www.typescriptlang.org/">TypeScript</a> for client-side code</li>
<li><a href="https://webpack.github.io/">Webpack</a> for building and bundling client-side resources</li>
<li><a href="http://getbootstrap.com/">Bootstrap</a> for layout and styling</li>
</ul>
<p>To help you get started, we've also set up:</p>
<ul>
<li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
<li><strong>Webpack dev middleware</strong>. In development mode, there's no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.</li>
<li><strong>Hot module replacement</strong>. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, rebuilt React components will be injected directly into your running application, preserving its live state.</li>
<li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>
</ul>
<h4>Going further</h4>
<p>
For larger applications, or for server-side prerendering (i.e., for <em>isomorphic</em> or <em>universal</em> applications), you should consider using a Flux/Redux-like architecture.
You can generate an ASP.NET Core application with React and Redux using <code>dotnet new reactredux</code> instead of using this template.
</p>
</div>;
interface FetchDataExampleState {
forecasts: WeatherForecast[];
loading: boolean;
}
};
export class Home extends React.Component<RouteComponentProps<{}>, FetchDataExampleState> {
constructor() {
super();
this.state = { forecasts: [], loading: true };
fetch("api/SampleData/WeatherForecasts")
.then(response => response.json() as Promise<WeatherForecast[]>)
.then(data => {
this.setState({ forecasts: data, loading: false });
});
}
render() {
const contents = this.state.loading
? <p>
<em>Loading...</em>
</p>
: Home.renderForecastsTable(this.state.forecasts);
return <div>
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
{ contents }
</div>;
}
private static renderForecastsTable(forecasts: WeatherForecast[]) {
return <table className="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
{forecasts.map(forecast =>
<tr key={ forecast.dateFormatted }>
<td>{ forecast.dateFormatted }</td>
<td>{ forecast.temperatureC }</td>
<td>{ forecast.temperatureF }</td>
<td>{ forecast.summary }</td>
</tr>
)}
</tbody>
</table>;
}
}
interface WeatherForecast {
dateFormatted: string;
temperatureC: number;
temperatureF: number;
summary: string;
}

10
src/FilterLists.Web/ClientApp/components/NavMenu.tsx
View file

@ -22,16 +22,6 @@ export class NavMenu extends React.Component<{}, {}> {
<span className="glyphicon glyphicon-home"></span> Home
</NavLink>
</li>
<li>
<NavLink to={ "/counter" } activeClassName="active">
<span className="glyphicon glyphicon-education"></span> Counter
</NavLink>
</li>
<li>
<NavLink to={ "/fetchdata" } activeClassName="active">
<span className="glyphicon glyphicon-th-list"></span> Fetch data
</NavLink>
</li>
</ul>
</div>
</div>

4
src/FilterLists.Web/ClientApp/routes.tsx
View file

@ -2,11 +2,7 @@ import * as React from "react";
import { Route } from "react-router-dom";
import { Layout } from "./components/Layout";
import { Home } from "./components/Home";
import { FetchData } from "./components/FetchData";
import { Counter } from "./components/Counter";
export const routes = <Layout>
<Route exact path="/" component={ Home }/>
<Route path="/counter" component={ Counter }/>
<Route path="/fetchdata" component={ FetchData }/>
</Layout>;