Skip to content

Commit 7ff2ec5

Browse files
committed
kinda works 🤗
1 parent 062280b commit 7ff2ec5

File tree

10 files changed

+1377
-1272
lines changed

10 files changed

+1377
-1272
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +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\components\Footer.tsx" />
3637
<None Remove="ClientApp\components\users\Logout.tsx" />
3738
<None Remove="ClientApp\css\home.css" />
3839
<None Remove="ClientApp\css\loading.css" />
@@ -47,6 +48,7 @@
4748
<TypeScriptCompile Include="ClientApp\components\About.tsx" />
4849
<TypeScriptCompile Include="ClientApp\components\Error.tsx" />
4950
<TypeScriptCompile Include="ClientApp\components\Example.tsx" />
51+
<TypeScriptCompile Include="ClientApp\components\Footer.tsx" />
5052
<TypeScriptCompile Include="ClientApp\components\users\Login.tsx" />
5153
<TypeScriptCompile Include="ClientApp\components\users\Logout.tsx" />
5254
<TypeScriptCompile Include="ClientApp\components\users\Register.tsx" />
Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import * as React from 'react';
2+
import { Grid, Row } from 'react-bootstrap';
23

34
export class About extends React.Component<any, any> {
45
public render() {
56
return (
6-
<div className="about">
7-
<h3>This is our about page.</h3>
8-
<p>Ellipsis loading icon by loading.io</p>
9-
<p>Baby cow image by neko-kuma.deviantart.com</p>
10-
</div>
7+
<Grid className="about">
8+
<Row className="text-center">
9+
<h3>This is our about page.</h3>
10+
<p>Ellipsis loading icon by loading.io</p>
11+
<p>Baby cow image by neko-kuma.deviantart.com</p>
12+
</Row>
13+
</Grid>
1114
);
1215
}
1316
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from 'react';
22
import { NavMenu } from './NavMenu';
3+
import { Footer } from './Footer';
34

45
export interface LayoutProps {
56
children?: React.ReactNode;
@@ -11,6 +12,7 @@ export class Layout extends React.Component<LayoutProps, {}> {
1112
<div>
1213
<NavMenu />
1314
{this.props.children}
15+
<Footer />
1416
</div>
1517
);
1618
};

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

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,49 @@
11
import * as React from 'react';
22
import { Link, NavLink } from 'react-router-dom';
33
import { Navbar, NavItem, Nav } from 'react-bootstrap';
4-
import { isLoggedIn, getUser, removeAccessToken } from '../utils/helpers';
4+
import { isLoggedIn, getUser } from '../utils/helpers';
5+
import { logout } from './users/Logout';
56

67
export class NavMenu extends React.Component<{}, {}> {
78
constructor() {
89
super();
9-
10-
this.logout = this.logout.bind(this);
11-
}
12-
13-
logout() {
14-
removeAccessToken();
15-
window.location.hash = '/';
1610
}
1711

1812
render() {
19-
let content = isLoggedIn()
13+
let auth = isLoggedIn()
2014
?
2115
<Nav pullRight>
2216
{/*TODO: getUser can go to user profile page :)*/}
2317
<NavItem eventKey={1}>{`${getUser()}`}</NavItem>
24-
<NavItem eventKey={2} onClick={this.logout}>Logout</NavItem>
18+
<NavItem eventKey={2} onClick={logout}>Logout</NavItem>
2519
</Nav>
2620
: <Nav pullRight>
2721
<NavItem eventKey={1} href="/login">Login</NavItem>
2822
<NavItem eventKey={2} href="/register">Register</NavItem>
2923
</Nav>
24+
let example = isLoggedIn()
25+
?
26+
<Nav>
27+
<NavItem eventKey={1} href="/users">Users</NavItem>
28+
<NavItem eventKey={2} href="/example">Example</NavItem>
29+
<NavItem eventKey={3} href="/about">About</NavItem>
30+
</Nav>
31+
: <Nav>
32+
<NavItem eventKey={1} href="/users">Users</NavItem>
33+
<NavItem eventKey={2} href="/about">About</NavItem>
34+
</Nav>
35+
3036
return (
3137
<Navbar inverse collapseOnSelect fixedTop>
3238
<Navbar.Header>
3339
<Navbar.Brand>
34-
<a href="/">ASP.NET Core with ReactJS</a>
40+
<a href="/">ASP.NET Core ReactJS</a>
3541
</Navbar.Brand>
3642
<Navbar.Toggle />
3743
</Navbar.Header>
3844
<Navbar.Collapse>
39-
<Nav>
40-
<NavItem eventKey={1} href="/users">Users</NavItem>
41-
<NavItem eventKey={2} href="/about">About</NavItem>
42-
</Nav>
43-
{ content }
45+
{ example }
46+
{ auth }
4447
</Navbar.Collapse>
4548
</Navbar>
4649
);

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22
@import 'site.css';
33
@import 'error.css';
44
@import 'loading.css';
5-
@import 'home.css';
5+
@import 'home.css';
6+
@import 'about.css';

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,4 +68,17 @@ body {
6868
overflow: hidden;
6969
text-overflow: ellipsis;
7070
}
71+
}
72+
73+
/*footer stays bottom*/
74+
footer {
75+
position: absolute;
76+
left: 0;
77+
bottom: 0;
78+
right: 0;
79+
text-align: center;
80+
}
81+
82+
#react-app {
83+
padding-bottom: 60px;
7184
}

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/Controllers/HomeController.cs

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
namespace ASPNETCoreReactJS_Example.Controllers
22
{
3+
using Microsoft.AspNetCore.Authentication.JwtBearer;
34
using Microsoft.AspNetCore.Authorization;
45
using Microsoft.AspNetCore.Mvc;
56

@@ -11,7 +12,7 @@ public IActionResult Index()
1112
}
1213

1314
// Test action for authorized users only
14-
[Authorize]
15+
[Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)]
1516
public IActionResult Example()
1617
{
1718
return this.Ok();

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/Extensions/ApplicationBuilderExtensions.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
using Microsoft.EntityFrameworkCore;
66
using Microsoft.Extensions.DependencyInjection;
77

8-
// Make Database Migation cleaner with this ApplicationBuilder's extension
8+
// Make Database Migation cleaner ApplicationBuilder's extension
99
public static class ApplicationBuilderExtensions
1010
{
1111
public static IApplicationBuilder UseDatabaseMigration(this IApplicationBuilder app)

0 commit comments

Comments
 (0)