Skip to content

Commit 2291ecc

Browse files
NicholasKyleHoffmanNicholasKyleHoffman
committed
Added Bootstrap Button Styles
Ref: https://www.w3schools.com/bootstrap/bootstrap_buttons.asp
1 parent 0174b8d commit 2291ecc

File tree

6 files changed

+176
-145
lines changed

6 files changed

+176
-145
lines changed

‎package.json

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
{
2-
"name": "react-hooks-crud",
2+
"name": "react-crud-hooks-users-table",
33
"version": "0.1.0",
44
"private": true,
55
"homepage": "https://nicholaskylehoffman.github.io/react-hooks-crud/",
66
"dependencies": {
7+
"bootstrap": "4.6.0",
78
"react": "^16.7",
9+
"react-bootstrap": "1.4.3",
810
"react-dom": "^16.7",
9-
"react-scripts": "2.1.5"
11+
"react-scripts": "2.1.5",
12+
"yarn": "1.22.10"
1013
},
1114
"scripts": {
1215
"start": "react-scripts start",
@@ -27,5 +30,7 @@
2730
],
2831
"devDependencies": {
2932
"gh-pages": "^2.0.1"
30-
}
31-
}
33+
},
34+
"keywords": [],
35+
"description": ""
36+
}

‎src/App.js

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,53 @@
1-
import React, { useState, Fragment } from 'react';
2-
import UserTable from './tables/UserTable';
3-
import AddUserForm from './forms/AddUserForm';
4-
import EditUserForm from './forms/EditUsersForm';
1+
import React, { useState, Fragment } from "react";
2+
import UserTable from "./tables/UserTable";
3+
import AddUserForm from "./forms/AddUserForm";
4+
import EditUserForm from "./forms/EditUsersForm";
5+
import Button from "react-bootstrap/Button";
56

67
const App = () => {
78
const usersData = [
8-
{ id:1, name:'Nick', username:'ebb_n_flow' },
9-
{ id:2, name:'Shane O.', username:'too-tired' },
10-
{ id:3, name:'Shawna', username:'rootsrevival' },
11-
{ id:4, name:'Sheena, W.P.', username:'sheenaWp312' }
12-
]
9+
{ id: 1, name: "Nick", username: "ebb_n_flow" },
10+
{ id: 2, name: "Shane O.", username: "too-tired" },
11+
{ id: 3, name: "Shawna", username: "rootsrevival" },
12+
{ id: 4, name: "Sheena, W.P.", username: "sheenaWp312" }
13+
];
1314

15+
const initialFormState = { id: null, name: "", username: "" };
1416

15-
const initialFormState = {id:null, name:'', username:'' }
17+
// set state Hooks syntax - you define the two params in [x, y].
18+
// useState comes from React import for handling state
1619

17-
// set state Hooks syntax - you define the two params in [x, y].
18-
// useState comes from React import for handling state
20+
const [users, setUsers] = useState(usersData);
21+
const [editing, setEditing] = useState(false);
22+
const [currentUser, setCurrentUser] = useState(initialFormState);
1923

20-
const [users, setUsers] = useState(usersData)
21-
const [editing, setEditing] = useState(false)
22-
const [ currentUser, setCurrentUser ] = useState(initialFormState)
23-
24-
// increment the ID of the new user manually - function will
25-
// take a user object as a parameter, add them to the users array of objects
26-
// the ...users code ensures that all the previous users remain in the array
24+
// increment the ID of the new user manually - function will
25+
// take a user object as a parameter, add them to the users array of objects
26+
// the ...users code ensures that all the previous users remain in the array
2727

2828
const addUser = (user) => {
29-
user.id = user.length + 1
30-
setUsers([ ...users, user ])
31-
}
29+
user.id = user.length + 1;
30+
setUsers([...users, user]);
31+
};
3232

3333
// pass deleteUser through props to UserTable
34-
// use setter to take ID of user & filter them out of the users array
34+
// use setter to take ID of user & filter them out of the users array
3535
const deleteUser = (id) => {
36-
setEditing(false)
36+
setEditing(false);
37+
38+
setUsers(users.filter((user) => user.id !== id));
39+
};
3740

