diff --git a/pairent_frontend_react/src/pages/PersonalCabinet/index.jsx b/pairent_frontend_react/src/pages/PersonalCabinet/index.jsx index 02a6c37..1d0c59e 100644 --- a/pairent_frontend_react/src/pages/PersonalCabinet/index.jsx +++ b/pairent_frontend_react/src/pages/PersonalCabinet/index.jsx @@ -1,11 +1,11 @@ -import React, { useEffect, useState }from 'react'; -import styled, { keyframes } from 'styled-components'; +import React, { useEffect, useState } from "react"; +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); } `; @@ -33,7 +33,7 @@ const Title = styled.div` display: flex; align-items: center; top: 0; - + & h2 { margin-left: 28px; font-weight: 600; @@ -53,8 +53,8 @@ const Title = styled.div` 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; - height: ${props => props.height}px; + width: ${(props) => props.width}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; `; @@ -171,7 +171,7 @@ const ButtonCircleChangeTrait = styled.button` height: 28px; padding: 0px; - + font-weight: 700; font-size: 20px; @@ -182,8 +182,8 @@ const ButtonCircleChangeTrait = styled.button` text-align: center; border-radius: 70%; - color: #FFFFFF; - background: #D9D9D9; + color: #ffffff; + 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 ( <> - + {props.title} @@ -217,99 +217,131 @@ const InformationBlock = (props) => { ); -} +}; const InformationBlockInput = (props) => { return ( <> - + {props.title} - + ); -} +}; const TraitsBlock = (props) => { const list = props.list; - if (list.length == 0) return ( - <> -

Вы ничего не указали

- - ); + if (list.length == 0) + return ( + <> +

Вы ничего не указали

+ + ); return ( - <> - - { - list.map((el, i) => { - return ( - - - {el.text} - - - ); - }) - } - {props.button - ? + <> + + {list.map((el, i) => { + return ( + + + {el.text} + + + ); + })} + {props.button ? ( <> - - - + - + + + - : + ) : ( <> - Изменить.. + Изменить.. - } + )} ); -} - +}; const PersonalCabinet = function () { - - const [user, setUser] = useState() - const userID = 1; - - const [fetchUser, isUserLoading, userError] = useFetching(async (userID) => { - const response = await User.getById(userID); - setUser(response) - console.log(user.name) - }) + const user = User.restoreFromLocalStorage(); + const userID = user.id; useEffect(() => { - fetchUser(userID) - }, []) + fetchUser(userID); + }, []); - const TraitsListOne = [{text: 'Честность', color: '#3F51B5'}, {text: 'Аккуратность', color: '#03BCD6'}, {text: 'Музыкальность', color: '#E91D65'}, - {text: 'Общительность', color: '#03A9F4'}, {text: 'Дружелюбность', color: '#8CC34D'}] + const TraitsListOne = [ + { 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'}, - {text: 'Общительность', color: '#03A9F4'}, {text: 'Дружелюбность', color: '#8CC34D'}, {text: 'Мудрость', color: '#FF5923'}, - {text: 'Адекватность', color: '#2196F4'}, {text: 'Щедрость', color: '#FFC308'}, {text: 'Вежливость', color: '#9D28B2'}] + const TraitsListTwo = [ + { text: "Честность", color: "#3F51B5" }, + { 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'}, - {text: 'Лживость', color: '#AD9029'}, {text: 'Диструктивность', color: '#9A150C'}, {text: 'Токсичность', color: '#608426'}] + const TraitsListThree = [ + { text: "Курит", color: "#94740B" }, + { text: "Равнодушие", color: "#D9B8B0" }, + { text: "Эгоист", color: "#6E3F58" }, + { text: "Лень", color: "#9F6844" }, + { text: "Лживость", color: "#AD9029" }, + { text: "Диструктивность", color: "#9A150C" }, + { text: "Токсичность", color: "#608426" }, + ]; return ( <> <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> @@ -317,38 +349,121 @@ const PersonalCabinet = function () { Добрый день, Александр! Ваш статус - Студент - + - + Загрузить фото - - + + - - - - - - - - - - - - + + + + + + + + + + + + - - Ваши личностные характеристики - - Желаемые черты соседа - - Нежелаемые черты соседа - + + + Ваши личностные характеристики + + + + Желаемые черты соседа + + + + Нежелаемые черты соседа + + @@ -357,4 +472,4 @@ const PersonalCabinet = function () { ); }; -export default PersonalCabinet; \ No newline at end of file +export default PersonalCabinet;