From f4b13b891eb329e963f25f76293d35d0381f1b74 Mon Sep 17 00:00:00 2001
From: neko <ai73a@yandex.ru>
Date: Sun, 19 Jun 2022 20:20:08 +0300
Subject: [PATCH] add hw 12

---
 src/s2-homeworks/hw05/pages/JuniorPlus.tsx |  3 +-
 src/s2-homeworks/hw09/HW9.tsx              |  2 +
 src/s2-homeworks/hw10/HW10.tsx             |  2 +
 src/s2-homeworks/hw10/bll/store.ts         |  5 ++-
 src/s2-homeworks/hw11/HW11.tsx             |  2 +
 src/s2-homeworks/hw12/HW12.module.css      | 23 +++++++++++
 src/s2-homeworks/hw12/HW12.tsx             | 44 ++++++++++++++++++++++
 src/s2-homeworks/hw12/bll/themeReducer.ts  | 17 +++++++++
 8 files changed, 95 insertions(+), 3 deletions(-)
 create mode 100644 src/s2-homeworks/hw12/HW12.module.css
 create mode 100644 src/s2-homeworks/hw12/HW12.tsx
 create mode 100644 src/s2-homeworks/hw12/bll/themeReducer.ts

diff --git a/src/s2-homeworks/hw05/pages/JuniorPlus.tsx b/src/s2-homeworks/hw05/pages/JuniorPlus.tsx
index 12e626c..434f7f2 100644
--- a/src/s2-homeworks/hw05/pages/JuniorPlus.tsx
+++ b/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>
     )
diff --git a/src/s2-homeworks/hw09/HW9.tsx b/src/s2-homeworks/hw09/HW9.tsx
index 431ef8a..192f268 100644
--- a/src/s2-homeworks/hw09/HW9.tsx
+++ b/src/s2-homeworks/hw09/HW9.tsx
@@ -8,6 +8,8 @@ const HW9 = () => {
             <hr/>
             {/*можно убрать этот тег*/}
 
+            <div className={s2.hwTitle}>homeworks 9</div>
+
             {/*should work (должно работать)*/}
             <Clock/>
 
diff --git a/src/s2-homeworks/hw10/HW10.tsx b/src/s2-homeworks/hw10/HW10.tsx
index de58346..247e810 100644
--- a/src/s2-homeworks/hw10/HW10.tsx
+++ b/src/s2-homeworks/hw10/HW10.tsx
@@ -26,6 +26,8 @@ const HW10 = () => {
             <hr/>
             {/*можно убрать этот тег*/}
 
+            <div className={s2.hwTitle}>homeworks 10</div>
+
             {/*should work (должно работать)*/}
             {isLoading
                 ? (
diff --git a/src/s2-homeworks/hw10/bll/store.ts b/src/s2-homeworks/hw10/bll/store.ts
index cf6071d..d43af1c 100644
--- a/src/s2-homeworks/hw10/bll/store.ts
+++ b/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)
diff --git a/src/s2-homeworks/hw11/HW11.tsx b/src/s2-homeworks/hw11/HW11.tsx
index 7102c95..a05cf57 100644
--- a/src/s2-homeworks/hw11/HW11.tsx
+++ b/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>
diff --git a/src/s2-homeworks/hw12/HW12.module.css b/src/s2-homeworks/hw12/HW12.module.css
new file mode 100644
index 0000000..5affedc
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/s2-homeworks/hw12/HW12.tsx b/src/s2-homeworks/hw12/HW12.tsx
new file mode 100644
index 0000000..f521236
--- /dev/null
+++ b/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
diff --git a/src/s2-homeworks/hw12/bll/themeReducer.ts b/src/s2-homeworks/hw12/bll/themeReducer.ts
new file mode 100644
index 0000000..69cda7e
--- /dev/null
+++ b/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
\ No newline at end of file