Create component to edit review

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

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

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

@@ -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>
+                            <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>
                     )}
 

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

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

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

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

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

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

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/SingleReview.js

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

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

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

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/editReview/EditReview.js

@@ -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(
+        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,
         ).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>
+            <span>
-                <Button type="primary" onClick={this.showDrawer}>
+                <span className="edit-button" onClick={this.showDrawer}>edit</span>
-                    <Icon type="star"/> Add a review
-                </Button>
-
                 <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>
         );
     }
 }