replace sample data with FL API data

src/FilterLists.Web/ClientApp/components/FetchData.tsx

@@ -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;
-}

src/FilterLists.Web/ClientApp/components/Home.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { RouteComponentProps } from "react-router";
+import "isomorphic-fetch";
+
+interface IFilterListsState {
+    filterLists: IFilterList[];
+    loading: boolean;
+}
+
+export class Home extends React.Component<RouteComponentProps<{}>, IFilterListsState> {
+    constructor() {
+        super();
+        this.state = { filterLists: [], loading: true };
+
+        fetch("https://api.filterlists.com/v1/lists")
+            .then(response => response.json() as Promise<IFilterList[]>)
+            .then(data => {
+                this.setState({ filterLists: data, loading: false });
+            });
+    }
+
+    render() {
+        const contents = this.state.loading
+            ? <p>
+                  <em>Loading...</em>
+              </p>
+            : Home.renderFilterListsTable(this.state.filterLists);
+
+        return <div>
+                   {contents}
+               </div>;
+    }
+
+    private static renderFilterListsTable(filterLists: IFilterList[]) {
+        return <table className="table">
+                   <thead>
+                   <tr>
+                       <th>Name</th>
+                       <th>Description</th>
+                   </tr>
+                   </thead>
+                   <tbody>
+                   {filterLists.map(filterList =>
+                       <tr key={filterList.id}>
+                           <td>{filterList.name}</td>
+                           <td>{filterList.description}</td>
+                       </tr>
+                   )}
+                   </tbody>
+               </table>;
+    }
+}
+
+interface IFilterList {
+    id: number;
+    name: string;
+    description: string;
+}

src/FilterLists.Web/ClientApp/routes.tsx

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