final ref hw3

src/s2-homeworks/hw03/GreetingContainer.tsx

@@ -3,8 +3,30 @@ import Greeting from './Greeting'
 import { UserType } from './HW3'
 
 type GreetingContainerPropsType = {
-    users: UserType[] // need to fix any
-    addUserCallback: (name: string) => void // need to fix any
+    users: any // need to fix any
+    addUserCallback: any // need to fix any
+}
+
+export const pureAddUser = (name: any, setError: any, setName: any, addUserCallback: any) => {
+    // если имя пустое - показать ошибку, иначе - добавить юзера и очистить инпут
+    if (!name.trim()) {
+        setError('name is required!')
+    } else {
+        addUserCallback(name)
+        setName('')
+    }
+}
+
+export const pureOnBlur = (name: any, setError: any) => { // если имя пустое - показать ошибку
+    if (!name.trim()) {
+        setError('name is required!')
+    }
+}
+
+export const pureOnEnter = (e: any, addUser: any) => { // если нажата кнопка Enter - добавить
+    if (e.key === 'Enter') {
+        addUser()
+    }
 }
 
 // более простой и понятный для новичков
@@ -16,54 +38,39 @@ const GreetingContainer: React.FC<GreetingContainerPropsType> = ({
     addUserCallback,
 }) => {
     // деструктуризация пропсов
-    const [name, setName] = useState<string>('') // need to fix any
-    const [error, setError] = useState<string>('') // need to fix any
+    const [name, setName] = useState<any>('') // need to fix any
+    const [error, setError] = useState<any>('') // need to fix any
 
-    const setNameCallback = (e: ChangeEvent<HTMLInputElement>) => {
-        // need to fix any // нельзя пробелы перед и после имени, можно в середине
+    const setNameCallback = (e: any) => { // need to fix any
         setName(e.currentTarget.value) // need to fix
+
         error && setError('')
     }
     const addUser = () => {
-        addUserCallback(name)
-        setName('')
+        pureAddUser(name, setError, setName, addUserCallback)
     }
 
     const onBlur = () => {
-        const trimmedName = name.trim()
-
-        if (!trimmedName) {
-            setError('name is required!')
-        }
-        setName(trimmedName) // need to fix
+        pureOnBlur(name, setError)
     }
 
-    const onEnter = (e: KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === 'Enter') {
-            const trimmedName = name.trim()
-
-            if (!trimmedName) {
-                setName('')
-                setError('name is required!')
-            } else {
-                addUserCallback(trimmedName)
-                setName('')
-            }
-        }
+    const onEnter = (e: any) => {
+        pureOnEnter(e, addUser)
     }
 
     const totalUsers = users.length // need to fix
+    const lastUserName = users[users.length - 1]?.name // need to fix
 
     return (
         <Greeting
-            onBlur={onBlur}
             name={name}
             setNameCallback={setNameCallback}
             addUser={addUser}
+            onBlur={onBlur}
             onEnter={onEnter}
             error={error}
             totalUsers={totalUsers}
-            lastUser={users[users.length - 1]?.name}
+            lastUserName={lastUserName}
         />
     )
 }