WebFileServer20

diff --git a/Src/WebFileServ.WebApp/ClientApp/src/App.js b/Src/WebFileServ.WebApp/ClientApp/src/App.js
index b03122d..6cc38f2 100644
--- a/Src/WebFileServ.WebApp/ClientApp/src/App.js
+++ b/Src/WebFileServ.WebApp/ClientApp/src/App.js
@@ -1,9 +1,10 @@
 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 { Layout } from './Layout/Layout';
+import { HomePage } from './Pages/HomePage';
+import { FetchDataPage } from './Pages/FetchDataPage';
+import { CounterPage } from './Pages/CounterPage';
+import { UserPage } from './Pages/UserPage';
 import AuthorizeRoute from './components/api-authorization/AuthorizeRoute';
 import ApiAuthorizationRoutes from './components/api-authorization/ApiAuthorizationRoutes';
 import { ApplicationPaths } from './components/api-authorization/ApiAuthorizationConstants';
@@ -11,16 +12,17 @@ import { ApplicationPaths } from './components/api-authorization/ApiAuthorizatio
 import './custom.css'
 
 export default class App extends Component {
-  static displayName = App.name;
+    static displayName = App.name;
 
-  render () {
-    return (
-      <Layout>
-        <Route exact path='/' component={Home} />
-        <Route path='/counter' component={Counter} />
-        <AuthorizeRoute path='/fetch-data' component={FetchData} />
-        <Route path={ApplicationPaths.ApiAuthorizationPrefix} component={ApiAuthorizationRoutes} />
-      </Layout>
-    );
-  }
+    render() {
+        return (
+            <Layout>
+                <Route exact path='/' component={HomePage} />
+                <Route path='/counter' component={CounterPage} />
+                <AuthorizeRoute path='/fetch-data' component={FetchDataPage} />
+                <AuthorizeRoute path='/userPage' component={UserPage} />
+                <Route path={ApplicationPaths.ApiAuthorizationPrefix} component={ApiAuthorizationRoutes} />
+            </Layout>
+        );
+    }
 }

diff --git a/Src/WebFileServ.WebApp/ClientApp/src/components/api-authorization/ApiAuthorizationConstants.js b/Src/WebFileServ.WebApp/ClientApp/src/components/api-authorization/ApiAuthorizationConstants.js
index 3de3d5c..e694fed 100644
--- a/Src/WebFileServ.WebApp/ClientApp/src/components/api-authorization/ApiAuthorizationConstants.js
+++ b/Src/WebFileServ.WebApp/ClientApp/src/components/api-authorization/ApiAuthorizationConstants.js
@@ -1,38 +1,38 @@
 export const ApplicationName = 'WebFileServ.WebApp';
 
 export const QueryParameterNames = {
-  ReturnUrl: 'returnUrl',
-  Message: 'message'
+    ReturnUrl: 'returnUrl',
+    Message: 'message'
 };
 
 export const LogoutActions = {
-  LogoutCallback: 'logout-callback',
-  Logout: 'logout',
-  LoggedOut: 'logged-out'
+    LogoutCallback: 'logout-callback',
+    Logout: 'logout',
+    LoggedOut: 'logged-out'
 };
 
 export const LoginActions = {
-  Login: 'login',
-  LoginCallback: 'login-callback',
-  LoginFailed: 'login-failed',
-  Profile: 'profile',
-  Register: 'register'
+    Login: 'login',
+    LoginCallback: 'login-callback',
+    LoginFailed: 'login-failed',
+    Profile: 'profile',
+    Register: 'register'
 };
 
 const prefix = '/authentication';
 
 export const ApplicationPaths = {
-  DefaultLoginRedirectPath: '/',
-  ApiAuthorizationClientConfigurationUrl: `/_configuration/${ApplicationName}`,
-  ApiAuthorizationPrefix: prefix,
-  Login: `${prefix}/${LoginActions.Login}`,
-  LoginFailed: `${prefix}/${LoginActions.LoginFailed}`,
-  LoginCallback: `${prefix}/${LoginActions.LoginCallback}`,
-  Register: `${prefix}/${LoginActions.Register}`,
-  Profile: `${prefix}/${LoginActions.Profile}`,
-  LogOut: `${prefix}/${LogoutActions.Logout}`,
-  LoggedOut: `${prefix}/${LogoutActions.LoggedOut}`,
-  LogOutCallback: `${prefix}/${LogoutActions.LogoutCallback}`,
-  IdentityRegisterPath: '/Identity/Account/Register',
-  IdentityManagePath: '/Identity/Account/Manage'
+    DefaultLoginRedirectPath: '/',
+    ApiAuthorizationClientConfigurationUrl: `/_configuration/${ApplicationName}`,
+    ApiAuthorizationPrefix: prefix,
+    Login: `${prefix}/${LoginActions.Login}`,
+    LoginFailed: `${prefix}/${LoginActions.LoginFailed}`,
+    LoginCallback: `${prefix}/${LoginActions.LoginCallback}`,
+    Register: `${prefix}/${LoginActions.Register}`,
+    Profile: `${prefix}/${LoginActions.Profile}`,
+    LogOut: `${prefix}/${LogoutActions.Logout}`,
+    LoggedOut: `${prefix}/${LogoutActions.LoggedOut}`,
+    LogOutCallback: `${prefix}/${LogoutActions.LogoutCallback}`,
+    IdentityRegisterPath: '/Identity/Account/Register',
+    IdentityManagePath: '/Identity/Account/Manage'
 };

diff --git a/Src/WebFileServ.WebApp/ClientApp/src/Model/DAL/FetchDataDAL.js b/Src/WebFileServ.WebApp/ClientApp/src/Model/DAL/FetchDataDAL.js
new file mode 100644
index 0000000..edde5bc
--- /dev/null
+++ b/Src/WebFileServ.WebApp/ClientApp/src/Model/DAL/FetchDataDAL.js
@@ -0,0 +1,22 @@
+import authService from '../../components/api-authorization/AuthorizeService'
+
+export class FetchDataDAL {
+
+    async GetWeatherData() {
+        const token = await authService.getAccessToken();
+        const response = await fetch(
+            'weatherforecast',
+            {
+                headers: !token
+                    ? {}
+                    : {
+                        'Authorization': `Bearer ${token}`
+                    }
+            }
+        );
+        const data = await response.json();
+
+        return data
+    }
+
+}

diff --git a/Src/WebFileServ.WebApp/ClientApp/src/Pages/UserPage.js b/Src/WebFileServ.WebApp/ClientApp/src/Pages/UserPage.js
new file mode 100644
index 0000000..5fa5feb
--- /dev/null
+++ b/Src/WebFileServ.WebApp/ClientApp/src/Pages/UserPage.js
@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import authService from '../components/api-authorization/AuthorizeService';
+
+export class UserPage extends Component {
+    static displayName = UserPage.name;
+
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isAuthenticated: false,
+            userName: null
+        };
+    }
+
+    componentDidMount() {
+        this._subscription = authService.subscribe(() => this.populateState());
+        this.populateState();
+    }
+
+    componentWillUnmount() {
+        authService.unsubscribe(this._subscription);
+    }
+
+    async populateState() {
+        const [isAuthenticated, user] = await Promise.all(
+            [
+                authService.isAuthenticated(),
+                authService.getUser()
+            ]
+        )
+
+        this.setState(
+            {
+                isAuthenticated,
+                userName: user && user.name
+            }
+        );
+    }
+
+    render() {
+        return (
+            <div>
+                <h1 id="tabelLabel" >User SPA page</h1>
+                <p></p>
+                { this.state.userName }
+            </div>
+        );
+    }
+}