final ref hw10

src/index.tsx

@@ -3,16 +3,16 @@ 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 { Provider } from 'react-redux'
-// import store from './s2-homeworks/hw10/bll/store'
+import store from './s2-homeworks/hw10/bll/store'
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(
     <React.StrictMode>
         {/*для дз 10*/}
-        {/*<Provider store={store}>*/}
+        <Provider store={store}>
         <App/>
-        {/*</Provider>*/}
+        </Provider>
     </React.StrictMode>
 )
 

src/s2-homeworks/hw05/pages/JuniorPlus.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-// import HW10 from '../../hw10/HW10'
+import HW10 from '../../hw10/HW10'
 // import HW11 from '../../hw11/HW11'
 // import HW12 from '../../hw12/HW12'
 // import HW13 from '../../hw13/HW13'
@@ -7,7 +7,7 @@ import React from 'react'
 function JuniorPlus() {
     return (
         <div id={'hw5-page-junior-plus'}>
-            {/*<HW10 />*/}
+            <HW10 />
             {/*<HW11 />*/}
             {/*<HW12 />*/}
             {/*<HW13 />*/}

src/s2-homeworks/hw10/HW10.tsx

@@ -1,19 +1,26 @@
 import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import {useDispatch, useSelector} from 'react-redux'
-import { AppStoreType } from './bll/store'
+import {AppStoreType} from './bll/store'
-import { loadingAC } from './bll/loadingReducer'
+import {loadingAC} from './bll/loadingReducer'
 import SuperButton from '../hw04/common/c2-SuperButton/SuperButton'
 import s2 from '../../s1-main/App.module.css'
-import { Loader } from './Loader'
+import {Loader} from './Loader'
+
+/*
+* 1 - в файле loadingReducer.ts дописать типы и логику
+* 2 - получить isLoading из редакса
+* 3 - дописать функцию setLoading
+* 4 - сделать стили в соответствии с дизайном
+* */
 
 const HW10 = () => {
-    // useSelector, useDispatch
+    // useSelector, useDispatch // пишет студент
     const isLoading = useSelector<AppStoreType, boolean>(
         (state: any) => state.loading.isLoading
     )
     const dispatch = useDispatch()
 
-    const setLoading = () => {
+    const setLoading = () => { // пишет студент // показать крутилку на 1,5 секунд
         // dispatch
         dispatch(loadingAC(true))
 
@@ -21,28 +28,24 @@ const HW10 = () => {
         setTimeout(() => {
             dispatch(loadingAC(false))
         }, 1500)
-        // console.log('loading...')
     }
 
     return (
         <div id={'hw10'}>
             <div className={s2.hwTitle}>Homework #10</div>
 
-            {/*should work (должно работать)*/}
             <div className={s2.hw}>
                 {isLoading ? (
                     <div id={'hw10-loading'}>
-                        <Loader />
+                        <Loader/>
                     </div>
                 ) : (
-                    <div>
+                    <SuperButton
-                        <SuperButton
+                        id={'hw10-button-start-loading'}
-                            id={'hw10-button-start-loading'}
+                        onClick={setLoading}
-                            onClick={setLoading}
+                    >
-                        >
+                        Set loading...
-                            Set loading...
+                    </SuperButton>
-                        </SuperButton>
-                    </div>
                 )}
             </div>
         </div>

src/s2-homeworks/hw10/Loader.module.css

@@ -1,9 +1,13 @@
 .loader {
+    /*свг и/или анимация*/
+
+    width: 90px;
+    height: 90px;
+
     border: 9px solid #f3f3f3;
     border-top: 9px solid #512DE4;
     border-radius: 50%;
-    width: 90px;
+
-    height: 90px;
     animation: spin 1s linear infinite;
 }
 

src/s2-homeworks/hw10/Loader.tsx

@@ -1,3 +1,3 @@
 import s from './Loader.module.css'
 
-export const Loader = () => <div className={s.loader}></div>
+export const Loader = () => <div className={s.loader}/>

src/s2-homeworks/hw10/bll/loadingReducer.ts

@@ -2,13 +2,9 @@ const initState = {
     isLoading: false,
 }
 
-export const loadingReducer = (
+export const loadingReducer = (state = initState, action: any): any => { // fix any
-    state = initState,
-    action: LoadingActionType
-): typeof initState => {
-    // fix any
     switch (action.type) {
-        case 'CHANGE_LOADING': {
+        case 'CHANGE_LOADING': { // пишет студент  // need to fix
             return {
                 ...state,
                 isLoading: action.isLoading,
@@ -27,4 +23,4 @@ type LoadingActionType = {
 export const loadingAC = (isLoading: boolean): LoadingActionType => ({
     type: 'CHANGE_LOADING',
     isLoading,
-}) // fix any
+})

src/s2-homeworks/hw10/bll/store.ts

@@ -1,10 +1,10 @@
 import { loadingReducer } from './loadingReducer'
 import { combineReducers, legacy_createStore } from 'redux'
-import { themeReducer } from '../../hw12/bll/themeReducer'
+// import { themeReducer } from '../../hw12/bll/themeReducer'
 
 const reducers = combineReducers({
     loading: loadingReducer, // hw10
-    theme: themeReducer, // hw12
+    // theme: themeReducer, // hw12
 })
 
 const store = legacy_createStore(reducers)
@@ -14,4 +14,4 @@ export default store
 export type AppStoreType = ReturnType<typeof reducers>
 
 // @ts-ignore
-window.store = store // for dev // может для проверки работы стора задиспатчить экшн через консоль? // store.dispatch({type:'CHANGE_LOADING', isLoading: true})
+window.store = store // for dev // для того чтобы автотесты видели состояние данных