diff --git a/public/index.html b/public/index.html index 3bedd49..aef9346 100644 --- a/public/index.html +++ b/public/index.html @@ -1,5 +1,5 @@ - + diff --git a/src/index.tsx b/src/index.tsx index 1f2ac6e..19a8f03 100644 --- 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( - - - + {/*для дз 10*/} + {/**/} + + {/**/} ) diff --git a/src/s1-main/App.module.css b/src/s1-main/App.module.css index fb15973..f5f6952 100644 --- 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; -} - +} \ No newline at end of file diff --git a/src/s1-main/App.test.tsx b/src/s1-main/App.test.tsx new file mode 100644 index 0000000..ff5c217 --- /dev/null +++ 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() + // const linkElement = screen.getByText(/learn react/i) + // expect(linkElement).toBeInTheDocument() + expect(1).toBe(1) +}) diff --git a/src/s1-main/App.tsx b/src/s1-main/App.tsx index 83cfec7..f0afb9b 100644 --- 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 ( -
- {/*
react homeworks:
*/} - - {/**/} +
+ {/**/} {/**/} {/**/} - + {/**/}
) } diff --git a/src/s2-homeworks/hw01/HW1.tsx b/src/s2-homeworks/hw01/HW1.tsx index ea6c215..b9b3d99 100644 --- 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 = () => { {/*проверка отображения (не менять)*/}
- {/*не обязательно*/}
diff --git a/src/s2-homeworks/hw01/Message.module.css b/src/s2-homeworks/hw01/Message.module.css deleted file mode 100644 index 81ba25e..0000000 --- a/src/s2-homeworks/hw01/Message.module.css +++ /dev/null @@ -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; -} diff --git a/src/s2-homeworks/hw01/friend-message/FriendMessage.module.css b/src/s2-homeworks/hw01/friend-message/FriendMessage.module.css new file mode 100644 index 0000000..c45a884 --- /dev/null +++ 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; +} diff --git a/src/s2-homeworks/hw01/FriendMessage.tsx b/src/s2-homeworks/hw01/friend-message/FriendMessage.tsx similarity index 82% rename from src/s2-homeworks/hw01/FriendMessage.tsx rename to src/s2-homeworks/hw01/friend-message/FriendMessage.tsx index 9ae30b3..a89b77c 100644 --- a/src/s2-homeworks/hw01/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} > -
+
{'avatar'} -
+
{ {props.message.user.name} {/**/}
-
{/*создаёт студент*/} {props.message.message.text} {/**/} -
+
{ const M = props.M + const textareaRef = useRef(null); const [messages, setMessages] = useState([]) const [text, setText] = useState('') + 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) => {