Skip to content

Commit ecfc077

Browse files
AntonyFomichevAntonyFomichev
committed
aposkd
1 parent d97bcdb commit ecfc077

18 files changed

Lines changed: 634 additions & 137 deletions

File tree

‎app/components/Header/index.js‎

Lines changed: 167 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,22 @@ import React, { Component } from 'react';
22
import { NavLink, withRouter } from 'react-router-dom';
33
import AppBar from '@material-ui/core/AppBar';
44
import Toolbar from '@material-ui/core/Toolbar';
5+
import IconButton from '@material-ui/core/IconButton';
56
import Typography from '@material-ui/core/Typography';
6-
import SearchInput from 'components/SearchInput';
7+
import jwt from 'jsonwebtoken';
78
import { withStyles } from '@material-ui/core/styles';
8-
9+
import MenuIcon from '@material-ui/icons/Menu';
10+
import Popper from '@material-ui/core/Popper';
911
import ava from 'containers/AccountPage/images/3.jpg';
10-
import { Avatar, Button } from '@material-ui/core';
12+
import {
13+
Avatar,
14+
Button,
15+
MenuItem,
16+
MenuList,
17+
Grow,
18+
ClickAwayListener,
19+
Paper,
20+
} from '@material-ui/core';
1121

1222
const styles = () => ({
1323
root: {
@@ -23,14 +33,33 @@ const styles = () => ({
2333
},
2434
logo: {
2535
color: '#000',
26-
width: 193,
2736
textDecoration: 'none',
2837
},
2938
});
3039

3140
class Header extends Component {
41+
state = {
42+
open: false,
43+
};
44+
45+
handleToggle = () => {
46+
this.setState(state => ({ open: !state.open }));
47+
};
48+
49+
handleClose = event => {
50+
if (this.anchorEl.contains(event.target)) {
51+
return;
52+
}
53+
54+
this.setState({ open: false });
55+
};
56+
3257
render() {
3358
const { classes } = this.props;
59+
const { open } = this.state;
60+
61+
const fromToken = jwt.decode(localStorage.token, { complete: true });
62+
3463
return (
3564
<div className={classes.root}>
3665
<AppBar position="static" color="default" className={classes.appBar}>
@@ -41,31 +70,149 @@ class Header extends Component {
4170
display: 'flex',
4271
justifyContent: 'space-between',
4372
padding: 0,
73+
zIndex: 1000,
4474
}}
4575
>
4676
<NavLink to="/" className={classes.logo}>
4777
<Typography variant="h5" color="inherit">
4878
Consensus
4979
</Typography>
5080
</NavLink>
51-
<SearchInput />
52-
{localStorage.name ? (
53-
<NavLink
54-
to={`/account/${localStorage.id}`}
55-
style={{ color: '#000', textDecoration: 'none' }}
56-
>
57-
<Avatar style={{ backgroundColor: '#212121' }}>
58-
{localStorage.name[0]}
59-
</Avatar>
60-
</NavLink>
81+
{localStorage.token ? (
82+
<div style={{ display: 'flex', alignItems: 'center' }}>
83+
<NavLink
84+
to={`/account/${fromToken.payload._id}`}
85+
style={{
86+
color: '#000',
87+
textDecoration: 'none',
88+
marginRight: '1rem',
89+
}}
90+
>
91+
<Avatar style={{ backgroundColor: '#212121' }}>
92+
{fromToken.payload.name[0]}
93+
</Avatar>
94+
</NavLink>
95+
<IconButton
96+
buttonRef={node => {
97+
this.anchorEl = node;
98+
}}
99+
aria-owns={open ? 'menu-list-grow' : null}
100+
aria-haspopup="true"
101+
onClick={this.handleToggle}
102+
>
103+
<MenuIcon color="primary" />
104+
</IconButton>
105+
</div>
61106
) : (
62-
<Button
63-
variant="outlined"
64-
onClick={() => this.props.history.push('/login')}
65-
>
66-
Вход и регистрация
67-
</Button>
107+
<div>
108+
<Button
109+
variant="outlined"
110+
onClick={() => this.props.history.push('/login')}
111+
style={{ marginRight: '1rem' }}
112+
>
113+
Вход и регистрация
114+
</Button>
115+
<IconButton
116+
buttonRef={node => {
117+
this.anchorEl = node;
118+
}}
119+
aria-owns={open ? 'menu-list-grow' : null}
120+
aria-haspopup="true"
121+
onClick={this.handleToggle}
122+
>
123+
<MenuIcon color="primary" />
124+
</IconButton>
125+
</div>
68126
)}
127+
128+
<Popper open={open} anchorEl={this.anchorEl} transition>
129+
{({ TransitionProps, placement }) => (
130+
<Grow
131+
{...TransitionProps}
132+
style={{
133+
transformOrigin:
134+
placement === 'bottom' ? 'center top' : 'center bottom',
135+
}}
136+
>
137+
<Paper>
138+
<ClickAwayListener onClickAway={this.handleClose}>
139+
<MenuList>
140+
<MenuItem style={{ padding: '0' }}>
141+
<NavLink
142+
to="/account/5d05d5d5ee5aaf259cbc4e16"
143+
style={{
144+
color: '#000',
145+
textDecoration: 'none',
146+
width: '100%',
147+
height: '100%',
148+
padding: '8px 16px',
149+
}}
150+
>
151+
Дизайн
152+
</NavLink>
153+
</MenuItem>
154+
<MenuItem style={{ padding: '0' }}>
155+
<NavLink
156+
to="/account/5d05d65a39e79f25a4a17519"
157+
style={{
158+
color: '#000',
159+
textDecoration: 'none',
160+
width: '100%',
161+
height: '100%',
162+
padding: '8px 16px',
163+
}}
164+
>
165+
Брендбук
166+
</NavLink>
167+
</MenuItem>
168+
<MenuItem style={{ padding: '0' }}>
169+
<NavLink
170+
to="/account/5d05d5aeee5aaf259cbc4e15"
171+
style={{
172+
color: '#000',
173+
textDecoration: 'none',
174+
width: '100%',
175+
height: '100%',
176+
padding: '8px 16px',
177+
}}
178+
>
179+
Айдентика
180+
</NavLink>
181+
</MenuItem>
182+
<MenuItem style={{ padding: '0' }}>
183+
<NavLink
184+
to="/account/5d05d62939e79f25a4a17518"
185+
style={{
186+
color: '#000',
187+
textDecoration: 'none',
188+
width: '100%',
189+
height: '100%',
190+
padding: '8px 16px',
191+
}}
192+
>
193+
Логотипирование
194+
</NavLink>
195+
</MenuItem>
196+
<MenuItem style={{ padding: '0' }}>
197+
<NavLink
198+
to="/account/5d09259240e14e4472ffd906"
199+
style={{
200+
color: '#000',
201+
textDecoration: 'none',
202+
width: '100%',
203+
height: '100%',
204+
padding: '8px 16px',
205+
}}
206+
>
207+
Колористика и цветоведение
208+
</NavLink>
209+
</MenuItem>
210+
</MenuList>
211+
</ClickAwayListener>
212+
</Paper>
213+
</Grow>
214+
)}
215+
</Popper>
69216
</Toolbar>
70217
</AppBar>
71218
</div>

‎app/components/PostBlockText/index.js‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import React, { Component } from 'react';
2+
import {
3+
withStyles,
4+
Divider,
5+
Typography,
6+
InputBase,
7+
Button,
8+
} from '@material-ui/core';
9+
import Avatar from '@material-ui/core/Avatar';
10+
import Card from '@material-ui/core/Card';
11+
import CardHeader from '@material-ui/core/CardHeader';
12+
import Paper from '@material-ui/core/Paper';
13+
import CardActions from '@material-ui/core/CardActions';
14+
import CardContent from '@material-ui/core/CardContent';
15+
import MoreHoriz from '@material-ui/icons/MoreHoriz';
16+
import IconButton from '@material-ui/core/IconButton';
17+
import FavoriteIcon from '@material-ui/icons/Favorite';
18+
19+
const styles = theme => ({
20+
root: {
21+
width: 616,
22+
marginBottom: '2rem',
23+
},
24+
avatar: {
25+
width: 28,
26+
height: 28,
27+
backgroundColor: '#212121',
28+
},
29+
input: {
30+
padding: '8px 16px',
31+
width: 482,
32+
},
33+
media: {
34+
width: '100%',
35+
height: 614,
36+
margin: 0,
37+
borderRadius: '0',
38+
boxShadow: 'none',
39+
padding: '1rem',
40+
overflowY: 'scroll',
41+
},
42+
expand: {
43+
transform: 'rotate(0deg)',
44+
marginLeft: 'auto',
45+
transition: theme.transitions.create('transform', {
46+
duration: theme.transitions.duration.shortest,
47+
}),
48+
},
49+
expandOpen: {
50+
transform: 'rotate(180deg)',
51+
},
52+
});
53+
54+
class PostBlock extends Component {
55+
state = {
56+
checked: false,
57+
};
58+
59+
render() {
60+
const {
61+
classes,
62+
nickname,
63+
comments,
64+
likes,
65+
title,
66+
text,
67+
image,
68+
} = this.props;
69+
const { checked } = this.state;
70+
return (
71+
<Card className={classes.root}>
72+
<CardHeader
73+
avatar={
74+
<Avatar aria-label="Recipe" className={classes.avatar}>
75+
K
76+
</Avatar>
77+
}
78+
action={
79+
<IconButton
80+
aria-label="Settings"
81+
size="small"
82+
style={{ marginTop: '10px', marginRight: '5px' }}
83+
>
84+
<MoreHoriz />
85+
</IconButton>
86+
}
87+
title={nickname}
88+
/>
89+
<Divider />
90+
<div
91+
style={{
92+
position: 'relative',
93+
display: 'flex',
94+
alignItems: 'center',
95+
justifyContent: 'center',
96+
}}
97+
>
98+
<Paper className={classes.media}>
99+
<Typography variant="h4" gutterBottom style={{textAlign: 'center'}}>
100+
{title}
101+
</Typography>
102+
<Typography variant="body1">{text}</Typography>
103+
</Paper>
104+
</div>
105+
<Divider />
106+
<CardActions disableSpacing style={{ padding: '16px' }}>
107+
<div style={{ display: 'flex', alignItems: 'center' }}>
108+
<FavoriteIcon style={{ marginRight: '10px', cursor: 'pointer' }} />
109+
<Typography
110+
variant="subtitle2"
111+
component="h1"
112+
style={{ userSelect: 'none' }}
113+
>
114+
{likes} отметок "Нравится"
115+
</Typography>
116+
</div>
117+
</CardActions>
118+
{comments ? (
119+
<CardContent style={{ padding: '0 16px 16px 16px' }}>
120+
{comments
121+
? comments.map(item => (
122+
<Typography variant="body2">
123+
<span style={{ fontWeight: 600, cursor: 'pointer' }}>
124+
{item.name}
125+
</span>{' '}
126+
{item.comment}
127+
</Typography>
128+
))
129+
: ''}
130+
</CardContent>
131+
) : (
132+
''
133+
)}
134+
<Divider />
135+
<InputBase
136+
className={classes.input}
137+
placeholder="Добавить коментарий..."
138+
inputProps={{ 'aria-label': 'Comments' }}
139+
/>
140+
<Button color="primary">Опубликовать</Button>
141+
</Card>
142+
);
143+
}
144+
}
145+
146+
export default withStyles(styles)(PostBlock);

‎app/containers/AccountPage/actions.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { FetchAction } from 'utils/api';
2+
3+
export const fetchUser = new FetchAction('FETCH_USER');

0 commit comments

Comments
 (0)