final ref hw12

src/index.css

@@ -20,24 +20,3 @@ code {
     monospace;
 }
 
-[data-theme='1'] {
-
-    --background: #FFFFFF;
-    --color: #000000;
-}
-
-[data-theme='2'] {
-    --color: #000000;
-    --background: #DDEEFF;
-}
-
-[data-theme='3'] {
-    --color: #FFFFFF;
-    --background: #212A34;
-
-}
-
-html {
-    background-color: var(--background);
-    color: var(--color);
-}

src/s1-main/App.tsx

@@ -7,17 +7,8 @@ import HW4 from '../s2-homeworks/hw04/HW4'
 import HW5 from '../s2-homeworks/hw05/HW5'
 
 function App() {
-    // для дз 12
-    // const themeId = useSelector((state: any) => state.theme.themeId)
-    // useEffect(() => {
-    //     document.documentElement.dataset.theme = themeId
-    // }, [themeId])
-
     return (
-        <div
+        <div className={s.App}>
-            className={s.App}
-            // data-theme={themeId} // для дз 12
-        >
             {/*<HW1/>*/}
             {/*раскомментировать по ходу выполнения*/}
             {/*<HW2/>*/}

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

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

src/s2-homeworks/hw09/Clock.tsx

@@ -33,8 +33,8 @@ function Clock() {
         setShow(false)
     }
 
-    const stringTime = date.toLocaleTimeString() || <br/> // часы24:минуты:секунды (01:02:03)/(23:02:03)/(24:00:00)/(00:00:01) // пишут студенты
+    const stringTime = date.toLocaleTimeString('ru-Ru') || <br/> // часы24:минуты:секунды (01:02:03)/(23:02:03)/(24:00:00)/(00:00:01) // пишут студенты
-    const stringDate = date.toLocaleDateString() || <br/> // день.месяц.год (01.02.2022) // пишут студенты, варианты 01.02.0123/01.02.-123/01.02.12345 не рассматриваем
+    const stringDate = date.toLocaleDateString('ru-Ru') || <br/> // день.месяц.год (01.02.2022) // пишут студенты, варианты 01.02.0123/01.02.-123/01.02.12345 не рассматриваем
 
     // день недели на английском, месяц на английском (https://learn.javascript.ru/intl#intl-datetimeformat)
     const stringDay = new Intl.DateTimeFormat('en-US', {weekday: 'long'}).format(date) || <br/> // пишут студенты

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)

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

@@ -1,23 +1,23 @@
-.dark {
+[data-theme='1'] {
-    background: dimgrey;
+    --color: #000000;
+    --background: #FFFFFF;
 }
 
-.dark-text {
+[data-theme='2'] {
-    color: aliceblue;
+    --color: #000000;
+    --background: #DDEEFF;
 }
 
-.red {
+[data-theme='3'] {
-    background: lightcoral;
+    --color: #FFFFFF;
+    --background: #212A34;
 }
 
-.red-text {
+html {
-    color: aqua;
+    background-color: var(--background);
+    color: var(--color);
 }
 
-.some {
+.select {
-    background: lightgreen;
-}
 
-.some-text {
-    color: darkslateblue;
 }

src/s2-homeworks/hw12/HW12.tsx

@@ -1,33 +1,47 @@
-import React from 'react'
+import React, {useEffect} 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 {useDispatch, useSelector} from 'react-redux'
-import { changeThemeId } from './bll/themeReducer'
+import {changeThemeId} from './bll/themeReducer'
+
+/*
+* 1 - в файле themeReducer.ts написать нужные типы вместо any, дописать редьюсер
+* 2 - получить themeId из редакса
+* 3 - дописать тип и логику функции change
+* 4 - передать пропсы в SuperSelect
+* */
 
 const themes = [
-    { id: 1, value: 'light' },
+    {id: 1, value: 'light'},
-    { id: 2, value: 'blue' },
+    {id: 2, value: 'blue'},
-    { id: 3, value: 'dark' },
+    {id: 3, value: 'dark'},
 ]
 
 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) => {
+
+    const change = (id: any) => { // дописать функцию
         dispatch(changeThemeId(id))
     }
 
+    useEffect(() => {
+        document.documentElement.dataset.theme = themeId + ''
+    }, [themeId])
+
     return (
         <div id={'hw12'}>
             <div id={'hw12-text'} className={s2.hwTitle}>
                 Homework #12
             </div>
+
             <div className={s2.hw}>
                 <SuperSelect
                     id={'hw12-select-theme'}
+                    className={s.select}
+                    // сделать переключение тем
                     value={themeId}
                     options={themes}
                     onChangeOption={change}

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

@@ -2,9 +2,9 @@ const initState = {
     themeId: 1,
 }
 
-export const themeReducer = (state = initState, action: any): any => {
+export const themeReducer = (state = initState, action: any): any => { // fix any
-    // fix any
     switch (action.type) {
+        // дописать
         case 'SET_THEME_ID': {
             return {
                 ...state,