add hw 12

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

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

src/s2-homeworks/hw09/HW9.tsx

@@ -8,6 +8,8 @@ const HW9 = () => {
             <hr/>
             {/*можно убрать этот тег*/}
 
+            <div className={s2.hwTitle}>homeworks 9</div>
+
             {/*should work (должно работать)*/}
             <Clock/>
 

src/s2-homeworks/hw10/HW10.tsx

@@ -26,6 +26,8 @@ const HW10 = () => {
             <hr/>
             {/*можно убрать этот тег*/}
 
+            <div className={s2.hwTitle}>homeworks 10</div>
+
             {/*should work (должно работать)*/}
             {isLoading
                 ? (

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

@@ -1,9 +1,10 @@
 import {loadingReducer} from './loadingReducer'
 import {combineReducers, legacy_createStore} from 'redux'
+import {themeReducer} from '../../hw12/bll/themeReducer'
 
 const reducers = combineReducers({
-    loading: loadingReducer,
+    loading: loadingReducer, // hw10
-
+    theme: themeReducer, // hw12
 })
 
 const store = legacy_createStore(reducers)

src/s2-homeworks/hw11/HW11.tsx

@@ -18,6 +18,8 @@ function HW11() {
             <hr/>
             {/*можно убрать этот тег*/}
 
+            <div className={s2.hwTitle}>homeworks 11</div>
+
             {/*should work (должно работать)*/}
             <div>
                 <span id={'hw11-value'} style={{display: 'inline-block', width: 32}}>{value1}</span>

src/s2-homeworks/hw12/HW12.module.css

@@ -0,0 +1,23 @@
+.dark {
+    background: dimgrey;
+}
+
+.dark-text {
+    color: aliceblue;
+}
+
+.red {
+    background: lightcoral;
+}
+
+.red-text {
+    color: aqua;
+}
+
+.some {
+    background: lightgreen;
+}
+
+.some-text {
+    color: darkslateblue;
+}

src/s2-homeworks/hw12/HW12.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import s from './HW12.module.css'
+import s2 from '../../s1-main/App.module.css'
+import SuperSelect from '../hw07/common/c5-SuperSelect/SuperSelect'
+import {useDispatch, useSelector} from 'react-redux'
+import {changeThemeId} from './bll/themeReducer'
+
+const themes = [
+    {id: 1, value: 'dark'},
+    {id: 2, value: 'red'},
+    {id: 3, value: 'some'},
+]
+
+const HW12 = () => {
+    const themeId = useSelector((state: any) => state.theme.themeId)
+    const theme = themes.find(t => t.id === themeId)!.value
+
+    const dispatch = useDispatch()
+    const change = (id: number) => {
+        dispatch(changeThemeId(id))
+    }
+
+    return (
+        <div id={'hw12'} className={s2.hw + ' ' + s[theme]}>
+            <hr/>
+            {/*можно убрать этот тег*/}
+
+            <div id={'hw12-text'} className={s2.hwTitle + ' ' + s[theme + '-text']}>homeworks 12</div>
+            <SuperSelect
+                id={'hw12-select-theme'}
+                value={themeId}
+                options={themes}
+                onChangeOption={change}
+            />
+
+            <hr/>
+            {/*можно убрать этот тег*/}
+            <hr/>
+            {/*можно убрать этот тег*/}
+        </div>
+    )
+}
+
+export default HW12

src/s2-homeworks/hw12/bll/themeReducer.ts

@@ -0,0 +1,17 @@
+const initState = {
+    themeId: 1
+}
+
+export const themeReducer = (state = initState, action: any): any => { // fix any
+    switch (action.type) {
+        case 'SET_THEME_ID': {
+            return {
+                ...state,
+                themeId: action.id,
+            }
+        }
+        default: return state
+    }
+}
+
+export const changeThemeId = (id: number): any => ({type: 'SET_THEME_ID', id}) // fix any