Upgrade to React 17 and move code to env files

src/.env

@@ -0,0 +1,3 @@
+REACT_APP_CLIENT_ID = 'React.Spa'
+REACT_APP_RESPONSE_TYPE = 'code'
+REACT_APP_CLIENT_SCOPE = 'openid profile email roles app.api.employeeprofile.read'

src/.env.development

@@ -0,0 +1,2 @@
+REACT_APP_STS_AUTHORITY = 'https://localhost:44310'
+REACT_APP_API_ENDPOINT = 'https://localhost:44378/api/'

src/.env.production

@@ -0,0 +1,2 @@
+REACT_APP_STS_AUTHORITY = 'https://cat-token-identity.azurewebsites.net'
+REACT_APP_API_ENDPOINT = 'https://cat-netcore-api.azurewebsites.net/api/'

src/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "appService.defaultWebAppToDeploy": "/subscriptions/7d4355af-9f71-4123-8a18-aa68dc430bbf/resourceGroups/Tutorial-RG/providers/Microsoft.Web/sites/cat-react",
+    "appService.deploySubpath": "build"
+}

src/iisConfig/copyIISConfig.js

@@ -0,0 +1,9 @@
+const fs = require('fs-extra');
+
+const webConfigPath = './build/web.config';
+
+if (fs.existsSync(webConfigPath)) {
+    fs.unlinkSync(webConfigPath);
+}
+
+fs.copySync('./iisConfig/web.config', webConfigPath);

src/iisConfig/web.config

@@ -0,0 +1,21 @@
+<?xml version="1.0"?>
+<configuration>
+ <system.webServer>
+<staticContent>
+    <mimeMap fileExtension=".json" mimeType="application/json" />
+</staticContent>
+ <rewrite>
+ <rules>
+ <rule name="React Routes" stopProcessing="true">
+ <match url=".*" />
+ <conditions logicalGrouping="MatchAll">
+ <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
+ <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
+ <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
+ </conditions>
+ <action type="Rewrite" url="/" />
+ </rule>
+ </rules>
+ </rewrite>
+ </system.webServer>
+</configuration>

src/package.json

@@ -4,23 +4,24 @@
   "version": "3.0.0",
   "dependencies": {
     "axios": "0.19.2",
-    "core-js": "3.6.5",
     "bootstrap": "4.5.0",
+    "core-js": "3.6.5",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.2",
     "oidc-client": "1.10.1",
     "ramda": "0.27.0",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
+    "react": "^17.0.0",
+    "react-app-polyfill": "1.0.6",
+    "react-dom": "^17.0.0",
     "react-json-tree": "0.11.2",
-    "react-scripts": "3.4.1",
+    "react-scripts": "^4.0.0",
     "react-test-renderer": "16.13.1",
-    "react-app-polyfill": "1.0.6",
     "react-toastify": "6.0.8"
   },
   "scripts": {
-    "start": "set PORT=4200 && react-scripts start",
+    "start": "set PORT=3000 && react-scripts start",
     "build": "react-scripts build",
+    "postbuild": "node iisConfig/copyIISConfig.js",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
@@ -36,8 +37,15 @@
     "@types/react-json-tree": "0.6.11",
     "@types/react-test-renderer": "16.9.2",
     "@types/toastr": "2.1.38",
+    "babel-eslint": "^10.1.0",
     "typescript": "3.9.6"
   },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },  
   "browserslist": {
     "production": [
       ">0.2%",

src/src/components/Buttons.tsx

@@ -12,19 +12,19 @@ const Buttons: React.SFC<IButtonsProps> = props => {
   return (
     <div className="row">
       <div className="col-md-12 text-center" style={{ marginTop: '30px' }}>
-        <button className="btn btn-primary btn-login" style={{ margin: '10px' }} onClick={props.login}>
+        <button className="btn btn-primary" style={{ margin: '10px' }} onClick={props.login}>
           Login
         </button>
-        <button className="btn btn-secondary btn-getuser" style={{ margin: '10px' }} onClick={props.getUser}>
+        <button className="btn btn-secondary" style={{ margin: '10px' }} onClick={props.getUser}>
           Get User info
         </button>
-        <button className="btn btn-warning btn-getapi" style={{ margin: '10px' }} onClick={props.callApi}>
+        <button className="btn btn-warning" style={{ margin: '10px' }} onClick={props.callApi}>
           Call API
         </button>
-        <button className="btn btn-success btn-renewtoken" style={{ margin: '10px' }} onClick={props.renewToken}>
+        <button className="btn btn-success" style={{ margin: '10px' }} onClick={props.renewToken}>
           Renew Token
         </button>
-        <button className="btn btn-dark btn-logout" style={{ margin: '10px' }} onClick={props.logout}>
+        <button className="btn btn-dark" style={{ margin: '10px' }} onClick={props.logout}>
           Logout
         </button>
       </div>

src/src/services/ApiService.ts

@@ -1,10 +1,8 @@
 import axios from 'axios';
-import { Constants } from '../helpers/Constants';
 import { AuthService } from './AuthService';
 
 export class ApiService {
   private authService: AuthService;
-
   constructor() {
     this.authService = new AuthService();
   }
@@ -36,6 +34,6 @@ export class ApiService {
       Authorization: 'Bearer ' + token
     };
 
-    return axios.get(Constants.apiRoot + 'test', { headers });
+    return axios.get(process.env.REACT_APP_API_ENDPOINT + 'v1/Positions', { headers });
   }
 }

src/src/services/AuthService.ts

@@ -1,21 +1,18 @@
 import { Log, User, UserManager } from 'oidc-client';
 
-import { Constants } from '../helpers/Constants';
-
 export class AuthService {
   public userManager: UserManager;
-
   constructor() {
     const settings = {
-      authority: Constants.stsAuthority,
-      client_id: Constants.clientId,
-      redirect_uri: `${Constants.clientRoot}signin-callback.html`,
-      silent_redirect_uri: `${Constants.clientRoot}silent-renew.html`,
-      // tslint:disable-next-line:object-literal-sort-keys
-      post_logout_redirect_uri: `${Constants.clientRoot}`,
-      response_type: 'code',
-      scope: Constants.clientScope
+      authority: process.env.REACT_APP_STS_AUTHORITY,
+      client_id: process.env.REACT_APP_CLIENT_ID,
+      redirect_uri: window.location.origin + '/signin-callback.html',
+      silent_redirect_uri: window.location.origin + '/silent-renew.html',
+      post_logout_redirect_uri: window.location.origin,
+      response_type: process.env.REACT_APP_RESPONSE_TYPE,
+      scope: process.env.REACT_APP_CLIENT_SCOPE
     };
+
     this.userManager = new UserManager(settings);
 
     Log.logger = console;

src/tsconfig.json

@@ -17,7 +17,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "preserve"
+    "jsx": "react",
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
     "src"