ershisan99/home-works
1
0
Fork 0
mirror of https://github.com/IgnatZakalinsky/home-works.git synced 2025-12-16 20:39:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

hw15 final

Browse Source
This commit is contained in:
neko
2022-11-14 12:51:00 +03:00
parent 492baef96c
commit 25ca4cdd3b
7 changed files with 181 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/s2-homeworks/hw14/HW14.tsx
View File

@@ -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}
/>
{/*делает студент*/}
{/*показать текст во время загрузки*/}
<div id={'hw14-loading'} className={s.loading}>
{isLoading ? '...ищем' : <br/>}
</div>
{/**/}
{mappedTechs}
</div>
</div>

20
src/s2-homeworks/hw15/HW15.module.css
View File

@@ -1,3 +1,23 @@
.tech {
width: 50vw;
}
.developer {
}
.techHeader {
width: 50vw;
}
.developerHeader {
}
.row {
display: flex;
}
.rowHeader {
display: flex;
}

84
src/s2-homeworks/hw15/HW15.tsx
View File

@@ -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 => (
<div key={t.id} className={s.tech}>
<span id={'hw15-tech-' + t.id}>
<div key={t.id} className={s.row}>
<div id={'hw15-tech-' + t.id} className={s.tech}>
{t.tech}
</span>
-----
<span id={'hw15-developer-' + t.id}>
</div>
<div id={'hw15-developer-' + t.id} className={s.developer}>
{t.developer}
</span>
</div>
</div>
))
@@ -94,42 +111,21 @@ const HW15 = () => {
<div className={s2.hw}>
<SuperPagination
page={page}
count={count}
itemsCountForPage={count}
totalCount={totalCount}
onChange={onChange}
onChange={onChangePagination}
/>
таблица:
<div className={s.rowHeader}>
<div className={s.techHeader}>
tech
<SuperSort sort={sort} value={'tech'} onChange={onChangeSort}/>
</div>
<div>
tech
<SuperButton // позже СуперСорт
onClick={() => setSort(sort === '1tech'
? '0tech'
: sort == '0tech'
? ''
: '1tech')}
>
{sort === '1tech'
? '\\/'
: sort === '0tech'
? '/\\'
: '-'}
</SuperButton>
developer
<SuperButton
onClick={() => setSort(sort === '1developer'
? '0developer'
: sort === '0developer'
? ''
: '1developer')}
>
{sort === '1developer'
? '\\/'
: sort === '0developer'
? '/\\'
: '-'}
</SuperButton>
<div className={s.developerHeader}>
developer
<SuperSort sort={sort} value={'developer'} onChange={onChangeSort}/>
</div>
</div>
{mappedTechs}

57
src/s2-homeworks/hw15/common/c10-SuperSort/SuperSort.tsx Normal file
View File

@@ -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<SuperSortPropsType> = (
{
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 (
<span
id={id + '-sort-' + value}
onClick={onChangeCallback}
>
{/*сделать иконку*/}
{/*<img*/}
{/* id={id + '-icon-' + sort}*/}
{/* src={icon}*/}
{/*/>*/}
{icon}
</span>
)
}
export default SuperSort

19
src/s2-homeworks/hw15/common/c10-SuperSort/test/pureChange.test.tsx Normal file
View File

@@ -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')
})

11
src/s2-homeworks/hw15/common/c9-SuperPagination/SuperPagination.module.css Normal file
View File

@@ -0,0 +1,11 @@
.pagination {
display: flex;
}
.text1 {
}
.text2 {
}

73
src/s2-homeworks/hw15/common/c9-SuperPagination/SuperPagination.tsx
View File

@@ -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<SuperPaginationPropsType> = (
{
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((
<SuperButton
key={id + '-page-' + i}
id={id + '-page-' + i}
onClick={() => onChange(i, count)}
xType={i === page ? undefined : 'secondary'}
>
{i}
</SuperButton>
))
// 1 ... 4 5 (6) 7 8 ... 11 // выбрана страница 6
// 1 2 3 4 (5) 6 7 ... 11 // выбрана страница 5
// делает студент
if ((page + 4) < lastPage) {
pages[page + 2] = (
<span key={id + '-span-' + (page + 3)} id={id + '-span-' + (page + 3)}>
{' ... '}
</span>
)
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] = (
<span key={id + '-span-' + 2} id={id + '-span-' + 2}>
{' ... '}
</span>
)
pages = pages.filter((p, i) => i < 2 || i > page - 4)
}
//
return (
<div>
<div className={s.pagination}>
<Pagination
id={id + '-pagination'}
sx={{
// стили для Pagination // пишет студент
}}
page={page}
count={lastPage}
onChange={onChangeCallback}
hideNextButton
hidePrevButton
/>
<span className={s.text1}>
показать
</span>
<SuperSelect
value={count}
id={id + '-pagination-select'}
value={itemsCountForPage}
options={[
{id: 4, value: 4},
{id: 7, value: 7},
{id: 10, value: 10},
]}
onChange={e => onChange(page, Number(e.currentTarget.value))}
onChange={e => onChange(page, Number(e.currentTarget.value))}
/>
{pages}
<span className={s.text2}>
строк в таблице
</span>
</div>
)
}