final ref hw1

2025-12-16 20:39:24 +00:00 · 2022-08-29 09:00:34 +03:00
parent 3667ba0c3e
commit 5eac764ef3
13 changed files with 316 additions and 250 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="1">
+<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,15 +3,16 @@ import ReactDOM from 'react-dom/client'
 import './index.css'
 import App from './s1-main/App'
 import reportWebVitals from './reportWebVitals'
-import { Provider } from 'react-redux'
-import store from './s2-homeworks/hw10/bll/store'
+// import { Provider } from 'react-redux'
+// import store from './s2-homeworks/hw10/bll/store'

 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(
    <React.StrictMode>
-        <Provider store={store}>
-            <App />
-        </Provider>
+        {/*для дз 10*/}
+        {/*<Provider store={store}>*/}
+        <App/>
+        {/*</Provider>*/}
    </React.StrictMode>
 )

--- a/src/s1-main/App.module.css
+++ b/src/s1-main/App.module.css
@@ -1,22 +1,25 @@
 .App {
-    --header_height: 60px;
+    /*--header_height: 60px;*/
 }

 .hw {
+    min-height: 336px;
+
+    padding: 32px 70px;
+
    border: 1px solid #d9d9d9;
    border-left: none;
    border-right: none;
-    padding: 32px 70px;
-    min-height: 336px;
 }

 .hwTitle {
+    padding-left: 70px;
+
+    margin-bottom: 10px;
+    margin-top: 47px;
+
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 27px;
-    margin-bottom: 10px;
-    padding-left: 70px;
-    margin-top: 47px;
 }
-
--- a/src/s1-main/App.test.tsx
+++ b/src/s1-main/App.test.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import {render, screen} from '@testing-library/react'
+import App from './App'
+
+test('renders learn react link', () => {
+    render(<App/>)
+    // const linkElement = screen.getByText(/learn react/i)
+    // expect(linkElement).toBeInTheDocument()
+    expect(1).toBe(1)
+})
--- a/src/s1-main/App.tsx
+++ b/src/s1-main/App.tsx
@@ -1,31 +1,25 @@
 import React from 'react'
-import HW2 from '../s2-homeworks/hw02/HW2'
-import HW3 from '../s2-homeworks/hw03/HW3'
-import HW4 from '../s2-homeworks/hw04/HW4'
 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'
-// import HW4 from '../s2-homeworks/hw04/HW4'
-import HW5 from '../s2-homeworks/hw05/HW5'
-import { useSelector } from 'react-redux'
-import { useEffect } from 'react'

