mirror of
https://github.com/collinbarrett/FilterLists.git
synced 2026-03-11 09:04:27 +00:00
convert forecast example to filterlists
This commit is contained in:
parent
d7e5dfd16c
commit
c739e75604
4 changed files with 32 additions and 52 deletions
|
|
@ -8,8 +8,6 @@ import * as RoutesModule from "./routes";
|
|||
let routes = RoutesModule.routes;
|
||||
|
||||
function renderApp() {
|
||||
// This code starts up the React app when it runs in a browser. It sets up the routing
|
||||
// configuration and injects the app into a DOM element.
|
||||
const baseUrl = document.getElementsByTagName("base")[0].getAttribute("href")!;
|
||||
ReactDOM.render(
|
||||
<AppContainer>
|
||||
|
|
@ -21,7 +19,6 @@ function renderApp() {
|
|||
|
||||
renderApp();
|
||||
|
||||
// Allow Hot Module Replacement
|
||||
if (module.hot) {
|
||||
module.hot.accept("./routes",
|
||||
() => {
|
||||
|
|
|
|||
|
|
@ -2,20 +2,20 @@ import * as React from "react";
|
|||
import { RouteComponentProps } from "react-router";
|
||||
import "isomorphic-fetch";
|
||||
|
||||
interface IFetchDataExampleState {
|
||||
forecasts: IWeatherForecast[];
|
||||
interface IFilterListsState {
|
||||
filterLists: IFilterList[];
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
export class Home extends React.Component<RouteComponentProps<{}>, IFetchDataExampleState> {
|
||||
export class Home extends React.Component<RouteComponentProps<{}>, IFilterListsState> {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = { forecasts: [], loading: true };
|
||||
this.state = { filterLists: [], loading: true };
|
||||
|
||||
fetch("https://api.filterlists.com/v1/lists/WeatherForecasts")
|
||||
.then(response => response.json() as Promise<IWeatherForecast[]>)
|
||||
fetch("https://api.filterlists.com/v1/lists")
|
||||
.then(response => response.json() as Promise<IFilterList[]>)
|
||||
.then(data => {
|
||||
this.setState({ forecasts: data, loading: false });
|
||||
this.setState({ filterLists: data, loading: false });
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -24,32 +24,26 @@ export class Home extends React.Component<RouteComponentProps<{}>, IFetchDataExa
|
|||
? <p>
|
||||
<em>Loading...</em>
|
||||
</p>
|
||||
: Home.renderForecastsTable(this.state.forecasts);
|
||||
: Home.renderFilterListsTable(this.state.filterLists);
|
||||
|
||||
return <div>
|
||||
<h1>Weather forecast</h1>
|
||||
<p>This component demonstrates fetching data from the server.</p>
|
||||
{ contents }
|
||||
</div>;
|
||||
}
|
||||
|
||||
private static renderForecastsTable(forecasts: IWeatherForecast[]) {
|
||||
private static renderFilterListsTable(filterLists: IFilterList[]) {
|
||||
return <table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Temp. (C)</th>
|
||||
<th>Temp. (F)</th>
|
||||
<th>Summary</th>
|
||||
<th>Name</th>
|
||||
<th>Description</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>
|
||||
{filterLists.map(filterList =>
|
||||
<tr key={ filterList.id }>
|
||||
<td>{ filterList.name }</td>
|
||||
<td>{ filterList.description }</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
|
|
@ -57,9 +51,8 @@ export class Home extends React.Component<RouteComponentProps<{}>, IFetchDataExa
|
|||
}
|
||||
}
|
||||
|
||||
interface IWeatherForecast {
|
||||
dateFormatted: string;
|
||||
temperatureC: number;
|
||||
temperatureF: number;
|
||||
summary: string;
|
||||
interface IFilterList {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
}
|
||||
36
src/FilterLists.Web/wwwroot/dist/main.js
vendored
36
src/FilterLists.Web/wwwroot/dist/main.js
vendored
|
|
@ -59,7 +59,7 @@
|
|||
/******/
|
||||
/******/
|
||||
/******/ var hotApplyOnUpdate = true;
|
||||
/******/ var hotCurrentHash = "2afb86fea30d5104dd0b"; // eslint-disable-line no-unused-vars
|
||||
/******/ var hotCurrentHash = "94072e0c334b478710f2"; // eslint-disable-line no-unused-vars
|
||||
/******/ var hotCurrentModuleData = {};
|
||||
/******/ var hotCurrentChildModule; // eslint-disable-line no-unused-vars
|
||||
/******/ var hotCurrentParents = []; // eslint-disable-line no-unused-vars
|
||||
|
|
@ -2571,14 +2571,11 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
|
|||
|
||||
var routes = __WEBPACK_IMPORTED_MODULE_6__routes__["routes"];
|
||||
function renderApp() {
|
||||
// This code starts up the React app when it runs in a browser. It sets up the routing
|
||||
// configuration and injects the app into a DOM element.
|
||||
var baseUrl = document.getElementsByTagName("base")[0].getAttribute("href");
|
||||
__WEBPACK_IMPORTED_MODULE_3_react_dom__["render"](__WEBPACK_IMPORTED_MODULE_2_react__["createElement"](__WEBPACK_IMPORTED_MODULE_4_react_hot_loader__["AppContainer"], null,
|
||||
__WEBPACK_IMPORTED_MODULE_2_react__["createElement"](__WEBPACK_IMPORTED_MODULE_5_react_router_dom__["BrowserRouter"], { children: routes, basename: baseUrl })), document.getElementById("react-app"));
|
||||
}
|
||||
renderApp();
|
||||
// Allow Hot Module Replacement
|
||||
if (true) {
|
||||
module.hot.accept(20, function(__WEBPACK_OUTDATED_DEPENDENCIES__) { /* harmony import */ __WEBPACK_IMPORTED_MODULE_6__routes__ = __webpack_require__(20); (function () {
|
||||
routes = __webpack_require__(20).routes;
|
||||
|
|
@ -7783,11 +7780,11 @@ var Home = (function (_super) {
|
|||
__extends(Home, _super);
|
||||
function Home() {
|
||||
var _this = _super.call(this) || this;
|
||||
_this.state = { forecasts: [], loading: true };
|
||||
fetch("api/SampleData/WeatherForecasts")
|
||||
_this.state = { filterLists: [], loading: true };
|
||||
fetch("https://api.filterlists.com/v1/lists")
|
||||
.then(function (response) { return response.json(); })
|
||||
.then(function (data) {
|
||||
_this.setState({ forecasts: data, loading: false });
|
||||
_this.setState({ filterLists: data, loading: false });
|
||||
});
|
||||
return _this;
|
||||
}
|
||||
|
|
@ -7795,26 +7792,19 @@ var Home = (function (_super) {
|
|||
var contents = this.state.loading
|
||||
? __WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("p", null,
|
||||
__WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("em", null, "Loading..."))
|
||||
: Home.renderForecastsTable(this.state.forecasts);
|
||||
return __WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("div", null,
|
||||
__WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("h1", null, "Weather forecast"),
|
||||
__WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("p", null, "This component demonstrates fetching data from the server."),
|
||||
contents);
|
||||
: Home.renderFilterListsTable(this.state.filterLists);
|
||||
return __WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("div", null, contents);
|
||||
};
|
||||
Home.renderForecastsTable = function (forecasts) {
|
||||
Home.renderFilterListsTable = function (filterLists) {
|
||||
return __WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("table", { className: "table" },
|
||||
__WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("thead", null,
|
||||
__WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("tr", null,
|
||||
__WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("th", null, "Date"),
|
||||
__WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("th", null, "Temp. (C)"),
|
||||
__WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("th", null, "Temp. (F)"),
|
||||
__WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("th", null, "Summary"))),
|
||||
__WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("tbody", null, forecasts.map(function (forecast) {
|
||||
return __WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("tr", { key: forecast.dateFormatted },
|
||||
__WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("td", null, forecast.dateFormatted),
|
||||
__WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("td", null, forecast.temperatureC),
|
||||
__WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("td", null, forecast.temperatureF),
|
||||
__WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("td", null, forecast.summary));
|
||||
__WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("th", null, "Name"),
|
||||
__WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("th", null, "Description"))),
|
||||
__WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("tbody", null, filterLists.map(function (filterList) {
|
||||
return __WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("tr", { key: filterList.id },
|
||||
__WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("td", null, filterList.name),
|
||||
__WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("td", null, filterList.description));
|
||||
})));
|
||||
};
|
||||
return Home;
|
||||
|
|
|
|||
BIN
src/FilterLists.Web/wwwroot/dist/main.js.map
vendored
BIN
src/FilterLists.Web/wwwroot/dist/main.js.map
vendored
Binary file not shown.
Loading…
Reference in a new issue