|
|
@ -10,16 +10,44 @@ const {Text, Paragraph} = Typography;
|
|
|
|
const colorList = ['#f0932b', '#badc58', '#6ab04c', '#eb4d4b', '#0abde3', '#9b59b6', '#3498db', '#22a6b3','#e84393','#f9ca24'];
|
|
|
|
const colorList = ['#f0932b', '#badc58', '#6ab04c', '#eb4d4b', '#0abde3', '#9b59b6', '#3498db', '#22a6b3','#e84393','#f9ca24'];
|
|
|
|
|
|
|
|
|
|
|
|
class SingleReview extends React.Component {
|
|
|
|
class SingleReview extends React.Component {
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
|
|
|
|
content: '',
|
|
|
|
|
|
|
|
rating: 0,
|
|
|
|
|
|
|
|
color: '#f0932b'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
|
|
|
|
const {content, rating, username} = this.props.review;
|
|
|
|
|
|
|
|
const color = colorList[username.length%10];
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
|
|
|
|
content,
|
|
|
|
|
|
|
|
rating,
|
|
|
|
|
|
|
|
color
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
updateCallback = (response) =>{
|
|
|
|
|
|
|
|
console.log(response);
|
|
|
|
|
|
|
|
const {rating, content} = response;
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
|
|
|
|
rating,
|
|
|
|
|
|
|
|
content
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
render() {
|
|
|
|
const {review, isEditable, isDeletable, uuid} = this.props;
|
|
|
|
const {review, isEditable, isDeletable, uuid} = this.props;
|
|
|
|
|
|
|
|
const {content, rating, color} = this.state;
|
|
|
|
const {username} = review;
|
|
|
|
const {username} = review;
|
|
|
|
const randomColor = colorList[username.length%10];
|
|
|
|
|
|
|
|
const avatarLetter = username.charAt(0).toUpperCase();
|
|
|
|
const avatarLetter = username.charAt(0).toUpperCase();
|
|
|
|
const content = (
|
|
|
|
const body = (
|
|
|
|
<div style={{marginTop: -5}}>
|
|
|
|
<div style={{marginTop: -5}}>
|
|
|
|
<StarRatings
|
|
|
|
<StarRatings
|
|
|
|
rating={review.rating}
|
|
|
|
rating={rating}
|
|
|
|
starRatedColor="#777"
|
|
|
|
starRatedColor="#777"
|
|
|
|
starDimension="12px"
|
|
|
|
starDimension="12px"
|
|
|
|
starSpacing="2px"
|
|
|
|
starSpacing="2px"
|
|
|
@ -29,7 +57,7 @@ class SingleReview extends React.Component {
|
|
|
|
<Text style={{fontSize: 12, color: "#aaa"}} type="secondary"> {review.createdAt}</Text><br/>
|
|
|
|
<Text style={{fontSize: 12, color: "#aaa"}} type="secondary"> {review.createdAt}</Text><br/>
|
|
|
|
<Paragraph style={{color: "#777"}}>
|
|
|
|
<Paragraph style={{color: "#777"}}>
|
|
|
|
<Twemoji options={{className: 'twemoji'}}>
|
|
|
|
<Twemoji options={{className: 'twemoji'}}>
|
|
|
|
{review.content}
|
|
|
|
{content}
|
|
|
|
</Twemoji>
|
|
|
|
</Twemoji>
|
|
|
|
</Paragraph>
|
|
|
|
</Paragraph>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -38,7 +66,7 @@ class SingleReview extends React.Component {
|
|
|
|
const title = (
|
|
|
|
const title = (
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
{review.username}
|
|
|
|
{review.username}
|
|
|
|
{isEditable && (<EditReview uuid={uuid} review={review}/>)}
|
|
|
|
{isEditable && (<EditReview uuid={uuid} review={review} updateCallback={this.updateCallback}/>)}
|
|
|
|
{isDeletable && (<span className="delete-button">delete</span>)}
|
|
|
|
{isDeletable && (<span className="delete-button">delete</span>)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
);
|
|
|
@ -47,12 +75,12 @@ class SingleReview extends React.Component {
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<List.Item.Meta
|
|
|
|
<List.Item.Meta
|
|
|
|
avatar={
|
|
|
|
avatar={
|
|
|
|
<Avatar style={{backgroundColor: randomColor, verticalAlign: 'middle'}} size="large">
|
|
|
|
<Avatar style={{backgroundColor: color, verticalAlign: 'middle'}} size="large">
|
|
|
|
{avatarLetter}
|
|
|
|
{avatarLetter}
|
|
|
|
</Avatar>
|
|
|
|
</Avatar>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
title={title}
|
|
|
|
title={title}
|
|
|
|
description={content}
|
|
|
|
description={body}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
);
|
|
|
|