Skip to content
This repository was archived by the owner on Mar 26, 2025. It is now read-only.

Commit 2e7b7ac

Browse files
MackinnonBuckMackinnonBuck
committed
Updated React template.
1 parent 800ef58 commit 2e7b7ac

File tree

16 files changed

+2304
-5857
lines changed

16 files changed

+2304
-5857
lines changed

‎src/content/React-CSharp/ClientApp/package-lock.json

Lines changed: 1687 additions & 5282 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/content/React-CSharp/ClientApp/package.json

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,42 +4,42 @@
44
"private": true,
55
"dependencies": {
66
"bootstrap": "^5.1.3",
7-
"http-proxy-middleware": "^0.19.1",
7+
"http-proxy-middleware": "^2.0.6",
88
"jquery": "^3.6.0",
99
"merge": "^2.1.1",
1010
"oidc-client": "^1.11.5",
11-
"react": "^17.0.2",
12-
"react-dom": "^17.0.2",
13-
"react-router-bootstrap": "^0.25.0",
14-
"react-router-dom": "^5.2.0",
15-
"react-scripts": "^5.0.0",
16-
"reactstrap": "^8.9.0",
17-
"rimraf": "^2.6.2",
18-
"web-vitals": "^0.2.4",
19-
"workbox-background-sync": "^5.1.3",
20-
"workbox-broadcast-update": "^5.1.3",
21-
"workbox-cacheable-response": "^5.1.3",
22-
"workbox-core": "^5.1.3",
23-
"workbox-expiration": "^5.1.3",
24-
"workbox-google-analytics": "^5.1.3",
25-
"workbox-navigation-preload": "^5.1.3",
26-
"workbox-precaching": "^5.1.3",
27-
"workbox-range-requests": "^5.1.3",
28-
"workbox-routing": "^5.1.3",
29-
"workbox-strategies": "^5.1.3",
30-
"workbox-streams": "^5.1.3"
11+
"react": "^18.1.0",
12+
"react-dom": "^18.1.0",
13+
"react-router-bootstrap": "^0.26.1",
14+
"react-router-dom": "^6.3.0",
15+
"react-scripts": "^5.0.1",
16+
"reactstrap": "^9.0.2",
17+
"rimraf": "^3.0.2",
18+
"web-vitals": "^2.1.4",
19+
"workbox-background-sync": "^6.5.3",
20+
"workbox-broadcast-update": "^6.5.3",
21+
"workbox-cacheable-response": "^6.5.3",
22+
"workbox-core": "^6.5.3",
23+
"workbox-expiration": "^6.5.3",
24+
"workbox-google-analytics": "^6.5.3",
25+
"workbox-navigation-preload": "^6.5.3",
26+
"workbox-precaching": "^6.5.3",
27+
"workbox-range-requests": "^6.5.3",
28+
"workbox-routing": "^6.5.3",
29+
"workbox-strategies": "^6.5.3",
30+
"workbox-streams": "^6.5.3"
3131
},
3232
"devDependencies": {
33-
"ajv": "^6.9.1",
33+
"ajv": "^8.11.0",
3434
"cross-env": "^7.0.3",
35-
"eslint": "^7.25.0",
36-
"eslint-config-react-app": "^6.0.0",
37-
"eslint-plugin-flowtype": "^5.7.2",
38-
"eslint-plugin-import": "^2.22.1",
39-
"eslint-plugin-jsx-a11y": "^6.4.1",
40-
"eslint-plugin-react": "^7.23.2",
41-
"nan": "^2.14.2",
42-
"typescript": "^4.2.4"
35+
"eslint": "^8.14.0",
36+
"eslint-config-react-app": "^7.0.1",
37+
"eslint-plugin-flowtype": "^8.0.3",
38+
"eslint-plugin-import": "^2.26.0",
39+
"eslint-plugin-jsx-a11y": "^6.5.1",
40+
"eslint-plugin-react": "^7.29.4",
41+
"nan": "^2.15.0",
42+
"typescript": "^4.6.3"
4343
},
4444
"scripts": {
4545
//#if(RequiresHttps)

‎src/content/React-CSharp/ClientApp/src/App.js

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,29 @@
11
import React, { Component } from 'react';
2-
import { Route } from 'react-router';
3-
import { Layout } from './components/Layout';
4-
import { Home } from './components/Home';
5-
import { FetchData } from './components/FetchData';
6-
import { Counter } from './components/Counter';
2+
import { Route, Routes } from 'react-router-dom';
3+
import AppRoutes from './AppRoutes';
74
////#if (IndividualLocalAuth)
85
import AuthorizeRoute from './components/api-authorization/AuthorizeRoute';
9-
import ApiAuthorizationRoutes from './components/api-authorization/ApiAuthorizationRoutes';
10-
import { ApplicationPaths } from './components/api-authorization/ApiAuthorizationConstants';
116
////#endif
12-
13-
import './custom.css'
7+
import { Layout } from './components/Layout';
8+
import './custom.css';
149

1510
export default class App extends Component {
1611
static displayName = App.name;
1712

18-
render () {
13+
render() {
1914
return (
2015
<Layout>
21-
<Route exact path='/' component={Home} />
22-
<Route path='/counter' component={Counter} />
16+
<Routes>
17+
{AppRoutes.map((route, index) => {
2318
////#if (!IndividualLocalAuth)
24-
<Route path='/fetch-data' component={FetchData} />
25-
////#endif
26-
////#if (IndividualLocalAuth)
27-
<AuthorizeRoute path='/fetch-data' component={FetchData} />
28-
<Route path={ApplicationPaths.ApiAuthorizationPrefix} component={ApiAuthorizationRoutes} />
19+
const { element, ...rest } = route;
20+
return <Route key={index} {...rest} element={element} />;
21+
////#else
22+
const { element, requireAuth, ...rest } = route;
23+
return <Route key={index} {...rest} element={requireAuth ? <AuthorizeRoute {...rest} element={element} /> : element} />;
2924
////#endif
25+
})}
26+
</Routes>
3027
</Layout>
3128
);
3229
}

‎src/content/React-CSharp/ClientApp/src/App.test.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
2+
import { createRoot } from 'react-dom/client';
33
import { MemoryRouter } from 'react-router-dom';
44
import App from './App';
55

66
it('renders without crashing', async () => {
77
const div = document.createElement('div');
8-
ReactDOM.render(
8+
const root = createRoot(div);
9+
root.render(
910
<MemoryRouter>
1011
<App />
11-
</MemoryRouter>, div);
12+
</MemoryRouter>);
1213
await new Promise(resolve => setTimeout(resolve, 1000));
1314
});

‎src/content/React-CSharp/ClientApp/src/AppRoutes.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
////#if (IndividualLocalAuth)
2+
import ApiAuthorzationRoutes from './components/api-authorization/ApiAuthorizationRoutes';
3+
////#endif
4+
import { Counter } from "./components/Counter";
5+
import { FetchData } from "./components/FetchData";
6+
import { Home } from "./components/Home";
7+
8+
const AppRoutes = [
9+
{
10+
index: true,
11+
element: <Home />
12+
},
13+
{
14+
path: '/counter',
15+
element: <Counter />
16+
},
17+
////#if (!IndividualLocalAuth)
18+
{
19+
path: '/fetch-data',
20+
element: <FetchData />
21+
}
22+
////#else
23+
{
24+
path: '/fetch-data',
25+
requireAuth: true,
26+
element: <FetchData />
27+
},
28+
...ApiAuthorzationRoutes
29+
////#endif
30+
];
31+
32+
export default AppRoutes;

‎src/content/React-CSharp/ClientApp/src/components/Home.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
33
export class Home extends Component {
44
static displayName = Home.name;
55

6-
render () {
6+
render() {
77
return (
88
<div>
99
<h1>Hello, world!</h1>

‎src/content/React-CSharp/ClientApp/src/components/Layout.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { NavMenu } from './NavMenu';
55
export class Layout extends Component {
66
static displayName = Layout.name;
77

8-
render () {
8+
render() {
99
return (
1010
<div>
1111
<NavMenu />

‎src/content/React-CSharp/ClientApp/src/components/NavMenu.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export class NavMenu extends Component {
2424
});
2525
}
2626

27-
render () {
27+
render() {
2828
return (
2929
<header>
3030
<Navbar className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3" light>

‎src/content/React-CSharp/ClientApp/src/components/api-authorization/ApiAuthorizationRoutes.js

Lines changed: 38 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,49 @@
1-
import React, { Component, Fragment } from 'react';
2-
import { Route } from 'react-router';
1+
import React from 'react';
32
import { Login } from './Login'
43
import { Logout } from './Logout'
54
import { ApplicationPaths, LoginActions, LogoutActions } from './ApiAuthorizationConstants';
65

7-
export default class ApiAuthorizationRoutes extends Component {
8-
9-
render () {
10-
return(
11-
<Fragment>
12-
<Route path={ApplicationPaths.Login} render={() => loginAction(LoginActions.Login)} />
13-
<Route path={ApplicationPaths.LoginFailed} render={() => loginAction(LoginActions.LoginFailed)} />
14-
<Route path={ApplicationPaths.LoginCallback} render={() => loginAction(LoginActions.LoginCallback)} />
15-
<Route path={ApplicationPaths.Profile} render={() => loginAction(LoginActions.Profile)} />
16-
<Route path={ApplicationPaths.Register} render={() => loginAction(LoginActions.Register)} />
17-
<Route path={ApplicationPaths.LogOut} render={() => logoutAction(LogoutActions.Logout)} />
18-
<Route path={ApplicationPaths.LogOutCallback} render={() => logoutAction(LogoutActions.LogoutCallback)} />
19-
<Route path={ApplicationPaths.LoggedOut} render={() => logoutAction(LogoutActions.LoggedOut)} />
20-
</Fragment>);
6+
const ApiAuthorizationRoutes = [
7+
{
8+
path: ApplicationPaths.Login,
9+
element: loginAction(LoginActions.Login)
10+
},
11+
{
12+
path: ApplicationPaths.LoginFailed,
13+
element: loginAction(LoginActions.LoginFailed)
14+
},
15+
{
16+
path: ApplicationPaths.LoginCallback,
17+
element: loginAction(LoginActions.LoginCallback)
18+
},
19+
{
20+
path: ApplicationPaths.Profile,
21+
element: loginAction(LoginActions.Profile)
22+
},
23+
{
24+
path: ApplicationPaths.Register,
25+
element: loginAction(LoginActions.Register)
26+
},
27+
{
28+
path: ApplicationPaths.LogOut,
29+
element: logoutAction(LogoutActions.Logout)
30+
},
31+
{
32+
path: ApplicationPaths.LogOutCallback,
33+
element: logoutAction(LogoutActions.LogoutCallback)
34+
},
35+
{
36+
path: ApplicationPaths.LoggedOut,
37+
element: logoutAction(LogoutActions.LoggedOut)
2138
}
22-
}
39+
];
2340

2441
function loginAction(name){
25-
return (<Login action={name}></Login>);
42+
return <Login action={name}></Login>;
2643
}
2744

2845
function logoutAction(name) {
29-
return (<Logout action={name}></Logout>);
46+
return <Logout action={name}></Logout>;
3047
}
48+
49+
export default ApiAuthorizationRoutes;

‎src/content/React-CSharp/ClientApp/src/components/api-authorization/AuthorizeRoute.js

Lines changed: 35 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,49 @@
11
import React from 'react'
22
import { Component } from 'react'
3-
import { Route, Redirect } from 'react-router-dom'
3+
import { Navigate } from 'react-router-dom'
44
import { ApplicationPaths, QueryParameterNames } from './ApiAuthorizationConstants'
55
import authService from './AuthorizeService'
66

77
export default class AuthorizeRoute extends Component {
8-
constructor(props) {
9-
super(props);
8+
constructor(props) {
9+
super(props);
1010

11-
this.state = {
12-
ready: false,
13-
authenticated: false
14-
};
15-
}
11+
this.state = {
12+
ready: false,
13+
authenticated: false
14+
};
15+
}
1616

17-
componentDidMount() {
18-
this._subscription = authService.subscribe(() => this.authenticationChanged());
19-
this.populateAuthenticationState();
20-
}
17+
componentDidMount() {
18+
this._subscription = authService.subscribe(() => this.authenticationChanged());
19+
this.populateAuthenticationState();
20+
}
2121

22-
componentWillUnmount() {
23-
authService.unsubscribe(this._subscription);
24-
}
22+
componentWillUnmount() {
23+
authService.unsubscribe(this._subscription);
24+
}
2525

26-
render() {
27-
const { ready, authenticated } = this.state;
28-
var link = document.createElement("a");
29-
link.href = this.props.path;
30-
const returnUrl = `${link.protocol}//${link.host}${link.pathname}${link.search}${link.hash}`;
31-
const redirectUrl = `${ApplicationPaths.Login}?${QueryParameterNames.ReturnUrl}=${encodeURIComponent(returnUrl)}`
32-
if (!ready) {
33-
return <div></div>;
34-
} else {
35-
const { component: Component, ...rest } = this.props;
36-
return <Route {...rest}
37-
render={(props) => {
38-
if (authenticated) {
39-
return <Component {...props} />
40-
} else {
41-
return <Redirect to={redirectUrl} />
42-
}
43-
}} />
44-
}
26+
render() {
27+
const { ready, authenticated } = this.state;
28+
var link = document.createElement("a");
29+
link.href = this.props.path;
30+
const returnUrl = `${link.protocol}//${link.host}${link.pathname}${link.search}${link.hash}`;
31+
const redirectUrl = `${ApplicationPaths.Login}?${QueryParameterNames.ReturnUrl}=${encodeURIComponent(returnUrl)}`;
32+
if (!ready) {
33+
return <div></div>;
34+
} else {
35+
const { element } = this.props;
36+
return authenticated ? element : <Navigate replace to={redirectUrl} />;
4537
}
38+
}
4639

47-
async populateAuthenticationState() {
48-
const authenticated = await authService.isAuthenticated();
49-
this.setState({ ready: true, authenticated });
50-
}
40+
async populateAuthenticationState() {
41+
const authenticated = await authService.isAuthenticated();
42+
this.setState({ ready: true, authenticated });
43+
}
5144

52-
async authenticationChanged() {
53-
this.setState({ ready: false, authenticated: false });
54-
await this.populateAuthenticationState();
55-
}
45+
async authenticationChanged() {
46+
this.setState({ ready: false, authenticated: false });
47+
await this.populateAuthenticationState();
48+
}
5649
}

0 commit comments

Comments
 (0)