Initial commit, hw01

src/s2-homeworks/hw01/HW1.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import Message from './Message'
+import MessageSender from './MessageSender'
+
+export const message0 = {
+    id: 0,
+    user: {
+        avatar: 'https://sun9-74.userapi.com/Ph-WiuOtF985il9AvN9JqiCWedmHtSGSSTXrSA/ltEB2Z2-YO4.jpg',
+        name: 'Some Name',
+    },
+    message: {
+        text: 'some text',
+        time: '22:00',
+    },
+}
+
+const HW1 = () => {
+    return (
+        <div id={'hw1'}>
+            <hr/>
+            homeworks 1
+
+            {/*проверка отображения (не менять)*/}
+            <Message message={message0}/>
+
+            {/*для автоматической проверки дз (не менять)*/}
+            <MessageSender M={Message}/>
+            <hr/>
+            <hr/>
+        </div>
+    )
+}
+
+export default HW1

src/s2-homeworks/hw01/Message.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+// создать тип вместо any и отобразить приходящие данные
+const Message = (props: any) => {
+    return (
+        <div id={'hw1-message-' + props.message.id} style={{display: "flex", border: '1px solid lime', margin: '10px'}}>
+            <img src={props.message.user.avatar} width={'50px'} height={'50px'} id={'hw1-avatar-' + props.message.id} alt={'avatar'}/>
+
+            <div>
+                <div id={'hw1-name-' + props.message.id}>{props.message.user.name}</div>
+                <pre id={'hw1-text-' + props.message.id}>{props.message.message.text}</pre>
+                <div id={'hw1-time-' + props.message.id}>{props.message.message.time}</div>
+            </div>
+        </div>
+    )
+}
+
+export default Message

src/s2-homeworks/hw01/MessageSender.tsx

@@ -0,0 +1,34 @@
+import React, {useState} from 'react'
+import {message0} from './HW1'
+
+// компонента, которая тестирует вашу компоненту (не изменять, any не трогать)
+const MessageSender = (props: any) => {
+    const M = props.M
+    const [messages, setMessages] = useState<any[]>([])
+    const [text, setText] = useState<any>('')
+
+    const addMessage = () => {
+        setMessages([...messages, {
+            id: messages.length ? messages.length + 1 : 1,
+            user: message0.user,
+            message: {
+                text,
+                time: new Date().toTimeString().slice(0, 5),
+            },
+        }])
+        setText('')
+    }
+
+    return (
+        <>
+            {messages.map(m => <M key={'message' + m.id} message={m}/>)}
+
+            <div id={'hw1-send-message-form'}>
+                <textarea id={'hw1-textarea'} value={text} onChange={e => setText(e.currentTarget.value)} style={{margin: '0 10px'}}/>
+                <button id={'hw1-button'} onClick={addMessage}>send</button>
+            </div>
+        </>
+    )
+}
+
+export default MessageSender