From 4f91ec75cbfb14e2f4ec217507dcb1029f5b10ab Mon Sep 17 00:00:00 2001
From: neko <ai73a@yandex.ru>
Date: Tue, 7 Jun 2022 21:08:21 +0300
Subject: [PATCH] hw5

---
 package.json                               |  1 +
 src/s1-main/App.tsx                        | 17 +++++----
 src/s2-homeworks/hw04/Stand.tsx            | 16 ++++----
 src/s2-homeworks/hw05/HW5.tsx              | 21 +++++++++++
 src/s2-homeworks/hw05/Header.module.css    | 39 ++++++++++++++++++++
 src/s2-homeworks/hw05/Header.tsx           | 43 ++++++++++++++++++++++
 src/s2-homeworks/hw05/Pages.tsx            | 36 ++++++++++++++++++
 src/s2-homeworks/hw05/pages/Error404.tsx   | 13 +++++++
 src/s2-homeworks/hw05/pages/Junior.tsx     | 15 ++++++++
 src/s2-homeworks/hw05/pages/JuniorPlus.tsx | 15 ++++++++
 src/s2-homeworks/hw05/pages/PreJunior.tsx  | 19 ++++++++++
 yarn.lock                                  | 29 +++++++++++++++
 12 files changed, 248 insertions(+), 16 deletions(-)
 create mode 100644 src/s2-homeworks/hw05/HW5.tsx
 create mode 100644 src/s2-homeworks/hw05/Header.module.css
 create mode 100644 src/s2-homeworks/hw05/Header.tsx
 create mode 100644 src/s2-homeworks/hw05/Pages.tsx
 create mode 100644 src/s2-homeworks/hw05/pages/Error404.tsx
 create mode 100644 src/s2-homeworks/hw05/pages/Junior.tsx
 create mode 100644 src/s2-homeworks/hw05/pages/JuniorPlus.tsx
 create mode 100644 src/s2-homeworks/hw05/pages/PreJunior.tsx

diff --git a/package.json b/package.json
index 0926812..433da5a 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "gh-pages": "^4.0.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.4.2",
     "uuid": "^8.3.2",
diff --git a/src/s1-main/App.tsx b/src/s1-main/App.tsx
index 56214e4..44b2223 100644
--- a/src/s1-main/App.tsx
+++ b/src/s1-main/App.tsx
@@ -1,21 +1,22 @@
 import React from 'react'
 import s from './App.module.css'
 import HW1 from '../s2-homeworks/hw01/HW1'
-import HW2 from '../s2-homeworks/hw02/HW2'
-import HW3 from '../s2-homeworks/hw03/HW3'
-import HW4 from '../s2-homeworks/hw04/HW4'
+// import HW2 from '../s2-homeworks/hw02/HW2'
+// import HW3 from '../s2-homeworks/hw03/HW3'
+// import HW4 from '../s2-homeworks/hw04/HW4'
+import HW5 from '../s2-homeworks/hw05/HW5'
 
 const App = () => {
     return (
         <div className={s.App}>
             <div>react homeworks:</div>
 
-            <HW1/>
-            <HW2/>
-            <HW3/>
-            <HW4/>
-
+            {/*<HW1/>*/}
+            {/*<HW2/>*/}
+            {/*<HW3/>*/}
+            {/*<HW4/>*/}
 
+            <HW5/>
         </div>
     )
 }
