diff --git a/src/index.tsx b/src/index.tsx index 19a8f03..a213b28 100644 --- a/src/index.tsx +++ b/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 store from './s2-homeworks/hw10/bll/store' +import { Provider } from 'react-redux' +import store from './s2-homeworks/hw10/bll/store' const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) root.render( {/*для дз 10*/} - {/**/} + - {/**/} + ) diff --git a/src/s2-homeworks/hw05/pages/JuniorPlus.tsx b/src/s2-homeworks/hw05/pages/JuniorPlus.tsx index 692e280..cf96bb5 100644 --- a/src/s2-homeworks/hw05/pages/JuniorPlus.tsx +++ b/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 (
- {/**/} + {/**/} {/**/} {/**/} diff --git a/src/s2-homeworks/hw10/HW10.tsx b/src/s2-homeworks/hw10/HW10.tsx index 66f01f7..cc714f8 100644 --- a/src/s2-homeworks/hw10/HW10.tsx +++ b/src/s2-homeworks/hw10/HW10.tsx @@ -1,19 +1,26 @@ import React from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { AppStoreType } from './bll/store' -import { loadingAC } from './bll/loadingReducer' +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' -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( (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 (
Homework #10
- {/*should work (должно работать)*/}
{isLoading ? (
- +
) : ( -
- - Set loading... - -
+ + Set loading... + )}
diff --git a/src/s2-homeworks/hw10/Loader.module.css b/src/s2-homeworks/hw10/Loader.module.css index 8e8c195..a745e6e 100644 --- a/src/s2-homeworks/hw10/Loader.module.css +++ b/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; } diff --git a/src/s2-homeworks/hw10/Loader.tsx b/src/s2-homeworks/hw10/Loader.tsx index 8da0797..339ea1b 100644 --- a/src/s2-homeworks/hw10/Loader.tsx +++ b/src/s2-homeworks/hw10/Loader.tsx @@ -1,3 +1,3 @@ import s from './Loader.module.css' -export const Loader = () =>
+export const Loader = () =>
diff --git a/src/s2-homeworks/hw10/bll/loadingReducer.ts b/src/s2-homeworks/hw10/bll/loadingReducer.ts index 49e32d5..bf1eb23 100644 --- a/src/s2-homeworks/hw10/bll/loadingReducer.ts +++ b/src/s2-homeworks/hw10/bll/loadingReducer.ts @@ -2,13 +2,9 @@ const initState = { isLoading: false, } -export const loadingReducer = ( - state = initState, - action: LoadingActionType -): typeof initState => { - // fix any +export const loadingReducer = (state = initState, action: any): any => { // 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 +}) diff --git a/src/s2-homeworks/hw10/bll/store.ts b/src/s2-homeworks/hw10/bll/store.ts index 4476b05..5f1fed0 100644 --- a/src/s2-homeworks/hw10/bll/store.ts +++ b/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 // @ts-ignore -window.store = store // for dev // может для проверки работы стора задиспатчить экшн через консоль? // store.dispatch({type:'CHANGE_LOADING', isLoading: true}) +window.store = store // for dev // для того чтобы автотесты видели состояние данных