diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json index 5075b4fe03..388f4ef0fd 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json +++ b/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": { diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/images/avatar-2.png b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/images/avatar-2.png new file mode 100644 index 0000000000..9467f5eb76 Binary files /dev/null and b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/images/avatar-2.png differ diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/images/avatar-3.png b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/images/avatar-3.png new file mode 100644 index 0000000000..f1d980e55c Binary files /dev/null and b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/images/avatar-3.png differ diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/images/avatar.png b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/images/avatar.png new file mode 100644 index 0000000000..5fab5dee57 Binary files /dev/null and b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/images/avatar.png differ diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js index 3a87ac38b8..b86bc1516f 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js +++ b/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 { + ); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.css new file mode 100644 index 0000000000..8678c63891 --- /dev/null +++ b/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%; +} \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.js new file mode 100644 index 0000000000..5d45e4cbc7 --- /dev/null +++ b/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 ( +
+ + ( + + + + )} + > + {this.state.loading && this.state.hasMore && ( +
+ +
+ )} +
+
+ {!this.state.loadMore && (this.state.data.length >= limit) && (
+ +
)} +
+ ); + } +} + +export default Reviews; \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/SingleReview.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/SingleReview.js new file mode 100644 index 0000000000..3834b3ff2e --- /dev/null +++ b/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 = ( +
+ + {review.createdAt}
+ {review.content} +
+ ); + + return ( +
+ + {avatarLetter} + + } + title={review.username} + description={content} + /> +
+ ); + } +} + +export default SingleReview; \ No newline at end of file