add hw3

src/s1-main/App.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import s from './App.module.css'
 import HW1 from '../s2-homeworks/hw01/HW1'
 import HW2 from '../s2-homeworks/hw02/HW2'
+import HW3 from '../s2-homeworks/hw03/HW3'
 
 const App = () => {
   return (
@@ -9,7 +10,7 @@ const App = () => {
         <div>react homeworks:</div>
         <HW1/>
         <HW2/>
-        {/*<HW3/>*/}
+        <HW3/>
         {/*<HW4/>*/}
         {/*<HW5/>*/}
 

src/s2-homeworks/hw03/Greeting.module.css

@@ -0,0 +1,61 @@
+.greetingForm {
+    display: flex;
+    align-items: center;
+}
+
+.error {
+    position: absolute;
+    color: red;
+    margin-left: 10px;
+    margin-top: -14px;
+}
+
+.input {
+    margin: 10px;
+
+    background: #003300;
+    color: #99ff99;
+}
+
+.input:focus {
+    outline: none;
+    border: #99ff99 solid 2px;
+}
+
+.errorInput {
+    margin: 10px;
+
+    background: #003300;
+    color: #99ff99;
+
+    border: 2px solid red;
+    outline: none;
+}
+
+.button {
+    margin: 10px;
+    width: 60px;
+
+    background: #003300;
+    color: #99ff99;
+    outline: none;
+}
+.button:focus {
+    outline: #99ff99 solid 1px;
+}
+
+.button:active {
+    background: #99ff99;
+}
+
+.button:disabled {
+    color: #005500;
+}
+
+.count {
+    margin: 10px;
+}
+
+.greeting {
+    margin-left: 10px;
+}

src/s2-homeworks/hw03/Greeting.tsx

@@ -0,0 +1,47 @@
+import React, {ChangeEvent, KeyboardEvent} from 'react'
+import s from './Greeting.module.css'
+
+type GreetingPropsType = {
+    name: string // need to fix any
+    setNameCallback: (e: ChangeEvent<HTMLInputElement>) => void // need to fix any
+    addUser: () => void // need to fix any
+    onEnter: (e: KeyboardEvent<HTMLInputElement>) => void
+    error: string // need to fix any
+    totalUsers: number // need to fix any
+    lastUser?: string // need to fix any
+}
+
+// презентационная компонента (для верстальщика)
+const Greeting: React.FC<GreetingPropsType> = (
+    {name, setNameCallback, addUser, onEnter, error, totalUsers, lastUser} // деструктуризация пропсов
+) => {
+    const inputClass = error ? s.errorInput : s.input // need to fix with (?:)
+
+    return (
+        <div id={'hw3-form'} className={s.greetingForm}>
+            <div>
+                <input
+                    id={'hw3-input'}
+                    value={name}
+                    onChange={setNameCallback}
+                    className={inputClass}
+                    onKeyDown={onEnter}
+                    onBlur={setNameCallback}
+                />
+                <div id={'hw3-error'} className={s.error}>{error}</div>
+            </div>
+
+            <button id={'hw3-button'} onClick={addUser} className={s.button} disabled={!name}>add</button>
+            <div id={'hw3-users-total'} className={s.count}>{totalUsers}</div>
+            {lastUser && (
+                <div className={s.greeting}>
+                    hello{' '}
+                    <span id={'hw3-last-user'}>{lastUser}</span>
+                    !
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default Greeting

src/s2-homeworks/hw03/GreetingContainer.tsx

@@ -0,0 +1,59 @@
+import React, {ChangeEvent, KeyboardEvent, useState} from 'react'
+import Greeting from './Greeting'
+import {UserType} from './HW3'
+
+type GreetingContainerPropsType = {
+    users: UserType[] // need to fix any
+    addUserCallback: (name: string) => void // need to fix any
+}
+
+// более простой и понятный для новичков
+// function GreetingContainer(props: GreetingPropsType) {
+
+// более современный и удобный для про :)
+const GreetingContainer: React.FC<GreetingContainerPropsType> = ({users, addUserCallback}) => { // деструктуризация пропсов
+    const [name, setName] = useState<string>('') // need to fix any
+    const [error, setError] = useState<string>('') // need to fix any
+
+    const setNameCallback = (e: ChangeEvent<HTMLInputElement>) => { // need to fix any // нельзя пробелы перед и после имени, можно в середине
+        const trimmedName = e.currentTarget.value.trim()
+
+        if (trimmedName) {
+            setName(trimmedName) // need to fix
+            setError('')
+        } else {
+            setName('')
+            setError('name is require!')
+        }
+    }
+    const addUser = () => {
+        addUserCallback(name)
+        setName('')
+    }
+
+    const onEnter = (e: KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+            if (name) {
+                addUser()
+            } else {
+                setError('name is require!')
+            }
+        }
+    }
+
+    const totalUsers = users.length // need to fix
+
+    return (
+        <Greeting
+            name={name}
+            setNameCallback={setNameCallback}
+            addUser={addUser}
+            onEnter={onEnter}
+            error={error}
+            totalUsers={totalUsers}
+            lastUser={users[users.length - 1]?.name}
+        />
+    )
+}
+
+export default GreetingContainer

src/s2-homeworks/hw03/HW3.tsx

@@ -0,0 +1,39 @@
+import React, {useState} from 'react'
+import {v1} from 'uuid'
+import s from './Greeting.module.css'
+import GreetingContainer from './GreetingContainer'
+
+// types
+export type UserType = {
+    _id: string// need to fix any
+    name: string // need to fix any
+}
+
+const HW1 = () => {
+    const [users, setUsers] = useState<UserType[]>([]) // need to fix any
+
+    const addUserCallback = (name: string) => { // need to fix any
+        const user = {
+            _id: v1(),
+            name,
+        }
+        setUsers([...users, user]) // need to fix
+    }
+
+    return (
+        <div id={'hw3'} className={s.hw3}>
+            <hr/>
+            {/*можно убрать этот тег*/}
+
+            {/*для автоматической проверки дз (не менять)*/}
+            <GreetingContainer users={users} addUserCallback={addUserCallback}/>
+
+            <hr/>
+            {/*можно убрать этот тег*/}
+            <hr/>
+            {/*можно убрать этот тег*/}
+        </div>
+    )
+}
+
+export default HW1