final ref hw2 / with tasks

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
 

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<FilterType>('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 (
         <div id={'hw2'}>

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

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) => (
+        <Affair
+            key={a._id} // кеи ОБЯЗАТЕЛЬНЫ в 99% - так что лучше их писать всегда при создании компонент в мапе
+            affair={a}
+            deleteAffairCallback={props.deleteAffairCallback}
+        />
+    ))
+
+    return (
+        <div>
+            <div className={s.buttonContainer}>
+                <button
+                    id={'hw2-button-all'}
+                    onClick={setAll}
+                    className={cnAll}
+                >
+                    All
+                </button>
+                <button
+                    id={'hw2-button-high'}
+                    onClick={setHigh}
+                    className={cnHigh}
+                >
+                    High
+                </button>
+                <button
+                    id={'hw2-button-middle'}
+                    onClick={setMiddle}
+                    className={cnMiddle}
+                >
+                    Middle
+                </button>
+                <button
+                    id={'hw2-button-low'}
+                    onClick={setLow}
+                    className={cnLow}
+                >
+                    Low
+                </button>
+            </div>
+            <div className={s.affairs}>{mappedAffairs}</div>
+        </div>
+    )
+}
+
+export default Affairs

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

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 (
+        <div
+            id={'hw2-affair-' + props.affair._id}
+            className={affairClass}
+        >
+            <div id={'hw2-name-' + props.affair._id} className={nameClass}>
+                {/*создаёт студент*/}
+                {props.affair.name}
+                {/**/}
+            </div>
+            <div id={'hw2-priority-' + props.affair._id} hidden>
+                {/*создаёт студент*/}
+                {props.affair.priority}
+                {/**/}
+            </div>
+
+            <button
+                id={'hw2-button-delete-' + props.affair._id}
+                className={buttonClass}
+                onClick={deleteCallback} // need to fix
+            >
+                {/*текст кнопки могут изменить студенты*/}
+                X
+                {/**/}
+            </button>
+        </div>
+    )
+}
+
+export default Affair