add mui, add range slider

src/s2-homeworks/hw11/HW11.tsx

@@ -1,50 +1,74 @@
-import React, {useState} from 'react'
+import React, { useState } from 'react'
 import SuperRange from './common/c7-SuperRange/SuperRange'
 import SuperDoubleRange from './common/c8-SuperDoubleRange/SuperDoubleRange'
 import s2 from '../../s1-main/App.module.css'
-import {restoreState} from '../hw06/localStorage/localStorage'
+import { restoreState } from '../hw06/localStorage/localStorage'
+import { Slider } from '@mui/material'
 
 function HW11() {
-    const [value1, setValue1] = useState(restoreState<number>('hw11-value1', 0))
-    const [value2, setValue2] = useState(restoreState<number>('hw11-value2', 100))
+   const [value1, setValue1] = useState(restoreState<number>('hw11-value1', 0))
+   const [value2, setValue2] = useState(
+      restoreState<number>('hw11-value2', 100)
+   )
 
-    const change = (values: [number, number]) => {
-        value1 !== values[0] && setValue1(values[0])
-        value2 !== values[1] && setValue2(values[1])
-    }
+   const change = (event: Event, newValue: number | number[]) => {
+      if (Array.isArray(newValue)) {
+         setValue1(newValue[0])
+         setValue2(newValue[1])
+      } else {
+         setValue1(newValue)
+      }
+   }
 
-    return (
-        <div id={'hw11'} className={s2.hw}>
-            <hr/>
-            {/*можно убрать этот тег*/}
+   return (
+      <div id={'hw11'} className={s2.hw}>
+         <hr />
+         {/*можно убрать этот тег*/}
 
-            <div className={s2.hwTitle}>homeworks 11</div>
+         <div className={s2.hwTitle}>homeworks 11</div>
 
-            {/*should work (должно работать)*/}
-            <div>
-                <span id={'hw11-value'} style={{display: 'inline-block', width: 32}}>{value1}</span>
-                <SuperRange
-                    // сделать так чтоб value1 изменялось
-                    value={value1}
-                    onChangeRange={setValue1}
-                />
-            </div>
+         {/*should work (должно работать)*/}
+         <div>
+            <span
+               id={'hw11-value'}
+               style={{ display: 'inline-block', width: 32 }}
+            >
+               {value1}
+            </span>
+            <Slider
+               // сделать так чтоб value1 изменялось
+               value={value1}
+               onChange={change}
+               sx={{ width: '160px' }}
+            />
+         </div>
 
-            <div>
-                <span id={'hw11-value-1'} style={{display: 'inline-block', width: 32}}>{value1}</span>
-                <SuperDoubleRange
-                    value={[value1, value2]}
-                    onChangeRange={change}
-                />
-                <span id={'hw11-value-2'} style={{display: 'inline-block', width: 32}}>{value2}</span>
-            </div>
+         <div>
+            <span
+               id={'hw11-value-1'}
+               style={{ display: 'inline-block', width: 32 }}
+            >
+               {value1}
+            </span>
+            <Slider
+               value={[value1, value2]}
+               onChange={change}
+               sx={{ width: '160px' }}
+            />
+            <span
+               id={'hw11-value-2'}
+               style={{ display: 'inline-block', width: 32 }}
+            >
+               {value2}
+            </span>
+         </div>
 
-            <hr/>
-            {/*можно убрать этот тег*/}
-            <hr/>
-            {/*можно убрать этот тег*/}
-        </div>
-    )
+         <hr />
+         {/*можно убрать этот тег*/}
+         <hr />
+         {/*можно убрать этот тег*/}
+      </div>
+   )
 }
 
 export default HW11

src/s2-homeworks/hw13/HW13.tsx

@@ -1,79 +1,88 @@
-import React, {useState} from 'react'
+import React, { useState } from 'react'
 import s2 from '../../s1-main/App.module.css'
 import SuperButton from '../hw04/common/c2-SuperButton/SuperButton'
 import axios from 'axios'