-const App = () => {
-    const themeId = useSelector((state: any) => state.theme.themeId)
-    useEffect(() => {
-        document.documentElement.dataset.theme = themeId
-    }, [themeId])
+function App() {
+    // для дз 12
+    // const themeId = useSelector((state: any) => state.theme.themeId)
+    // useEffect(() => {
+    //     document.documentElement.dataset.theme = themeId
+    // }, [themeId])
+
    return (
-        <div className={s.App} data-theme={themeId}>
-            {/*<div>react homeworks:</div>*/}
-
-            {/*<HW1/>*/}
+        <div
+            className={s.App}
+            // data-theme={themeId} // для дз 12
+        >
+            <HW1/>
            {/*<HW2/>*/}
            {/*<HW3/>*/}
            {/*<HW4/>*/}

-            <HW5 />
+            {/*<HW5/>*/}
        </div>
    )
 }
--- a/src/s2-homeworks/hw01/HW1.tsx
+++ b/src/s2-homeworks/hw01/HW1.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
-import Message from './Message'
-import MessageSender from './MessageSender'
-import s from './Message.module.css'
+import Message from './message/Message'
+import MessageSender from './message-sender/MessageSender'
 import s2 from '../../s1-main/App.module.css'
-import FriendMessage from './FriendMessage'
+import FriendMessage from './friend-message/FriendMessage'
 import avatar from './avatar.png'
+
 // нужно создать правильный тип вместо any
 export type MessageType = any

@@ -12,23 +12,23 @@ export type MessageType = any
 export const message0: MessageType = {
    id: 0,
    user: {
-        avatar: avatar,
-        name: 'Some Name',
+        avatar: avatar, // можно менять
+        name: 'Some Name',  // можно менять
    },
    message: {
-        text: 'some textsome textsome textsome textsome textsome textsome text',
-        time: '22:00',
+        text: 'some textsome textsome textsome textsome textsome textsome text', // можно менять
+        time: '22:00', // можно менять
    },
 }
 export const friendMessage0: MessageType = {
    id: 100,
    user: {
-        avatar: avatar,
-        name: 'Friend Name',
+        avatar: avatar, // можно менять
+        name: 'Friend Name', // можно менять
    },
    message: {
-        text: 'можно добавить зеркальное сообщение для тренировки css',
-        time: '22:00',
+        text: 'зеркальное сообщение для тренировки css', // можно менять
+        time: '22:00', // можно менять
    },
 }

@@ -40,7 +40,6 @@ const HW1 = () => {
                {/*проверка отображения (не менять)*/}
                <div>
                    <Message message={message0} />
-                    {/*не обязательно*/}
                    <FriendMessage message={friendMessage0} />
                </div>

--- a/src/s2-homeworks/hw01/Message.module.css
+++ b/src/s2-homeworks/hw01/Message.module.css
@@ -1,179 +0,0 @@
-.message {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-end;
-    margin: 24px 0 23px;
-}
-
-.friendMessage {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    margin: 24px 0 23px;
-}
-
-.imageAndMessage {
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: flex-end;
-}
-
-.friendImageAndMessage {
-    display: flex;
-    align-items: flex-end;
-}
-
-.friendName {
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 600;
-    font-size: 18px;
-    line-height: 22px;
-    text-align: start;
-}
-
-.name {
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 600;
-    font-size: 18px;
-    line-height: 22px;
-    color: white;
-    text-align: end;
-}
-
-.text {
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 20px;
-    color: white;
-}
-
-.friendText {
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 20px;
-}
-
-.messageText {
-    position: relative;
-    width: 100%;
-    max-width: 70%;
-    height: 100%;
-    background-color: #06c;
-    box-shadow: 0 5px 20px rgba(29, 33, 38, 0.03),
-    0 1px 2px rgba(29, 33, 38, 0.1);
-    display: flex;
-    flex-direction: column;
-    margin-right: 20px;
-    padding: 7px 25px 8px 13px;
-    border-radius: 10px;
-    z-index: -1;
-}
-
-.messageText:after {
-    content: ' ';
-    position: absolute;
-    width: 0;
-    height: 0;
-    right: -15px;
-    left: auto;
-    top: auto;
-    bottom: 0;
-    border: 16px solid;
-    border-color: transparent transparent #06c transparent;
-}
-
-.friendMessageText {
-    position: relative;
-    width: 100%;
-    max-width: 70%;
-    height: 100%;
-    background-color: #f5f7fb;
-    display: flex;
-    flex-direction: column;
-    margin-left: 20px;
-    padding: 7px 25px 8px 13px;
-    border-radius: 10px;
-    z-index: -1;
-}
-
-.friendMessageText:after {
-    content: ' ';
-    position: absolute;
-    width: 0;
-    height: 0;
-    right: auto;
-    left: -15px;
-    top: auto;
-    bottom: 0;
-    border: 16px solid;
-    border-color: transparent transparent #f5f7fb transparent;
-}
-
-.sendForm {
-    display: flex;
-    justify-content: right;
-    gap: 44px;
-}
-
-.textarea {
-    box-sizing: border-box;
-    background: #f5f7fb;
-    box-shadow: 0 5px 20px rgba(29, 33, 38, 0.03),
-    0 1px 2px rgba(29, 33, 38, 0.1);
-    border-radius: 20px;
-    width: 100%;
-    border: none;
-    resize: none;
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 16px;
-    padding: 12px 25px;
-}
-
-.button {
-    width: 120px;
-    height: 40px;
-    background: #06c;
-    border-radius: 20px;
-    border: none;
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 600;
-    font-size: 16px;
-    line-height: 20px;
-    color: white;
-}
-
-.button:hover {
-    cursor: pointer;
-}
-
-.time {
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 600;
-    font-size: 10px;
-    line-height: 12px;
-    margin-top: 5px;
-    width: 48px;
-    text-align: center;
-}
-
-.imageAndMessage img {
-    border-radius: 50%;
-    width: 48px;
-    height: 48px;
-}
-
-.friendTime {
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 600;
-    font-size: 10px;
-    line-height: 12px;
-    margin-top: 5px;
-    width: 48px;
-    text-align: center;
-}
--- a/src/s2-homeworks/hw01/friend-message/FriendMessage.module.css
+++ b/src/s2-homeworks/hw01/friend-message/FriendMessage.module.css
@@ -0,0 +1,88 @@
+.friendMessage {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    margin: 24px 0 23px;
+}
+
+.friendImageAndText {
+    display: flex;
+    align-items: flex-end;
+    max-width: 70%;
+}
+
+.friendImageAndText img {
+    width: 48px;
+    height: 48px;
+
+    border-radius: 50%;
+}
+
+.friendText {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    max-width: 100%;
+
+    padding: 7px 25px 8px 13px;
+
+    margin-left: 20px;
+
+    background-color: #f5f7fb;
+    box-shadow: 0 5px 20px rgba(29, 33, 38, 0.03),
+    0 1px 2px rgba(29, 33, 38, 0.1);
+    border-radius: 10px 10px 10px 0;
+}
+
+.friendText:after {
+    content: ' ';
+    position: absolute;
+
+    width: 0;
+    height: 0;
+
+    right: auto;
+    left: -15px;
+    top: auto;
+    bottom: 0;
+
+    box-shadow: 0 5px 20px rgba(29, 33, 38, 0.01),
+    0 1px 0 rgba(29, 33, 38, 0.05);
+
+    border-left: 16px solid transparent;
+    border-right: 0 solid transparent;
+    border-bottom: 16px solid #f5f7fb;
+}
+
+.friendName {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 22px;
+    text-align: start;
+}
+
+.friendMessageText {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 20px;
+
+    white-space: pre-wrap;       /* Since CSS 2.1 */
+    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+    word-wrap: break-word;       /* Internet Explorer 5.5+ */
+}
+
+.friendTime {
+    width: 48px;
+    text-align: center;
+
+    margin-top: 5px;
+
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 600;
+    font-size: 10px;
+    line-height: 12px;
+}
--- a/src/s2-homeworks/hw01/friend-message/FriendMessage.tsx
+++ b/src/s2-homeworks/hw01/friend-message/FriendMessage.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import s from './Message.module.css'
+import s from './FriendMessage.module.css'

 // создать тип вместо any и отобразить приходящие данные
 const FriendMessage = (props: any) => {
@@ -8,17 +8,15 @@ const FriendMessage = (props: any) => {
            id={'hw1-friend-message-' + props.message.id}
            className={s.friendMessage}
        >
-            <div className={s.friendImageAndMessage}>
+            <div className={s.friendImageAndText}>
                <img
                    id={'hw1-friend-avatar-' + props.message.id}
                    // создаёт студент
                    src={props.message.user.avatar}
-                    width={'50px'}
-                    height={'50px'}
                    alt={'avatar'}
                    //
                />
-                <div className={s.friendMessageText}>
+                <div className={s.friendText}>
                    <div
                        id={'hw1-friend-name-' + props.message.id}
                        className={s.friendName}
@@ -27,14 +25,14 @@ const FriendMessage = (props: any) => {
                        {props.message.user.name}
                        {/**/}
                    </div>
-                    <div
+                    <pre
                        id={'hw1-friend-text-' + props.message.id}
-                        className={s.friendText}
+                        className={s.friendMessageText}
                    >
                        {/*создаёт студент*/}
                        {props.message.message.text}
                        {/**/}
-                    </div>
+                    </pre>
                </div>
            </div>
            <div
--- a/src/s2-homeworks/hw01/message-sender/MessageSender.module.css
+++ b/src/s2-homeworks/hw01/message-sender/MessageSender.module.css
@@ -0,0 +1,47 @@
+.sendForm {
+    display: flex;
+    justify-content: right;
+    gap: 44px;
+}
+
+.textarea {
+    width: 100%;
+
+    padding: 12px 25px;
+
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+
+    box-sizing: border-box;
+    background: #f5f7fb;
+    box-shadow: 0 5px 20px rgba(29, 33, 38, 0.03),
+    0 1px 2px rgba(29, 33, 38, 0.1);
+    border-radius: 20px;
+    border: none;
+    outline: none;
+    resize: none;
+}
+
+.button {
+    width: 120px;
+    height: 40px;
+
+    color: white;
+    background: #06c;
+    border-radius: 20px;
+    border: none;
+
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 20px;
+}
+
+.button:hover {
+    cursor: pointer;
+}
+.button:active {
+    cursor: progress;
+}
--- a/src/s2-homeworks/hw01/message-sender/MessageSender.tsx
+++ b/src/s2-homeworks/hw01/message-sender/MessageSender.tsx
@@ -1,13 +1,25 @@
-import React, { useState } from 'react'
-import { message0 } from './HW1'
-import s from './Message.module.css'
+import React, {useEffect, useRef, useState} from 'react'
+import { message0 } from '../HW1'
+import s from './MessageSender.module.css'

 // компонента, которая тестирует вашу компоненту (не изменять, any не трогать)
 const MessageSender = (props: any) => {
    const M = props.M
+    const textareaRef = useRef<HTMLTextAreaElement | null>(null);
    const [messages, setMessages] = useState<any[]>([])
    const [text, setText] = useState<any>('')

+    const onChange = (e: any) => {
+        setText(e.currentTarget.value)
+    }
+
+    useEffect(() => {
+        if (textareaRef?.current) {
+            textareaRef.current.style.height = '0px'
+            textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px'
+        }
+    }, [text])
+
    const addMessage = () => {
        setMessages([
            ...messages,
@@ -16,13 +28,17 @@ const MessageSender = (props: any) => {
                user: message0.user,
                message: {
                    text,
-                    time: new Date().toTimeString().slice(0, 5),
+                    time: new Date().toUTCString()//.toTimeString().slice(0, 5),
                },
            },
        ])
        setTimeout(() => setText(''), 4)
    }

+    const onKeyDown = (e: any) => {
+        e.key === 'Enter' && e.shiftKey && addMessage()
+    }
+
    return (
        <>
            {messages.map((m) => (
@@ -32,20 +48,21 @@ const MessageSender = (props: any) => {
            <div id={'hw1-send-message-form'} className={s.sendForm}>
                <textarea
                    id={'hw1-textarea'}
-                    value={text}
-                    onChange={(e) => setText(e.currentTarget.value)}
-                    placeholder={'Type your message'}
-                    onKeyDown={(e) =>
-                        e.key === 'Enter' && e.shiftKey && addMessage()
-                    }
-                    title={'Shift+Enter for send'}
                    className={s.textarea}
-                    rows={1}
+                    ref={textareaRef}
+
+                    title={'Shift+Enter for send'}
+                    placeholder={'Type your message'}
+                    value={text}
+
+                    onChange={onChange}
+                    onKeyDown={onKeyDown}
                />
                <button
                    id={'hw1-button'}
-                    onClick={addMessage}
                    className={s.button}
+
+                    onClick={addMessage}
                >
                    {/*текст кнопки могут изменить студенты*/}
                    Send
--- a/src/s2-homeworks/hw01/message/Message.module.css
+++ b/src/s2-homeworks/hw01/message/Message.module.css
@@ -0,0 +1,88 @@
+.message {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+
+    margin: 24px 0 23px;
+}
+
+.imageAndText {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: flex-end;
+    max-width: 70%;
+}
+
+.imageAndText img {
+    width: 48px;
+    height: 48px;
+
+    border-radius: 50%;
+}
+
+.text {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    max-width: 100%;
+
+    padding: 7px 25px 8px 13px;
+
+    margin-right: 20px;
+
+    background-color: #06c;
+    box-shadow: 0 5px 20px rgba(29, 33, 38, 0.03),
+    0 1px 2px rgba(29, 33, 38, 0.1);
+    border-radius: 10px;
+}
+
+.text:after {
+    content: ' ';
+    position: absolute;
+    width: 0;
+    height: 0;
+    right: -15px;
+
+    left: auto;
+    top: auto;
+    bottom: 0;
+
+    border: 16px solid;
+    border-color: transparent transparent #06c transparent;
+}
+
+.name {
+    color: white;
+
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 22px;
+    text-align: end;
+}
+
+.messageText {
+    color: white;
+
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 20px;
+
+    white-space: pre-wrap;       /* Since CSS 2.1 */
+    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+    word-wrap: break-word;       /* Internet Explorer 5.5+ */
+}
+
+.time {
+    width: 48px;
+    text-align: center;
+
+    margin-top: 5px;
+
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 600;
+    font-size: 10px;
+    line-height: 12px;
+}
--- a/src/s2-homeworks/hw01/message/Message.tsx
+++ b/src/s2-homeworks/hw01/message/Message.tsx
@@ -8,7 +8,7 @@ export type MessagePropsType = any
 const Message = (props: MessagePropsType) => {
    return (
        <div id={'hw1-message-' + props.message.id} className={s.message}>
-            <div className={s.imageAndMessage}>
+            <div className={s.imageAndText}>
                <img
                    id={'hw1-avatar-' + props.message.id}
                    // создаёт студент
@@ -16,17 +16,17 @@ const Message = (props: MessagePropsType) => {
                    alt={'avatar'}
                    //
                />
-                <div className={s.messageText}>
+                <div className={s.text}>
                    <div id={'hw1-name-' + props.message.id} className={s.name}>
                        {/*создаёт студент*/}
                        {props.message.user.name}
                        {/**/}
                    </div>
-                    <div id={'hw1-text-' + props.message.id} className={s.text}>
+                    <pre id={'hw1-text-' + props.message.id} className={s.messageText}>
                        {/*создаёт студент*/}
                        {props.message.message.text}
                        {/**/}
-                    </div>
+                    </pre>
                </div>
            </div>
            <div id={'hw1-time-' + props.message.id} className={s.time}>