simplify the app

web/msal-2-auth-code-flow-spa-aspnet-core-31/Msal2/ClientApp/src/App.js

@@ -2,8 +2,6 @@ import React, { Component } from 'react';
 import { Route } from 'react-router';
 import { Layout } from './components/Layout';
 import { Home } from './components/Home';
-import { FetchData } from './components/FetchData';
-import { Counter } from './components/Counter';
 
 import './custom.css'
 
@@ -14,8 +12,6 @@ export default class App extends Component {
     return (
       <Layout>
         <Route exact path='/' component={Home} />
-        <Route path='/counter' component={Counter} />
-        <Route path='/fetch-data' component={FetchData} />
       </Layout>
     );
   }

web/msal-2-auth-code-flow-spa-aspnet-core-31/Msal2/ClientApp/src/components/Home.js

@@ -1,25 +1,33 @@
 import React, { Component } from 'react';
 
 export class Home extends Component {
-  static displayName = Home.name;
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  fetchWeather() {
+    fetch("/weatherforecast").then(response => {
+      response.json().then(result => {
+        this.setState(result);
+      })
+    });
+  }
 
-  render () {
+  render() {
+    const weather = this.state && this.state[0] ? this.state[0] : undefined;
     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> for client-side code</li>
-          <li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
-        </ul>
-        <p>To help you get started, we have 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>Development server integration</strong>. In development mode, the development server from <code>create-react-app</code> runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file.</li>
-          <li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and your <code>dotnet publish</code> configuration produces minified, efficiently bundled JavaScript files.</li>
-        </ul>
-        <p>The <code>ClientApp</code> subdirectory is a standard React application based on the <code>create-react-app</code> template. If you open a command prompt in that directory, you can run <code>npm</code> commands such as <code>npm test</code> or <code>npm install</code>.</p>
+        <h1>Tomorrow's weather forecast</h1>
+        <br />
+        <button onClick={() => this.fetchWeather() }>refresh</button>
+        <br />
+        {weather &&
+          <div>
+            <p>Temperature: {weather.temperatureC}</p>
+            <p>Sumnmary: {weather.summary}</p>
+          </div>
+        }
       </div>
     );
   }

web/msal-2-auth-code-flow-spa-aspnet-core-31/Msal2/ClientApp/src/components/NavMenu.js

@@ -33,12 +33,6 @@ export class NavMenu extends Component {
                 <NavItem>
                   <NavLink tag={Link} className="text-dark" to="/">Home</NavLink>
                 </NavItem>
-                <NavItem>
-                  <NavLink tag={Link} className="text-dark" to="/counter">Counter</NavLink>
-                </NavItem>
-                <NavItem>
-                  <NavLink tag={Link} className="text-dark" to="/fetch-data">Fetch data</NavLink>
-                </NavItem>
               </ul>
             </Collapse>
           </Container>