use user data

pairent_frontend_react/src/pages/PersonalCabinet/index.jsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useState }from 'react';
+import React, { useEffect, useState } from "react";
-import styled, { keyframes } from 'styled-components';
+import styled, { keyframes } from "styled-components";
 import SVGIcon from "../../components/UI/Icon/SVGIcon";
-import { User } from '../../API/User';
+import { User } from "../../API/User";
 
-import { useFetching } from '../../hooks/useFetching';
+import { useFetching } from "../../hooks/useFetching";
 
-import { Row, Col, Stack } from 'react-bootstrap';
+import { Row, Col, Stack } from "react-bootstrap";
 
 const BackButton = styled.button`
     border: 1px solid #c2c4c2;
@@ -21,7 +21,7 @@ const BackButton = styled.button`
     float: left;
 
     & ${SVGIcon} {
-        transform: translate(-4px, 2px)
+        transform: translate(-4px, 2px);
     }
 `;
 
@@ -54,7 +54,7 @@ const CabinetSection = styled.div`
     width: 1270px;
     height: 650px;
 
-    background: #FFFFFF;
+    background: #ffffff;
     box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.25);
     border-radius: 20px;
     margin: 27px auto;
@@ -87,9 +87,9 @@ const UploadPhoto = styled.button`
     font-weight: 700;
     font-size: 16px;
     line-height: 19px;
-    color: #FFFFFF;
+    color: #ffffff;
 
-    background: #007EFF;
+    background: #007eff;
     border-radius: 12px;
 `;
 
@@ -106,11 +106,11 @@ const MainText = styled.p`
 `;
 
 const InputBlock = styled.input`
-    border: 1px solid #CCCCCC;
+    border: 1px solid #cccccc;
     border-radius: 12px;
 
-    width: ${props => props.width}px;
+    width: ${(props) => props.width}px;
-    height: ${props => props.height}px;
+    height: ${(props) => props.height}px;
 
     padding-left: 10px;
 
@@ -123,12 +123,12 @@ const InputBlock = styled.input`
         font-weight: 500;
         font-size: 12px;
         line-height: 24px;
-        color: #CCCCCC;
+        color: #cccccc;
     }
 `;
 
 const TextAreaBlock = styled.textarea`
-    border: 1px solid #CCCCCC;
+    border: 1px solid #cccccc;
     border-radius: 12px;
 
     margin: 16px 0px 0px 55px;
@@ -145,7 +145,7 @@ const TextAreaBlock = styled.textarea`
         font-weight: 500;
         font-size: 14px;
         line-height: 24px;
-        color: #CCCCCC;
+        color: #cccccc;
     }
 `;
 
@@ -160,9 +160,9 @@ const CharacterTraitBlock = styled.div`
     display: inline-block;
     align-items: center;
     text-align: center;
-    color: #FFFFFF;
+    color: #ffffff;
 
-    background: ${props => props.background};
+    background: ${(props) => props.background};
     border-radius: 20px;
 `;
 
@@ -182,8 +182,8 @@ const ButtonCircleChangeTrait = styled.button`
     text-align: center;
     border-radius: 70%;
 
-    color: #FFFFFF;
+    color: #ffffff;
-    background: #D9D9D9;
+    background: #d9d9d9;
 `;
 
 const ButtonChangeTrait = styled.button`
@@ -200,14 +200,14 @@ const ButtonChangeTrait = styled.button`
 
     text-align: left;
 
