add personal cabinet react
This commit is contained in:
parent
c018b745ff
commit
d7cc152254
|
@ -4,3 +4,4 @@ djangorestframework
|
||||||
django-cors-headers
|
django-cors-headers
|
||||||
Pillow
|
Pillow
|
||||||
requests
|
requests
|
||||||
|
oidc-client
|
Binary file not shown.
After Width: | Height: | Size: 100 KiB |
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M18 4V14.2857C18 15.2321 17.2441 16 16.3125 16H1.6875C0.755859 16 0 15.2321 0 14.2857V4C0 3.05357 0.755859 2.28571 1.6875 2.28571H4.78125L5.21367 1.11071C5.45977 0.442857 6.08906 0 6.79219 0H11.2043C11.9074 0 12.5367 0.442857 12.7828 1.11071L13.2188 2.28571H16.3125C17.2441 2.28571 18 3.05357 18 4ZM13.2188 9.14286C13.2188 6.77857 11.3273 4.85714 9 4.85714C6.67266 4.85714 4.78125 6.77857 4.78125 9.14286C4.78125 11.5071 6.67266 13.4286 9 13.4286C11.3273 13.4286 13.2188 11.5071 13.2188 9.14286ZM12.0938 9.14286C12.0938 10.875 10.7051 12.2857 9 12.2857C7.29492 12.2857 5.90625 10.875 5.90625 9.14286C5.90625 7.41071 7.29492 6 9 6C10.7051 6 12.0938 7.41071 12.0938 9.14286Z" fill="white"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 801 B |
|
@ -0,0 +1,360 @@
|
||||||
|
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 { useFetching } from '../../hooks/useFetching';
|
||||||
|
|
||||||
|
import { Row, Col, Stack } from 'react-bootstrap';
|
||||||
|
|
||||||
|
const BackButton = styled.button`
|
||||||
|
border: 1px solid #c2c4c2;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-radius: 14px;
|
||||||
|
|
||||||
|
background: #ffffff;
|
||||||
|
color: gray;
|
||||||
|
box-shadow: 0 2px 1px #00000010;
|
||||||
|
|
||||||
|
font-size: 12pt;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
& ${SVGIcon} {
|
||||||
|
transform: translate(-4px, 2px)
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Title = styled.div`
|
||||||
|
height: 100px;
|
||||||
|
padding-top: 32px;
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
& h2 {
|
||||||
|
margin-left: 28px;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0;
|
||||||
|
display: inline-block;
|
||||||
|
transform: translateY(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
& span {
|
||||||
|
margin-left: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 19px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const CabinetSection = styled.div`
|
||||||
|
width: 1270px;
|
||||||
|
height: 650px;
|
||||||
|
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.25);
|
||||||
|
border-radius: 20px;
|
||||||
|
margin: 27px auto;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const CabinetContainer = styled(Row)`
|
||||||
|
padding: 30px 26px 30px 36px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Avatar = styled.img`
|
||||||
|
width: 256px;
|
||||||
|
height: 256px;
|
||||||
|
|
||||||
|
margin: 25px 0px 0px 65px;
|
||||||
|
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.34);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const UploadPhoto = styled.button`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
width: 192px;
|
||||||
|
height: 32px;
|
||||||
|
|
||||||
|
margin: 16px auto 0px;
|
||||||
|
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
|
||||||
|
background: #007EFF;
|
||||||
|
border-radius: 12px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const WelcomeText = styled.p`
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 24px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const MainText = styled.p`
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 24px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const InputBlock = styled.input`
|
||||||
|
border: 1px solid #CCCCCC;
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
|
width: ${props => props.width}px;
|
||||||
|
height: ${props => props.height}px;
|
||||||
|
|
||||||
|
padding-left: 10px;
|
||||||
|
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #000000;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: #CCCCCC;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const TextAreaBlock = styled.textarea`
|
||||||
|
border: 1px solid #CCCCCC;
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
|
margin: 16px 0px 0px 55px;
|
||||||
|
resize: none;
|
||||||
|
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #000000;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: #CCCCCC;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const CharacterTraitBlock = styled.div`
|
||||||
|
width: calc(100% + 15px);
|
||||||
|
height: 28px;
|
||||||
|
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 28px;
|
||||||
|
display: inline-block;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
color: #FFFFFF;
|
||||||
|
|
||||||
|
background: ${props => props.background};
|
||||||
|
border-radius: 20px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ButtonCircleChangeTrait = styled.button`
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
|
||||||
|
padding: 0px;
|
||||||
|
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 20px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 70%;
|
||||||
|
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: #D9D9D9;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ButtonChangeTrait = styled.button`
|
||||||
|
margin-top: 14px;
|
||||||
|
|
||||||
|
width: auto;
|
||||||
|
height: 27px;
|
||||||
|
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 17px;
|
||||||
|
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
color: #007EFF;
|
||||||
|
background: none;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const InformationBlock = (props) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Row style={{marginTop: props.marginTop, marginLeft: 19}}>
|
||||||
|
<Col xs={5}>
|
||||||
|
<MainText>{props.title}</MainText>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<MainText>{props.text}</MainText>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const InformationBlockInput = (props) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<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}/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const TraitsBlock = (props) => {
|
||||||
|
const list = props.list;
|
||||||
|
|
||||||
|
if (list.length == 0) return (
|
||||||
|
<>
|
||||||
|
<h1>Вы ничего не указали</h1>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Row style={{marginLeft: 19}}>
|
||||||
|
{
|
||||||
|
list.map((el, i) => {
|
||||||
|
return (
|
||||||
|
<Col style={{paddingLeft: 0, marginRight: 9, marginTop: 10}} key={i}>
|
||||||
|
<CharacterTraitBlock background={el.color}>
|
||||||
|
{el.text}
|
||||||
|
</CharacterTraitBlock>
|
||||||
|
</Col>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
{props.button
|
||||||
|
?
|
||||||
|
<>
|
||||||
|
<Col style={{paddingLeft: 0, marginRight: 9, marginTop: 10}}>
|
||||||
|
<ButtonCircleChangeTrait>
|
||||||
|
+
|
||||||
|
</ButtonCircleChangeTrait>
|
||||||
|
</Col>
|
||||||
|
</>
|
||||||
|
:
|
||||||
|
<>
|
||||||
|
<ButtonChangeTrait>Изменить..</ButtonChangeTrait>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
</Row>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
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)
|
||||||
|
})
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchUser(userID)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
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 TraitsListThree = [{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}/>
|
||||||
|
Вернуться назад
|
||||||
|
</BackButton>
|
||||||
|
<h2>Личный кабинет<span>/ Мои данные</span></h2>
|
||||||
|
</Title>
|
||||||
|
<CabinetSection>
|
||||||
|
<CabinetContainer>
|
||||||
|
<Col>
|
||||||
|
<Stack>
|
||||||
|
<WelcomeText>Добрый день, Александр!</WelcomeText>
|
||||||
|
<MainText>Ваш статус - Студент</MainText>
|
||||||
|
<Avatar src='/images/avatar-test.jpg'/>
|
||||||
|
<UploadPhoto>
|
||||||
|
<SVGIcon src='/images/icons/camera.svg' width={18} height={16}/>
|
||||||
|
Загрузить фото
|
||||||
|
</UploadPhoto>
|
||||||
|
<TextAreaBlock 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%'}}>
|
||||||
|
<InformationBlock marginTop={13} title={'Имя'} text={'Александр'}/>
|
||||||
|
<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%'}}>
|
||||||
|
<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>
|
||||||
|
</CabinetSection>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PersonalCabinet;
|
|
@ -6,6 +6,7 @@ import PsychTest from "../pages/PsychTest";
|
||||||
import Tinder from "../pages/Tinder";
|
import Tinder from "../pages/Tinder";
|
||||||
import LoginPage from "../pages/LoginPage";
|
import LoginPage from "../pages/LoginPage";
|
||||||
import LoggedIn from "../pages/LoggedIn";
|
import LoggedIn from "../pages/LoggedIn";
|
||||||
|
import PersonalCabinet from "../pages/PersonalCabinet";
|
||||||
|
|
||||||
// НА ПРОДАШКЕНЕ СДЕЛАТЬ ПРИВАТНЫЕ МАРШРУТЫ
|
// НА ПРОДАШКЕНЕ СДЕЛАТЬ ПРИВАТНЫЕ МАРШРУТЫ
|
||||||
// export const privateRoutes = [
|
// export const privateRoutes = [
|
||||||
|
@ -25,6 +26,7 @@ export default Object.freeze({
|
||||||
{ path: "/login", component: <LoginPage />, exact: true },
|
{ path: "/login", component: <LoginPage />, exact: true },
|
||||||
{ path: "/sign-in", component: <LoggedIn />, exact: true },
|
{ path: "/sign-in", component: <LoggedIn />, exact: true },
|
||||||
{ path: "/psych_test", component: <PsychTest />, exact: true },
|
{ path: "/psych_test", component: <PsychTest />, exact: true },
|
||||||
|
{ path: "/personal_cabinet", component: <PersonalCabinet />, exact: true },
|
||||||
],
|
],
|
||||||
privateRoutes: [],
|
privateRoutes: [],
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue