Fix cannot remove child issue

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/Filters.js

@@ -118,7 +118,6 @@ class FiltersForm extends React.Component {
         });
     };
 
-
     render() {
         const {categories, tags, deviceTypes} = this.state;
         const {getFieldDecorator} = this.props.form;
@@ -148,10 +147,7 @@ class FiltersForm extends React.Component {
                             </Form.Item>
                         </Col>
                     </Row>
-                    <Divider/>
 
-                    {/*<Text strong={true}>Category</Text>*/}
-                    {/*<br/><br/>*/}
                     <Form.Item label="Categories">
                         {getFieldDecorator('categories', {
                             rules: [{
@@ -178,15 +174,7 @@ class FiltersForm extends React.Component {
                             </Select>
                         )}
                     </Form.Item>
-                    {/*<Select*/}
+
-                    {/*mode="multiple"*/}
-                    {/*style={{width: '100%'}}*/}
-                    {/*placeholder="All Categories"*/}
-                    {/*>*/}
-                    {/*<Option key={1}>IoT</Option>*/}
-                    {/*<Option key={2}>EMM</Option>*/}
-                    {/*</Select>*/}
-                    <Divider/>
 
                     <Form.Item label="Device Types">
                         {getFieldDecorator('deviceTypes', {
@@ -213,7 +201,6 @@ class FiltersForm extends React.Component {
                         )}
                     </Form.Item>
 
-                    {/*<Text strong={true}>Tags</Text>*/}
                     <Form.Item label="Tags">
                         {getFieldDecorator('tags', {
                             rules: [{
@@ -240,7 +227,6 @@ class FiltersForm extends React.Component {
                         )}
                     </Form.Item>
 
-                    <Divider/>
                     <Form.Item label="App Type">
                         {getFieldDecorator('appType', {})(
                             <Select

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

@@ -20,7 +20,7 @@ class App extends React.Component {
             <Router>
                 <div>
                     <Switch>
-                        <Redirect exact from="/store" to="/store/apps"/>
+                        <Redirect exact from="/store" to="/store/android"/>
                         {this.routes.map((route) => (
                             <RouteWithSubRoutes key={route.path} {...route} />
                         ))}

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

@@ -9,6 +9,7 @@ import AddReview from "./review/AddReview";
 import axios from "axios";
 import config from "../../../../public/conf/config.json";
 import AppInstallModal from "./install/AppInstallModal";
+import CurrentUsersReview from "./review/CurrentUsersReview";
 
 const {Title, Text, Paragraph} = Typography;
 
@@ -129,14 +130,13 @@ class ReleaseView extends React.Component {
                         {release.description}
                     </Paragraph>
                     <Divider/>
+                    <CurrentUsersReview uuid={release.uuid}/>
+                    <Divider dashed={true}/>
                     <Text>REVIEWS</Text>
                     <Row>
-                        <Col lg={18}>
+                        <Col lg={18} md={24}>
                             <DetailedRating type="app" uuid={release.uuid}/>
                         </Col>
-                        <Col lg={6}>
-                            <AddReview uuid={release.uuid}/>
-                        </Col>
                     </Row>
                     <Reviews type="app" uuid={release.uuid}/>
                 </div>

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

@@ -1,5 +1,5 @@
 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 axios from "axios";
 import config from "../../../../../public/conf/config.json";
@@ -52,10 +52,8 @@ class AddReview extends React.Component {
             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(
-            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,
             payload,
         ).then(res => {
             if (res.status === 201) {
@@ -69,10 +67,10 @@ class AddReview extends React.Component {
                         'Your review has been posted successfully.',
                 });
 
-                setTimeout(()=>{
+                setTimeout(() => {
-                    window.location.href= uuid;
+                    window.location.href = uuid;
-                },2000)
+                }, 2000)
-            }else{
+            } else {
                 this.setState({
                     loading: false,
                     visible: false
@@ -84,10 +82,10 @@ class AddReview extends React.Component {
                 });
             }
 
-        }).catch((error) =>{
+        }).catch((error) => {
             if (error.response.status === 401) {
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/store/login';
-            } else{
+            } else {
                 this.setState({
                     loading: false,
                     visible: false
@@ -105,8 +103,8 @@ class AddReview extends React.Component {
 
     render() {
         return (
-            <div style={{paddingTop: 20}}>
+            <div>
-                <Button style={{float: "right"}} type="dashed" onClick={this.showDrawer}>
+                <Button type="primary" onClick={this.showDrawer}>
                     <Icon type="star"/> Add a review
                 </Button>
 
@@ -145,7 +143,7 @@ class AddReview extends React.Component {
                                 <Button onClick={this.onClose} style={{marginRight: 8}}>
                                     Cancel
                                 </Button>
-                            <Button disabled={this.state.rating===0} onClick={this.onSubmit} type="primary">
+                                <Button disabled={this.state.rating === 0} onClick={this.onSubmit} type="primary">
                                     Submit
                                 </Button>
                             </Col>

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

@@ -0,0 +1,101 @@
+import React from "react";
+import {List, message, Typography, Empty, Button, Row, Col} from "antd";
+import SingleReview from "./SingleReview";
+import axios from "axios";
+import config from "../../../../../public/conf/config.json";
+import AddReview from "./AddReview";
+
+const {Text, Paragraph} = Typography;
+
+class CurrentUsersReview extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            data: []
+
+        };
+    }
+
+    componentDidMount() {
+        this.fetchData();
+    }
+
+    fetchData = () => {
+        const {uuid} = this.props;
+
+        axios.get(
+            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/reviews/app/user/" + uuid,
+        ).then(res => {
+            if (res.status === 200) {
+                const data = res.data.data.data;
+                this.setState({data});
+            }
+
+        }).catch((error) => {
+            if (error.response.hasOwnProperty(status) && error.response.status === 401) {
+                message.error('You are not logged in');
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/store/login';
+            } else {
+                message.error('Something went wrong when trying to get your review... :(');
+            }
+        });
+    };
+
+    render() {
+        const {data} = this.state;
+        const {uuid} = this.props;
+        return (
+            <div>
+                <Text>MY REVIEW</Text>
+                <div style={{
+                    overflow: "auto",
+                    paddingTop: 8,
+                    paddingLeft: 24
+                }}>
+                    {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>
+                        </div>
+                    )}
+
+                    {data.length === 0 && (
+                        <div>
+                            <Empty
+                                image={Empty.PRESENTED_IMAGE_DEFAULT}
+                                imagestyle={{
+                                    height: 60,
+                                }}
+                                description={
+                                    <span>Share your experience with your community by adding a review.</span>
+                                }
+                            >
+                                {/*<Button type="primary">Add review</Button>*/}
+                                <AddReview uuid={uuid}/>
+                            </Empty>
+                        </div>
+                    )}
+
+                </div>
+            </div>
+        );
+    }
+
+}
+
+export default CurrentUsersReview;

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

@@ -0,0 +1,164 @@
+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 EditReview extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.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
+        };
+
+        axios.post(
+            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/reviews/" + uuid,
+            payload,
+        ).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.href = uuid;
+                }, 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 = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/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>
+                <Button type="primary" 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 EditReview;

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

@@ -1,15 +1,15 @@
-.demo-infinite-container {
+.infinite-container {
     overflow: auto;
     padding: 8px 24px;
 }
-.demo-loading-container {
+.loading-container {
     position: absolute;
     bottom: 40px;
     width: 100%;
     text-align: center;
 }
 
-.demo-loading {
+.loading {
     position: absolute;
     bottom: -40px;
     left: 50%;

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

@@ -87,20 +87,8 @@ class Reviews extends React.Component {
     };
 
     render() {
-        const review = {
-            id: 2,
-            content: "Btw, it was clear to me that I can cancel the 1 year subscription before the free trial week and so I did. Dont understand the negative reviews about that. It has a good collection of excercises, meditations etc. You just answer 5 questions and you get challenges assigned to you. I would have liked something even more personalized. I didnt like the interface. It is a bit messy and difficult to follow your tasks. So, I didnt want to do a full-year subscription. There could be more options.",
-            rootParentI: -1,
-            immediateParentId: -1,
-            createdAt: "Fri, 24 May 2019 17:27:22 IST",
-            modifiedAt: "Fri, 24 May 2019 17:27:22 IST",
-            rating: 4,
-            replies: []
-        };
-        // console.log(this.state.loadMore);
-        // console.log(this.state.data.length);
         return (
-            <div className="demo-infinite-container">
+            <div className="infinite-container">
                 <InfiniteScroll
                     initialLoad={false}
                     pageStart={0}
@@ -117,7 +105,7 @@ class Reviews extends React.Component {
                         )}
                     >
                         {this.state.loading && this.state.hasMore && (
-                            <div className="demo-loading-container">
+                            <div className="loading-container">
                                 <Spin/>
                             </div>
                         )}

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

@@ -6,14 +6,15 @@ import Twemoji from "react-twemoji";
 import "./Reviews.css";
 
 const {Text, Paragraph} = Typography;
-const colorList = ['#f0932b', '#badc58', '#6ab04c', '#eb4d4b', '#0abde3', '#9b59b6', '#3498db', '#22a6b3'];
+const colorList = ['#f0932b', '#badc58', '#6ab04c', '#eb4d4b', '#0abde3', '#9b59b6', '#3498db', '#22a6b3','#e84393','#f9ca24'];
 
 class SingleReview extends React.Component {
 
     render() {
-        const review = this.props.review;
+        const {review} = this.props;
-        const randomColor = colorList[Math.floor(Math.random() * (colorList.length))];
+        const {username} = review;
-        const avatarLetter = review.username.charAt(0).toUpperCase();
+        const randomColor = colorList[username.length%10];
+        const avatarLetter = username.charAt(0).toUpperCase();
         const content = (
             <div style={{marginTop: -5}}>
                 <StarRatings
@@ -25,11 +26,11 @@ class SingleReview extends React.Component {
                     name='rating'
                 />
                 <Text style={{fontSize: 12, color: "#aaa"}} type="secondary"> {review.createdAt}</Text><br/>
+                    <Paragraph style={{color: "#777"}}>
                         <Twemoji options={{className: 'twemoji'}}>
-                    <Paragraph ellipsis={{rows: 3, expandable: true}} style={{color: "#777"}}>
                             {review.content}
-                    </Paragraph>
                         </Twemoji>
+                    </Paragraph>
             </div>
         );
 

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js

@@ -68,7 +68,7 @@ class NormalLoginForm extends React.Component {
                 axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname+':'+config.serverConfig.httpsPort+config.serverConfig.loginUri, request
                 ).then(res => {
                     if (res.status === 200) {
-                        window.location = res.data.url;
+                        window.location = config.serverConfig.protocol + "://"+config.serverConfig.hostname+':'+config.serverConfig.httpsPort+"/store";
                     }
                 }).catch(function (error) {
                     if (error.response.status === 400) {

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js

@@ -48,7 +48,6 @@ class Dashboard extends React.Component {
                 <Layout>
                     <Content style={{padding: '0 0'}}>
                         <Switch>
-                            <Redirect exact from="/store" to="/store/android"/>
                             {this.state.routes.map((route) => (
                                 <RouteWithSubRoutes changeSelectedMenuItem={this.changeSelectedMenuItem} key={route.path} {...route} />
                             ))}