hw10

2025-12-17 20:39:22 +00:00 · 2022-06-15 13:14:32 +03:00
parent b22468011d
commit 7bfb635a37
7 changed files with 141 additions and 4 deletions
--- a/package.json
+++ b/package.json
@@ -15,8 +15,10 @@
    "gh-pages": "^4.0.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
+    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
+    "redux": "^4.2.0",
    "typescript": "^4.4.2",
    "uuid": "^8.3.2",
    "web-vitals": "^2.1.0"
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,13 +3,17 @@ import ReactDOM from 'react-dom/client'
 import './index.css'
 import App from './s1-main/App'
 import reportWebVitals from './reportWebVitals'
+import {Provider} from 'react-redux'
+import store from './s2-homeworks/hw10/bll/store'

 const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
 )
 root.render(
    <React.StrictMode>
-        <App/>
+        <Provider store={store}>
+            <App/>
+        </Provider>
    </React.StrictMode>
 )

--- a/src/s2-homeworks/hw05/pages/JuniorPlus.tsx
+++ b/src/s2-homeworks/hw05/pages/JuniorPlus.tsx
@@ -1,10 +1,11 @@
 import React from 'react'
+import HW10 from '../../hw10/HW10'

 function JuniorPlus() {
    return (
        <div id={'hw5-page-junior-plus'}>
            junior plus page
-            {/*<HW10/>*/}
+            <HW10/>
            {/*<HW11/>*/}
            {/*<HW12/>*/}
            {/*<HW13/>*/}
--- a/src/s2-homeworks/hw10/HW10.tsx
+++ b/src/s2-homeworks/hw10/HW10.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import {useDispatch, useSelector} from 'react-redux'
+import {AppStoreType} from './bll/store'
+import {loadingAC} from './bll/loadingReducer'
+import SuperButton from '../hw04/common/c2-SuperButton/SuperButton'
+import s2 from '../../s1-main/App.module.css'
+
+const HW10 = () => {
+    // useSelector, useDispatch
+    const isLoading = useSelector<AppStoreType, boolean>((state: any) => state.loading.isLoading)
+    const dispatch = useDispatch()
+
+    const setLoading = () => {
+        // dispatch
+        dispatch(loadingAC(true))
+
+        // setTimeout
+        setTimeout(() => {
+            dispatch(loadingAC(false))
+        }, 1500)
+        // console.log('loading...')
+    }
+
+    return (
+        <div id={'hw10'} className={s2.hw}>
+            <hr/>
+            {/*можно убрать этот тег*/}
+
+            {/*should work (должно работать)*/}
+            {isLoading
+                ? (
+                    <div id={'hw10-loading'}>крутилка...</div>
+                ) : (
+                    <div>
+                        <SuperButton id={'hw10-button-start-loading'} onClick={setLoading}>set loading...</SuperButton>
+                    </div>
+                )
+            }
+
+            <hr/>
+            {/*можно убрать этот тег*/}
+            <hr/>
+            {/*можно убрать этот тег*/}
+        </div>
+    )
+}
+
+export default HW10
--- a/src/s2-homeworks/hw10/bll/loadingReducer.ts
+++ b/src/s2-homeworks/hw10/bll/loadingReducer.ts
@@ -0,0 +1,22 @@
+const initState = {
+    isLoading: false
+}
+
+export const loadingReducer = (state = initState, action: LoadingActionType): typeof initState=> { // fix any
+    switch (action.type) {
+        case 'CHANGE_LOADING': {
+            return {
+                ...state,
+                isLoading: action.isLoading
+            }
+        }
+        default: return state
+    }
+}
+
+type LoadingActionType = {
+    type: 'CHANGE_LOADING'
+    isLoading: boolean
+}
+
+export const loadingAC = (isLoading: boolean): LoadingActionType => ({type: 'CHANGE_LOADING', isLoading}) // fix any
--- a/src/s2-homeworks/hw10/bll/store.ts
+++ b/src/s2-homeworks/hw10/bll/store.ts
@@ -0,0 +1,16 @@
+import {loadingReducer} from './loadingReducer'
+import {combineReducers, legacy_createStore} from 'redux'
+
+const reducers = combineReducers({
+    loading: loadingReducer,
+
+})
+
+const store = legacy_createStore(reducers)
+
+export default store
+
+export type AppStoreType = ReturnType<typeof reducers>
+
+// @ts-ignore
+window.store = store // for dev // может для проверки работы стора задиспатчить экшн через консоль? // store.dispatch({type:'CHANGE_LOADING', isLoading: true})
--- a/yarn.lock
+++ b/yarn.lock
@@ -1035,7 +1035,7 @@
  dependencies:
    regenerator-runtime "^0.13.4"

-"@babel/runtime@^7.7.6":
+"@babel/runtime@^7.12.1", "@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==
@@ -1863,6 +1863,14 @@
  dependencies:
    "@types/node" "*"

+"@types/hoist-non-react-statics@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/html-minifier-terser@^6.0.0":
  version "6.1.0"
  resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
@@ -2029,6 +2037,11 @@
  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756"
  integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==

+"@types/use-sync-external-store@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
+  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+
 "@types/uuid@^8.3.4":
  version "8.3.4"
  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc"
@@ -4706,6 +4719,13 @@ history@^5.2.0:
  dependencies:
    "@babel/runtime" "^7.7.6"

+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hoopy@^0.1.4:
  version "0.1.4"
  resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@@ -7275,7 +7295,7 @@ react-error-overlay@^6.0.11:
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
  integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==

-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -7290,6 +7310,18 @@ react-is@^18.0.0:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67"
  integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==

+react-redux@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.2.tgz#bc2a304bb21e79c6808e3e47c50fe1caf62f7aad"
+  integrity sha512-nBwiscMw3NoP59NFCXFf02f8xdo+vSHT/uZ1ldDwF7XaTpzm+Phk97VT4urYBl5TYAPNVaFm12UHAEyzkpNzRA==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/use-sync-external-store" "^0.0.3"
+    hoist-non-react-statics "^3.3.2"
+    react-is "^18.0.0"
+    use-sync-external-store "^1.0.0"
+
 react-refresh@^0.11.0:
  version "0.11.0"
  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
@@ -7416,6 +7448,13 @@ redent@^3.0.0:
    indent-string "^4.0.0"
    strip-indent "^3.0.0"

+redux@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"
+  integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 regenerate-unicode-properties@^10.0.1:
  version "10.0.1"
  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz#7f442732aa7934a3740c779bb9b3340dccc1fb56"
@@ -8493,6 +8532,11 @@ uri-js@^4.2.2:
  dependencies:
    punycode "^2.1.0"

+use-sync-external-store@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"