Create component to edit review

feature/appm-store/pbac
Jayasanka 5 years ago
parent 7675f5a315
commit f568904251

@ -125,7 +125,7 @@ class AddReview extends React.Component {
<TextArea <TextArea
placeholder="Tell others what you think about this app. Would you recommend it, and why?" placeholder="Tell others what you think about this app. Would you recommend it, and why?"
onChange={this.onChange} onChange={this.onChange}
autosize={{minRows: 6, maxRows: 12}} rows={4}
value={this.state.content || ''} value={this.state.content || ''}
style={{marginBottom: 20}} style={{marginBottom: 20}}
/> />

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import {List, message, Typography, Empty, Button, Row, Col} from "antd"; import {List, message, Typography, Empty, Button, Row, Col} from "antd";
import SingleReview from "./SingleReview"; import SingleReview from "./singleReview/SingleReview";
import axios from "axios"; import axios from "axios";
import config from "../../../../../public/conf/config.json"; import config from "../../../../../public/conf/config.json";
import AddReview from "./AddReview"; import AddReview from "./AddReview";
@ -42,6 +42,14 @@ class CurrentUsersReview extends React.Component {
}); });
}; };
updateCallback = (response) =>{
const {rating, content} = response;
this.setState({
rating,
content
});
};
render() { render() {
const {data} = this.state; const {data} = this.state;
const {uuid} = this.props; const {uuid} = this.props;
@ -55,22 +63,15 @@ class CurrentUsersReview extends React.Component {
}}> }}>
{data.length > 0 && ( {data.length > 0 && (
<div> <div>
<Row> <List
<Col span={18}> dataSource={data}
<List renderItem={item => (
dataSource={data} <List.Item key={item.id}>
renderItem={item => ( <SingleReview uuid={uuid} review={item} isDeletable={true} isEditable={true} updateCallback={this.updateCallback}/>
<List.Item key={item.id}> </List.Item>
<SingleReview review={item}/> )}
</List.Item> >
)} </List>
>
</List>
</Col>
<Col span={6}>
<Button type="primary" shape="circle" icon="search" />
</Col>
</Row>
</div> </div>
)} )}

@ -13,11 +13,4 @@
position: absolute; position: absolute;
bottom: -40px; bottom: -40px;
left: 50%; left: 50%;
}
img.twemoji {
height: 1em;
width: 1em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em;
} }

