final ref hw13

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

@@ -2,7 +2,7 @@ import React from 'react'
 import HW10 from '../../hw10/HW10'
 import HW11 from '../../hw11/HW11'
 import HW12 from '../../hw12/HW12'
-// import HW13 from '../../hw13/HW13'
+import HW13 from '../../hw13/HW13'
 
 function JuniorPlus() {
     return (
@@ -10,7 +10,7 @@ function JuniorPlus() {
             <HW10 />
             <HW11 />
             <HW12 />
-            {/*<HW13 />*/}
+            <HW13 />
         </div>
     )
 }

src/s2-homeworks/hw13/HW13.module.css

@@ -2,27 +2,46 @@
     display: flex;
     flex-direction: row;
     gap: 24px;
+    height: 30px;
 }
 
 .responseContainer {
     display: flex;
-    padding: 90px 0 20px 92px;
+    padding: 90px 0 20px 90px;
     gap: 87px;
     justify-content: center;
     align-items: center;
 }
 
-.answer {
+.imageContainer {
+    width: 500px;
+    height: 170px;
+}
+
+.image {
+    height: 150px;
+}
+
+.textContainer{
+    width: 500px;
+}
+
+.code {
     font-family: 'Montserrat', sans-serif;
     font-weight: 500;
     font-size: 30px;
     line-height: 37px;
 }
 
+.text {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 20px;
+}
 .info {
     font-family: 'Montserrat', sans-serif;
     font-weight: 500;
     font-size: 16px;
     line-height: 20px;
-
 }

src/s2-homeworks/hw13/HW13.tsx

@@ -8,56 +8,74 @@ import error400 from './images/400.svg'
 import error500 from './images/500.svg'
 import errorUnknown from './images/error.svg'
 
-axios.interceptors.response.use(
+/*
-    (response) => response,
+* 1 - дописать функцию send
-    (error) => {
+* 2 - дизэйблить кнопки пока идёт запрос
-        console.log(error)
+* 3 - сделать стили в соответствии с дизайном
-        if (typeof error.response === 'undefined') {
+* */
-            console.log(error)
+
-        }
-        return Promise.reject(error)
-    }
-)
 const HW13 = () => {
-    const [answer, setAnswer] = useState('')
+    const [code, setCode] = useState('')
+    const [text, setText] = useState('')
     const [info, setInfo] = useState('')
     const [image, setImage] = useState('')
+
     const send = (x?: boolean | null) => () => {
         const url =
             x === null
-                ? 'https://xxxxxx.ccc'
+                ? 'https://xxxxxx.ccc' // имитация запроса на не корректный адрес
-                : 'https://neko-cafe-back.herokuapp.com/auth/test'
+                : 'https://incubator-personal-page-back.herokuapp.com/api/3.0/homework/test'
 
-        setAnswer('...loading')
+        setCode('')
+        setImage('')
+        setText('')
         setInfo('...loading')
+
         axios
             .post(url, {success: x})
             .then((res) => {
-                setAnswer(res.data.errorText)
+                setCode('Код 200!')
+                setImage(success200)
+                // дописать
+                setText(res.data.errorText)
                 setInfo(res.data.info)
-                res.status === 200 && setImage(success200)
             })
             .catch((e) => {
-                console.log(e)
+                // дописать
-                setAnswer(e.response?.data?.errorText || e.message)
+                setText(e.response?.data?.errorText || e.message)
                 setInfo(e.response?.data?.info || e.name)
-                e.response?.status === 400 && setImage(error400)
+
-                e.response?.status === 500 && setImage(error500)
+                switch (e.response?.status) {
-                e.response?.status === 0 && setImage(errorUnknown)
+                    case 400: {
+                        setCode('Ошибка 400!')
+                        setImage(error400)
+                        break
+                    }
+                    case 500: {
+                        setCode('Ошибка 500!')
+                        setImage(error500)
+                        break
+                    }
+                    default: {
+                        setCode('Error!')
+                        setImage(errorUnknown)
+                    }
+                }
             })
     }
 
     return (
         <div id={'hw13'}>
             <div className={s2.hwTitle}>Homework #13</div>
+
             <div className={s2.hw}>
-                {/*для автоматической проверки дз (не менять)*/}
                 <div className={s.buttonsContainer}>
                     <SuperButton
                         id={'hw13-send-true'}
                         onClick={send(true)}
                         xType={'secondary'}
-                        disabled={answer === '...loading'}
+                        // дописать
+                        disabled={info === '...loading'}
                     >
                         Send true
                     </SuperButton>
@@ -65,7 +83,8 @@ const HW13 = () => {
                         id={'hw13-send-false'}
                         onClick={send(false)}
                         xType={'secondary'}
-                        disabled={answer === '...loading'}
+                        // дописать
+                        disabled={info === '...loading'}
                     >
                         Send false
                     </SuperButton>
@@ -73,32 +92,38 @@ const HW13 = () => {
                         id={'hw13-send-undefined'}
                         onClick={send(undefined)}
                         xType={'secondary'}
-                        disabled={answer === '...loading'}
+                        // дописать
+                        disabled={info === '...loading'}
                     >
                         Send undefined
                     </SuperButton>
                     <SuperButton
                         id={'hw13-send-null'}
-                        onClick={send(null)}
+                        onClick={send(null)} // имитация запроса на не корректный адрес
                         xType={'secondary'}
-                        disabled={answer === '...loading'}
+                        // дописать
+                        disabled={info === '...loading'}
                     >
                         Send null
                     </SuperButton>
                 </div>
+
                 <div className={s.responseContainer}>
                     <div className={s.imageContainer}>
-                        {image !== '' && <img src={image} alt="status"/>}
+                        {image && <img src={image} className={s.image} alt="status"/>}
                     </div>
+
                     <div className={s.textContainer}>
-                        <div id={'hw13-answer'} className={s.answer}>
+                        <div id={'hw13-code'} className={s.code}>
-                            {answer}
+                            {code}
+                        </div>
+                        <div id={'hw13-text'} className={s.text}>
+                            {text}
                         </div>
                         <div id={'hw13-info'} className={s.info}>
                             {info}
                         </div>
                     </div>
-
                 </div>
             </div>
         </div>