ershisan99/home-works
1
0
Fork 0
mirror of https://github.com/IgnatZakalinsky/home-works.git synced 2025-12-16 20:39:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

final ref hw1

Browse Source
This commit is contained in:
neko
2022-08-29 09:00:34 +03:00
parent 3667ba0c3e
commit 5eac764ef3
13 changed files with 316 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" data-theme="1"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

11
src/index.tsx
View File

@@ -3,15 +3,16 @@ import ReactDOM from 'react-dom/client'
import './index.css' import './index.css'
import App from './s1-main/App' import App from './s1-main/App'
import reportWebVitals from './reportWebVitals' import reportWebVitals from './reportWebVitals'
import { Provider } from 'react-redux' // import { Provider } from 'react-redux'
import store from './s2-homeworks/hw10/bll/store' // import store from './s2-homeworks/hw10/bll/store'
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<Provider store={store}> {/*для дз 10*/}
<App /> {/*<Provider store={store}>*/}
</Provider> <App/>
{/*</Provider>*/}
</React.StrictMode> </React.StrictMode>
) )

19
src/s1-main/App.module.css
View File

@@ -1,22 +1,25 @@
.App { .App {
--header_height: 60px; /*--header_height: 60px;*/
} }
.hw { .hw {
min-height: 336px;
padding: 32px 70px;
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
border-left: none; border-left: none;
border-right: none; border-right: none;
padding: 32px 70px;
min-height: 336px;
} }
.hwTitle { .hwTitle {
padding-left: 70px;
margin-bottom: 10px;
margin-top: 47px;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
font-weight: 600; font-weight: 600;
font-size: 22px; font-size: 22px;
line-height: 27px; line-height: 27px;
margin-bottom: 10px; }
padding-left: 70px;
margin-top: 47px;
}

10
src/s1-main/App.test.tsx Normal file
View File

@@ -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)
})

32
src/s1-main/App.tsx
View File

@@ -1,31 +1,25 @@
import React from 'react' 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 s from './App.module.css'
import HW1 from '../s2-homeworks/hw01/HW1' 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 = () => { function App() {
const themeId = useSelector((state: any) => state.theme.themeId) // для дз 12
useEffect(() => { // const themeId = useSelector((state: any) => state.theme.themeId)
document.documentElement.dataset.theme = themeId // useEffect(() => {
}, [themeId]) // document.documentElement.dataset.theme = themeId
// }, [themeId])
return ( return (
<div className={s.App} data-theme={themeId}> <div
{/*<div>react homeworks:</div>*/} className={s.App}
// data-theme={themeId} // для дз 12
{/*<HW1/>*/} >
<HW1/>
{/*<HW2/>*/} {/*<HW2/>*/}
{/*<HW3/>*/} {/*<HW3/>*/}
{/*<HW4/>*/} {/*<HW4/>*/}
<HW5 /> {/*<HW5/>*/}
</div> </div>
) )
} }

25
src/s2-homeworks/hw01/HW1.tsx
View File

@@ -1,10 +1,10 @@
import React from 'react' import React from 'react'
import Message from './Message' import Message from './message/Message'
import MessageSender from './MessageSender' import MessageSender from './message-sender/MessageSender'
import s from './Message.module.css'
import s2 from '../../s1-main/App.module.css' import s2 from '../../s1-main/App.module.css'
import FriendMessage from './FriendMessage' import FriendMessage from './friend-message/FriendMessage'
import avatar from './avatar.png' import avatar from './avatar.png'
// нужно создать правильный тип вместо any // нужно создать правильный тип вместо any
export type MessageType = any export type MessageType = any
@@ -12,23 +12,23 @@ export type MessageType = any
export const message0: MessageType = { export const message0: MessageType = {
id: 0, id: 0,
user: { user: {
avatar: avatar, avatar: avatar, // можно менять
name: 'Some Name', name: 'Some Name', // можно менять
}, },
message: { message: {
text: 'some textsome textsome textsome textsome textsome textsome text', text: 'some textsome textsome textsome textsome textsome textsome text', // можно менять
time: '22:00', time: '22:00', // можно менять
}, },
} }
export const friendMessage0: MessageType = { export const friendMessage0: MessageType = {
id: 100, id: 100,
user: { user: {
avatar: avatar, avatar: avatar, // можно менять
name: 'Friend Name', name: 'Friend Name', // можно менять
}, },
message: { message: {
text: 'можно добавить зеркальное сообщение для тренировки css', text: 'зеркальное сообщение для тренировки css', // можно менять
time: '22:00', time: '22:00', // можно менять
}, },
} }
@@ -40,7 +40,6 @@ const HW1 = () => {
{/*проверка отображения (не менять)*/} {/*проверка отображения (не менять)*/}
<div> <div>
<Message message={message0} /> <Message message={message0} />
{/*не обязательно*/}
<FriendMessage message={friendMessage0} /> <FriendMessage message={friendMessage0} />
</div> </div>

179
src/s2-homeworks/hw01/Message.module.css
View File

@@ -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;
}

88
src/s2-homeworks/hw01/friend-message/FriendMessage.module.css Normal file
View File

@@ -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;
}

