Skip to content

Commit e707a04

Browse files
mdamyanovamdamyanova
committed
refactoring
1 parent 890b98b commit e707a04

File tree

31 files changed

+1729
-1896
lines changed

31 files changed

+1729
-1896
lines changed

‎ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example.csproj

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,7 @@
3333
<None Remove="ClientApp\components\About.tsx" />
3434
<None Remove="ClientApp\components\Error.tsx" />
3535
<None Remove="ClientApp\components\Example.tsx" />
36-
<None Remove="ClientApp\empty.tsx" />
37-
<None Remove="ClientApp\utils\request.ts" />
36+
<None Remove="ClientApp\components\users\Logout.tsx" />
3837
</ItemGroup>
3938

4039
<ItemGroup>
@@ -46,13 +45,12 @@
4645
<TypeScriptCompile Include="ClientApp\components\Error.tsx" />
4746
<TypeScriptCompile Include="ClientApp\components\Example.tsx" />
4847
<TypeScriptCompile Include="ClientApp\components\users\Login.tsx" />
48+
<TypeScriptCompile Include="ClientApp\components\users\Logout.tsx" />
4949
<TypeScriptCompile Include="ClientApp\components\users\Register.tsx" />
50-
<TypeScriptCompile Include="ClientApp\empty.tsx" />
51-
<TypeScriptCompile Include="ClientApp\utils\request.ts" />
5250
</ItemGroup>
5351

5452
<ItemGroup>
55-
<Folder Include="ClientApp\assets\images\" />
53+
<Folder Include="Services\Models\" />
5654
</ItemGroup>
5755

5856
<Target Name="DebugRunWebpack" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('wwwroot\dist') ">

‎ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/boot.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import './css/site.css';
1+
import './css/main.css';
22
import 'bootstrap';
33
import * as React from 'react';
44
import * as ReactDOM from 'react-dom';

‎ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/components/About.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22

3-
export class About extends React.Component {
3+
export class About extends React.Component<any, any> {
44
public render() {
5-
return <div>alabala</div>
5+
return <h3>This is our about page.</h3>
66
};
77
}

‎ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/components/Home.tsx

Lines changed: 9 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,16 @@
11
import * as React from 'react';
22
import { RouteComponentProps } from 'react-router';
3+
import { Grid, Row } from 'react-bootstrap';
34

45
export class Home extends React.Component<RouteComponentProps<{}>, {}> {
56
public render() {
6-
return <div>
7-
<h1>Hello, world!</h1>
8-
<p>Welcome to your new single-page application, built with:</p>
9-
<ul>
10-
<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>
11-
<li><a href='https://facebook.github.io/react/'>React</a> and <a href='http://www.typescriptlang.org/'>TypeScript</a> for client-side code</li>
12-
<li><a href='https://webpack.github.io/'>Webpack</a> for building and bundling client-side resources</li>
13-
<li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
14-
</ul>
15-
<p>To help you get started, we've also set up:</p>
16-
<ul>
17-
<li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
18-
<li><strong>Webpack dev middleware</strong>. In development mode, there's no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.</li>
19-
<li><strong>Hot module replacement</strong>. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, rebuilt React components will be injected directly into your running application, preserving its live state.</li>
20-
<li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>
21-
</ul>
22-
<h4>Going further</h4>
23-
<p>
24-
For larger applications, or for server-side prerendering (i.e., for <em>isomorphic</em> or <em>universal</em> applications), you should consider using a Flux/Redux-like architecture.
25-
You can generate an ASP.NET Core application with React and Redux using <code>dotnet new reactredux</code> instead of using this template.
26-
</p>
27-
</div>;
7+
return (
8+
<Grid>
9+
<Row className="text-center">
10+
<h2>Our Products</h2>
11+
<h4>This is an example of setting ASP.NET Core Web API and ReactJS with basic User Authentication. :)</h4>
12+
</Row>
13+
</Grid>
14+
);
2815
}
2916
}

