add hw2

src/s1-main/App.tsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import s from './App.module.css'
 import HW1 from '../s2-homeworks/hw01/HW1'
+import HW2 from '../s2-homeworks/hw02/HW2'
 
 const App = () => {
   return (
       <div className={s.App}>
         <div>react homeworks:</div>
         <HW1/>
-        {/*<HW2/>*/}
+        <HW2/>
         {/*<HW3/>*/}
         {/*<HW4/>*/}
         {/*<HW5/>*/}

src/s2-homeworks/hw02/Affair.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import {AffairType} from './HW2'
+import s from './Affairs.module.css'
+
+type AffairPropsType = {
+    // key не нужно типизировать
+    affair: any // AffairType // need to fix any
+    deleteAffairCallback: any // (id: number) => void // need to fix any
+}
+
+function Affair(props: AffairPropsType) {
+    const deleteCallback = () => {props.deleteAffairCallback(props.affair._id)} // need to fix // создаёт студент
+
+    const priorityClass = s.item + ' ' + s[props.affair.priority]
+
+    return (
+        <div id={'hw2-affair-' + props.affair._id} className={s.affair}>
+            <div id={'hw2-name-' + props.affair._id} className={s.item}>
+                {/*создаёт студент*/}
+                {props.affair.name}
+                {/**/}
+            </div>
+            [
+            <div id={'hw2-priority-' + props.affair._id} className={priorityClass}>
+                {/*создаёт студент*/}
+                {props.affair.priority}
+                {/**/}
+            </div>
+            ]
+
+            <button
+                id={'hw2-button-delete-' + props.affair._id}
+                onClick={deleteCallback} // создаёт студент
+                className={s.item + ' ' + s.button}
+            >
+                {/*текст кнопки могут изменить студенты*/}
+                X
+                {/**/}
+            </button>
+        </div>
+    )
+}
+
+export default Affair

src/s2-homeworks/hw02/Affairs.module.css

@@ -0,0 +1,45 @@
+.hw2 {
+
+}
+
+.button {
+    margin: 10px;
+    width: 60px;
+
+    background: #003300;
+    color: #99ff99;
+    outline: none;
+}
+.button:focus {
+    outline: #99ff99 solid 1px;
+}
+
+.button:active {
+    background: #99ff99;
+}
+
+.active {
+    background: #335533;
+}
+
+.affair {
+    display: flex;
+    align-items: center;
+}
+
+.item {
+    margin: 10px;
+    width: 100px;
+}
+
+.high {
+    color: red;
+}
+
+.middle {
+    color: orange;
+}
+
+.low {
+    color: lime;
+}

src/s2-homeworks/hw02/Affairs.tsx

@@ -0,0 +1,65 @@
+import React, { SetStateAction, Dispatch } from 'react'
+import Affair from './Affair'
+import {AffairType, FilterType} from './HW2'
+import s from './Affairs.module.css'
+
+type AffairsPropsType = { // need to fix any
+    data: any // AffairType[]
+    setFilter: any // (filter: FilterType) => void
+    // setFilter: Dispatch<SetStateAction<FilterType>>
+    deleteAffairCallback: any // (id: number) => void
+    filter: any // FilterType
+}
+
+function Affairs(props: AffairsPropsType) {
+    const mappedAffairs = props.data.map((a: AffairType) => (
+        <Affair
+            key={a._id} // кеи ОБЯЗАТЕЛЬНЫ в 99% - так что лучше их писать всегда при создании компонент в мапе
+            affair={a}
+            deleteAffairCallback={props.deleteAffairCallback}
+        />
+    ))
+
+    const setAll = () => {
+        props.setFilter('all') // создаёт студент
+    } // need to fix
+    const setHigh = () => {
+        props.setFilter('high') // создаёт студент
+    }
+    const setMiddle = () => {
+        props.setFilter('middle') // создаёт студент
+    }
+    const setLow = () => {
+        props.setFilter('low') // создаёт студент
+    }
+    // const set = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    //     props.setFilter(e.currentTarget.value as FilterType)
+    // }
+
+    const cnAll = s.button + ' ' + (props.filter === 'all' ? s.active : '')
+    const cnHigh = s.button + ' ' + (props.filter === 'high' ? s.active : '')
+    const cnMiddle = s.button + ' ' + (props.filter === 'middle' ? s.active : '')
+    const cnLow = s.button + ' ' + (props.filter === 'low' ? s.active : '')
+    // const setClass = (filter: FilterType) => {
+    //     return s.button + (props.filter === filter ? ' ' + s.active : '')
+    // }
+
+    return (
+        <div>
+
+            {mappedAffairs}
+
+            <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>
+
+            {/*<button onClick={set} className={setClass('all')} value={'all'}>All</button>*/}
+            {/*<button onClick={set} className={setClass('high')} value={'high'}>High</button>*/}
+            {/*<button onClick={set} className={setClass('middle')} value={'middle'}>Middle</button>*/}
+            {/*<button onClick={set} className={setClass('low')} value={'low'}>Low</button>*/}
+        </div>
+    )
+}
+
+export default Affairs

src/s2-homeworks/hw02/AlternativeAffairs.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+function AlternativeAffairs() {
+    return (
+        <div>
+
+        </div>
+    )
+}
+
+export default AlternativeAffairs

src/s2-homeworks/hw02/HW2.tsx

@@ -0,0 +1,69 @@
+import React, {useState} from 'react'
+import Affairs from './Affairs'
+import s from './Affairs.module.css'
+import s2 from '../hw01/Message.module.css'
+
+// types
+export type AffairPriorityType = any // 'high' | 'low' | 'middle' // need to fix any
+export type AffairType = {
+    _id: any // number // need to fix any
+    name: any // string // need to fix any
+    priority: AffairPriorityType
+}
+export type FilterType = 'all' | AffairPriorityType
+
+// constants
+const defaultAffairs: any = [ // need to fix any // AffairType[]
+    {_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
+export const filterAffairs = (affairs: any, filter: any): any => { // need to fix any // (affairs: AffairType[], filter: FilterType): AffairType[]
+    if (filter === 'all') return affairs // создаёт студент
+    // else if (filter === 'low') return affairs.filter(a => a.priority === 'low')
+    // else if (filter === 'middle') return affairs.filter(a => a.priority === 'middle')
+    // else if (filter === 'high') return affairs.filter(a => a.priority === 'high')
+    // else {
+    // }
+    // return []
+    else return affairs.filter((a: any) => a.priority === filter) // need to fix // создаёт студент
+}
+export const deleteAffair = (affairs: any, _id: any): any => { // need to fix any // (affairs: AffairType[], _id: number): AffairType[]
+    return affairs.filter((a: any) => a._id !== _id) // need to fix // создаёт студент
+}
+
+function HW2() {
+    const [affairs, setAffairs] = useState<any>(defaultAffairs) // need to fix any // AffairType[]
+    const [filter, setFilter] = useState<any>('all') // need to fix any // FilterType
+
+    const filteredAffairs = filterAffairs(affairs, filter)
+    const deleteAffairCallback = (_id: any) => setAffairs(deleteAffair(affairs, _id)) // need to fix any // number
+
+    return (
+        <div id={'hw2'} className={s.hw2}>
+            <hr/>
+            {/*можно убрать этот тег*/}
+
+            <div className={s2.hwTitle}>homeworks 2</div>
+
+            {/*не менять*/}
+            <Affairs
+                data={filteredAffairs}
+                setFilter={setFilter}
+                deleteAffairCallback={deleteAffairCallback}
+                filter={filter}
+            />
+
+            <hr/>
+            {/*можно убрать этот тег*/}
+            <hr/>
+            {/*можно убрать этот тег*/}
+        </div>
+    )
+}
+
+export default HW2

src/s2-homeworks/hw02/tests/deleteAffair.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import {AffairType, deleteAffair} from '../HW2'
+
+let initialState: AffairType[]
+
+beforeEach(() => {
+    initialState = [
+        {_id: 1, name: 'React', priority: 'high'},
+        {_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: 6, name: 'porn', priority: 'low'},
+    ]
+})
+
+test('delete 0', () => {
+    const newState = deleteAffair(initialState, 0)
+    expect(newState.length).toBe(6)
+})
+test('delete 1', () => {
+    const newState = deleteAffair(initialState, 1)
+    expect(newState.length).toBe(5)
+})
+test('delete 3', () => {
+    const newState = deleteAffair(initialState, 3)
+    expect(newState.length).toBe(5)
+})
+test('delete 6', () => {
+    const newState = deleteAffair(initialState, 6)
+    expect(newState.length).toBe(5)
+})
+test('delete 7', () => {
+    const newState = deleteAffair(initialState, 7)
+    expect(newState.length).toBe(6)
+})

src/s2-homeworks/hw02/tests/filterAffairs.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import {AffairType, filterAffairs} from '../HW2'
+
+let initialState: AffairType[]
+
+beforeEach(() => {
+    initialState = [
+        {_id: 1, name: 'React', priority: 'high'},
+        {_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: 6, name: 'porn', priority: 'low'},
+    ]
+})
+
+test('filter by all', () => {
+    const newState = filterAffairs(initialState, 'all')
+    expect(newState.length).toBe(6)
+})
+test('filter by high', () => {
+    const newState = filterAffairs(initialState, 'high')
+    expect(newState.length).toBe(2)
+})
+test('filter by middle', () => {
+    const newState = filterAffairs(initialState, 'middle')
+    expect(newState.length).toBe(1)
+})
+test('filter by low', () => {
+    const newState = filterAffairs(initialState, 'low')
+    expect(newState.length).toBe(3)
+})