final ref hw8

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

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

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

@@ -20,15 +20,18 @@
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-    width: max-content;
     gap: 20px;
+    width: max-content;
+    height: 400px;
 }
 
 .thead {
+    height: 36px;
     padding-left: 17px;
+
     background-color: #E5E5E5;
     border: none;
-    height: 36px;
+
     font-weight: 600;
     font-size: 14px;
     line-height: 16px;

src/s2-homeworks/hw08/HW8.tsx

@@ -5,8 +5,13 @@ import s2 from '../../s1-main/App.module.css'
 import SuperButton from '../hw04/common/c2-SuperButton/SuperButton'
 import User from './User'
 
+/*
+* 1 - дописать типы и логику (сортировка по имени, фильтрация по совершеннолетию) homeWorkReducer, проверить тестом
+* 2 - дописать компоненту User
+* 3 - сделать стили в соответствии с дизайном
+* */
+
 export type UserType = {
-    // need to fix any
     _id: number
     name: string
     age: number
@@ -23,9 +28,9 @@ const initialPeople: UserType[] = [
 ]
 
 const HW8 = () => {
-    const [people, setPeople] = useState<UserType[]>(initialPeople) // need to fix any
+    const [people, setPeople] = useState<UserType[]>(initialPeople)
     const [currentSort, setCurrentSort] = useState('')
-    // need to fix any
+
     const finalPeople = people.map((u: UserType) => <User key={u._id} u={u}/>)
 
     const sortUp = () => {
@@ -77,7 +82,6 @@ const HW8 = () => {
                         </SuperButton>
                     </div>
 
-
                     <table id={'hw8-users'} className={s.users}>
                         <thead className={s.thead}>
                         <tr>
@@ -85,6 +89,7 @@ const HW8 = () => {
                             <td className={s.ageCol}>Age</td>
                         </tr>
                         </thead>
+
                         <tbody>{finalPeople}</tbody>
                     </table>
                 </div>

src/s2-homeworks/hw08/User.tsx

@@ -11,9 +11,13 @@ const User: React.FC<UserPropsType> = ({ u }) => {
     return (
         <tr id={'hw8-user-' + u._id + '-' + u.age} className={s.item}>
             <td id={'hw8-user-name-' + u._id} className={s.nameCol}>
+                {/*отобразить имя*/}
                 {u.name}
             </td>
-            <td id={'hw8-user-age-' + u._id}>{u.age}</td>
+            <td id={'hw8-user-age-' + u._id}>
+                {/*отобразить возраст*/}
+                {u.age}
+            </td>
         </tr>
     )
 }

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

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