-    color: #007EFF;
+    color: #007eff;
     background: none;
 `;
 
 const InformationBlock = (props) => {
     return (
         <>
-            <Row style={{marginTop: props.marginTop, marginLeft: 19}}>
+            <Row style={{ marginTop: props.marginTop, marginLeft: 19 }}>
                 <Col xs={5}>
                     <MainText>{props.title}</MainText>
                 </Col>
@@ -217,27 +217,33 @@ const InformationBlock = (props) => {
             </Row>
         </>
     );
-}
+};
 
 const InformationBlockInput = (props) => {
     return (
         <>
-            <Row style={{marginTop: props.marginTop, marginLeft: 19}}>
+            <Row style={{ marginTop: props.marginTop, marginLeft: 19 }}>
                 <Col xs={5}>
                     <MainText>{props.title}</MainText>
                 </Col>
                 <Col xs={5}>
-                    <InputBlock width={props.width} height={props.height} placeholder={props.placeholderInput} value={props.valueInput}/>
+                    <InputBlock
+                        width={props.width}
+                        height={props.height}
+                        placeholder={props.placeholderInput}
+                        value={props.valueInput}
+                    />
                 </Col>
             </Row>
         </>
     );
-}
+};
 
 const TraitsBlock = (props) => {
     const list = props.list;
 
-    if (list.length == 0) return (
+    if (list.length == 0)
+        return (
             <>
                 <h1>Вы ничего не указали</h1>
             </>
@@ -245,71 +251,97 @@ const TraitsBlock = (props) => {
 
     return (
         <>
-            <Row style={{marginLeft: 19}}>
+            <Row style={{ marginLeft: 19 }}>
-                {
+                {list.map((el, i) => {
-                    list.map((el, i) => {
                     return (
-                            <Col style={{paddingLeft: 0, marginRight: 9, marginTop: 10}} key={i}>
+                        <Col
+                            style={{
+                                paddingLeft: 0,
+                                marginRight: 9,
+                                marginTop: 10,
+                            }}
+                            key={i}
+                        >
                             <CharacterTraitBlock background={el.color}>
                                 {el.text}
                             </CharacterTraitBlock>
                         </Col>
                     );
-                    })
+                })}
-                }
+                {props.button ? (
-                {props.button 
-                ? 
                     <>
-                        <Col style={{paddingLeft: 0, marginRight: 9, marginTop: 10}}>
+                        <Col
-                            <ButtonCircleChangeTrait>
+                            style={{
-                                +
+                                paddingLeft: 0,
-                            </ButtonCircleChangeTrait>
+                                marginRight: 9,
+                                marginTop: 10,
+                            }}
+                        >
+                            <ButtonCircleChangeTrait>+</ButtonCircleChangeTrait>
                         </Col>
                     </>
-                : 
+                ) : (
                     <>
                         <ButtonChangeTrait>Изменить..</ButtonChangeTrait>
                     </>
-                }
+                )}
             </Row>
         </>
     );
-}
+};
-
 
 const PersonalCabinet = function () {
-
+    const user = User.restoreFromLocalStorage();
-    const [user, setUser] = useState()
+    const userID = user.id;
-    const userID = 1;
-
-    const [fetchUser, isUserLoading, userError] = useFetching(async (userID) => {
-        const response = await User.getById(userID);
-        setUser(response)
-        console.log(user.name)
-    })
 
     useEffect(() => {
-        fetchUser(userID)
+        fetchUser(userID);
-    }, [])
+    }, []);
 
-    const TraitsListOne = [{text: 'Честность', color: '#3F51B5'}, {text: 'Аккуратность', color: '#03BCD6'}, {text: 'Музыкальность', color: '#E91D65'}, 
+    const TraitsListOne = [
-                            {text: 'Общительность', color: '#03A9F4'}, {text: 'Дружелюбность', color: '#8CC34D'}]
+        { text: "Честность", color: "#3F51B5" },
+        { text: "Аккуратность", color: "#03BCD6" },
+        { text: "Музыкальность", color: "#E91D65" },
+        { text: "Общительность", color: "#03A9F4" },
+        { text: "Дружелюбность", color: "#8CC34D" },
+    ];
 
-    const TraitsListTwo = [{text: 'Честность', color: '#3F51B5'}, {text: 'Аккуратность', color: '#03BCD6'}, {text: 'Музыкальность', color: '#E91D65'}, 
+    const TraitsListTwo = [
-                            {text: 'Общительность', color: '#03A9F4'}, {text: 'Дружелюбность', color: '#8CC34D'}, {text: 'Мудрость', color: '#FF5923'}, 
+        { text: "Честность", color: "#3F51B5" },
-                            {text: 'Адекватность', color: '#2196F4'}, {text: 'Щедрость', color: '#FFC308'}, {text: 'Вежливость', color: '#9D28B2'}]  
+        { text: "Аккуратность", color: "#03BCD6" },
+        { text: "Музыкальность", color: "#E91D65" },
+        { text: "Общительность", color: "#03A9F4" },
+        { text: "Дружелюбность", color: "#8CC34D" },
+        { text: "Мудрость", color: "#FF5923" },
+        { text: "Адекватность", color: "#2196F4" },
+        { text: "Щедрость", color: "#FFC308" },
+        { text: "Вежливость", color: "#9D28B2" },
+    ];
 
-    const TraitsListThree = [{text: 'Курит', color: '#94740B'}, {text: 'Равнодушие', color: '#D9B8B0'}, {text: 'Эгоист', color: '#6E3F58'}, {text: 'Лень', color: '#9F6844'},
+    const TraitsListThree = [
-                            {text: 'Лживость', color: '#AD9029'}, {text: 'Диструктивность', color: '#9A150C'}, {text: 'Токсичность', color: '#608426'}]
+        { text: "Курит", color: "#94740B" },
+        { text: "Равнодушие", color: "#D9B8B0" },
+        { text: "Эгоист", color: "#6E3F58" },
+        { text: "Лень", color: "#9F6844" },
+        { text: "Лживость", color: "#AD9029" },
+        { text: "Диструктивность", color: "#9A150C" },
+        { text: "Токсичность", color: "#608426" },
+    ];
 
     return (
         <>
             <Title>
                 <BackButton>
-                    <SVGIcon src='/images/icons/left-arrow-light.svg' width={10} height={16}/>     
+                    <SVGIcon
+                        src="/images/icons/left-arrow-light.svg"
+                        width={10}
+                        height={16}
+                    />
                     Вернуться назад
                 </BackButton>
-                <h2>Личный кабинет<span>/ Мои данные</span></h2>
+                <h2>
+                    Личный кабинет<span>/ Мои данные</span>
+                </h2>
             </Title>
             <CabinetSection>
                 <CabinetContainer>
@@ -317,38 +349,121 @@ const PersonalCabinet = function () {
                         <Stack>
                             <WelcomeText>Добрый день, Александр!</WelcomeText>
                             <MainText>Ваш статус - Студент</MainText>
-                            <Avatar src='/images/avatar-test.jpg'/>
+                            <Avatar src="/images/avatar-test.jpg" />
                             <UploadPhoto>
-                                <SVGIcon src='/images/icons/camera.svg' width={18} height={16}/>   
+                                <SVGIcon
+                                    src="/images/icons/camera.svg"
+                                    width={18}
+                                    height={16}
+                                />
                                 Загрузить фото
                             </UploadPhoto>
-                            <TextAreaBlock rows={3} cols={30} placeholder='Опиши себя парой предложений..'/>
+                            <TextAreaBlock
-                            <TextAreaBlock style={{marginTop: 9}} rows={3} cols={30} placeholder='Напишите сюда свои хобби..'/>
+                                rows={3}
+                                cols={30}
+                                placeholder="Опиши себя парой предложений.."
+                            />
+                            <TextAreaBlock
+                                style={{ marginTop: 9 }}
+                                rows={3}
+                                cols={30}
+                                placeholder="Напишите сюда свои хобби.."
+                            />
                         </Stack>
                     </Col>
                     <Col>
-                        <Stack style={{borderLeft: '1px solid #CCCCCC', height: '100%'}}>
+                        <Stack
-                            <InformationBlock marginTop={13} title={'Имя'} text={'Александр'}/>
+                            style={{
-                            <InformationBlock marginTop={13} title={'Фамилия'} text={'Манаенков'}/>
+                                borderLeft: "1px solid #CCCCCC",
-                            <InformationBlock marginTop={13} title={'Отчество'} text={'Викторович'}/>
+                                height: "100%",
-                            <InformationBlock marginTop={13} title={'Дата рождения'} text={'14.09.2004'}/>
+                            }}
-                            <InformationBlock marginTop={33} title={'Факультет'} text={'Информационные системы (по отраслям)'}/>
+                        >
-                            <InformationBlock marginTop={44} title={'Группа'} text={'СО-ИС-20'}/>
+                            <InformationBlock
-                            <InformationBlockInput marginTop={33} title={'Телефон'} width={190} height={32} placeholderInput={'Введите номер телефона'}/>
+                                marginTop={13}
-                            <InformationBlockInput marginTop={10} title={'E-mail'} width={190} height={32} placeholderInput={'Введите E-mail'}/>
+                                title={"Имя"}
-                            <InformationBlockInput marginTop={10} title={'Telegram'} width={190} height={32} placeholderInput={'Введите Ваш телеграмм'}/>
+                                text={"Александр"}
-                            <InformationBlockInput marginTop={10} title={'Discord'} width={190} height={32} placeholderInput={'Введите Ваш дискорд'}/>
+                            />
-                            <InformationBlockInput marginTop={55} title={'Город'} width={190} height={32} placeholderInput={'Введите город'}/>
+                            <InformationBlock
+                                marginTop={13}
+                                title={"Фамилия"}
+                                text={"Манаенков"}
+                            />
+                            <InformationBlock
+                                marginTop={13}
+                                title={"Отчество"}
+                                text={"Викторович"}
+                            />
+                            <InformationBlock
+                                marginTop={13}
+                                title={"Дата рождения"}
+                                text={"14.09.2004"}
+                            />
+                            <InformationBlock
+                                marginTop={33}
+                                title={"Факультет"}
+                                text={"Информационные системы (по отраслям)"}
+                            />
+                            <InformationBlock
+                                marginTop={44}
+                                title={"Группа"}
+                                text={"СО-ИС-20"}
+                            />
+                            <InformationBlockInput
+                                marginTop={33}
+                                title={"Телефон"}
+                                width={190}
+                                height={32}
+                                placeholderInput={"Введите номер телефона"}
+                            />
+                            <InformationBlockInput
+                                marginTop={10}
+                                title={"E-mail"}
+                                width={190}
+                                height={32}
+                                placeholderInput={"Введите E-mail"}
+                            />
+                            <InformationBlockInput
+                                marginTop={10}
+                                title={"Telegram"}
+                                width={190}
+                                height={32}
+                                placeholderInput={"Введите Ваш телеграмм"}
+                            />
+                            <InformationBlockInput
+                                marginTop={10}
+                                title={"Discord"}
+                                width={190}
+                                height={32}
+                                placeholderInput={"Введите Ваш дискорд"}
+                            />
+                            <InformationBlockInput
+                                marginTop={55}
+                                title={"Город"}
+                                width={190}
+                                height={32}
+                                placeholderInput={"Введите город"}
+                            />
                         </Stack>
                     </Col>
                     <Col>
-                        <Stack style={{borderLeft: '1px solid #CCCCCC', height: '100%'}}>
+                        <Stack
-                            <MainText style={{marginLeft: 19, marginTop: 13}}>Ваши личностные характеристики</MainText>
+                            style={{
-                            <TraitsBlock list={TraitsListOne} button={true}/>
+                                borderLeft: "1px solid #CCCCCC",
-                            <MainText style={{marginLeft: 19, marginTop: 25}}>Желаемые черты соседа</MainText>
+                                height: "100%",
-                            <TraitsBlock list={TraitsListTwo}/>
+                            }}
-                            <MainText style={{marginLeft: 19, marginTop: 19}}>Нежелаемые черты соседа</MainText>
+                        >
-                            <TraitsBlock list={TraitsListThree}/>
+                            <MainText style={{ marginLeft: 19, marginTop: 13 }}>
+                                Ваши личностные характеристики
+                            </MainText>
+                            <TraitsBlock list={TraitsListOne} button={true} />
+                            <MainText style={{ marginLeft: 19, marginTop: 25 }}>
+                                Желаемые черты соседа
+                            </MainText>
+                            <TraitsBlock list={TraitsListTwo} />
+                            <MainText style={{ marginLeft: 19, marginTop: 19 }}>
+                                Нежелаемые черты соседа
+                            </MainText>
+                            <TraitsBlock list={TraitsListThree} />
                         </Stack>
                     </Col>
                 </CabinetContainer>