Skip to content

Commit c0a8777

Browse files
svwoodhousesvwoodhouse
committed
Added Refs, Fragments examples
1 parent 66699ca commit c0a8777

File tree

5 files changed

+70
-55
lines changed

5 files changed

+70
-55
lines changed

‎Sections/Section 8/Practice-project-final/add-user-project/public/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@
2828
</head>
2929
<body>
3030
<noscript>You need to enable JavaScript to run this app.</noscript>
31+
<div id="backdrop-root"></div>
32+
<div id="overlay-root"></div>
3133
<div id="root"></div>
3234
<!--
3335
This HTML file is a template.

‎Sections/Section 8/Practice-project-final/add-user-project/src/components/Helpers/WrapperComponent.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
const WrapperComponent = (props) => {
2+
return props.children
3+
}
4+
export default WrapperComponent

‎Sections/Section 8/Practice-project-final/add-user-project/src/components/UI/ErrorModal.js

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
1+
import React from "react"
12
import Button from "./Button"
23
import Card from "./Card"
34
import styles from './ErrorModal.module.css'
5+
import ReactDOM from 'react-dom'
46

5-
const ErrorModal = (props) => {
6-
return (
7-
<div>
8-
<div className={styles.backdrop} onClick={props.onConfirm}/>
9-
<Card className={styles.modal}>
7+
const Backdrop = props => {
8+
return <div className={styles.backdrop} onClick={props.onConfirm}></div>
9+
}
10+
11+
const ModalOverlay = props => {
12+
return <Card className={styles.modal}>
1013
<header className={styles.header}>
1114
<h2>{props.title}</h2>
1215
</header>
@@ -16,8 +19,15 @@ return (
1619
<footer className={styles.actions}>
1720
<Button onClick={props.onConfirm}>Okay</Button>
1821
</footer>
19-
</Card>
20-
</div>
22+
</Card>
23+
}
24+
25+
const ErrorModal = (props) => {
26+
return (
27+
<React.Fragment>
28+
{ReactDOM.createPortal(<Backdrop onConfirm={props.onConfirm}/>, document.getElementById('backdrop-root'))}
29+
{ReactDOM.createPortal(<ModalOverlay title={props.title} message={props.message} onClick={props.onConfirm}/>, document.getElementById('overlay-root'))}
30+
</React.Fragment>
2131
)
2232
}
2333

‎Sections/Section 8/Practice-project-final/add-user-project/src/components/Users/AddUsers.js

Lines changed: 46 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,60 +2,58 @@ import Card from "../UI/Card";
22
import styles from './AddUsers.module.css';
33
import Button from "../UI/Button";
44
import ErrorModal from "../UI/ErrorModal";
5-
import { useState } from "react";
5+
import { useState, useRef } from "react";
6+
import WrapperComponent from "../Helpers/WrapperComponent";
67
const AddUsers = (props) => {
7-
const [enteredUsername, setEnteredUsername] = useState('')
8-
const [enteredAge, setEnteredAge] = useState('')
9-
const [error, setError] = useState();
8+
const nameInputRef = useRef();
9+
const ageInputRef = useRef();
1010

11-
const addUserHandler = (event) => {
12-
event.preventDefault();
13-
if(enteredUsername.trim().length === 0 || enteredAge.trim().length === 0) {
14-
setError({
15-
title:'Invalid input',
16-
message: 'Please enter a valid name and age (non-empty values).'
17-
})
18-
return;
19-
}
20-
if(+enteredAge < 1) {
21-
setError({
22-
title: 'Invalid age',
23-
message: 'Please enter a valid age (> 0).'
24-
})
25-
return
26-
}
27-
props.onAddUser(enteredUsername, enteredAge)
28-
setEnteredAge('')
29-
setEnteredUsername('')
30-
}
11+
const [error, setError] = useState();
3112

13+
const addUserHandler = (event) => {
14+
event.preventDefault();
15+
const eneteredName = nameInputRef.current.value
16+
const enteredUserAge = ageInputRef.current.value
17+
if(eneteredName.trim().length === 0 || enteredUserAge.trim().length === 0) {
18+
setError({
19+
title:'Invalid input',
20+
message: 'Please enter a valid name and age (non-empty values).'
21+
})
22+
return;
23+
}
24+
if(+enteredUserAge < 1) {
25+
setError({
26+
title: 'Invalid age',
27+
message: 'Please enter a valid age (> 0).'
28+
})
29+
return
30+
}
31+
props.onAddUser(eneteredName, enteredUserAge)
32+
33+
// Not recommended to manipulate the DOM but in this case its okay
34+
nameInputRef.current.value = ''
35+
ageInputRef.current.value = ''
36+
}
3237

33-
const usernameChangeHandler = (event) => {
34-
setEnteredUsername(event.target.value)
35-
}
36-
37-
const ageChangeHandler = (event) => {
38-
setEnteredAge(event.target.value)
39-
}
4038

41-
const errorHandler = () => {
42-
setError(null);
43-
}
39+
const errorHandler = () => {
40+
setError(null);
41+
}
4442

45-
return (
46-
<div>
47-
{error && <ErrorModal title={error.title} message={error.message} onConfirm={errorHandler}/>}
48-
<Card className={styles.input}>
49-
<form onSubmit={addUserHandler}>
50-
<label htmlFor="username">Username</label>
51-
<input type="text" id="username" value={enteredUsername} onChange={usernameChangeHandler}/>
52-
<label>Age (Years)</label>
53-
<input id="age" type="number" value={enteredAge} onChange={ageChangeHandler}/>
54-
<Button type="submit">Add Users</Button>
55-
</form>
56-
</Card>
57-
</div>
58-
)
43+
return (
44+
<WrapperComponent>
45+
{error && <ErrorModal title={error.title} message={error.message} onConfirm={errorHandler}/>}
46+
<Card className={styles.input}>
47+
<form onSubmit={addUserHandler}>
48+
<label htmlFor="username">Username</label>
49+
<input type="text" id="username" ref={nameInputRef}/>
50+
<label>Age (Years)</label>
51+
<input id="age" type="number" ref={ageInputRef}/>
52+
<Button type="submit">Add Users</Button>
53+
</form>
54+
</Card>
55+
</WrapperComponent>
56+
)
5957
}
6058

6159
export default AddUsers

‎Sections/Section 8/Practice-project-final/add-user-project/src/components/Users/UserList.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import React from "react"
12
import Card from "../UI/Card"
23
import styles from './UserList.module.css'
34

0 commit comments

Comments
 (0)