inosh
/
device-mgt-core
forked from community/device-mgt-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Create component to edit review

Browse Source
4.x.x
Jayasanka 5 years ago
parent 7675f5a315
commit f568904251
8 changed files with 97 additions and 54 deletions
Show Stats Download Patch File Download Diff File

2
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/AddReview.js vendored
Unescape View File

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

35
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/CurrentUsersReview.js vendored
Unescape View File

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

7
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.css
Unescape View File

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

14
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.js vendored
Unescape View File

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

26
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/SingleReview.css
Unescape View File

@ -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;
}

15
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/SingleReview.js → components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/SingleReview.js vendored
Unescape View File

@ -3,7 +3,8 @@ import {Avatar} from "antd";
import {List, Typography} from "antd";
import StarRatings from "react-star-ratings";
import Twemoji from "react-twemoji";
import "./Reviews.css";
import "./SingleReview.css";
import EditReview from "./editReview/EditReview";
const {Text, Paragraph} = Typography;
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 {
render() {
const {review} = this.props;
const {review, isEditable, isDeletable, uuid} = this.props;
const {username} = review;
const randomColor = colorList[username.length%10];
const avatarLetter = username.charAt(0).toUpperCase();
@ -34,6 +35,14 @@ class SingleReview extends React.Component {
</div>
);
const title = (
<div>
{review.username}
{isEditable && (<EditReview uuid={uuid} review={review}/>)}
{isDeletable && (<span className="delete-button">delete</span>)}
</div>
);
return (
<div>
<List.Item.Meta
@ -42,7 +51,7 @@ class SingleReview extends React.Component {
{avatarLetter}
</Avatar>
}
title={review.username}
title={title}
description={content}
/>
</div>

9
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/editReview/EditReview.css
Unescape View File

@ -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;
}

43
components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/EditReview.js → components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/editReview/EditReview.js vendored
Unescape View File

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