Initial commit, hw01

src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import './index.css'
+import App from './s1-main/App'
+import reportWebVitals from './reportWebVitals'
+
+const root = ReactDOM.createRoot(
+    document.getElementById('root') as HTMLElement
+)
+root.render(
+    <React.StrictMode>
+        <App/>
+    </React.StrictMode>
+)
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals()

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

src/s1-main/App.module.css

@@ -0,0 +1,3 @@
+.App {
+
+}

src/s1-main/App.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import s from './App.module.css'
+import HW1 from '../s2-homeworks/hw01/HW1'
+
+const App = () => {
+  return (
+      <div className={s.App}>
+        <div>react homeworks:</div>
+        <HW1/>
+        {/*<HW2/>*/}
+        {/*<HW3/>*/}
+        {/*<HW4/>*/}
+        {/*<HW5/>*/}
+
+      </div>
+  )
+}
+
+export default App

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

src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';