From 25ca4cdd3b3bb768590f7ee3c58b0ad7ae916293 Mon Sep 17 00:00:00 2001
From: neko <ai73a@yandex.ru>
Date: Mon, 14 Nov 2022 12:51:00 +0300
Subject: [PATCH] hw15 final

---
 src/s2-homeworks/hw14/HW14.tsx                | 12 +--
 src/s2-homeworks/hw15/HW15.module.css         | 20 +++++
 src/s2-homeworks/hw15/HW15.tsx                | 84 +++++++++----------
 .../hw15/common/c10-SuperSort/SuperSort.tsx   | 57 +++++++++++++
 .../c10-SuperSort/test/pureChange.test.tsx    | 19 +++++
 .../SuperPagination.module.css                | 11 +++
 .../c9-SuperPagination/SuperPagination.tsx    | 73 +++++++---------
 7 files changed, 181 insertions(+), 95 deletions(-)
 create mode 100644 src/s2-homeworks/hw15/common/c10-SuperSort/SuperSort.tsx
 create mode 100644 src/s2-homeworks/hw15/common/c10-SuperSort/test/pureChange.test.tsx
 create mode 100644 src/s2-homeworks/hw15/common/c9-SuperPagination/SuperPagination.module.css

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