diff --git a/src/s2-homeworks/hw14/HW14.tsx b/src/s2-homeworks/hw14/HW14.tsx index a963b9b..40c22ec 100644 --- a/src/s2-homeworks/hw14/HW14.tsx +++ b/src/s2-homeworks/hw14/HW14.tsx @@ -6,12 +6,11 @@ import SuperDebouncedInput from './common/c8-SuperDebouncedInput/SuperDebouncedI import {useSearchParams} from 'react-router-dom' /* -* 1 - дописать функцию onChangeTextCallback в SuperPagination +* 1 - дописать функцию onChangeTextCallback в SuperDebouncedInput * 2 - дописать функцию sendQuery в HW14 * 3 - дописать функцию onChangeText в HW14 -* 4 - показать текст во время загрузки -* 5 - сделать стили в соответствии с дизайном -* 6 - добавить HW14 в HW5/pages/JuniorPlus +* 4 - сделать стили в соответствии с дизайном +* 5 - добавить HW14 в HW5/pages/JuniorPlus * */ const getTechs = (find: string) => { @@ -82,15 +81,10 @@ const HW14 = () => { onDebouncedChange={sendQuery} /> - {/*делает студент*/} - {/*показать текст во время загрузки*/} -
{isLoading ? '...ищем' :
}
- {/**/} - {mappedTechs} diff --git a/src/s2-homeworks/hw15/HW15.module.css b/src/s2-homeworks/hw15/HW15.module.css index 164d37b..8a0ae1f 100644 --- a/src/s2-homeworks/hw15/HW15.module.css +++ b/src/s2-homeworks/hw15/HW15.module.css @@ -1,3 +1,23 @@ .tech { + width: 50vw; +} +.developer { + +} + +.techHeader { + width: 50vw; +} + +.developerHeader { + +} + +.row { + display: flex; +} + +.rowHeader { + display: flex; } \ No newline at end of file diff --git a/src/s2-homeworks/hw15/HW15.tsx b/src/s2-homeworks/hw15/HW15.tsx index 7a1b66e..2a556f4 100644 --- a/src/s2-homeworks/hw15/HW15.tsx +++ b/src/s2-homeworks/hw15/HW15.tsx @@ -4,12 +4,13 @@ import s from './HW15.module.css' import axios from 'axios' import SuperPagination from './common/c9-SuperPagination/SuperPagination' import {useSearchParams} from 'react-router-dom' -import SuperButton from "../hw04/common/c2-SuperButton/SuperButton"; +import SuperSort from './common/c10-SuperSort/SuperSort' /* * 1 - дописать SuperPagination -* 2 - дописать функцию send в HW15 -* 3 - дописать функцию onChangeText в HW15 +* 2 - дописать SuperSort +* 3 - проверить pureChange тестами +* 3 - дописать sendQuery, onChangePagination, onChangeSort * 4 - сделать стили в соответствии с дизайном * 5 - добавить HW15 в HW5/pages/JuniorPlus * */ @@ -53,7 +54,7 @@ const HW15 = () => { }) } - const onChange = (newPage: number, newCount: number) => { + const onChangePagination = (newPage: number, newCount: number) => { // делает студент setPage(newPage) @@ -62,8 +63,24 @@ const HW15 = () => { const countQuery: { count?: string } = newCount !== 4 ? {count: newCount + ''} : {} // если стандарт - то не записывать в урл const {count, page, ...lastQueries} = Object.fromEntries(searchParams) - sendQuery({page: newPage || '', count: newCount || ''}) - setSearchParams({...lastQueries, ...pageQuery, ...countQuery}) + const allQuery = {...lastQueries, ...pageQuery, ...countQuery} + sendQuery(allQuery) + setSearchParams(allQuery) + + // + } + + const onChangeSort = (newSort: string) => { + // делает студент + + setSort(newSort) + setPage(1) // при сортировке сбрасывать на 1 страницу + const sortQuery: { sort?: string } = newSort !== '' ? {sort: newSort} : {} // если стандарт - то не записывать в урл + const {sort, page, ...lastQueries} = Object.fromEntries(searchParams) + + const allQuery = {...lastQueries, ...sortQuery} + sendQuery(allQuery) + setSearchParams(allQuery) // } @@ -76,14 +93,14 @@ const HW15 = () => { }, []) const mappedTechs = techs.map(t => ( -
- +
+
{t.tech} - - ----- - +
+ +
{t.developer} - +
)) @@ -94,42 +111,21 @@ const HW15 = () => {
- таблица: +
+
+ tech + +
-
- tech - setSort(sort === '1tech' - ? '0tech' - : sort == '0tech' - ? '' - : '1tech')} - > - {sort === '1tech' - ? '\\/' - : sort === '0tech' - ? '/\\' - : '-'} - - developer - setSort(sort === '1developer' - ? '0developer' - : sort === '0developer' - ? '' - : '1developer')} - > - {sort === '1developer' - ? '\\/' - : sort === '0developer' - ? '/\\' - : '-'} - +
+ developer + +
{mappedTechs} diff --git a/src/s2-homeworks/hw15/common/c10-SuperSort/SuperSort.tsx b/src/s2-homeworks/hw15/common/c10-SuperSort/SuperSort.tsx new file mode 100644 index 0000000..3300103 --- /dev/null +++ b/src/s2-homeworks/hw15/common/c10-SuperSort/SuperSort.tsx @@ -0,0 +1,57 @@ +import React from 'react' + +// добавить в проект иконки и импортировать +const downIcon = '[\\/]' +const upIcon = '[/\\]' +const noneIcon = '[--]' + +export type SuperSortPropsType = { + id?: string + sort: string + value: string + onChange: (newSort: string) => void +} + +export const pureChange = (sort: string, down: string, up: string) => { + // пишет студент, sort: (click) => down (click) => up (click) => '' (click) => down ... + return sort === down + ? up + : sort == up + ? '' + : down +} + +const SuperSort: React.FC = ( + { + sort, value, onChange, id = 'hw15', + } +) => { + const up = '0' + value + const down = '1' + value + + const onChangeCallback = () => { + onChange(pureChange(sort, down, up)) + } + + const icon = sort === down + ? downIcon + : sort === up + ? upIcon + : noneIcon + + return ( + + {/*сделать иконку*/} + {/**/} + {icon} + + ) +} + +export default SuperSort diff --git a/src/s2-homeworks/hw15/common/c10-SuperSort/test/pureChange.test.tsx b/src/s2-homeworks/hw15/common/c10-SuperSort/test/pureChange.test.tsx new file mode 100644 index 0000000..bed57eb --- /dev/null +++ b/src/s2-homeworks/hw15/common/c10-SuperSort/test/pureChange.test.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import {pureChange} from '../SuperSort' + +test('sort ""', () => { + const newSort = pureChange('', '1a', '0a') + expect(newSort).toBe('1a') +}) +test('sort "1a"', () => { + const newSort = pureChange('1a', '1a', '0a') + expect(newSort).toBe('0a') +}) +test('sort "0a"', () => { + const newSort = pureChange('0a', '1a', '0a') + expect(newSort).toBe('') +}) +test('sort "1b"', () => { + const newSort = pureChange('1b', '1a', '0a') + expect(newSort).toBe('1a') +}) diff --git a/src/s2-homeworks/hw15/common/c9-SuperPagination/SuperPagination.module.css b/src/s2-homeworks/hw15/common/c9-SuperPagination/SuperPagination.module.css new file mode 100644 index 0000000..4c9ff6a --- /dev/null +++ b/src/s2-homeworks/hw15/common/c9-SuperPagination/SuperPagination.module.css @@ -0,0 +1,11 @@ +.pagination { + display: flex; +} + +.text1 { + +} + +.text2 { + +} diff --git a/src/s2-homeworks/hw15/common/c9-SuperPagination/SuperPagination.tsx b/src/s2-homeworks/hw15/common/c9-SuperPagination/SuperPagination.tsx index 2c7da6a..0351f19 100644 --- a/src/s2-homeworks/hw15/common/c9-SuperPagination/SuperPagination.tsx +++ b/src/s2-homeworks/hw15/common/c9-SuperPagination/SuperPagination.tsx @@ -1,72 +1,61 @@ import React from 'react' -import SuperButton from '../../../hw04/common/c2-SuperButton/SuperButton' import SuperSelect from '../../../hw07/common/c5-SuperSelect/SuperSelect' +import {Pagination} from '@mui/material' +import s from './SuperPagination.module.css' export type SuperPaginationPropsType = { id?: string page: number - count: number + itemsCountForPage: number totalCount: number onChange: (page: number, count: number) => void } const SuperPagination: React.FC = ( { - page, count, totalCount, onChange, id = 'hw15', + page, itemsCountForPage, totalCount, onChange, id = 'hw15', } ) => { - let pages = [] - const lastPage = Math.ceil(totalCount / count) + // const lastPage = 10 // пишет студент + const lastPage = Math.ceil(totalCount / itemsCountForPage) // решение - for (let i = 1; i <= lastPage; i++) pages.push(( - onChange(i, count)} - xType={i === page ? undefined : 'secondary'} - - > - {i} - - )) - - // 1 ... 4 5 (6) 7 8 ... 11 // выбрана страница 6 - // 1 2 3 4 (5) 6 7 ... 11 // выбрана страница 5 - // делает студент - - if ((page + 4) < lastPage) { - pages[page + 2] = ( - - {' ... '} - - ) - pages = pages.filter((p, i) => i < (page + 3) || i === (lastPage - 1)) + const onChangeCallback = (event: any, page: number) => { + onChange(page, itemsCountForPage) // пишет студент } - if (page > 5) { - pages[1] = ( - - {' ... '} - - ) - pages = pages.filter((p, i) => i < 2 || i > page - 4) - } - - // return ( -
+
+ + + + показать + + onChange(page, Number(e.currentTarget.value))} + onChange={e => onChange(page, Number(e.currentTarget.value))} /> - {pages} + + строк в таблице +
) }