hw5

2026-01-18 20:42:12 +00:00 · 2022-06-07 21:08:21 +03:00
parent d7e7ef9471
commit 4f91ec75cb
12 changed files with 248 additions and 16 deletions
--- 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",
--- 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>
    )
 }
--- 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)}
                    />
--- a/src/s2-homeworks/hw05/HW5.tsx
+++ 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
--- a/src/s2-homeworks/hw05/Header.module.css
+++ 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);
+}
--- a/src/s2-homeworks/hw05/Header.tsx
+++ 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
--- a/src/s2-homeworks/hw05/Pages.tsx
+++ 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
--- a/src/s2-homeworks/hw05/pages/Error404.tsx
+++ 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
--- a/src/s2-homeworks/hw05/pages/Junior.tsx
+++ 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
--- a/src/s2-homeworks/hw05/pages/JuniorPlus.tsx
+++ 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
--- a/src/s2-homeworks/hw05/pages/PreJunior.tsx
+++ 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
--- 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"