Skip to content

Commit 7c5dc20

Browse files
author
NicholasKyleHoffman
committed
added delete functionality & add user form
1 parent c2301ed commit 7c5dc20

File tree

6 files changed

+185
-39
lines changed

6 files changed

+185
-39
lines changed

‎package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
},
1111
"scripts": {
1212
"start": "react-scripts start",
13+
"predeploy": "yarn build",
14+
"deploy": "gh-pages -d build",
1315
"build": "react-scripts build",
1416
"test": "react-scripts test",
1517
"eject": "react-scripts eject"
@@ -22,5 +24,8 @@
2224
"not dead",
2325
"not ie <= 11",
2426
"not op_mini all"
25-
]
27+
],
28+
"devDependencies": {
29+
"gh-pages": "^2.0.1"
30+
}
2631
}

‎src/App.js‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState } from 'react';
22
import UserTable from './tables/UserTable';
3-
// import AddUserTable from './tables/AddUserTable';
3+
import AddUserForm from './forms/AddUserForm';
44

55
// simple functional component returns app skeleton
66
const App = () => {
@@ -12,16 +12,39 @@ const App = () => {
1212

1313
const [users, setUsers] = useState(usersData)
1414

15+
16+
// https://www.taniarascia.com/crud-app-in-react-with-hooks/
17+
// Since we’re not using a real API and database, which would
18+
// probably have an auto-incrementing ID, I’m going to
19+
// increment the ID of the new user manually. This function will
20+
// take a user object as a parameter, and add them to the users array
21+
// of objects. The ...users code ensures that all the previous users
22+
// remain in the array.
23+
24+
25+
// Passed through
26+
const addUser = (user) => {
27+
user.id = user.length + 1
28+
setUsers([ ...users, user ])
29+
}
30+
31+
// pass deleteUser through props to UserTable
32+
const deleteUser = (id) => {
33+
setUsers(users.filter(user => user.id !== id))
34+
}
35+
36+
1537
return (
1638
<div className="container">
1739
<h1>CRUD App with Hooks</h1>
1840
<div className="flex-row">
1941
<div className="flex-large">
2042
<h2>Add User</h2>
43+
<AddUserForm addUser={addUser} />
2144
</div>
2245
<div className="flex-large">
2346
<h2>View Users</h2>
24-
<UserTable users={users}/>
47+
<UserTable users={users} deleteUser={deleteUser} />
2548
</div>
2649
</div>
2750
</div>

‎src/forms/AddUserForm.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React, { useState } from 'react'
2+
3+
const AddUserForm = props => {
4+
const initialFormState = { id: null, name: '', username: '' }
5+
const [ user, setUser ] = useState(initialFormState)
6+
7+
const handleInputChange = event => {
8+
const { name, value } = event.target
9+
console.log(event)
10+
setUser({ ...user, [name]: value })
11+
}
12+
13+
return (
14+
<form
15+
onSubmit={event => {
16+
event.preventDefault()
17+
if (!user.name || !user.username) return
18+
19+
props.addUser(user)
20+
setUser(initialFormState)
21+
}}
22+
>
23+
<label>Name</label>
24+
<input type="text" name="name" value={user.name} onChange={handleInputChange} />
25+
<label>Username</label>
26+
<input type="text" name="username" value={user.username} onChange={handleInputChange} />
27+
<button>Add new user</button>
28+
</form>
29+
)
30+
}
31+
32+
export default AddUserForm

‎src/tables/AddUserTable‎

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

‎src/tables/UserTable.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,22 @@ const UserTable = (props) => (
1212
<tbody>
1313
{props.users.length > 0 ? (
1414
props.users.map(user => (
15-
<tr key={user.id}>
16-
<td>{user.name}</td>
17-
<td>{user.username}</td>
18-
<td>
19-
<button className="button muted-button">Edit</button>
20-
<button className="button muted-button">Delete</button>
21-
</td>
22-
</tr>
15+
<tr key={user.id}>
16+
<td>{user.name}</td>
17+
<td>{user.username}</td>
18+
<td>
19+
<button className="button muted-button">Edit</button>
20+
<button onClick={() => props.deleteUser(user.id)} className="button muted-button">Delete</button>
21+
</td>
22+
</tr>
2323
))
2424
) : (
25-
<tr>
25+
<tr>
2626
<td colSpan={3}>No users</td>
2727
</tr>
2828
)}
2929
</tbody>
3030
</table>
3131
)
3232

33-
export default UserTable;
33+
export default UserTable

‎yarn.lock‎

Lines changed: 112 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1393,6 +1393,13 @@ async@^2.1.4, async@^2.5.0:
13931393
dependencies:
13941394
lodash "^4.17.10"
13951395

1396+
async@^2.6.1:
1397+
version "2.6.2"
1398+
resolved "https://registry.yarnpkg.com/async/-/async-2.6.2.tgz#18330ea7e6e313887f5d2f2a904bac6fe4dd5381"
1399+
integrity sha512-H1qVYh1MYhEEFLsP97cVKqCGo7KfCyTt6uEWqsTBr9SO84oK9Uwbyd/yCW+6rKJLHksBNUVWZDAjfS+Ccx0Bbg==
1400+
dependencies:
1401+
lodash "^4.17.11"
1402+
13961403
asynckit@^0.4.0:
13971404
version "0.4.0"
13981405
resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -2303,7 +2310,7 @@ commander@2.17.x, commander@~2.17.1:
23032310
resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
23042311
integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
23052312

2306-
commander@^2.11.0:
2313+
commander@^2.11.0, commander@^2.18.0:
23072314
version "2.19.0"
23082315
resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
23092316
integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
@@ -3144,6 +3151,11 @@ elliptic@^6.0.0:
31443151
minimalistic-assert "^1.0.0"
31453152
minimalistic-crypto-utils "^1.0.0"
31463153

3154+
email-addresses@^3.0.1:
3155+
version "3.0.3"
3156+
resolved "https://registry.yarnpkg.com/email-addresses/-/email-addresses-3.0.3.tgz#fc3c6952f68da24239914e982c8a7783bc2ed96d"
3157+
integrity sha512-kUlSC06PVvvjlMRpNIl3kR1NRXLEe86VQ7N0bQeaCZb2g+InShCeHQp/JvyYNTugMnRN2NvJhHlc3q12MWbbpg==
3158+
31473159
emoji-regex@^6.5.1:
31483160
version "6.5.1"
31493161
resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.5.1.tgz#9baea929b155565c11ea41c6626eaa65cef992c2"
@@ -3740,6 +3752,28 @@ filename-regex@^2.0.0:
37403752
resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
37413753
integrity sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=
37423754

3755+
filename-reserved-regex@^1.0.0:
3756+
version "1.0.0"
3757+
resolved "https://registry.yarnpkg.com/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz#e61cf805f0de1c984567d0386dc5df50ee5af7e4"
3758+
integrity sha1-5hz4BfDeHJhFZ9A4bcXfUO5a9+Q=
3759+
3760+
filenamify-url@^1.0.0:
3761+
version "1.0.0"
3762+
resolved "https://registry.yarnpkg.com/filenamify-url/-/filenamify-url-1.0.0.tgz#b32bd81319ef5863b73078bed50f46a4f7975f50"
3763+
integrity sha1-syvYExnvWGO3MHi+1Q9GpPeXX1A=
3764+
dependencies:
3765+
filenamify "^1.0.0"
3766+
humanize-url "^1.0.0"
3767+
3768+
filenamify@^1.0.0:
3769+
version "1.2.1"
3770+
resolved "https://registry.yarnpkg.com/filenamify/-/filenamify-1.2.1.tgz#a9f2ffd11c503bed300015029272378f1f1365a5"
3771+
integrity sha1-qfL/0RxQO+0wABUCknI3jx8TZaU=
3772+
dependencies:
3773+
filename-reserved-regex "^1.0.0"
3774+
strip-outer "^1.0.0"
3775+
trim-repeated "^1.0.0"
3776+
37433777
fileset@^2.0.2:
37443778
version "2.0.3"
37453779
resolved "https://registry.yarnpkg.com/fileset/-/fileset-2.0.3.tgz#8e7548a96d3cc2327ee5e674168723a333bba2a0"
@@ -4048,6 +4082,20 @@ getpass@^0.1.1:
40484082
dependencies:
40494083
assert-plus "^1.0.0"
40504084

4085+
gh-pages@^2.0.1:
4086+
version "2.0.1"
4087+
resolved "https://registry.yarnpkg.com/gh-pages/-/gh-pages-2.0.1.tgz#aefe47a43b8d9d2aa3130576b33fe95641e29a2f"
4088+
integrity sha512-uFlk3bukljeiWKQ2XvPfjcSi/ou7IfoDf2p+Fj672saLAr8bnOdFVqI/JSgrSgInKpCg5BksxEwGUl++dbg8Dg==
4089+
dependencies:
4090+
async "^2.6.1"
4091+
commander "^2.18.0"
4092+
email-addresses "^3.0.1"
4093+
filenamify-url "^1.0.0"
4094+
fs-extra "^7.0.0"
4095+
globby "^6.1.0"
4096+
graceful-fs "^4.1.11"
4097+
rimraf "^2.6.2"
4098+
40514099
glob-base@^0.3.0:
40524100
version "0.3.0"
40534101
resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -4465,6 +4513,14 @@ https-browserify@^1.0.0:
44654513
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
44664514
integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
44674515

4516+
humanize-url@^1.0.0:
4517+
version "1.0.1"
4518+
resolved "https://registry.yarnpkg.com/humanize-url/-/humanize-url-1.0.1.tgz#f4ab99e0d288174ca4e1e50407c55fbae464efff"
4519+
integrity sha1-9KuZ4NKIF0yk4eUEB8VfuuRk7/8=
4520+
dependencies:
4521+
normalize-url "^1.0.0"
4522+
strip-url-auth "^1.0.0"
4523+
44684524
iconv-lite@0.4.23:
44694525
version "0.4.23"
44704526
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
@@ -4931,7 +4987,7 @@ is-path-inside@^1.0.0:
49314987
dependencies:
49324988
path-is-inside "^1.0.1"
49334989

4934-
is-plain-obj@^1.1.0:
4990+
is-plain-obj@^1.0.0, is-plain-obj@^1.1.0:
49354991
version "1.1.0"
49364992
resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
49374993
integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
@@ -6359,6 +6415,16 @@ normalize-range@^0.1.2:
63596415
resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
63606416
integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
63616417

6418+
normalize-url@^1.0.0:
6419+
version "1.9.1"
6420+
resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
6421+
integrity sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=
6422+
dependencies:
6423+
object-assign "^4.0.1"
6424+
prepend-http "^1.0.0"
6425+
query-string "^4.1.0"
6426+
sort-keys "^1.0.0"
6427+
63626428
normalize-url@^3.0.0:
63636429
version "3.3.0"
63646430
resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
@@ -7562,6 +7628,11 @@ prelude-ls@~1.1.2:
75627628
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
75637629
integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
75647630

7631+
prepend-http@^1.0.0:
7632+
version "1.0.4"
7633+
resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
7634+
integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
7635+
75657636
preserve@^0.2.0:
75667637
version "0.2.0"
75677638
resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
@@ -7728,6 +7799,14 @@ qs@6.5.2, qs@~6.5.2:
77287799
resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
77297800
integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
77307801

7802+
query-string@^4.1.0:
7803+
version "4.3.4"
7804+
resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
7805+
integrity sha1-u7aTucqRXCMlFbIosaArYJBD2+s=
7806+
dependencies:
7807+
object-assign "^4.1.0"
7808+
strict-uri-encode "^1.0.0"
7809+
77317810
querystring-es3@^0.2.0:
77327811
version "0.2.1"
77337812
resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -8643,6 +8722,13 @@ sockjs@0.3.19:
86438722
faye-websocket "^0.10.0"
86448723
uuid "^3.0.1"
86458724

8725+
sort-keys@^1.0.0:
8726+
version "1.1.2"
8727+
resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
8728+
integrity sha1-RBttTTRnmPG05J6JIK37oOVD+a0=
8729+
dependencies:
8730+
is-plain-obj "^1.0.0"
8731+
86468732
source-list-map@^2.0.0:
86478733
version "2.0.1"
86488734
resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
@@ -8844,6 +8930,11 @@ stream-shift@^1.0.0:
88448930
resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
88458931
integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=
88468932

8933+
strict-uri-encode@^1.0.0:
8934+
version "1.1.0"
8935+
resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
8936+
integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
8937+
88478938
string-length@^2.0.0:
88488939
version "2.0.0"
88498940
resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
@@ -8957,6 +9048,18 @@ strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
89579048
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
89589049
integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
89599050

9051+
strip-outer@^1.0.0:
9052+
version "1.0.1"
9053+
resolved "https://registry.yarnpkg.com/strip-outer/-/strip-outer-1.0.1.tgz#b2fd2abf6604b9d1e6013057195df836b8a9d631"
9054+
integrity sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==
9055+
dependencies:
9056+
escape-string-regexp "^1.0.2"
9057+
9058+
strip-url-auth@^1.0.0:
9059+
version "1.0.1"
9060+
resolved "https://registry.yarnpkg.com/strip-url-auth/-/strip-url-auth-1.0.1.tgz#22b0fa3a41385b33be3f331551bbb837fa0cd7ae"
9061+
integrity sha1-IrD6OkE4WzO+PzMVUbu4N/oM164=
9062+
89609063
style-loader@0.23.1:
89619064
version "0.23.1"
89629065
resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.23.1.tgz#cb9154606f3e771ab6c4ab637026a1049174d925"
@@ -9218,6 +9321,13 @@ tr46@^1.0.1:
92189321
dependencies:
92199322
punycode "^2.1.0"
92209323

9324+
trim-repeated@^1.0.0:
9325+
version "1.0.0"
9326+
resolved "https://registry.yarnpkg.com/trim-repeated/-/trim-repeated-1.0.0.tgz#e3646a2ea4e891312bf7eace6cfb05380bc01c21"
9327+
integrity sha1-42RqLqTokTEr9+rObPsFOAvAHCE=
9328+
dependencies:
9329+
escape-string-regexp "^1.0.2"
9330+
92219331
trim-right@^1.0.1:
92229332
version "1.0.1"
92239333
resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"

0 commit comments

Comments
 (0)