final ref hw2

src/s1-main/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import s from './App.module.css'
 import HW1 from '../s2-homeworks/hw01/HW1'
+import HW2 from '../s2-homeworks/hw02/HW2'
 
 function App() {
     // для дз 12
@@ -15,7 +16,7 @@ function App() {
             // data-theme={themeId} // для дз 12
         >
             <HW1/>
-            {/*<HW2/>*/}
+            <HW2/>
             {/*<HW3/>*/}
             {/*<HW4/>*/}
 

src/s2-homeworks/hw02/Affair.tsx

@@ -4,8 +4,8 @@ import s from './Affairs.module.css'
 
 type AffairPropsType = {
     // key не нужно типизировать
-    affair: any // AffairType // need to fix any
+    affair: AffairType
-    deleteAffairCallback: any // (id: number) => void // need to fix any
+    deleteAffairCallback: any // need to fix any
 }
 
 function Affair(props: AffairPropsType) {

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

@@ -15,17 +15,20 @@
 }
 
 .button {
+    padding: 5px 15px;
+
     background: transparent;
+    color: var(--color);
+
+    cursor: pointer;
     border: 1px solid var(--color);
     border-radius: 15px;
-    color: var(--color);
     outline: none;
-    padding: 5px 15px;
+
     font-family: 'Montserrat', sans-serif;
     font-weight: 600;
     font-size: 14px;
     line-height: 20px;
-    cursor: pointer;
 }
 
 .button:active {
@@ -41,8 +44,9 @@
 .affair {
     display: flex;
     align-items: center;
-    border: 1.5px solid var(--color);
     width: 185px;
+
+    border: 1.5px solid var(--color);
     border-radius: 5px;
 }
 

src/s2-homeworks/hw02/Affairs.tsx

@@ -1,26 +1,16 @@
-import React, { SetStateAction, Dispatch } from 'react'
+import React 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 // need to fix any
-    data: any // AffairType[]
+    setFilter: any
-    setFilter: any // (filter: FilterType) => void
+    deleteAffairCallback: any
-    // setFilter: Dispatch<SetStateAction<FilterType>>
+    filter: 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
@@ -33,9 +23,6 @@ function Affairs(props: AffairsPropsType) {
     const setLow = () => {
         props.setFilter('low') // создаёт студент
     }
-    // const set = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    //     props.setFilter(e.currentTarget.value as FilterType)
-    // }
 
     const cnAll =
         s.button + ' ' + s.all + ' ' + (props.filter === 'all' ? s.active : '')
@@ -53,9 +40,14 @@ function Affairs(props: AffairsPropsType) {
         (props.filter === 'middle' ? s.active : '')
     const cnLow =
         s.button + ' ' + s.low + ' ' + (props.filter === 'low' ? s.active : '')
-    // const setClass = (filter: FilterType) => {
+
-    //     return s.button + (props.filter === filter ? ' ' + s.active : '')
+    const mappedAffairs = props.data.map((a: AffairType) => (
-    // }
+        <Affair
+            key={a._id} // кеи ОБЯЗАТЕЛЬНЫ в 99% - так что лучше их писать всегда при создании компонент в мапе
+            affair={a}
+            deleteAffairCallback={props.deleteAffairCallback}
+        />
+    ))
 
     return (
         <div>
@@ -90,10 +82,6 @@ function Affairs(props: AffairsPropsType) {
                 </button>
             </div>
             <div className={s.affairs}>{mappedAffairs}</div>
-            {/*<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>
     )
 }

src/s2-homeworks/hw02/AlternativeAffairs.tsx

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

src/s2-homeworks/hw02/HW2.tsx

@@ -1,20 +1,18 @@
 import React, { useState } from 'react'
 import Affairs from './Affairs'
-import s from './Affairs.module.css'
 import s2 from '../../s1-main/App.module.css'
 
 // types
-export type AffairPriorityType = any // 'high' | 'low' | 'middle' // need to fix any
+export type AffairPriorityType = any // need to fix any
 export type AffairType = {
-    _id: any // number // need to fix any
+    _id: any // need to fix any
-    name: any // string // need to fix any
+    name: any // need to fix any
     priority: AffairPriorityType
 }
 export type FilterType = 'all' | AffairPriorityType
 
 // constants
-const defaultAffairs: any = [
+const defaultAffairs: any = [ // need to fix 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' },
@@ -23,29 +21,22 @@ const defaultAffairs: any = [
 ]
 
 // pure helper functions
-export const filterAffairs = (affairs: any, filter: any): any => {
+export const filterAffairs = (affairs: any, filter: any): any => { // need to fix any
-    // need to fix any // (affairs: AffairType[], filter: FilterType): AffairType[]
+
-    if (filter === 'all') return affairs // создаёт студент
+    return affairs // need to fix
-    // 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 => {
+export const deleteAffair = (affairs: any, _id: any): any => { // need to fix any
-    // need to fix any // (affairs: AffairType[], _id: number): AffairType[]
+
-    return affairs.filter((a: any) => a._id !== _id) // need to fix // создаёт студент
+    return affairs // need to fix
 }
 
 function HW2() {
-    const [affairs, setAffairs] = useState<any>(defaultAffairs) // need to fix any // AffairType[]
+    const [affairs, setAffairs] = useState<any>(defaultAffairs) // need to fix any
-    const [filter, setFilter] = useState<any>('all') // need to fix any // FilterType
+    const [filter, setFilter] = useState<FilterType>('all')
 
     const filteredAffairs = filterAffairs(affairs, filter)
-    const deleteAffairCallback = (_id: any) =>
+    const deleteAffairCallback = (_id: any) => // need to fix any
-        setAffairs(deleteAffair(affairs, _id)) // need to fix any // number
+        setAffairs(deleteAffair(affairs, _id))
 
     return (
         <div id={'hw2'}>
@@ -58,7 +49,6 @@ function HW2() {
                     filter={filter}
                 />
             </div>
-            {/*не менять*/}
         </div>
     )
 }

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

@@ -10,27 +10,26 @@ beforeEach(() => {
         { _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)
+    expect(newState.length).toBe(5)
 })
 test('delete 1', () => {
     const newState = deleteAffair(initialState, 1)
-    expect(newState.length).toBe(5)
+    expect(newState.length).toBe(4)
 })
 test('delete 3', () => {
     const newState = deleteAffair(initialState, 3)
-    expect(newState.length).toBe(5)
+    expect(newState.length).toBe(4)
+})
+test('delete 5', () => {
+    const newState = deleteAffair(initialState, 5)
+    expect(newState.length).toBe(4)
 })
 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

@@ -10,13 +10,12 @@ beforeEach(() => {
         { _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)
+    expect(newState.length).toBe(5)
 })
 test('filter by high', () => {
     const newState = filterAffairs(initialState, 'high')
@@ -28,5 +27,5 @@ test('filter by middle', () => {
 })
 test('filter by low', () => {
     const newState = filterAffairs(initialState, 'low')
-    expect(newState.length).toBe(3)
+    expect(newState.length).toBe(2)
 })