diff --git a/src/s1-main/App.tsx b/src/s1-main/App.tsx index f0afb9b..67d92cf 100644 --- a/src/s1-main/App.tsx +++ b/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 > - {/**/} + {/**/} {/**/} diff --git a/src/s2-homeworks/hw02/Affair.tsx b/src/s2-homeworks/hw02/Affair.tsx index 77c7f1a..3b36d20 100644 --- a/src/s2-homeworks/hw02/Affair.tsx +++ b/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 - deleteAffairCallback: any // (id: number) => void // need to fix any + affair: AffairType + deleteAffairCallback: any // need to fix any } function Affair(props: AffairPropsType) { diff --git a/src/s2-homeworks/hw02/Affairs.module.css b/src/s2-homeworks/hw02/Affairs.module.css index 7f37c83..2a15e29 100644 --- a/src/s2-homeworks/hw02/Affairs.module.css +++ b/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; } diff --git a/src/s2-homeworks/hw02/Affairs.tsx b/src/s2-homeworks/hw02/Affairs.tsx index 1368961..9b8d629 100644 --- a/src/s2-homeworks/hw02/Affairs.tsx +++ b/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 // AffairType[] - setFilter: any // (filter: FilterType) => void - // setFilter: Dispatch> - deleteAffairCallback: any // (id: number) => void - filter: any // FilterType + data: any // need to fix any + setFilter: any + deleteAffairCallback: any + filter: FilterType } function Affairs(props: AffairsPropsType) { - const mappedAffairs = props.data.map((a: AffairType) => ( - - )) - 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) => { - // 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) => ( + + )) return (
@@ -90,10 +82,6 @@ function Affairs(props: AffairsPropsType) {
{mappedAffairs}
- {/**/} - {/**/} - {/**/} - {/**/} ) } diff --git a/src/s2-homeworks/hw02/AlternativeAffairs.tsx b/src/s2-homeworks/hw02/AlternativeAffairs.tsx deleted file mode 100644 index f65f21a..0000000 --- a/src/s2-homeworks/hw02/AlternativeAffairs.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' - -function AlternativeAffairs() { - return
-} - -export default AlternativeAffairs diff --git a/src/s2-homeworks/hw02/HW2.tsx b/src/s2-homeworks/hw02/HW2.tsx index a5aefd0..fda4a1f 100644 --- a/src/s2-homeworks/hw02/HW2.tsx +++ b/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 - name: any // string // need to fix any + _id: any // need to fix any + name: any // need to fix any priority: AffairPriorityType } export type FilterType = 'all' | AffairPriorityType // constants -const defaultAffairs: any = [ - // need to fix any // AffairType[] +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' }, @@ -23,29 +21,22 @@ const defaultAffairs: any = [ ] // 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 filterAffairs = (affairs: any, filter: any): any => { // need to fix any + + return affairs // 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 // создаёт студент +export const deleteAffair = (affairs: any, _id: any): any => { // need to fix any + + return affairs // need to fix } function HW2() { - const [affairs, setAffairs] = useState(defaultAffairs) // need to fix any // AffairType[] - const [filter, setFilter] = useState('all') // need to fix any // FilterType + const [affairs, setAffairs] = useState(defaultAffairs) // need to fix any + const [filter, setFilter] = useState('all') const filteredAffairs = filterAffairs(affairs, filter) - const deleteAffairCallback = (_id: any) => - setAffairs(deleteAffair(affairs, _id)) // need to fix any // number + const deleteAffairCallback = (_id: any) => // need to fix any + setAffairs(deleteAffair(affairs, _id)) return (
@@ -58,7 +49,6 @@ function HW2() { filter={filter} />
- {/*не менять*/} ) } diff --git a/src/s2-homeworks/hw02/tests/deleteAffair.test.tsx b/src/s2-homeworks/hw02/tests/deleteAffair.test.tsx index 066022a..a2e9321 100644 --- a/src/s2-homeworks/hw02/tests/deleteAffair.test.tsx +++ b/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) -}) diff --git a/src/s2-homeworks/hw02/tests/filterAffairs.test.tsx b/src/s2-homeworks/hw02/tests/filterAffairs.test.tsx index 91074a8..90effc8 100644 --- a/src/s2-homeworks/hw02/tests/filterAffairs.test.tsx +++ b/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) })