hw8

src/s2-homeworks/hw05/pages/Junior.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import HW6 from '../../hw06/HW6'
 import HW7 from '../../hw07/HW7'
+import HW8 from '../../hw08/HW8'
 
 function Junior() {
     return (
@@ -8,7 +9,7 @@ function Junior() {
             junior page
             <HW6/>
             <HW7/>
-            {/*<HW8/>*/}
+            <HW8/>
             {/*<HW9/>*/}
         </div>
     )

src/s2-homeworks/hw08/HW8.module.css

@@ -0,0 +1,7 @@
+.item {
+    display: flex;
+    justify-content: space-between;
+    width: 200px;
+
+    margin-left: 10px;
+}

src/s2-homeworks/hw08/HW8.tsx

@@ -0,0 +1,58 @@
+import React, {useState} from 'react'
+import {homeWorkReducer} from './bll/homeWorkReducer'
+import s from './HW8.module.css'
+import s2 from '../../s1-main/App.module.css'
+import SuperButton from '../hw04/common/c2-SuperButton/SuperButton'
+import User from './User'
+
+export type UserType = { // need to fix any
+    _id: number
+    name: string
+    age: number
+}
+
+const initialPeople: UserType[] = [ // студенты могут поменять имя/возраст/количество объектов, _id должны быть целочисленные
+    {_id: 0, name: 'Кот', age: 3},
+    {_id: 1, name: 'Александр', age: 66},
+    {_id: 2, name: 'Коля', age: 16},
+    {_id: 3, name: 'Виктор', age: 44},
+    {_id: 4, name: 'Дмитрий', age: 40},
+    {_id: 5, name: 'Ирина', age: 55},
+]
+
+const HW8 = () => {
+    const [people, setPeople] = useState<UserType[]>(initialPeople) // need to fix any
+
+    // need to fix any
+    const finalPeople = people.map((u: UserType) => <User key={u._id} u={u}/>)
+
+    const sortUp = () => setPeople(homeWorkReducer(initialPeople, {type: 'sort', payload: 'up'})) // в алфавитном порядке a.name > b.name
+    const sortDown = () => setPeople(homeWorkReducer(initialPeople, {type: 'sort', payload: 'down'})) // в обратном порядке a.name < b.name
+    const check18 = () => setPeople(homeWorkReducer(initialPeople, {type: 'check', payload: 18})) // совершеннолетние
+
+    return (
+        <div id={'hw3'} className={s2.hw}>
+            <hr/>
+            {/*можно убрать этот тег*/}
+
+            <div className={s2.hwTitle}>homeworks 8</div>
+
+            <div id={'hw8-users'}>
+                {finalPeople}
+            </div>
+
+            <div>
+                <SuperButton id={'hw8-button-up'} onClick={sortUp}>sort up</SuperButton>
+                <SuperButton id={'hw8-button-down'} onClick={sortDown}>sort down</SuperButton>
+                <SuperButton id={'hw8-button-18'} onClick={check18}>check 18</SuperButton>
+            </div>
+
+            <hr/>
+            {/*можно убрать этот тег*/}
+            <hr/>
+            {/*можно убрать этот тег*/}
+        </div>
+    )
+}
+
+export default HW8

src/s2-homeworks/hw08/User.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import {UserType} from './HW8'
+import s from './HW8.module.css'
+
+// types
+type UserPropsType = {
+    u: UserType
+}
+
+const User: React.FC<UserPropsType> = ({u}) => {
+
+    return (
+        <div id={'hw8-user-' + u._id + '-' + u.age} className={s.item}>
+            <span id={'hw8-user-name-' + u._id}>{u.name}</span>
+            <span id={'hw8-user-age-' + u._id}>{u.age}</span>
+        </div>
+    )
+}
+
+export default User

src/s2-homeworks/hw08/bll/homeWorkReducer.ts

@@ -0,0 +1,21 @@
+import {UserType} from '../HW8'
+
+type ActionType = {type: 'sort', payload: 'up' | 'down'} | {type: 'check', payload: number}
+
+export const homeWorkReducer = (state: UserType[], action: ActionType): UserType[] => { // need to fix any
+    switch (action.type) { // делают студенты
+        case 'sort': {
+            const newState = [...state].sort((a, b) => {
+                if (a.name > b.name) return 1
+                else if (a.name < b.name) return -1
+                else return 0
+            })
+
+            return action.payload === 'up' ? newState : newState.reverse()
+        }
+        case 'check': {
+            return state.filter(a => a.age >= action.payload)
+        }
+        default: return state
+    }
+}

src/s2-homeworks/hw08/bll/tests/homeWorkReducer.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import {homeWorkReducer} from '../homeWorkReducer'
+import {UserType} from '../../HW8'
+
+let initialState: UserType[] // need to fix any
+
+beforeEach(() => {
+    initialState = [
+        {_id: 0, name: 'Кот', age: 3},
+        {_id: 1, name: 'Александр', age: 66},
+        {_id: 2, name: 'Коля', age: 16},
+        {_id: 3, name: 'Виктор', age: 44},
+        {_id: 4, name: 'Дмитрий', age: 40},
+        {_id: 5, name: 'Ирина', age: 55},
+    ]
+})
+
+test('sort name up', () => {
+    const newState = homeWorkReducer(initialState, {type: 'sort', payload: 'up'})
+
+    expect(newState[0]._id).toBe(1)
+})
+test('sort name down', () => {
+    const newState = homeWorkReducer(initialState, {type: 'sort', payload: 'down'})
+
+    expect(newState[0]._id).toBe(0)
+})
+test('check age 18', () => {
+    const newState = homeWorkReducer(initialState, {type: 'check', payload: 18})
+
+    expect(newState.length).toBe(4)
+})