Ratings React.JS Component by #HexiPi
Installation:
Note: This module requires bootstrap & font awesome for optimal CSS styling.
npm install ratings-hexipi bootstrap reactstrap font-awesome --save
OR
yarn add ratings-hexipi bootstrap reactstrap font-awesome
Example of Usage:
import React, { Component } from 'react';
import RatingSection, { RatingsSummary, CommentRes,
defaultRatingPercentages } from 'ratings-hexipi';
import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/css/font-awesome.min.css';
import './App.css';
class App extends Component {
state = {
comments: [],
commentSubmitRes: CommentRes.NONE,
};
calculateRatingPercentages = () => {
//This is just an example function that calculates the rating percentages
//and is probably not the most efficient way of doing this :p.
const ratingsCount = { ...defaultRatingPercentages };
const ratingPercentages = { ...defaultRatingPercentages };
const totalNumberOfComments = this.state.comments.length;
this.state.comments.forEach(comment => {
const rating = comment.commenter_rating.toString();
ratingsCount[rating] = Number(ratingsCount[rating]) + 1;
});
Object.keys(ratingsCount).forEach((key, _) => {
const ratingCount = ratingsCount[key];
const percentageCalc =
(Number(ratingCount) / totalNumberOfComments) * 100;
ratingPercentages[key] = (percentageCalc) ? percentageCalc : 0;
});
return ratingPercentages;
}
addComment = commentInfo => {
//Use to call your backend/API functions (or anything else you need)
//to send the comment data.
try {
const comments = this.state.comments;
commentInfo.timestamp = new Date().getTime();
comments.push(commentInfo);
this.setState({
comments: comments,
commentSubmitRes: CommentRes.OK
});
}
catch(e) {
this.setState({
commentSubmitRes: CommentRes.ERROR,
});
}
}
//Set the state of the "commentSubmitRes" to the default so that
//the form could be displayed again
commentSubmitResultReset = () =>
this.setState({ commentSubmitRes: CommentRes.NONE });
render() {
return(
<div>
<RatingsSummary
ratingPercentages={this.calculateRatingPercentages()}
numberOfReviews={this.state.comments.length}
/>
<RatingSection
submitMethod="post"
commentsData={this.state.comments}
addComment={this.addComment}
commentSubmitResult={this.state.commentSubmitRes}
commentSubmitResultReset={this.commentSubmitResultReset}
/>
</div>
);
}
}
export default App;
Attributes & Data Types for RatingSection:
Below is a list of all the available attributes:
interface RatingSectionProps {
//The form submission method (either "get" or "post")
submitMethod: 'get' | 'post',
//The optional custom main heading that would be displayed
heading?: string,
//The optional custom subheading that would be displayed
subHeading?: string,
//The array that will contain the comments that were made
commentsData: CommentData[],
//The optional custom "OK" message that would be displayed
commentSubmitOKMsg?: string,
//The optional custom "ERROR" message that would be displayed
commentSubmitErrorMsg?: string,
//The result of the comment submission
//(one of the options of the CommentRes enum)
commentSubmitResult: CommentRes,
//The optional value of the background color of the page the RatingSection
//component is used on;
//This helps determine the appropriate font color that the RatingSection
//component should use
backgroundColor?: string,
//Provides the ability for a website admin to delete review comments
isAdmin?: Boolean,
//The callback that is executed after the comment form is submitted;
//The "comment" parameter holds the data that was submitted on the form of
//the type "CommentData"
addComment: (comment: CommentData) => void,
//The callback that is executed after the comment form is reset
commentSubmitResultReset: () => void,
//The optional callback that is executed after a comment is deleted by an admin;
//The "comment_data" parameter holds the data of the comment
//which is of the type "CommentData"
//This ONLY works when isAdmin is set to 'true'
onCommentDelete?: (comment_data: CommentData) => void
}
Note: Most attributes are technically optional since they already have default values assigned to them. However the ones that are actually optional (marked with a "?") will not be shown or used by default (with the exception of the default headings). All callback functions are required if you actually want the ratings form to work properly.
Below are all the available values of the RatingSectionProps default values:
RatingSectionProps.defaultProps = {
heading: 'Add a Review...',
subHeading: 'Let us know what you think!',
commentsData: [],
commentSubmitOKMsg: 'Review Submitted!',
commentSubmitErrorMsg: 'An error has occurred (why???)!' +
'😥 Please try again later.',
commentSubmitResult: CommentRes.NONE,
//The background containing the RatingSection component is 'black'
backgroundColor: 'black',
//Admin privileges are not allowed
isAdmin: false
}
Below are all the available values of the CommentRes Enumerator:
enum CommentRes {
//The comment submitted successfully; a success message is displayed
OK,
//An error occurred during comment submission; an error message is displayed
ERROR,
//The comment form is displayed and is ready to be filled out
NONE
}
Below are all the available values of the CommentData interface:
interface CommentData {
commenter_name: string,
commenter_rating: number,
comment_content: string,
timestamp: number
}
Attributes & Data Types for RatingsSummary:
Below are all the available values of the RatingsSummaryProps interface:
interface RatingsSummaryProps {
//The JSON object that will contain the rating percentages of the different
//ratings that were made;
//It should have the same structure as the RatingPercentages interface
ratingPercentages: RatingPercentages,
//The total number of reviews that were made;
//This gets displayed for users to see
numberOfReviews: number,
//The optional value of the background color of the page the RatingsSummary
//component is used on;
//This helps determine the appropriate font color that the RatingsSummary
//component should use
backgroundColor?: string
}
Below are all the available values of the RatingsSummaryProps default values:
RatingsSummary.defaultProps = {
//30% are 3 star ratings, 20% are 4 star ratings, and 50% are 5 star ratings
ratingPercentages: { '3': 30, '4': 20, '5': 50 },
//200 total reviews
numberOfReviews: 200,
//The background containing the RatingsSummary component is 'black'
backgroundColor: 'black'
}
Below are all the available values of the RatingPercentages interface:
interface RatingPercentages {
'0.5'?: number,
'1'?: number,
'1.5'?: number,
'2'?: number,
'2.5'?: number,
'3'?: number,
'3.5'?: number,
'4'?: number,
'4.5'?: number,
'5'?: number
};
Below are all the available values of the defaultRatingPercentages JSON Object:
const defaultRatingPercentages: RatingPercentages = {
'0.5': 0,
'1': 0,
'1.5': 0,
'2': 0,
'2.5': 0,
'3': 0,
'3.5': 0,
'4': 0,
'4.5': 0,
'5': 0
};