@ -3,7 +3,7 @@ import {List, message, Avatar, Spin, Button} from 'antd';
import "./Reviews.css"; import "./Reviews.css";
import InfiniteScroll from 'react-infinite-scroller'; import InfiniteScroll from 'react-infinite-scroller';
import SingleReview from "./SingleReview"; import SingleReview from "./singleReview/SingleReview";
import axios from "axios"; import axios from "axios";
import config from "../../../../../public/conf/config.json"; import config from "../../../../../public/conf/config.json";
@ -87,31 +87,33 @@ class Reviews extends React.Component {
}; };
render() { render() {
const {loading, hasMore, data, loadMore} = this.state;
const {uuid} = this.props;
return ( return (
<div className="infinite-container"> <div className="infinite-container">
<InfiniteScroll <InfiniteScroll
initialLoad={false} initialLoad={false}
pageStart={0} pageStart={0}
loadMore={this.handleInfiniteOnLoad} loadMore={this.handleInfiniteOnLoad}
hasMore={!this.state.loading && this.state.hasMore} hasMore={!loading && hasMore}
useWindow={true} useWindow={true}
> >
<List <List
dataSource={this.state.data} dataSource={data}
renderItem={item => ( renderItem={item => (
<List.Item key={item.id}> <List.Item key={item.id}>
<SingleReview review={item}/> <SingleReview uuid={uuid} review={item} isDeletable={true} isEditable={false}/>
</List.Item> </List.Item>
)} )}
> >
{this.state.loading && this.state.hasMore && ( {loading && hasMore && (
<div className="loading-container"> <div className="loading-container">
<Spin/> <Spin/>
</div> </div>
)} )}
</List> </List>
</InfiniteScroll> </InfiniteScroll>
{!this.state.loadMore && (this.state.data.length >= limit) && (<div style={{textAlign: "center"}}> {!loadMore && (data.length >= limit) && (<div style={{textAlign: "center"}}>
<Button type="dashed" htmlType="button" onClick={this.enableLoading}>Read All Reviews</Button> <Button type="dashed" htmlType="button" onClick={this.enableLoading}>Read All Reviews</Button>
</div>)} </div>)}
</div> </div>

@ -0,0 +1,26 @@
img.twemoji {
height: 1em;
width: 1em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em;
}
.edit-button {
color: #1890ff;
text-decoration: none;
outline: none;
cursor: pointer;
font-weight: normal;
font-size: 0.8em;
padding-left: 5px;
}
.delete-button {
color: #e74c3c;
text-decoration: none;
outline: none;
cursor: pointer;
font-weight: normal;
font-size: 0.8em;
padding-left: 5px;
}

@ -3,7 +3,8 @@ import {Avatar} from "antd";
import {List, Typography} from "antd"; import {List, Typography} 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 "./Reviews.css"; import "./SingleReview.css";
import EditReview from "./editReview/EditReview";
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'];
@ -11,7 +12,7 @@ const colorList = ['#f0932b', '#badc58', '#6ab04c', '#eb4d4b', '#0abde3', '#9b59
class SingleReview extends React.Component { class SingleReview extends React.Component {
render() { render() {
const {review} = this.props; const {review, isEditable, isDeletable, uuid} = this.props;
const {username} = review; const {username} = review;
const randomColor = colorList[username.length%10]; const randomColor = colorList[username.length%10];
const avatarLetter = username.charAt(0).toUpperCase(); const avatarLetter = username.charAt(0).toUpperCase();
@ -34,6 +35,14 @@ class SingleReview extends React.Component {
</div> </div>
); );
const title = (
<div>
{review.username}
{isEditable && (<EditReview uuid={uuid} review={review}/>)}
{isDeletable && (<span className="delete-button">delete</span>)}
</div>
);
return ( return (
<div> <div>
<List.Item.Meta <List.Item.Meta
@ -42,7 +51,7 @@ class SingleReview extends React.Component {
{avatarLetter} {avatarLetter}
</Avatar> </Avatar>
} }
title={review.username} title={title}
description={content} description={content}
/> />
</div> </div>

@ -0,0 +1,9 @@
.edit-button {
color: #1890ff;
text-decoration: none;
outline: none;
cursor: pointer;
font-weight: normal;
font-size: 0.8em;
padding-left: 5px;
}

@ -2,7 +2,8 @@ import React from "react";
import {Drawer, Button, Icon, Row, Col, Typography, Divider, Input, Spin, notification} from 'antd'; import {Drawer, Button, Icon, Row, Col, Typography, Divider, Input, Spin, notification} from 'antd';
import StarRatings from "react-star-ratings"; import StarRatings from "react-star-ratings";
import axios from "axios"; import axios from "axios";
import config from "../../../../../public/conf/config.json"; import config from "../../../../../../../public/conf/config.json";
import "./EditReview.css";
const {Title} = Typography; const {Title} = Typography;
const {TextArea} = Input; const {TextArea} = Input;
@ -19,11 +20,18 @@ class EditReview extends React.Component {
}; };
} }
componentDidMount() {
const {content,rating,id} = this.props.review;
console.log(this.props.review);
this.setState({
content,
rating
});
}
showDrawer = () => { showDrawer = () => {
this.setState({ this.setState({
visible: true, visible: true,
content: '',
rating: 0,
loading: false loading: false
}); });
}; };
@ -34,6 +42,7 @@ class EditReview extends React.Component {
}); });
}; };
changeRating = (newRating, name) => { changeRating = (newRating, name) => {
this.setState({ this.setState({
rating: newRating rating: newRating
@ -46,6 +55,7 @@ class EditReview extends React.Component {
onSubmit = () => { onSubmit = () => {
const {content, rating} = this.state; const {content, rating} = this.state;
const {id} = this.props.review;
const {uuid} = this.props; const {uuid} = this.props;
this.setState({ this.setState({
loading: true loading: true
@ -56,11 +66,11 @@ class EditReview extends React.Component {
rating: rating rating: rating
}; };
axios.post( axios.put(
config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/reviews/" + uuid, config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/reviews/" + uuid+"/"+id,
payload, payload,
).then(res => { ).then(res => {
if (res.status === 201) { if (res.status === 200) {
this.setState({ this.setState({
loading: false, loading: false,
visible: false visible: false
@ -68,12 +78,8 @@ class EditReview extends React.Component {
notification["success"]({ notification["success"]({
message: 'Done!', message: 'Done!',
description: description:
'Your review has been posted successfully.', 'Your review has been update successfully.',
}); });
setTimeout(() => {
window.location.href = uuid;
}, 2000)
} else { } else {
this.setState({ this.setState({
loading: false, loading: false,
@ -82,7 +88,7 @@ class EditReview extends React.Component {
notification["error"]({ notification["error"]({
message: 'Something went wrong', message: 'Something went wrong',
description: description:
"We are unable to add your review right now.", "We are unable to update your review right now.",
}); });
} }
@ -107,11 +113,8 @@ class EditReview extends React.Component {
render() { render() {
return ( return (
<div> <span>
<Button type="primary" onClick={this.showDrawer}> <span className="edit-button" onClick={this.showDrawer}>edit</span>
<Icon type="star"/> Add a review
</Button>
<Drawer <Drawer
// title="Basic Drawer" // title="Basic Drawer"
placement="bottom" placement="bottom"
@ -124,12 +127,12 @@ class EditReview extends React.Component {
<Row> <Row>
<Col lg={8}/> <Col lg={8}/>
<Col lg={8}> <Col lg={8}>
<Title level={4}>Add review</Title> <Title level={4}>Edit review</Title>
<Divider/> <Divider/>
<TextArea <TextArea
placeholder="Tell others what you think about this app. Would you recommend it, and why?" placeholder="Tell others what you think about this app. Would you recommend it, and why?"
onChange={this.onChange} onChange={this.onChange}
autosize={{minRows: 6, maxRows: 12}} rows={6}
value={this.state.content || ''} value={this.state.content || ''}
style={{marginBottom: 20}} style={{marginBottom: 20}}
/> />
@ -156,7 +159,7 @@ class EditReview extends React.Component {
</Drawer> </Drawer>
</div> </span>
); );
} }
} }
Loading…
Cancel
Save