From c739e75604cbb475344c015cf6fda0175111fa4b Mon Sep 17 00:00:00 2001 From: "Collin M. Barrett" Date: Sun, 29 Oct 2017 15:31:28 -0500 Subject: [PATCH] convert forecast example to filterlists --- src/FilterLists.Web/ClientApp/boot.tsx | 3 -- .../ClientApp/components/Home.tsx | 45 ++++++++---------- src/FilterLists.Web/wwwroot/dist/main.js | 36 +++++--------- src/FilterLists.Web/wwwroot/dist/main.js.map | Bin 507664 -> 506901 bytes 4 files changed, 32 insertions(+), 52 deletions(-) diff --git a/src/FilterLists.Web/ClientApp/boot.tsx b/src/FilterLists.Web/ClientApp/boot.tsx index cf67dff57..508f8a698 100644 --- a/src/FilterLists.Web/ClientApp/boot.tsx +++ b/src/FilterLists.Web/ClientApp/boot.tsx @@ -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( @@ -21,7 +19,6 @@ function renderApp() { renderApp(); -// Allow Hot Module Replacement if (module.hot) { module.hot.accept("./routes", () => { diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx index 668a4a44e..4ace527d5 100644 --- a/src/FilterLists.Web/ClientApp/components/Home.tsx +++ b/src/FilterLists.Web/ClientApp/components/Home.tsx @@ -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, IFetchDataExampleState> { +export class Home extends React.Component, 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) + fetch("https://api.filterlists.com/v1/lists") + .then(response => response.json() as Promise) .then(data => { - this.setState({ forecasts: data, loading: false }); + this.setState({ filterLists: data, loading: false }); }); } @@ -24,32 +24,26 @@ export class Home extends React.Component, IFetchDataExa ?

Loading...

- : Home.renderForecastsTable(this.state.forecasts); + : Home.renderFilterListsTable(this.state.filterLists); return
-

Weather forecast

-

This component demonstrates fetching data from the server.

{ contents }
; } - private static renderForecastsTable(forecasts: IWeatherForecast[]) { + private static renderFilterListsTable(filterLists: IFilterList[]) { return - - - - + + - {forecasts.map(forecast => - - - - - + {filterLists.map(filterList => + + + )} @@ -57,9 +51,8 @@ export class Home extends React.Component, IFetchDataExa } } -interface IWeatherForecast { - dateFormatted: string; - temperatureC: number; - temperatureF: number; - summary: string; +interface IFilterList { + id: number; + name: string; + description: string; } \ No newline at end of file diff --git a/src/FilterLists.Web/wwwroot/dist/main.js b/src/FilterLists.Web/wwwroot/dist/main.js index 8d1d2ccad..c56c7f506 100644 --- a/src/FilterLists.Web/wwwroot/dist/main.js +++ b/src/FilterLists.Web/wwwroot/dist/main.js @@ -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; diff --git a/src/FilterLists.Web/wwwroot/dist/main.js.map b/src/FilterLists.Web/wwwroot/dist/main.js.map index 07a5221592accb1a9f0d5bb1fb4014febb7d8000..c35cae4f0ade87904a131c610cc57f9b3f4c32a0 100644 GIT binary patch delta 1067 zcmZva%}*0S7{;@-0|pcPLaPyQOCo`=Y(Gh{tCHE>vXoM>$d{3z+jfDKc3Zm(5r`5m z^kmXx0vq+9e}M@hu`!_yK@B&~-b_4s^dfjN&bGAMD4Wb=-g)2m_dGMRxj$_izuR)2 z<{Mt8&n-D)9*;Nb_4WB&&RI7)XSHq3tc`6SjWrSI{KOZFhvkuYw1D2d??dF9MxAUS z06P1*RljB<>hYp+`{U%dc!Qf~f{=TR-tP2TCn20fUw5e1d7cVE7@{}`IZDN|%9YlP z2)U=oUg)~wWvKv!E2ZsaGwI<`tU#AR8wD4!g7yn9fXZS53Ky@^hC-QYpqU5^xOgfI zVYs}x5P)2mia;2_F*k~~K3yOKG0JW9vy=c~hNH$yZZOEn;(o3deJ}Q}bz?Ir)@V{n zv%uWP{ZtC`ILZ{o1fi^y!pL!Ej)mM3Ym~vDfftNJ35LXYxeSK^2G<%`83*B-T+nF3 z#~5K!G_L6VzoH^MVi-$s*wf%JUJ9st*LTLnEwj`d521vWog8|y+eRqcx!vc9OD8?> zbi1DGA#Ua$^$^ji6Mq4{f6*Gs+SiG^eZB6LlArojClJ}a!#X@H`MpEyLC7H|G$}JI ztD1UG6E%rkoz6@vB>ra2jGqh+97p;-3(}2dN+00BNJAz0nggzmc}+{JeuqO$%XAr% zFz|FNm2@n*9Hjtzzr_QaZs9@asVcjV2SZg>mIps6Q)o<#CZtYnURG(_#pr;>k|VY((!L=*-ELt_B;mz;HBk`nAB$kaQ!qdsj-Zl*5s6;KNLXA<{)@r zGf8w(Om|j5x-tm5o2p4#j+4*y$X#G>*5bEUYwnL$#H6GvLC|y2td7?x;Z!?TYSDiL x!HiJ34plQBLyr4NWic6*GNq#$?_)syq^f0PWv;qeL(LY403P-E;!wk=_7{i?UylF) delta 1636 zcmbVL-)kd994EbwJ?MG$@Jd@~&*5I|(QVRP?T_om+S%P~8`Bco2g-u@$v{rV>VQb2PN)7b73$|NZPG8g{fPz zkR&82$Uql#70!0Um(MT~Ld=v6FC1$UKRL?z&%|d^~J{wN!5G**(p(MimeMwl{fCzDa5m8+B2u~fh6xRtc zW#Klc%L0flN}we#xnDhct+oj9?nok7%Ow!#S>1$H(a$3n{9)Y}-Vv-gkpr1_HV|KL zrMv@f+hP%KPrv&dtZCk zMel4jH0$ZJq05aYLMZ!o-*@PpIfKcgd-p?)d-n&vFl&(r&S<)Wb5@>Vhf|w7xKhSk zV|a(r9LKa=##N1(Sm)TTm=4xWOmWt>st&WmIKi>Qx;3^{;ksGev-eC4KTywEWDD$P6y?6Vw{_#R`vyl!#}G?mmAW+i4YlZP9le+;BT7onb%N>+O0hqu*ZYxMyg##HKlPI1J6@EZoZF z%`0emJf=lg+cLP5Hx|*N-dP+?td>{X7h{wy6MBO4%&<&{LnoPo3;qe9(>M?LaKW~W zpr3Fjci~!M5w9+zac^HiJ1_TU=@>oRm|qn1=|wm$i$%ER)i=@93tU^xFrysC)AEge zyJ~m$GH}xs!=UzI!1T}HoyO5SFLwOH1}#sw&p)T4nXxtyh9fZ5vJJ{P%i|Ay>q+mi ziiSt~GQ6KvbUnbYc5n_M88oJ1Gx@(^wF{4Qs-0GBA9+~oxmSmGUsO-Z75J~%(0;M= y-u|6n1)CKk%j|xj`V821Zz~QIMep4d65ZP5u=n*E3LmX)Ao!kZtZfW^@B9O2G$XeF
DateTemp. (C)Temp. (F)SummaryNameDescription
{ forecast.dateFormatted }{ forecast.temperatureC }{ forecast.temperatureF }{ forecast.summary }
{ filterList.name }{ filterList.description }