38-
setUsers(users.filter(user => user.id !== id))
39-
}
40-
4141
const editRow = (user) => {
42-
setEditing(true)
43-
setCurrentUser({ id:user.id, name:user.name, username:user.username})
44-
}
42+
setEditing(true);
43+
setCurrentUser({ id: user.id, name: user.name, username: user.username });
44+
};
4545

4646
const updateUser = (id, updatedUser) => {
47-
setEditing(false)
47+
setEditing(false);
4848

49-
setUsers(users.map(user=> (user.id === id ? updatedUser : user)))
50-
}
49+
setUsers(users.map((user) => (user.id === id ? updatedUser : user)));
50+
};
5151

5252
return (
5353
<div className="container">
@@ -77,7 +77,7 @@ const App = () => {
7777
</div>
7878
</div>
7979
</div>
80-
)
81-
}
80+
);
81+
};
8282

83-
export default App;
83+
export default App;

‎src/forms/AddUserForm.js

Lines changed: 41 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,46 @@
1-
import React, { useState } from 'react';
1+
import React, { useState } from "react";
22

33
const AddUserForm = (props) => {
4-
const initialFormState = { id: null, name: '', username: '' }
5-
const [ user, setUser ] = useState(initialFormState)
4+
const initialFormState = { id: null, name: "", username: "" };
5+
const [user, setUser] = useState(initialFormState);
66

7-
// update state based on event in input
8-
const handleInputChange = (event) => {
9-
const { name, value } = event.target
10-
setUser({ ...user, [name]: value })
11-
}
7+
// update state based on event in input
8+
const handleInputChange = (event) => {
9+
const { name, value } = event.target;
10+
setUser({ ...user, [name]: value });
11+
};
1212

13-
return (
14-
<form
15-
onSubmit = {
16-
(event) => {
17-
// default event for form is submit (preventing with a check)
18-
event.preventDefault()
19-
if (!user.name || !user.username) {
20-
alert("Enter both name and username")
21-
return;
22-
} else {
23-
props.addUser(user)
24-
setUser(initialFormState)
25-
}
26-
}
27-
}
28-
>
29-
<label>Name</label>
30-
<input type="text" name="name" value={user.name} onChange={handleInputChange} />
31-
<label>Username</label>
32-
<input type="text" name="username" value={user.username} onChange={handleInputChange} />
33-
<button>Add New User</button>
34-
</form>
35-
)
36-
}
13+
return (
14+
<form
15+
onSubmit={(event) => {
16+
// default event for form is submit (preventing with a check)
17+
event.preventDefault();
18+
if (!user.name || !user.username) {
19+
alert("Enter both name and username");
20+
return;
21+
} else {
22+
props.addUser(user);
23+
setUser(initialFormState);
24+
}
25+
}}
26+
>
27+
<label>Name</label>
28+
<input
29+
type="text"
30+
name="name"
31+
value={user.name}
32+
onChange={handleInputChange}
33+
/>
34+
<label>Username</label>
35+
<input
36+
type="text"
37+
name="username"
38+
value={user.username}
39+
onChange={handleInputChange}
40+
/>
41+
<button className="btn btn-success">Add New User</button>
42+
</form>
43+
);
44+
};
3745

38-
export default AddUserForm;
46+
export default AddUserForm;

‎src/forms/EditUsersForm.js

Lines changed: 42 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,49 @@
1-
import React, { useState, useEffect } from 'react'
1+
import React, { useState, useEffect } from "react";
22