diff --git a/src/s2-homeworks/hw04/Stand.tsx b/src/s2-homeworks/hw04/Stand.tsx
index c57a28f..360384c 100644
--- a/src/s2-homeworks/hw04/Stand.tsx
+++ b/src/s2-homeworks/hw04/Stand.tsx
@@ -11,12 +11,12 @@ const Stand = () => {
     const [stateForAllCheckboxes, setChecked] = useState(false)
 
     return (
-        <div className={s.stand}>
+        <div id={'hw4-stand'} className={s.stand}>
             <div className={s.inputs}>
                 инпут с ошибкой:
                 <div>
                     <SuperInputText
-                        id={'super-input-with-error'}
+                        id={'hw4-super-input-with-error'}
                         value={stateForAllInputs}
                         onChangeText={setValue}
                         error={error}
@@ -29,7 +29,7 @@ const Stand = () => {
                 совместим со старым кодом
                 <div>
                     <SuperInputText
-                        id={'super-input-like-old'}
+                        id={'hw4-super-input-like-old'}
                         value={stateForAllInputs}
                         onChange={e => setValue(e.currentTarget.value)}
                     />
@@ -39,15 +39,15 @@ const Stand = () => {
             <div className={s.buttons}>
                 обычная кнопка:
                 <div>
-                    <SuperButton id={'super-button-default'}>default</SuperButton>
+                    <SuperButton id={'hw4-super-button-default'}>default</SuperButton>
                 </div>
                 красная кнопка:
                 <div>
-                    <SuperButton id={'super-button-red'} xType={'red'}>red</SuperButton>
+                    <SuperButton id={'hw4-super-button-red'} xType={'red'}>red</SuperButton>
                 </div>
                 задизэйбленная кнопка:
                 <div>
-                    <SuperButton id={'super-button-disabled'} xType={'red'} disabled>disabled</SuperButton>
+                    <SuperButton id={'hw4-super-button-disabled'} xType={'red'} disabled>disabled</SuperButton>
                 </div>
 
             </div>
@@ -56,7 +56,7 @@ const Stand = () => {
                 чекбокс с текстом:
                 <div>
                     <SuperCheckbox
-                        id={'super-checkbox-with-text'}
+                        id={'hw4-super-checkbox-with-text'}
                         checked={stateForAllCheckboxes}
                         onChangeChecked={setChecked}
                     >
@@ -66,7 +66,7 @@ const Stand = () => {
                 совместим со старым кодом
                 <div>
                     <SuperCheckbox
-                        id={'super-checkbox-like-old'}
+                        id={'hw4-super-checkbox-like-old'}
                         checked={stateForAllCheckboxes}
                         onChange={e => setChecked(e.currentTarget.checked)}
                     />
diff --git a/src/s2-homeworks/hw05/HW5.tsx b/src/s2-homeworks/hw05/HW5.tsx
new file mode 100644
index 0000000..6aa155c
--- /dev/null
+++ b/src/s2-homeworks/hw05/HW5.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import Header from './Header'
+import Pages from './Pages'
+import {HashRouter} from 'react-router-dom'
+
+function HW5() {
+    return (
+        <div>
+            {/*в gh-pages лучше работает HashRouter*/}
+            <HashRouter>
+
+            <Header/>
+
+            <Pages/>
+
+            </HashRouter>
+        </div>
+    )
+}
+
+export default HW5
diff --git a/src/s2-homeworks/hw05/Header.module.css b/src/s2-homeworks/hw05/Header.module.css
new file mode 100644
index 0000000..87d0be7
--- /dev/null
+++ b/src/s2-homeworks/hw05/Header.module.css
@@ -0,0 +1,39 @@
+.link {
+    text-decoration: none;
+    color: #7af;
+    margin: 10px;
+}
+
+.link:hover {
+    color: #c9f;
+}
+
+.active {
+    color: #5ff;
+}
+
+.burgerMenu {
+    width: 21px;
+    height: 21px;
+
+    margin: 10px;
+
+    background: #99ff99;
+}
+
+.header {
+    display: flex;
+    justify-content: flex-end;
+
+    width: 280px;
+}
+
+.showMenu {
+    transition-duration: 500ms;
+    transform: translate(0);
+}
+
+.hideMenu {
+    transition-duration: 500ms;
+    transform: translate(-220px);
+}
\ No newline at end of file
diff --git a/src/s2-homeworks/hw05/Header.tsx b/src/s2-homeworks/hw05/Header.tsx
new file mode 100644
index 0000000..c3ef5dd
--- /dev/null
+++ b/src/s2-homeworks/hw05/Header.tsx
@@ -0,0 +1,43 @@
+import React, {useState} from 'react'
+import {NavLink} from 'react-router-dom'
+import {PATH} from './Pages'
+import s from './Header.module.css'
+
+function Header() {
+    const [isShow, setShow] = useState(false)
+
+    // hw5-menu изначально отсутствует, при нажатии на бургер - появляется, при повторном нажатии исчезает
+    return (
+        <div id={'hw5-header'} className={s.header + ' ' + (isShow ? s.showMenu : s.hideMenu)}>
+            {isShow && (
+                <div id={'hw5-menu'} className={s.menu}>
+                    <NavLink
+                        id={'hw5-pre-junior-link'}
+                        to={PATH.PRE_JUNIOR}
+                        className={({isActive}) => isActive ? s.active : s.link} // делает студент
+                    >
+                        pre-junior
+                    </NavLink>
+                    <NavLink
+                        id={'hw5-junior-link'}
+                        to={PATH.JUNIOR}
+                        className={({isActive}) => isActive ? s.active : s.link} // делает студент
+                    >
+                        junior
+                    </NavLink>
+                    <NavLink
+                        id={'hw5-junior-plus-link'}
+                        to={PATH.JUNIOR_PLUS}
+                        className={({isActive}) => isActive ? s.active : s.link} // делает студент
+                    >
+                        junior+
+                    </NavLink>
+                </div>
+            )}
+
+            <div id={'hw5-burger-menu'} className={s.burgerMenu} onClick={() => setShow(!isShow)}/>
+        </div>
+    )
+}
+
+export default Header
diff --git a/src/s2-homeworks/hw05/Pages.tsx b/src/s2-homeworks/hw05/Pages.tsx
new file mode 100644
index 0000000..9e114fe
--- /dev/null
+++ b/src/s2-homeworks/hw05/Pages.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import {Routes, Route, Navigate} from 'react-router-dom'
+import Error404 from './pages/Error404'
+import PreJunior from './pages/PreJunior'
+import Junior from './pages/Junior'
+import JuniorPlus from './pages/JuniorPlus'
+
+export const PATH = {
+    PRE_JUNIOR: '/pre-junior',
+    JUNIOR: '/junior',
+    JUNIOR_PLUS: '/junior-plus',
+}
+
+function Pages() {
+    return (
+        <div>
+            {/*Routes выбирает первый подходящий роут*/}
+            <Routes>
+
+                {/*роутинг будут писать студенты*/}
+                {/*в начале мы попадаем на страницу '/' и переходим сразу на страницу PRE_JUNIOR*/}
+                <Route path={'/'} element={<Navigate to={PATH.PRE_JUNIOR}/>}/>
+
+                <Route path={PATH.PRE_JUNIOR} element={<PreJunior/>}/>
+                <Route path={PATH.JUNIOR} element={<Junior/>}/>
+                <Route path={PATH.JUNIOR_PLUS} element={<JuniorPlus/>}/>
+
+                {/*он отрисуется если пользователь захочет попасть на несуществующую страницу*/}
+                <Route path={'/*'} element={<Error404/>}/>
+
+            </Routes>
+        </div>
+    )
+}
+
+export default Pages
diff --git a/src/s2-homeworks/hw05/pages/Error404.tsx b/src/s2-homeworks/hw05/pages/Error404.tsx
new file mode 100644
index 0000000..d6cd306
--- /dev/null
+++ b/src/s2-homeworks/hw05/pages/Error404.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const Error404 = () => {
+    return (
+        <div id={'page-404'}>
+            <div>404</div>
+            <div>Page not found!</div>
+            <div>—ฅ/ᐠ.̫ .ᐟ\ฅ—</div>
+        </div>
+    )
+}
+
+export default Error404
diff --git a/src/s2-homeworks/hw05/pages/Junior.tsx b/src/s2-homeworks/hw05/pages/Junior.tsx
new file mode 100644
index 0000000..4966092
--- /dev/null
+++ b/src/s2-homeworks/hw05/pages/Junior.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+function Junior() {
+    return (
+        <div id={'hw5-page-junior'}>
+            junior page
+            {/*<HW6/>*/}
+            {/*<HW7/>*/}
+            {/*<HW8/>*/}
+            {/*<HW9/>*/}
+        </div>
+    )
+}
+
+export default Junior
\ No newline at end of file
diff --git a/src/s2-homeworks/hw05/pages/JuniorPlus.tsx b/src/s2-homeworks/hw05/pages/JuniorPlus.tsx
new file mode 100644
index 0000000..ca96c0f
--- /dev/null
+++ b/src/s2-homeworks/hw05/pages/JuniorPlus.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+function JuniorPlus() {
+    return (
+        <div id={'hw5-page-junior-plus'}>
+            junior plus page
+            {/*<HW10/>*/}
+            {/*<HW11/>*/}
+            {/*<HW12/>*/}
+            {/*<HW13/>*/}
+        </div>
+    )
+}
+
+export default JuniorPlus
\ No newline at end of file
diff --git a/src/s2-homeworks/hw05/pages/PreJunior.tsx b/src/s2-homeworks/hw05/pages/PreJunior.tsx
new file mode 100644
index 0000000..7a16ee5
--- /dev/null
+++ b/src/s2-homeworks/hw05/pages/PreJunior.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import HW1 from '../../hw01/HW1'
+import HW2 from '../../hw02/HW2'
+import HW3 from '../../hw03/HW3'
+import HW4 from '../../hw04/HW4'
+
+function PreJunior() {
+    return (
+        <div id={'hw5-page-pre-junior'}>
+            pre junior page
+            <HW1/>
+            <HW2/>
+            <HW3/>
+            <HW4/>
+        </div>
+    )
+}
+
+export default PreJunior
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index bebcda4..30ae382 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1035,6 +1035,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.7.6":
+  version "7.18.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
+  integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.16.7", "@babel/template@^7.3.3":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
@@ -4692,6 +4699,13 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+history@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
+  integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+
 hoopy@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@@ -7281,6 +7295,21 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
+react-router-dom@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.3.0.tgz#a0216da813454e521905b5fa55e0e5176123f43d"
+  integrity sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==
+  dependencies:
+    history "^5.2.0"
+    react-router "6.3.0"
+
+react-router@6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.3.0.tgz#3970cc64b4cb4eae0c1ea5203a80334fdd175557"
+  integrity sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==
+  dependencies:
+    history "^5.2.0"
+
 react-scripts@5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003"