From 816a387f72932dbf688c2721194cbd9942c57cf5 Mon Sep 17 00:00:00 2001 From: neko Date: Wed, 14 Sep 2022 14:17:08 +0300 Subject: [PATCH] final ref hw2 / with tasks --- src/s2-homeworks/hw01/HW1.tsx | 8 ++ src/s2-homeworks/hw02/HW2.tsx | 33 +++++--- .../hw02/affairs/Affairs.module.css | 55 +++++++++++++ src/s2-homeworks/hw02/affairs/Affairs.tsx | 77 +++++++++++++++++++ .../hw02/affairs/affair/Affair.module.css | 31 ++++++++ .../hw02/affairs/affair/Affair.tsx | 50 ++++++++++++ 6 files changed, 245 insertions(+), 9 deletions(-) create mode 100644 src/s2-homeworks/hw02/affairs/Affairs.module.css create mode 100644 src/s2-homeworks/hw02/affairs/Affairs.tsx create mode 100644 src/s2-homeworks/hw02/affairs/affair/Affair.module.css create mode 100644 src/s2-homeworks/hw02/affairs/affair/Affair.tsx diff --git a/src/s2-homeworks/hw01/HW1.tsx b/src/s2-homeworks/hw01/HW1.tsx index b9b3d99..f486807 100644 --- a/src/s2-homeworks/hw01/HW1.tsx +++ b/src/s2-homeworks/hw01/HW1.tsx @@ -5,6 +5,14 @@ import s2 from '../../s1-main/App.module.css' import FriendMessage from './friend-message/FriendMessage' import avatar from './avatar.png' +/* +* 1 - описать тип MessageType +* 2 - описать тип MessagePropsType в файле Message.tsx +* 3 - в файле Message.tsx отобразить приходящие данные +* 4 - выполнить пункты 2, 3 в файле FriendMessage.tsx +* 5 - сделать стили в соответствии с дизайном +* */ + // нужно создать правильный тип вместо any export type MessageType = any diff --git a/src/s2-homeworks/hw02/HW2.tsx b/src/s2-homeworks/hw02/HW2.tsx index 9ae76fa..9e5a121 100644 --- a/src/s2-homeworks/hw02/HW2.tsx +++ b/src/s2-homeworks/hw02/HW2.tsx @@ -1,7 +1,21 @@ -import React, { useState } from 'react' -import Affairs from './Affairs' +import React, {useState} from 'react' +import Affairs from './affairs/Affairs' import s2 from '../../s1-main/App.module.css' +/* +* 1 - описать типы AffairPriorityType, AffairType +* 2 - указать нужный тип для defaultAffairs +* 3 - дописать типы и логику функции filterAffairs и проверить её тестами +* 4 - выполнить пункт 3 для функции deleteAffair +* 5 - указать нужный тип в useState с affairs +* 6 - дописать тип и логику функции deleteAffairCallback +* 7 - в файле Affairs.tsx дописать типизацию пропсов +* 8 - в файле Affairs.tsx дописать логику функций setAll, setHigh, setMiddle, setLow +* 9 - в файле Affair.tsx дописать типизацию пропсов +* 10 - в файле Affair.tsx дописать функции deleteCallback и использовать +* 11 - в файле Affair.tsx отобразить приходящие данные +* */ + // types export type AffairPriorityType = any // need to fix any export type AffairType = { @@ -13,11 +27,11 @@ export type FilterType = 'all' | AffairPriorityType // constants const defaultAffairs: any = [ // need to fix any - { _id: 1, name: 'React', priority: 'high' }, // студенты могут изменить содержимое name и количество элементов в массиве, ...priority не менять! - { _id: 2, name: 'anime', priority: 'low' }, - { _id: 3, name: 'games', priority: 'low' }, - { _id: 4, name: 'work', priority: 'high' }, - { _id: 5, name: 'html & css', priority: 'middle' }, + {_id: 1, name: 'React', priority: 'high'}, // студенты могут изменить содержимое name и количество элементов в массиве, ...priority не менять! + {_id: 2, name: 'anime', priority: 'low'}, + {_id: 3, name: 'games', priority: 'low'}, + {_id: 4, name: 'work', priority: 'high'}, + {_id: 5, name: 'html & css', priority: 'middle'}, ] // pure helper functions @@ -36,8 +50,9 @@ function HW2() { const [filter, setFilter] = useState('all') const filteredAffairs = filterAffairs(affairs, filter) - const deleteAffairCallback = (_id: any) => // need to fix any - setAffairs(deleteAffair(affairs, _id)) + const deleteAffairCallback = (_id: any) => { // need to fix any + setAffairs(deleteAffair(affairs, _id)) // need to fix + } return (
diff --git a/src/s2-homeworks/hw02/affairs/Affairs.module.css b/src/s2-homeworks/hw02/affairs/Affairs.module.css new file mode 100644 index 0000000..964c6f1 --- /dev/null +++ b/src/s2-homeworks/hw02/affairs/Affairs.module.css @@ -0,0 +1,55 @@ +.buttonContainer { + display: flex; + gap: 24px; + margin-bottom: 32px; +} + +.all { + --color: #06c; +} + +.low { + --color: #0c2; +} + +.high { + --color: #c00; +} + +.middle { + --color: #cc9c00; +} + +.button { + padding: 5px 15px; + + background: transparent; + color: var(--color); + + border: 1px solid var(--color); + border-radius: 15px; + outline: none; + + font-family: 'Montserrat', sans-serif; + font-weight: 600; + font-size: 14px; + line-height: 20px; + cursor: pointer; +} + +.button:active { + background: var(--color); + color: white; +} + +.active { + background: var(--color); + color: white; +} + +.affairs { + display: flex; + gap: 17px; + flex-wrap: wrap; + max-width: 450px; +} diff --git a/src/s2-homeworks/hw02/affairs/Affairs.tsx b/src/s2-homeworks/hw02/affairs/Affairs.tsx new file mode 100644 index 0000000..3ae31bc --- /dev/null +++ b/src/s2-homeworks/hw02/affairs/Affairs.tsx @@ -0,0 +1,77 @@ +import React from 'react' +import Affair from './affair/Affair' +import {AffairType, FilterType} from '../HW2' +import s from './Affairs.module.css' + +type AffairsPropsType = { + data: any // need to fix any + setFilter: any + deleteAffairCallback: any + filter: FilterType +} + +function Affairs(props: AffairsPropsType) { + const setAll = () => { + props.setFilter('all') // создаёт студент + } // need to fix + const setHigh = () => { + props.setFilter('high') // создаёт студент + } + const setMiddle = () => { + props.setFilter('middle') // создаёт студент + } + const setLow = () => { + props.setFilter('low') // создаёт студент + } + + const cnAll = s.button + ' ' + s.all + (props.filter === 'all' ? ' ' + s.active : '') + const cnHigh = s.button + ' ' + s.high + (props.filter === 'high' ? ' ' + s.active : '') + const cnMiddle = s.button + ' ' + s.middle + (props.filter === 'middle' ? ' ' + s.active : '') + const cnLow = s.button + ' ' + s.low + (props.filter === 'low' ? ' ' + s.active : '') + + const mappedAffairs = props.data.map((a: AffairType) => ( + + )) + + return ( +
+
+ + + + +
+
{mappedAffairs}
+
+ ) +} + +export default Affairs diff --git a/src/s2-homeworks/hw02/affairs/affair/Affair.module.css b/src/s2-homeworks/hw02/affairs/affair/Affair.module.css new file mode 100644 index 0000000..993cfa9 --- /dev/null +++ b/src/s2-homeworks/hw02/affairs/affair/Affair.module.css @@ -0,0 +1,31 @@ +.affair { + display: flex; + align-items: center; + width: 185px; + + border: 1.5px solid var(--color); + border-radius: 5px; +} + +.name { + display: flex; + align-items: center; + justify-content: center; + width: 145px; + height: 37px; +} + +.closeButton { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 37px; + + background-color: transparent; + border: none; + border-left: 1.5px solid var(--color); + + font-weight: 900; + cursor: pointer; +} diff --git a/src/s2-homeworks/hw02/affairs/affair/Affair.tsx b/src/s2-homeworks/hw02/affairs/affair/Affair.tsx new file mode 100644 index 0000000..4dd2b94 --- /dev/null +++ b/src/s2-homeworks/hw02/affairs/affair/Affair.tsx @@ -0,0 +1,50 @@ +import React from 'react' +import { AffairType } from '../../HW2' +import s from './Affair.module.css' +import s2 from '../Affairs.module.css' + +type AffairPropsType = { + // key не нужно типизировать + affair: AffairType + deleteAffairCallback: any // need to fix any +} + +function Affair(props: AffairPropsType) { + const deleteCallback = () => { + props.deleteAffairCallback(props.affair._id) + } // need to fix // создаёт студент + + const nameClass = s.name + ' ' + s2[props.affair.priority] + const buttonClass = s.closeButton + ' ' + s2[props.affair.priority] + const affairClass = s.affair + ' ' + s2[props.affair.priority] + + return ( +
+
+ {/*создаёт студент*/} + {props.affair.name} + {/**/} +
+ + + +
+ ) +} + +export default Affair