Web frontend: Reverted: trying to introduce redux and server-side pre…

…rendering

Computator.NET.WebClient/ClientApp/boot.tsx

@@ -0,0 +1,30 @@
+import './css/site.css';
+import 'bootstrap';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { AppContainer } from 'react-hot-loader';
+import { BrowserRouter } from 'react-router-dom';
+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>
+            <BrowserRouter children={ routes } basename={ baseUrl } />
+        </AppContainer>,
+        document.getElementById('react-app')
+    );
+}
+
+renderApp();
+
+// Allow Hot Module Replacement
+if (module.hot) {
+    module.hot.accept('./routes', () => {
+        routes = require<typeof RoutesModule>('./routes').routes;
+        renderApp();
+    });
+}

Computator.NET.WebClient/ClientApp/components/FetchData.tsx

@@ -1,38 +1,37 @@
 import * as React from 'react';
-import { Link, RouteComponentProps } from 'react-router-dom';
-import { connect } from 'react-redux';
-import { ApplicationState }  from '../store';
-import * as WeatherForecastsState from '../store/WeatherForecasts';
+import { RouteComponentProps } from 'react-router';
+import 'isomorphic-fetch';
 
-// At runtime, Redux will merge together...
-type WeatherForecastProps =
-    WeatherForecastsState.WeatherForecastsState        // ... state we've requested from the Redux store
-    & typeof WeatherForecastsState.actionCreators      // ... plus action creators we've requested
-    & RouteComponentProps<{ startDateIndex: string }>; // ... plus incoming routing parameters
+interface FetchDataExampleState {
+    forecasts: WeatherForecast[];
+    loading: boolean;
+}
 
-export class FetchData extends React.Component<WeatherForecastProps, {}> {
-    componentWillMount() {
-        // This method runs when the component is first added to the page
-        let startDateIndex = parseInt(this.props.match.params.startDateIndex) || 0;
-        this.props.requestWeatherForecasts(startDateIndex);
-    }
+export class FetchData extends React.Component<RouteComponentProps<{}>, FetchDataExampleState> {
+    constructor() {
+        super();
+        this.state = { forecasts: [], loading: true };
 
-    componentWillReceiveProps(nextProps: WeatherForecastProps) {
-        // This method runs when incoming props (e.g., route params) change
-        let startDateIndex = parseInt(nextProps.match.params.startDateIndex) || 0;
-        this.props.requestWeatherForecasts(startDateIndex);
+        fetch('api/SampleData/WeatherForecasts')
+            .then(response => response.json() as Promise<WeatherForecast[]>)
+            .then(data => {
+                this.setState({ forecasts: data, loading: false });
+            });
     }
 
     public render() {
+        let 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 and working with URL parameters.</p>
-            { this.renderForecastsTable() }
-            { this.renderPagination() }
+            <p>This component demonstrates fetching data from the server.</p>
+            { contents }
         </div>;
     }
 
-    private renderForecastsTable() {
+    private static renderForecastsTable(forecasts: WeatherForecast[]) {
         return <table className='table'>
             <thead>
                 <tr>
@@ -43,7 +42,7 @@ export class FetchData extends React.Component<WeatherForecastProps, {}> {
                 </tr>
             </thead>
             <tbody>
-            {this.props.forecasts.map(forecast =>
+            {forecasts.map(forecast =>
                 <tr key={ forecast.dateFormatted }>
                     <td>{ forecast.dateFormatted }</td>
                     <td>{ forecast.temperatureC }</td>
@@ -54,20 +53,11 @@ export class FetchData extends React.Component<WeatherForecastProps, {}> {
             </tbody>
         </table>;
     }
-
-    private renderPagination() {
-        let prevStartDateIndex = (this.props.startDateIndex || 0) - 5;
-        let nextStartDateIndex = (this.props.startDateIndex || 0) + 5;
-
-        return <p className='clearfix text-center'>
-            <Link className='btn btn-default pull-left' to={ `/fetchdata/${ prevStartDateIndex }` }>Previous</Link>
-            <Link className='btn btn-default pull-right' to={ `/fetchdata/${ nextStartDateIndex }` }>Next</Link>
-            { this.props.isLoading ? <span>Loading...</span> : [] }
-        </p>;
-    }
 }
 
-export default connect(
-    (state: ApplicationState) => state.weatherForecasts, // Selects which state properties are merged into the component's props
-    WeatherForecastsState.actionCreators                 // Selects which action creators are merged into the component's props
-)(FetchData) as typeof FetchData;
+interface WeatherForecast {
+    dateFormatted: string;
+    temperatureC: number;
+    temperatureF: number;
+    summary: string;
+}

Computator.NET.WebClient/ClientApp/components/Layout.tsx

@@ -1,7 +1,11 @@
 import * as React from 'react';
 import { NavMenu } from './NavMenu';
 
-export class Layout extends React.Component<{}, {}> {
+export interface LayoutProps {
+    children?: React.ReactNode;
+}
+
+export class Layout extends React.Component<LayoutProps, {}> {
     public render() {
         return <div className='container-fluid'>
             <div className='row'>

Computator.NET.WebClient/ClientApp/routes.tsx

@@ -8,9 +8,9 @@ import { Scripting } from './components/Scripting';
 import { NumericalCalculations } from './components/NumericalCalculations';
 
 export const routes = <Layout>
-                          <Route exact path='/' component={Chart} />
+                          <Route exact path='/' component={ Chart } />
                           <Route path='/calculate' component={Calculate} />
                           <Route path='/scripting' component={Scripting} />
                           <Route path='/numerical-calculations' component={NumericalCalculations} />
-    <Route path='/fetchdata/:startDateIndex?' component={ FetchData } />
+    <Route path='/fetchdata' component={ FetchData } />
 </Layout>;