From 2095ce968842f024e199b8cb7604550c3b942ed4 Mon Sep 17 00:00:00 2001
From: slikNET <p-i-l@mail.ru>
Date: Thu, 13 Jul 2023 19:51:50 +0300
Subject: [PATCH 1/3] form with useRef

---
 src/App.js                                |  5 +++-
 src/components/UI/Button/Button.js        | 13 +++++++++
 src/components/UI/Input/Input.js          | 13 +++++++++
 src/components/Users/UserForm/UserForm.js | 35 +++++++++++++++++++++++
 src/components/Users/Users.js             | 14 +++++++++
 src/index.js                              |  4 +--
 6 files changed, 81 insertions(+), 3 deletions(-)
 create mode 100644 src/components/UI/Button/Button.js
 create mode 100644 src/components/UI/Input/Input.js
 create mode 100644 src/components/Users/UserForm/UserForm.js
 create mode 100644 src/components/Users/Users.js

diff --git a/src/App.js b/src/App.js
index 3c96b66..e6642ef 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,12 @@
 import React from 'react';
+import Users from "./components/Users/Users";
 
 const App = () => {
+    console.log('render App');
+
     return (
         <>
-
+            <Users/>
         </>
     );
 };
diff --git a/src/components/UI/Button/Button.js b/src/components/UI/Button/Button.js
new file mode 100644
index 0000000..679b6b9
--- /dev/null
+++ b/src/components/UI/Button/Button.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Button = ({type, text, ...props}) => {
+    console.log('render Button');
+
+    return (
+        <div className={'form-controller'}>
+            <button type={type || 'submit'}{...props}>{text || 'Send'}</button>
+        </div>
+    );
+};
+
+export default Button;
\ No newline at end of file
diff --git a/src/components/UI/Input/Input.js b/src/components/UI/Input/Input.js
new file mode 100644
index 0000000..cdbace1
--- /dev/null
+++ b/src/components/UI/Input/Input.js
@@ -0,0 +1,13 @@
+import React, {forwardRef} from 'react';
+
+const Input = forwardRef(({type, name, value, onChange, ...props}, ref) => {
+    console.log('render Input');
+
+    return (
+        <div className={'form-controller'}>
+            <input type={type || 'text'} ref={ref} name={name} value={value} onChange={onChange} {...props}/>
+        </div>
+    );
+});
+
+export default Input;
\ No newline at end of file
diff --git a/src/components/Users/UserForm/UserForm.js b/src/components/Users/UserForm/UserForm.js
new file mode 100644
index 0000000..26a3ffa
--- /dev/null
+++ b/src/components/Users/UserForm/UserForm.js
@@ -0,0 +1,35 @@
+import React, {useRef} from 'react';
+
+import Input from "../../UI/Input/Input";
+import Button from "../../UI/Button/Button";
+
+const UserForm = () => {
+    console.log('render UserForm');
+
+    const nameRef = useRef('');
+    const usernameRef = useRef('');
+    const emailRef = useRef('');
+    const phoneRef = useRef('');
+
+    const onSubmitHandler = (e) => {
+        e.preventDefault();
+
+        console.log(nameRef.current.value)
+        console.log(usernameRef.current.value)
+        console.log(emailRef.current.value)
+        console.log(phoneRef.current.value)
+    }
+
+    return (
+        <form className={'form'} action={'#'} onSubmit={(e) => onSubmitHandler(e)}>
+            <Input type={'text'} ref={nameRef} name={'name'} value={nameRef.current.value} placeholder={'Name'}/>
+            <Input type={'text'} ref={usernameRef} name={'username'} value={usernameRef.current.value} placeholder={'Username'}/>
+            <Input type={'email'} ref={emailRef} name={'email'} value={emailRef.current.value} placeholder={'Email'}/>
+            <Input type={'tel'} ref={phoneRef} name={'phone'} value={phoneRef.current.value} placeholder={'Phone'}/>
+
+            <Button type={'submit'} text={'Create New User'}/>
+        </form>
+    );
+};
+
+export default UserForm;
\ No newline at end of file
diff --git a/src/components/Users/Users.js b/src/components/Users/Users.js
new file mode 100644
index 0000000..d7b35a3
--- /dev/null
+++ b/src/components/Users/Users.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import UserForm from "./UserForm/UserForm";
+
+const Users = () => {
+    console.log('render Users');
+
+    return (
+        <div>
+           <UserForm/>
+        </div>
+    );
+};
+
+export default Users;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index d563c0f..eaa6def 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,9 +6,9 @@ import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
+  // <React.StrictMode>
     <App />