-
+axios.interceptors.response.use(
+   (response) => response,
+   (error) => {
+      console.log(error)
+      if (typeof error.response === 'undefined') {
+         console.log(error)
+      }
+      return Promise.reject(error)
+   }
+)
 const HW13 = () => {
-    const [answer, setAnswer] = useState('')
-    const [info, setInfo] = useState('')
+   const [answer, setAnswer] = useState('')
+   const [info, setInfo] = useState('')
 
-    const send = (x?: boolean | null) => () => {
-        const url = x === null ? 'https://xxxxxx.ccc' : 'https://neko-cafe-back.herokuapp.com/auth/test'
+   const send = (x?: boolean | null) => () => {
+      const url =
+         x === null
+            ? 'https://xxxxxx.ccc'
+            : 'https://neko-cafe-back.herokuapp.com/auth/test'
 
-        setAnswer('...loading')
-        setInfo('...loading')
-        axios
-            .post(url, {success: x})
-            .then(res => {
-                setAnswer(res.data.errorText)
-                setInfo(res.data.info)
-            })
-            .catch(e => {
-                setAnswer(e.response?.data?.errorText || e.message)
-                setInfo(e.response?.data?.info || e.name)
-            })
-    }
+      setAnswer('...loading')
+      setInfo('...loading')
+      axios
+         .post(url, { success: x })
+         .then((res) => {
+            setAnswer(res.data.errorText)
+            setInfo(res.data.info)
+         })
+         .catch((e) => {
+            console.log(e)
+            setAnswer(e.response?.data?.errorText || e.message)
+            setInfo(e.response?.data?.info || e.name)
+         })
+   }
 
-    return (
-        <div id={'hw13'} className={s2.hw}>
-            <hr/>
-            {/*можно убрать этот тег*/}
+   return (
+      <div id={'hw13'} className={s2.hw}>
+         <hr />
+         {/*можно убрать этот тег*/}
 
-            <div className={s2.hwTitle}>homeworks 13</div>
+         <div className={s2.hwTitle}>homeworks 13</div>
 
-            {/*для автоматической проверки дз (не менять)*/}
-            <SuperButton
-                id={'hw13-send-true'}
-                onClick={send(true)}
-                disabled={answer === '...loading'}
-            >
-                send true
-            </SuperButton>
-            <SuperButton
-                id={'hw13-send-false'}
-                onClick={send(false)}
-                disabled={answer === '...loading'}
-            >
-                send false
-            </SuperButton>
-            <SuperButton
-                id={'hw13-send-undefined'}
-                onClick={send(undefined)}
-                disabled={answer === '...loading'}
-            >
-                send undefined
-            </SuperButton>
-            <SuperButton
-                id={'hw13-send-null'}
-                onClick={send(null)}
-                disabled={answer === '...loading'}
-            >
-                send null
-            </SuperButton>
+         {/*для автоматической проверки дз (не менять)*/}
+         <SuperButton
+            id={'hw13-send-true'}
+            onClick={send(true)}
+            disabled={answer === '...loading'}
+         >
+            send true
+         </SuperButton>
+         <SuperButton
+            id={'hw13-send-false'}
+            onClick={send(false)}
+            disabled={answer === '...loading'}
+         >
+            send false
+         </SuperButton>
+         <SuperButton
+            id={'hw13-send-undefined'}
+            onClick={send(undefined)}
+            disabled={answer === '...loading'}
+         >
+            send undefined
+         </SuperButton>
+         <SuperButton
+            id={'hw13-send-null'}
+            onClick={send(null)}
+            disabled={answer === '...loading'}
+         >
+            send null
+         </SuperButton>
 
-            <div id={'hw13-answer'}>
-                {answer}
-            </div>
-            <div id={'hw13-info'}>
-                {info}
-            </div>
+         <div id={'hw13-answer'}>{answer}</div>
+         <div id={'hw13-info'}>{info}</div>
 
-            <hr/>
-            {/*можно убрать этот тег*/}
-            <hr/>
-            {/*можно убрать этот тег*/}
-        </div>
-    )
+         <hr />
+         {/*можно убрать этот тег*/}
+         <hr />
+         {/*можно убрать этот тег*/}
+      </div>
+   )
 }
 
 export default HW13