|
|
@ -1,48 +1,83 @@
|
|
|
|
import React from "react";
|
|
|
|
import React from "react";
|
|
|
|
import {Avatar} from "antd";
|
|
|
|
import {Avatar, notification} from "antd";
|
|
|
|
import {List, Typography} from "antd";
|
|
|
|
import {List, Typography, Popconfirm} from "antd";
|
|
|
|
import StarRatings from "react-star-ratings";
|
|
|
|
import StarRatings from "react-star-ratings";
|
|
|
|
import Twemoji from "react-twemoji";
|
|
|
|
import Twemoji from "react-twemoji";
|
|
|
|
import "./SingleReview.css";
|
|
|
|
import "./SingleReview.css";
|
|
|
|
import EditReview from "./editReview/EditReview";
|
|
|
|
import EditReview from "./editReview/EditReview";
|
|
|
|
|
|
|
|
import axios from "axios";
|
|
|
|
|
|
|
|
import config from "../../../../../../public/conf/config.json";
|
|
|
|
|
|
|
|
|
|
|
|
const {Text, Paragraph} = Typography;
|
|
|
|
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 {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
static defaultProps = {
|
|
|
|
|
|
|
|
isPersonalReview: false
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
const {username} = this.props.review;
|
|
|
|
|
|
|
|
const color = colorList[username.length % 10];
|
|
|
|
this.state = {
|
|
|
|
this.state = {
|
|
|
|
content: '',
|
|
|
|
content: '',
|
|
|
|
rating: 0,
|
|
|
|
rating: 0,
|
|
|
|
color: '#f0932b'
|
|
|
|
color: color,
|
|
|
|
|
|
|
|
review: props.review
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
updateCallback = (review) => {
|
|
|
|
const {content, rating, username} = this.props.review;
|
|
|
|
|
|
|
|
const color = colorList[username.length%10];
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
this.setState({
|
|
|
|
content,
|
|
|
|
review
|
|
|
|
rating,
|
|
|
|
|
|
|
|
color
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
deleteReview = () => {
|
|
|
|
|
|
|
|
const {uuid} = this.props;
|
|
|
|
|
|
|
|
const {id} = this.state.review;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let url = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' +
|
|
|
|
|
|
|
|
config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.store;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// call as an admin api if the review is not a personal review
|
|
|
|
|
|
|
|
if (!this.props.isPersonalReview) {
|
|
|
|
|
|
|
|
url += "/admin";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
url += "/reviews/" + uuid + "/" + id;
|
|
|
|
|
|
|
|
|
|
|
|
updateCallback = (response) =>{
|
|
|
|
axios.delete(url).then(res => {
|
|
|
|
console.log(response);
|
|
|
|
if (res.status === 200) {
|
|
|
|
const {rating, content} = response;
|
|
|
|
notification["success"]({
|
|
|
|
this.setState({
|
|
|
|
message: 'Done!',
|
|
|
|
rating,
|
|
|
|
description:
|
|
|
|
content
|
|
|
|
'The review has been deleted successfully.',
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.props.deleteCallback(id);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}).catch((error) => {
|
|
|
|
|
|
|
|
console.log(error);
|
|
|
|
|
|
|
|
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
|
|
|
|
|
|
|
window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/store/login';
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
notification["error"]({
|
|
|
|
|
|
|
|
message: 'Something went wrong',
|
|
|
|
|
|
|
|
description:
|
|
|
|
|
|
|
|
"We were unable to delete the review..",
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
render() {
|
|
|
|
const {review, isEditable, isDeletable, uuid} = this.props;
|
|
|
|
const {isEditable, isDeletable, uuid} = this.props;
|
|
|
|
const {content, rating, color} = this.state;
|
|
|
|
const {color, review} = this.state;
|
|
|
|
const {username} = review;
|
|
|
|
const {content, rating, username} = review;
|
|
|
|
const avatarLetter = username.charAt(0).toUpperCase();
|
|
|
|
const avatarLetter = username.charAt(0).toUpperCase();
|
|
|
|
const body = (
|
|
|
|
const body = (
|
|
|
|
<div style={{marginTop: -5}}>
|
|
|
|
<div style={{marginTop: -5}}>
|
|
|
@ -67,7 +102,15 @@ class SingleReview extends React.Component {
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
{review.username}
|
|
|
|
{review.username}
|
|
|
|
{isEditable && (<EditReview uuid={uuid} review={review} updateCallback={this.updateCallback}/>)}
|
|
|
|
{isEditable && (<EditReview uuid={uuid} review={review} updateCallback={this.updateCallback}/>)}
|
|
|
|
{isDeletable && (<span className="delete-button">delete</span>)}
|
|
|
|
{isDeletable && (
|
|
|
|
|
|
|
|
<Popconfirm
|
|
|
|
|
|
|
|
title="Are you sure delete this review?"
|
|
|
|
|
|
|
|
onConfirm={this.deleteReview}
|
|
|
|
|
|
|
|
okText="Yes"
|
|
|
|
|
|
|
|
cancelText="No"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<span className="delete-button">delete</span>
|
|
|
|
|
|
|
|
</Popconfirm>)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|