Fix merge conflicts

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json

@@ -22,12 +22,15 @@
     "react-dom": "^16.8.4",
     "react-highlight-words": "^0.16.0",
     "react-image-viewer-zoom": "^1.0.36",
+    "react-infinite-scroller": "^1.2.4",
     "react-router": "latest",
     "react-router-config": "^5.0.0",
     "react-router-dom": "latest",
     "react-scripts": "2.1.8",
     "react-star-ratings": "^2.3.0",
+    "react-virtualized": "^9.21.1",
     "redux-thunk": "^2.3.0",
+    "reqwest": "^2.0.5",
     "storm-react-diagrams": "^5.2.1"
   },
   "devDependencies": {

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

@@ -4,6 +4,7 @@ import "../../../App.css";
 import ImgViewer from "../../apps/release/images/ImgViewer";
 import StarRatings from "react-star-ratings";
 import DetailedRating from "./DetailedRating";
+import Reviews from "./review/Reviews";
 const {Title, Text, Paragraph} = Typography;
 
 class ReleaseView extends React.Component {
@@ -52,6 +53,7 @@ class ReleaseView extends React.Component {
                             <DetailedRating uuid={release.uuid}/>
                         </Col>
                     </Row>
+                    <Reviews uuid={release.uuid}/>
                 </div>
             </div>
         );

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

@@ -0,0 +1,16 @@
+.demo-infinite-container {
+    overflow: auto;
+    padding: 8px 24px;
+}
+.demo-loading-container {
+    position: absolute;
+    bottom: 40px;
+    width: 100%;
+    text-align: center;
+}
+
+.demo-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

@@ -0,0 +1,127 @@
+import React from "react";
+import {List, message, Avatar, Spin, Button} from 'antd';
+import "./Reviews.css";
+
+import InfiniteScroll from 'react-infinite-scroller';
+import SingleReview from "./SingleReview";
+import axios from "axios";
+import config from "../../../../../public/conf/config.json";
+
+const limit = 5;
+
+class Reviews extends React.Component {
+    state = {
+        data: [],
+        loading: false,
+        hasMore: false,
+        loadMore: false
+    };
+
+
+    componentDidMount() {
+        this.fetchData(0, limit, res => {
+            this.setState({
+                data: res,
+            });
+        });
+    }
+
+    fetchData = (offset, limit, callback) => {
+        const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-store/v1.0/reviews/" + this.props.uuid+"?offset="+offset+"%26limit="+limit;
+        axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+        ).then(res => {
+            if (res.status === 200) {
+                let reviews = res.data.data.data;
+                callback(reviews);
+            }
+
+        }).catch(function (error) {
+            if (error.response.status === 401) {
+                window.location.href = 'https://localhost:9443/store/login';
+                message.warning('Something went wrong');
+            }
+        });
+    };
+
+    handleInfiniteOnLoad = (count) => {
+        const offset = count*limit;
+        let data = this.state.data;
+        this.setState({
+            loading: true,
+        });
+        if (data.length > 149) {
+            this.setState({
+                hasMore: false,
+                loading: false,
+            });
+            return;
+        }
+        this.fetchData(offset, limit, res => {
+            if(res.length>0){
+                data = data.concat(res);
+                this.setState({
+                    data,
+                    loading: false,
+                });
+            }else {
+                this.setState({
+                    hasMore: false,
+                    loading: false
+                });
+            }
+        });
+    };
+
+    enableLoading = () => {
+        this.setState({
+            hasMore: true,
+            loadMore: true
+        });
+    };
+
+    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">
+                <InfiniteScroll
+                    initialLoad={false}
+                    pageStart={0}
+                    loadMore={this.handleInfiniteOnLoad}
+                    hasMore={!this.state.loading && this.state.hasMore}
+                    useWindow={true}
+                >
+                    <List
+                        dataSource={this.state.data}
+                        renderItem={item => (
+                            <List.Item key={item.id}>
+                                <SingleReview review={item}/>
+                            </List.Item>
+                        )}
+                    >
+                        {this.state.loading && this.state.hasMore && (
+                            <div className="demo-loading-container">
+                                <Spin/>
+                            </div>
+                        )}
+                    </List>
+                </InfiniteScroll>
+                {!this.state.loadMore && (this.state.data.length >= limit) && (<div style={{textAlign: "center"}}>
+                    <Button type="dashed" htmlType="button" onClick={this.enableLoading}>Read All Reviews</Button>
+                </div>)}
+            </div>
+        );
+    }
+}
+
+export default Reviews;

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

@@ -0,0 +1,46 @@
+import React from "react";
+import {Avatar} from "antd";
+import {List,Typography} from "antd";
+import StarRatings from "react-star-ratings";
+
+const {Text, Paragraph} = Typography;
+const colorList = ['#f0932b','#badc58','#6ab04c','#eb4d4b','#0abde3', '#9b59b6','#3498db','#22a6b3'];
+
+class SingleReview extends React.Component {
+
+    render() {
+        const review = this.props.review;
+        const randomColor = colorList[Math.floor(Math.random() * (colorList.length))];
+        const avatarLetter = review.username.charAt(0).toUpperCase();
+        const content = (
+            <div style={{marginTop: -5}}>
+                <StarRatings
+                    rating={review.rating}
+                    starRatedColor="#777"
+                    starDimension = "12px"
+                    starSpacing = "2px"
+                    numberOfStars={5}
+                    name='rating'
+                />
+                <Text style={{fontSize: 12, color: "#aaa"}} type="secondary"> {review.createdAt}</Text><br/>
+                <Paragraph ellipsis={{ rows: 3, expandable: true }} style={{color: "#777"}}>{review.content}</Paragraph>
+            </div>
+        );
+
+        return (
+            <div>
+                <List.Item.Meta
+                    avatar={
+                        <Avatar style={{ backgroundColor: randomColor, verticalAlign: 'middle' }} size="large">
+                            {avatarLetter}
+                        </Avatar>
+                    }
+                    title={review.username}
+                    description={content}
+                />
+            </div>
+        );
+    }
+}
+
+export default SingleReview;