3-
const EditUserForm = props => {
4-
const [ user, setUser ] = useState(props.currentUser)
3+
const EditUserForm = (props) => {
4+
const [user, setUser] = useState(props.currentUser);
55

6-
const handleInputChange = event => {
7-
const { name, value } = event.target
6+
const handleInputChange = (event) => {
7+
const { name, value } = event.target;
88

9-
setUser({ ...user, [name]: value })
10-
}
9+
setUser({ ...user, [name]: value });
10+
};
1111

12-
useEffect(
13-
() => {
14-
setUser(props.currentUser)
15-
},
16-
[props]
17-
)
12+
useEffect(() => {
13+
setUser(props.currentUser);
14+
}, [props]);
1815

19-
return (
20-
<form
21-
onSubmit={event => {
22-
event.preventDefault()
16+
return (
17+
<form
18+
onSubmit={(event) => {
19+
event.preventDefault();
2320

24-
props.updateUser(user.id, user)
25-
}}
26-
>
27-
<label>Name</label>
28-
<input type="text" name="name" value={user.name} onChange={handleInputChange} />
29-
<label>Username</label>
30-
<input type="text" name="username" value={user.username} onChange={handleInputChange} />
31-
<button>Update user</button>
32-
<button onClick={() => props.setEditing(false)} className="button muted-button">
33-
Cancel
34-
</button>
35-
</form>
36-
)
37-
}
21+
props.updateUser(user.id, user);
22+
}}
23+
>
24+
<label>Name</label>
25+
<input
26+
type="text"
27+
name="name"
28+
value={user.name}
29+
onChange={handleInputChange}
30+
/>
31+
<label>Username</label>
32+
<input
33+
type="text"
34+
name="username"
35+
value={user.username}
36+
onChange={handleInputChange}
37+
/>
38+
<button className="btn btn-success">Update User</button>
39+
<button
40+
onClick={() => props.setEditing(false)}
41+
className="btn btn-warning"
42+
>
43+
Cancel
44+
</button>
45+
</form>
46+
);
47+
};
3848

39-
export default EditUserForm;
49+
export default EditUserForm;

‎src/index.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import './index.css';
4-
import App from './App';
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import "./index.css";
4+
import App from "./App";
5+
import "bootstrap/dist/css/bootstrap.css";
6+
import Button from "react-bootstrap/Button";
57

6-
ReactDOM.render(<App />, document.getElementById('root'));
8+
ReactDOM.render(<App />, document.getElementById("root"));

‎src/tables/UserTable.js

Lines changed: 41 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,45 @@
11
import React from "react";
22

33
const UserTable = (props) => (
4-
<table>
5-
<thead>
6-
<tr>
7-
<th>Name</th>
8-
<th>Username</th>
9-
<th>Actions</th>
10-
</tr>
11-
</thead>
12-
<tbody>
13-
{props.users.length > 0 ? (
14-
props.users.map(user => (
15-
<tr key={user.id}>
16-
<td>{user.name}</td>
17-
<td>{user.username}</td>
18-
<td>
19-
<button
20-
onClick = {() => {
21-
props.editRow(user)
22-
}}
23-
className="button muted-button"
24-
>Edit
25-
</button>
26-
<button onClick={() => props.deleteUser(user.id)} className="button muted-button">Delete</button>
27-
</td>
28-
</tr>
29-
))
30-
) : (
31-
<tr>
32-
<td colSpan={3}>No users</td>
33-
</tr>
34-
)}
35-
</tbody>
36-
</table>
37-
)
4+
<table>
5+
<thead>
6+
<tr>
7+
<th>Name</th>
8+
<th>Username</th>
9+
<th>Actions</th>
10+
</tr>
11+
</thead>
12+
<tbody>
13+
{props.users.length > 0 ? (
14+
props.users.map((user) => (
15+
<tr key={user.id}>
16+
<td>{user.name}</td>
17+
<td>{user.username}</td>
18+
<td>
19+
<button
20+
onClick={() => {
21+
props.editRow(user);
22+
}}
23+
className="btn btn-warning"
24+
>
25+
Edit
26+
</button>
27+
<button
28+
onClick={() => props.deleteUser(user.id)}
29+
className="btn btn-danger"
30+
>
31+
Delete
32+
</button>
33+
</td>
34+
</tr>
35+
))
36+
) : (
37+
<tr>
38+
<td colSpan={3}>No Users....</td>
39+
</tr>
40+
)}
41+
</tbody>
42+
</table>
43+
);
3844

39-
export default UserTable
45+
export default UserTable;

0 commit comments

Comments
 (0)