‎ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/components/Layout.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,11 @@ export interface LayoutProps {
77

88
export class Layout extends React.Component<LayoutProps, {}> {
99
public render() {
10-
return <div>
11-
<NavMenu />
10+
return (
11+
<div>
12+
<NavMenu />
1213
{this.props.children}
1314
</div>
15+
);
1416
};
1517
}

‎ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/components/NavMenu.tsx

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,27 @@ import * as React from 'react';
22
import { Link, NavLink } from 'react-router-dom';
33
import { Navbar, NavItem, Nav } from 'react-bootstrap';
44

5-
export class NavMenu extends React.Component<{}, {}> {
6-
public render() {
7-
return <Navbar inverse collapseOnSelect>
8-
<Navbar.Header>
9-
<Navbar.Brand>
10-
<a href="#brand">ASP.NET Core with ReactJS</a>
11-
</Navbar.Brand>
12-
<Navbar.Toggle />
13-
</Navbar.Header>
14-
<Navbar.Collapse>
15-
<Nav>
16-
<NavItem eventKey={1} href="/users">Users</NavItem>
17-
<NavItem eventKey={2} href="/about">About</NavItem>
18-
</Nav>
19-
<Nav pullRight>
20-
<NavItem eventKey={1} href="/login">Login</NavItem>
21-
{/*todo - check users*/}
22-
<NavItem eventKey={2} href="/register">Register</NavItem>
23-
</Nav>
5+
export class NavMenu extends React.Component<{}, {}> {
6+
render() {
7+
return (
8+
<Navbar inverse collapseOnSelect fixedTop>
9+
<Navbar.Header>
10+
<Navbar.Brand>
11+
<a href="/">ASP.NET Core with ReactJS</a>
12+
</Navbar.Brand>
13+
<Navbar.Toggle />
14+
</Navbar.Header>
15+
<Navbar.Collapse>
16+
<Nav>
17+
<NavItem eventKey={1} href="/users">Users</NavItem>
18+
<NavItem eventKey={2} href="/about">About</NavItem>
19+
</Nav>
20+
<Nav pullRight>
21+
<NavItem eventKey={1} href="/login">Login</NavItem>
22+
<NavItem eventKey={2} href="/register">Register</NavItem>
23+
</Nav>;
2424
</Navbar.Collapse>
25-
</Navbar>;
25+
</Navbar>
26+
);
2627
}
2728
}

‎ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/components/users/Login.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import * as React from "react";
2-
import { Form, FormGroup, FormControl, ControlLabel, Button, Col, Grid, Row } from 'react-bootstrap';
32
import 'isomorphic-fetch';
3+
import { Form, FormGroup, FormControl, ControlLabel, Button, Col, Grid, Row } from 'react-bootstrap';
44

55
export class Login extends React.Component<any, any> {
66
constructor() {
77
super();
8+
89
this.state = {
910
userName: '',
1011
password: ''
1112
};
13+
1214
this.handleOnChange = this.handleOnChange.bind(this);
1315
this.prepareFormData = this.prepareFormData.bind(this);
1416
this.loginUser = this.loginUser.bind(this);
@@ -32,6 +34,7 @@ export class Login extends React.Component<any, any> {
3234

3335
var data = JSON.stringify(this.prepareFormData());
3436

37+
// Send POST request with data submited from form
3538
fetch('/api/users/login', {
3639
method: 'POST',
3740
headers: {
@@ -43,6 +46,8 @@ export class Login extends React.Component<any, any> {
4346
.then(this.checkStatus);
4447
}
4548

49+
// Tell fetch() that 4xx and 5xx are client and server errors respectively,
50+
// since it hasn't clue yet; redirect to pages depending of response's status code
4651
checkStatus(res: any): void {
4752
if (res.status >= 200 && res.status < 300) {
4853
this.props.history.push('/example');
@@ -81,11 +86,9 @@ export class Login extends React.Component<any, any> {
8186
</form>
8287
</Col>
8388
<Col xs={6} md={4}>
84-
<FormGroup>
85-
<FormControl.Static>Hello, {this.state.userName}</FormControl.Static>
86-
</FormGroup>
8789
</Col>
8890
</Row>
89-
</Grid>);
91+
</Grid>
92+
);
9093
}
9194
}

‎ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/components/users/Register.tsx

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,32 @@
11
import * as React from "react";
2+
import 'isomorphic-fetch';
23
import { Link, Redirect, RouteComponentProps } from 'react-router-dom';
34
import { Form, FormGroup, FormControl, ControlLabel, Button, Col, Grid, Row } from 'react-bootstrap';
4-
import 'isomorphic-fetch';
5-
6-
interface HandleNameChangeInterface {
7-
target: HTMLInputElement;
8-
}
95

106
export class Register extends React.Component<any, any> {
117
constructor() {
128
super();
9+
1310
this.state = {
1411
userName: '',
1512
fullName: '',
1613
email: '',
1714
password: '',
18-
confirmPassword: '',
19-
errors: []
15+
confirmPassword: ''
2016
};
17+
2118
this.handleOnChange = this.handleOnChange.bind(this);
2219
this.prepareFormData = this.prepareFormData.bind(this);
2320
this.registerUser = this.registerUser.bind(this);
2421
this.checkStatus = this.checkStatus.bind(this);
2522
}
2623

24+
// Handle all changes in the state
2725
handleOnChange(event: any): void {
28-
this.setState({ [event.target.id]: event.target.value, errors: [] });
26+
this.setState({ [event.target.id]: event.target.value });
2927
}
3028

29+
// Return JS object as ASP expect, ready for parsing to JSON
3130
prepareFormData(data = this.state) {
3231
return {
3332
UserName: data.userName.trim(),
@@ -44,6 +43,7 @@ export class Register extends React.Component<any, any> {
4443

4544
var data = JSON.stringify(this.prepareFormData());
4645

46+
// Send POST request with data submited from form
4747
fetch('/api/users/register', {
4848
method: 'POST',
4949
headers: {
@@ -55,6 +55,8 @@ export class Register extends React.Component<any, any> {
5555
.then(this.checkStatus);
5656
}
5757

58+
// Tell fetch() that 4xx and 5xx are client and server errors respectively,
59+
// since it hasn't clue yet; redirect to pages depending of response's status code
5860
checkStatus(res: any) : void {
5961
if (res.status >= 200 && res.status < 300) {
6062
this.props.history.push('/login');
@@ -111,6 +113,7 @@ export class Register extends React.Component<any, any> {
111113
</form>
112114
</Col>
113115
<Col xs={6} md={4}>
116+
{/*Helpful way to see how state changes dynamically so I left it here*/}
114117
<FormGroup>
115118
<ControlLabel>Hello, stranger! Are you ok with this info:</ControlLabel>
116119
<FormControl.Static>Username: {this.state.userName}</FormControl.Static>
@@ -119,6 +122,7 @@ export class Register extends React.Component<any, any> {
119122
</FormGroup>
120123
</Col>
121124
</Row>
122-
</Grid>);
125+
</Grid>
126+
);
123127
}
124128
}

‎ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/components/users/Users.tsx

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,20 @@
11
import * as React from 'react';
2-
import { RouteComponentProps } from 'react-router';
32
import 'isomorphic-fetch';
3+
import { RouteComponentProps } from 'react-router';
4+
import { Table } from 'react-bootstrap';
45

56
interface UsersList {
67
userName: string;
78
fullName: string;
89
email: string;
910
}
1011

11-
interface UsersExampleState {
12-
users: UsersList[];
13-
loading: boolean;
14-
}
15-
16-
export class Users extends React.Component<RouteComponentProps<{}>, UsersExampleState> {
12+
export class Users extends React.Component<RouteComponentProps<{}>, any> {
1713
constructor() {
1814
super();
1915
this.state = { users: [], loading: true };
2016

17+
// Send GET request for listing all users
2118
fetch('api/users/all')
2219
.then(response => response.json() as Promise<UsersList[]>)
2320
.then(data => {
@@ -42,23 +39,25 @@ export class Users extends React.Component<RouteComponentProps<{}>, UsersExample
4239
return <p>Sorry, no users.</p>;
4340
}
4441

45-
return <table className='table'>
46-
<thead>
47-
<tr>
48-
<th>Username</th>
49-
<th>Full name</th>
50-
<th>Email</th>
51-
</tr>
52-
</thead>
53-
<tbody>
54-
{users.map(user =>
55-
<tr key={user.userName}>
56-
<td>{user.userName}</td>
57-
<td>{user.fullName}</td>
58-
<td>{user.email}</td>
42+
return (
43+
<Table striped bordered condensed hover responsive>
44+
<thead>
45+
<tr>
46+
<th>Username</th>
47+
<th>Full name</th>
48+
<th>Email</th>
5949
</tr>
60-
)}
61-
</tbody>
62-
</table>;
50+
</thead>
51+
<tbody>
52+
{users.map(user =>
53+
<tr key={user.userName}>
54+
<td>{user.userName}</td>
55+
<td>{user.fullName}</td>
56+
<td>{user.email}</td>
57+
</tr>
58+
)}
59+
</tbody>
60+
</Table>
61+
);
6362
}
6463
}

‎ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/css/components/nav-menu.css

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/css/components/register.css

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/css/main.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
@import 'components/nav-menu.css';
2-
@import 'components/register.css';
1+
/*Import our styles and reference it to the boot.tsx for cleaner code*/
2+
@import 'site.css';
33
@import 'error.css';

‎ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/css/site.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
body {
2+
margin-top: 70px;
23
/*remove horizontal scrolling*/
34
overflow-x: hidden;
45
}

‎ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/empty.tsx

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)