-  </React.StrictMode>
+  // </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

From 1496d6171469890d85361b3873e0ff60c72e8c33 Mon Sep 17 00:00:00 2001
From: slikNET <p-i-l@mail.ru>
Date: Fri, 14 Jul 2023 11:58:24 +0300
Subject: [PATCH 2/3] form with useRef

---
 src/components/Users/User/User.js | 17 +++++++++++++++++
 src/components/Users/Users.js     | 16 +++++++++++++++-
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Users/User/User.js

diff --git a/src/components/Users/User/User.js b/src/components/Users/User/User.js
new file mode 100644
index 0000000..17d95c0
--- /dev/null
+++ b/src/components/Users/User/User.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+const User = ({user}) => {
+    console.log('render User Item');
+
+    const {id, name} = user;
+
+    return (
+        <div>
+            <p>{'ID: ' + id}</p>
+            <p>{'NAME: ' + name}</p>
+            <hr/>
+        </div>
+    );
+};
+
+export default User;
\ No newline at end of file
diff --git a/src/components/Users/Users.js b/src/components/Users/Users.js
index d7b35a3..956e2d8 100644
--- a/src/components/Users/Users.js
+++ b/src/components/Users/Users.js
@@ -1,12 +1,26 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import UserForm from "./UserForm/UserForm";
+import User from "./User/User";
 
 const Users = () => {
     console.log('render Users');
 
+    const [users, setUsers] = useState();
+
+    useEffect(()=> {
+        fetch('http://jsonplaceholder.typicode.com/users')
+            .then(res => res.json())
+            .then((users) => {
+                setUsers(users);
+                // users?.map(user => console.log(user))
+            })
+    }, [])
+
     return (
         <div>
            <UserForm/>
+
+            {users?.map(user => <User key={user.id} user={user}/>)}
         </div>
     );
 };

From 970812e335ea28b2fea1569ad252a76b2a5b6501 Mon Sep 17 00:00:00 2001
From: slikNET <p-i-l@mail.ru>
Date: Fri, 14 Jul 2023 14:21:23 +0300
Subject: [PATCH 3/3] task 1 with useRef, forwardRef

---
 src/components/Users/User/User.js         |  7 ++-
 src/components/Users/UserForm/UserForm.js | 70 ++++++++++++++++++-----
 src/components/Users/Users.js             | 19 ++++--
 3 files changed, 73 insertions(+), 23 deletions(-)