14
src/s2-homeworks/hw01/FriendMessage.tsx → src/s2-homeworks/hw01/friend-message/FriendMessage.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react' import React from 'react'
import s from './Message.module.css' import s from './FriendMessage.module.css'
// создать тип вместо any и отобразить приходящие данные // создать тип вместо any и отобразить приходящие данные
const FriendMessage = (props: any) => { const FriendMessage = (props: any) => {
@@ -8,17 +8,15 @@ const FriendMessage = (props: any) => {
id={'hw1-friend-message-' + props.message.id} id={'hw1-friend-message-' + props.message.id}
className={s.friendMessage} className={s.friendMessage}
> >
<div className={s.friendImageAndMessage}> <div className={s.friendImageAndText}>
<img <img
id={'hw1-friend-avatar-' + props.message.id} id={'hw1-friend-avatar-' + props.message.id}
// создаёт студент // создаёт студент
src={props.message.user.avatar} src={props.message.user.avatar}
width={'50px'}
height={'50px'}
alt={'avatar'} alt={'avatar'}
// //
/> />
<div className={s.friendMessageText}> <div className={s.friendText}>
<div <div
id={'hw1-friend-name-' + props.message.id} id={'hw1-friend-name-' + props.message.id}
className={s.friendName} className={s.friendName}
@@ -27,14 +25,14 @@ const FriendMessage = (props: any) => {
{props.message.user.name} {props.message.user.name}
{/**/} {/**/}
</div> </div>
<div <pre
id={'hw1-friend-text-' + props.message.id} id={'hw1-friend-text-' + props.message.id}
className={s.friendText} className={s.friendMessageText}
> >
{/*создаёт студент*/} {/*создаёт студент*/}
{props.message.message.text} {props.message.message.text}
{/**/} {/**/}
</div> </pre>
</div> </div>
</div> </div>
<div <div

47
src/s2-homeworks/hw01/message-sender/MessageSender.module.css Normal file
View File

@@ -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;
}

43
src/s2-homeworks/hw01/MessageSender.tsx → src/s2-homeworks/hw01/message-sender/MessageSender.tsx
View File

@@ -1,13 +1,25 @@
import React, { useState } from 'react' import React, {useEffect, useRef, useState} from 'react'
import { message0 } from './HW1' import { message0 } from '../HW1'
import s from './Message.module.css' import s from './MessageSender.module.css'
// компонента, которая тестирует вашу компоненту (не изменять, any не трогать) // компонента, которая тестирует вашу компоненту (не изменять, any не трогать)
const MessageSender = (props: any) => { const MessageSender = (props: any) => {
const M = props.M const M = props.M
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
const [messages, setMessages] = useState<any[]>([]) const [messages, setMessages] = useState<any[]>([])
const [text, setText] = 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 = () => { const addMessage = () => {
setMessages([ setMessages([
...messages, ...messages,
@@ -16,13 +28,17 @@ const MessageSender = (props: any) => {
user: message0.user, user: message0.user,
message: { message: {
text, text,
time: new Date().toTimeString().slice(0, 5), time: new Date().toUTCString()//.toTimeString().slice(0, 5),
}, },
}, },
]) ])
setTimeout(() => setText(''), 4) setTimeout(() => setText(''), 4)
} }
const onKeyDown = (e: any) => {
e.key === 'Enter' && e.shiftKey && addMessage()
}
return ( return (
<> <>
{messages.map((m) => ( {messages.map((m) => (
@@ -32,20 +48,21 @@ const MessageSender = (props: any) => {
<div id={'hw1-send-message-form'} className={s.sendForm}> <div id={'hw1-send-message-form'} className={s.sendForm}>
<textarea <textarea
id={'hw1-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} className={s.textarea}
rows={1} ref={textareaRef}
title={'Shift+Enter for send'}
placeholder={'Type your message'}
value={text}
onChange={onChange}
onKeyDown={onKeyDown}
/> />
<button <button
id={'hw1-button'} id={'hw1-button'}
onClick={addMessage}
className={s.button} className={s.button}
onClick={addMessage}
> >
{/*текст кнопки могут изменить студенты*/} {/*текст кнопки могут изменить студенты*/}
Send Send

88
src/s2-homeworks/hw01/message/Message.module.css Normal file
View File

@@ -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;
}

8
src/s2-homeworks/hw01/Message.tsx → src/s2-homeworks/hw01/message/Message.tsx
View File

@@ -8,7 +8,7 @@ export type MessagePropsType = any
const Message = (props: MessagePropsType) => { const Message = (props: MessagePropsType) => {
return ( return (
<div id={'hw1-message-' + props.message.id} className={s.message}> <div id={'hw1-message-' + props.message.id} className={s.message}>
<div className={s.imageAndMessage}> <div className={s.imageAndText}>
<img <img
id={'hw1-avatar-' + props.message.id} id={'hw1-avatar-' + props.message.id}
// создаёт студент // создаёт студент
@@ -16,17 +16,17 @@ const Message = (props: MessagePropsType) => {
alt={'avatar'} alt={'avatar'}
// //
/> />
<div className={s.messageText}> <div className={s.text}>
<div id={'hw1-name-' + props.message.id} className={s.name}> <div id={'hw1-name-' + props.message.id} className={s.name}>
{/*создаёт студент*/} {/*создаёт студент*/}
{props.message.user.name} {props.message.user.name}
{/**/} {/**/}
</div> </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} {props.message.message.text}
{/**/} {/**/}
</div> </pre>
</div> </div>
</div> </div>
<div id={'hw1-time-' + props.message.id} className={s.time}> <div id={'hw1-time-' + props.message.id} className={s.time}>