add lesson-52

src/components/GuestForm/GuestForm.tsx

 import './GuestForm.scss'
 
-const GuestForm = () => {
+type TProps = {
+  onChange: (e: React.FormEvent<HTMLInputElement>) => void
+  onSubmit: (e: React.SyntheticEvent<HTMLFormElement>) => void
+  value: string
+}
+
+const GuestForm = ({onChange, onSubmit, value}: TProps) => {
   return (
-    <form className='GuestForm'>
-        <input/>
+    <form className='GuestForm' onSubmit={onSubmit}>
+        <input onChange={onChange} value={value}/>
     </form>
   )
 }

src/components/List/List.tsx

@@ -12,8 +12,8 @@ const List = ({list, title}: TProps) => {
 
         <div>
             {
-                list.map(item => (
-                    <p key={item}>
+                list.map((item, index) => (
+                    <p key={index}>
                         {item}
                     </p>
                 ))

src/components/Modal/Modal.scss

+.Modal {
+    position: fixed;
+    top: 30%;
+    right: 40%;
+    width: 200px;
+    height: 50px;
+    border-radius: 10px;
+    border: 1px solid blueviolet;
+    background-color: blueviolet;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
\ No newline at end of file

src/components/Modal/Modal.tsx

+import './Modal.scss'
+
+type TProps = {
+    show: boolean
+}
+
+const Modal = ({show}: TProps) => {
+  return (
+    <div className='Modal' style={{display: show ? 'flex' : 'none'}}>
+        Нужно ввести имя гостя!
+    </div>
+  )
+}
+
+export default Modal
\ No newline at end of file

src/containers/App.tsx

@@ -3,17 +3,49 @@ import List from "../components/List/List"
 import SendBtn from "../components/SendBtn/SendBtn"
 import GuestForm from "../components/GuestForm/GuestForm"
 import './App.scss'
+import Modal from "../components/Modal/Modal"
 
 function App() {
   const [guestList, setGuestList] = useState<string[]>(['John', 'Alibek', 'Tramp', 'Jose', 'Aida'])
   const [inComeList, setIncomeList] = useState<string[]>([])
+  const [inpVal, setInpVal] = useState<string>('')
+  const [isModal, setIsModal] = useState<boolean>(false)
+
+  const onChangeHandler = (e: React.FormEvent<HTMLInputElement>) => {
+    setInpVal(e.currentTarget.value)
+    setIsModal(false)
+  }
+
+  const onSubmitHandler = (e: React.SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    if(inpVal === '') {
+      setIsModal(true)
+    } else {
+      setGuestList((prevState) => {
+        prevState.push(inpVal)
+        return prevState
+      })
+    }
+  }
+
+  const onClickHandler = () => {
+    const copyGuestList = guestList
+    const randomList = copyGuestList.filter(item => {
+      const random = Math.floor(Math.random() * 100)
+      if(random > 50) return item
+    })
+
+    setIncomeList(randomList)
+  }
 
   return (
     <div className="App">
+      <Modal show={isModal}/>
       <div className="Lists">
         <List 
           title="Список основных гостей"
-          list={guestList}
+          list={guestList.reverse()}
         />
         <List 
           title="Список приглашенных гостей"
@@ -22,8 +54,12 @@ function App() {
       </div>
 
       <div className="Controllers">
-        <GuestForm/>
-        <SendBtn onClick={() => {}}/>
+        <GuestForm
+          onChange={onChangeHandler}
+          onSubmit={onSubmitHandler}
+          value={inpVal}
+        />
+        <SendBtn onClick={onClickHandler}/>
       </div>
     </div>
   )