Skip to content
This repository was archived by the owner on Aug 18, 2023. It is now read-only.

Commit 896f711

Browse files
vincentshuryvincentshury
committed
updated app to have admin dashboard that places components based on buttons , removed page for creation in place of component
1 parent 26c636d commit 896f711

File tree

5 files changed

+59
-72
lines changed

5 files changed

+59
-72
lines changed

‎.eslintrc.json‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎client/public/index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,17 @@
55
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
8+
<!-- Bootstrap CSS 4.3.1 CDN -->
89
<link
910
rel="stylesheet"
1011
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
1112
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
1213
crossorigin="anonymous"
1314
/>
15+
<!-- Bootstrap 4.3.1-JS CDNS -->
16+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
17+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
18+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
1419
<!--
1520
manifest.json provides metadata used when your web app is installed on a
1621
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

‎client/src/App.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,24 @@
11
import React from 'react';
22
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
3-
import PropTypes from 'prop-types';
43
import Container from 'react-bootstrap/Container';
54
import API from './utils/API';
65
import Dashboard from './pages/Dashboard';
76
import ManagerDashboard from './pages/ManagerDashboard';
87
import AdminDashboard from './pages/AdminDashboard';
98
import Login from './pages/Login';
109
import About from './pages/About';
11-
import AdminCreateUser from './pages/AdminCreateUser';
1210
import NoMatch from './pages/NoMatch';
1311
import TopNavbar from './components/TopNavbar'; //WrappedWithRouter
1412
import UserContext from './UserContext';
15-
// import {PrivateAccessRoute} from './components/PrivateAccessRoute';
1613
/* eslint-disable no-console */
14+
// import PrivateAccessRoute from './components/PrivateAccessRoute';
15+
import PropTypes from 'prop-types';
1716
const PrivateAccessRoute = ({ component: Component, aId, ...rest }) => (
1817
<UserContext.Consumer>
1918
{({ user }) => (
2019
<Route
2120
{...rest}
22-
render={props =>
21+
render={(props =>
2322
user.access_id >= aId ? (
2423
<Component {...props} />
2524
) : (
@@ -30,7 +29,7 @@ const PrivateAccessRoute = ({ component: Component, aId, ...rest }) => (
3029
}}
3130
/>
3231
)
33-
}
32+
)}
3433
/>
3534
)}
3635
</UserContext.Consumer>
@@ -102,7 +101,6 @@ class App extends React.Component {
102101
<PrivateAccessRoute strict exact path="/about" aId={1} component={About} />
103102
<PrivateAccessRoute strict exact path="/manager" aId={2} component={ManagerDashboard} />
104103
<PrivateAccessRoute strict exact path="/admin" aId={3} component={AdminDashboard} />
105-
<PrivateAccessRoute strict exact path="/admin/user/new" aId={3} component={AdminCreateUser} />
106104
<Route component={NoMatch} />
107105
</Switch>
108106
</Container>

‎client/src/pages/AdminCreateUser.js‎ renamed to ‎client/src/components/CreateUser.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ class AdminCreateUser extends React.Component {
1414
event.preventDefault();
1515
if (this.isValidInput()) {
1616
console.log(this.state);
17-
console.log("Make api request next here. Redirecting user after submission to admin dashboard")
18-
return this.props.history.push('/admin');
17+
console.log("Make api request next here. Then hiding the component removes state & clears form")
18+
this.props.toggleComponent();
1919
}
2020
};
2121
this.isValidInput = () => {
@@ -36,10 +36,9 @@ class AdminCreateUser extends React.Component {
3636
return(
3737
<div>
3838
<Row className="justify-content-center">
39-
<Col xs="10">
40-
<h1 className="text-center display-1 text-capitalize">Admin Create User Form.</h1>
41-
<p className="text-center">You should be a logged in Admin in order to view this page so that you can create a new user with access level of employee or manager.</p>
42-
<Form disabled={!this.isValidInput()} onSubmit={e => this.handleSubmit(e)} className="text-center border p-3">
39+
<Col xs="12" md="11" lg="10" className="border">
40+
<h1 className="text-center text-capitalize">Create User Form.</h1>
41+
<Form disabled={!this.isValidInput()} onSubmit={e => this.handleSubmit(e)} className="text-center p-3">
4342
<Form.Row className="justify-content-center">
4443
<Form.Group controlId="newUsername">
4544
<Form.Label>New User's Username</Form.Label>
@@ -58,14 +57,13 @@ class AdminCreateUser extends React.Component {
5857
<Form.Control size="lg" onChange={this.handleInputChange} type="number" min="1" max="3" name="access_id" placeholder="1" />
5958
</Form.Group>
6059
</Form.Row>
61-
<Button disabled={!this.isValidInput()} className="w-75 mx-auto mb-2" type="submit" size="block" variant="success">
60+
<Button disabled={!this.isValidInput()} className="w-50 mx-auto mb-2" type="submit" size="block" variant="success">
6261
Create New Account
6362
</Button>
6463
</Form>
6564
</Col>
6665
</Row>
6766
</div>
68-
6967
);
7068
}
7169
}

‎client/src/pages/AdminDashboard.js‎

Lines changed: 44 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,53 @@
11
import React from 'react';
2-
import { NavLink } from 'react-router-dom';
3-
import RenderIfAId from '../components/RenderIfAId';
42
import UserContext from '../UserContext';
3+
import CreateUser from '../components/CreateUser';
4+
import Button from 'react-bootstrap/Button';
5+
import ButtonGroup from 'react-bootstrap/ButtonGroup';
6+
import Row from 'react-bootstrap/Row';
7+
import Col from 'react-bootstrap/Col';
58

69
class AdminDashboard extends React.Component {
10+
state = {
11+
createNewUser: false,
12+
viewUsers: false
13+
}
14+
toggleCreateUser = () => {
15+
this.setState(state =>({
16+
createNewUser: state.createNewUser === true ? false : true }
17+
));
18+
}
19+
toggleViewUsers = () => {
20+
this.setState(state =>({
21+
viewUsers: state.viewUsers === true ? false : true }
22+
));
23+
}
724
render() {
8-
return(
25+
let {createNewUser, viewUsers} = this.state;
26+
return (
927
<UserContext.Consumer>
10-
{ ({user}) => (
11-
<div className="text-center">
12-
<h1 className="display-4 text-white">Welcome Administrator</h1>
13-
<h2>{user.username} User-ID: {user.user_id}</h2>
14-
<h1 className="text-white">Access Type:</h1>
15-
<h2>{user.type}</h2>
16-
<h1 className="text-white">Access Level:</h1>
17-
<h2>{user.access_id}</h2>
18-
<p>Dashboard that requires User to be logged in And Have ADMIN access / access_id = 3</p>
19-
<RenderIfAId aId={3} >
20-
<NavLink exact to="/admin/user/new" className="nav-link">
21-
Create New User
22-
</NavLink>
23-
</RenderIfAId>
24-
</div>
28+
{ ({ user}) => (
29+
<Row className="text-center">
30+
<Col xs="12">
31+
<h1 className="display-4 text-white">Welcome Administrator</h1>
32+
<h2>{ user.username} User-ID: { user.user_id}</h2>
33+
<h1 className="text-white">Access Type:</h1>
34+
<h2>{ user.type}</h2>
35+
<h1 className="text-white">Access Level:</h1>
36+
<h2>{ user.access_id}
37+
</h2>
38+
<p>Dashboard that requires User to be logged in And Have ADMIN access / access_id = 3</p>
39+
<ButtonGroup size="lg" className="mb-3" >
40+
<Button variant="primary" type="button" onClick={this.toggleCreateUser}>
41+
{ createNewUser ? "Cancel" : "Create New User"}
42+
</Button>
43+
<Button variant="success" type="button" onClick={this.toggleViewUsers}>
44+
{ viewUsers ? "Cancel" : "View All Users"}
45+
</Button>
46+
</ButtonGroup>
47+
{/* Currently buttons and form not functional, Buttons will not work with current setup testing front end connection to server. */}
48+
{ createNewUser ? <CreateUser toggleComponent={this.toggleCreateUser} /> : null}
49+
</Col>
50+
</Row>
2551
)
2652
}
2753
</UserContext.Consumer>

0 commit comments

Comments
 (0)