Merge branch 'application-mgt-new' into 'application-mgt-new'

Create component for add a review in APPM store

See merge request entgra/carbon-device-mgt!119

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/categories/ManageCategories.js

@@ -256,7 +256,7 @@ class ManageCategories extends React.Component {
             loading: true,
             isEditModalVisible: false,
         });
-        const request = "method=put&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/admin/applications/categories?from="+currentlyEditingId+"%26to="+editingValue;
+        const request = "method=put&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/admin/applications/categories/rename?from="+currentlyEditingId+"%26to="+editingValue;
         axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
         ).then(res => {
             if (res.status === 200) {

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

@@ -5,6 +5,8 @@ import ImgViewer from "../../apps/release/images/ImgViewer";
 import StarRatings from "react-star-ratings";
 import DetailedRating from "./DetailedRating";
 import Reviews from "./review/Reviews";
+import AddReview from "./review/AddReview";
+
 const {Title, Text, Paragraph} = Typography;
 
 class ReleaseView extends React.Component {
@@ -23,8 +25,8 @@ class ReleaseView extends React.Component {
                             <StarRatings
                                 rating={release.rating}
                                 starRatedColor="#777"
-                                starDimension = "20px"
-                                starSpacing = "2px"
+                                starDimension="20px"
+                                starSpacing="2px"
                                 numberOfStars={5}
                                 name='rating'
                             />
@@ -52,6 +54,9 @@ class ReleaseView extends React.Component {
                         <Col lg={18}>
                             <DetailedRating uuid={release.uuid}/>
                         </Col>
+                        <Col lg={6}>
+                            <AddReview uuid={release.uuid}/>
+                        </Col>
                     </Row>
                     <Reviews uuid={release.uuid}/>
                 </div>

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

@@ -0,0 +1,160 @@
+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";
+
+const {Title} = Typography;
+const {TextArea} = Input;
+
+class AddReview extends React.Component {
+    state = {
+        visible: false,
+        content: '',
+        rating: 0,
+        loading: false
+    };
+
+    showDrawer = () => {
+        this.setState({
+            visible: true,
+            content: '',
+            rating: 0,
+            loading: false
+        });
+    };
+
+    onClose = () => {
+        this.setState({
+            visible: false,
+
+        });
+    };
+    changeRating = (newRating, name) => {
+        this.setState({
+            rating: newRating
+        });
+    };
+
+    onChange = (e) => {
+        this.setState({content: e.target.value})
+    };
+
+    onSubmit = () => {
+        const {content, rating} = this.state;
+        const {uuid} = this.props;
+        this.setState({
+            loading: true
+        });
+
+        const payload = {
+            content: content,
+            rating: rating
+        };
+
+        const request = "method=post&content-type=application/json&payload="+JSON.stringify(payload)+"&api-endpoint=/application-mgt-store/v1.0/reviews/"+uuid;
+
+        axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+        ).then(res => {
+            if (res.status === 201) {
+                this.setState({
+                    loading: false,
+                    visible: false
+                });
+                notification["success"]({
+                    message: 'Done!',
+                    description:
+                        'Your review has been posted successfully.',
+                });
+
+                setTimeout(()=>{
+                    window.location.reload();
+                },2000)
+            }else{
+                this.setState({
+                    loading: false,
+                    visible: false
+                });
+                notification["error"]({
+                    message: 'Something went wrong',
+                    description:
+                        "We are unable to add your review right now.",
+                });
+            }
+
+        }).catch((error) =>{
+            if (error.response.status === 401) {
+                window.location.href = 'https://localhost:9443/store/login';
+            } else{
+                this.setState({
+                    loading: false,
+                    visible: false
+                });
+                notification["error"]({
+                    message: 'Something went wrong',
+                    description:
+                        "We are unable to add your review right now.",
+                });
+            }
+        });
+
+
+    };
+
+    render() {
+        return (
+            <div style={{paddingTop: 20}}>
+                <Button style={{float: "right"}} type="dashed" onClick={this.showDrawer}>
+                    <Icon type="star"/> Add a review
+                </Button>
+
+                <Drawer
+                    // title="Basic Drawer"
+                    placement="bottom"
+                    closable={false}
+                    onClose={this.onClose}
+                    visible={this.state.visible}
+                    height={400}
+                >
+                    <Spin spinning={this.state.loading} tip="Posting your review...">
+                    <Row>
+                        <Col lg={8}/>
+                        <Col lg={8}>
+                            <Title level={4}>Add 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}}
+                                value={this.state.content || ''}
+                                style={{marginBottom: 20}}
+                            />
+                            <StarRatings
+                                rating={this.state.rating}
+                                changeRating={this.changeRating}
+                                starRatedColor="#777"
+                                starHoverColor="#444"
+                                starDimension="20px"
+                                starSpacing="2px"
+                                numberOfStars={5}
+                                name='rating'
+                            />
+                            <br/><br/>
+                            <Button onClick={this.onClose} style={{marginRight: 8}}>
+                                Cancel
+                            </Button>
+                            <Button disabled={this.state.rating===0} onClick={this.onSubmit} type="primary">
+                                Submit
+                            </Button>
+                        </Col>
+                    </Row>
+                    </Spin>
+                </Drawer>
+
+
+            </div>
+        );
+    }
+}
+
+export default AddReview;