diff --git a/src/components/Users/User/User.js b/src/components/Users/User/User.js
index 17d95c0..ba95cb8 100644
--- a/src/components/Users/User/User.js
+++ b/src/components/Users/User/User.js
@@ -3,12 +3,13 @@ import React from 'react';
 const User = ({user}) => {
     console.log('render User Item');
 
-    const {id, name} = user;
+    const {id, name, email} = user;
 
     return (
         <div>
-            <p>{'ID: ' + id}</p>
-            <p>{'NAME: ' + name}</p>
+            <p>ID: {id}</p>
+            <p>NAME: {name}</p>
+            <p>EMAIL: {email}</p>
             <hr/>
         </div>
     );
diff --git a/src/components/Users/UserForm/UserForm.js b/src/components/Users/UserForm/UserForm.js
index 26a3ffa..38d7a30 100644
--- a/src/components/Users/UserForm/UserForm.js
+++ b/src/components/Users/UserForm/UserForm.js
@@ -1,33 +1,73 @@
-import React, {useRef} from 'react';
+import React, {useContext, useRef, useState} from 'react';
 
 import Input from "../../UI/Input/Input";
 import Button from "../../UI/Button/Button";
 
+import {UsersContext} from "../Users";
+
 const UserForm = () => {
     console.log('render UserForm');
 
-    const nameRef = useRef('');
-    const usernameRef = useRef('');
-    const emailRef = useRef('');
-    const phoneRef = useRef('');
+    const [users, setUsers] = useContext(UsersContext);
+    const formRef = {
+        name: useRef(''),
+        username: useRef(''),
+        email: useRef(''),
+        phone: useRef(''),
+    }
+
+    const [saving, setSaving] = useState(false);
+
+    const createUser = () => {
+        setSaving(true);
+
+        fetch('https://jsonplaceholder.typicode.com/users', {
+            method: 'POST',
+            body: JSON.stringify({
+                name: formRef.name.current.value,
+                username: formRef.username.current.value,
+                email: formRef.email.current.value,
+                phone: formRef.phone.current.value
+            }),
+            headers: {
+                'Content-type': 'application/json; charset=UTF-8',
+            },
+        })
+            .then((res) => res.json())
+            .then((newUser) => {
+                //  RESET FORM
+                formRef.name.current.value = '';
+                formRef.username.current.value = '';
+                formRef.email.current.value = '';
+                formRef.phone.current.value = '';
+
+                // NEW USER
+                const newUsers = [newUser, ...users];
+                setUsers(newUsers)
+            })
+            .finally(() => {
+                setSaving(false);
+            });
+    }
 
     const onSubmitHandler = (e) => {
         e.preventDefault();
 
-        console.log(nameRef.current.value)
-        console.log(usernameRef.current.value)
-        console.log(emailRef.current.value)
-        console.log(phoneRef.current.value)
+        createUser()
+    }
+
+    const onInputChange = (e, name) => {
+        formRef[name].current.value = e.target.value;
     }
 
     return (
-        <form className={'form'} action={'#'} onSubmit={(e) => onSubmitHandler(e)}>
-            <Input type={'text'} ref={nameRef} name={'name'} value={nameRef.current.value} placeholder={'Name'}/>
-            <Input type={'text'} ref={usernameRef} name={'username'} value={usernameRef.current.value} placeholder={'Username'}/>
-            <Input type={'email'} ref={emailRef} name={'email'} value={emailRef.current.value} placeholder={'Email'}/>
-            <Input type={'tel'} ref={phoneRef} name={'phone'} value={phoneRef.current.value} placeholder={'Phone'}/>
+        <form className={'form'} action={'#'} onSubmit={onSubmitHandler}>
+            <Input type={'text'} ref={formRef.name} name={'name'} onChange={(e)=>{onInputChange(e, 'name')}} placeholder={'Name'}/>
+            <Input type={'text'} ref={formRef.username} name={'username'} onChange={(e)=>{onInputChange(e, 'username')}} placeholder={'Username'}/>
+            <Input type={'email'} ref={formRef.email} name={'email'} onChange={(e)=>{onInputChange(e, 'email')}} placeholder={'Email'}/>
+            <Input type={'tel'} ref={formRef.phone} name={'phone'} onChange={(e)=>{onInputChange(e, 'phone')}} placeholder={'Phone'}/>
 
-            <Button type={'submit'} text={'Create New User'}/>
+            <Button type={'submit'} text={'Create New User'} disabled={saving}/>
         </form>
     );
 };
diff --git a/src/components/Users/Users.js b/src/components/Users/Users.js
index 956e2d8..0f2aca1 100644
--- a/src/components/Users/Users.js
+++ b/src/components/Users/Users.js
@@ -1,26 +1,35 @@
-import React, {useEffect, useState} from 'react';
+import React, {createContext, useEffect, useState} from 'react';
+
 import UserForm from "./UserForm/UserForm";
 import User from "./User/User";
-
+export const UsersContext = createContext(null);
 const Users = () => {
     console.log('render Users');
 
     const [users, setUsers] = useState();
 
+
     useEffect(()=> {
         fetch('http://jsonplaceholder.typicode.com/users')
             .then(res => res.json())
             .then((users) => {
                 setUsers(users);
-                // users?.map(user => console.log(user))
             })
     }, [])
 
     return (
         <div>
-           <UserForm/>
+            <UsersContext.Provider value={[users, setUsers]}>
+                <UserForm/>
+            </UsersContext.Provider>
+
+            {users?.map(user => {
+                //  CHANGE jsonplaceholder DEFAULT IDs
+                //  In order to allow multiple creations of users
+                user.id = user.id + Date.now();
 
-            {users?.map(user => <User key={user.id} user={user}/>)}
+                return <User key={user.id} user={user}/>
+            })}
         </div>
     );
 };