SUSI Skill CMS provides the functionality to rate the skills, therefore users rate skills they use but there isn’t any place where they can see all the skills they rated, thus a ‘My Ratings’ section was implemented on the dashboard page to view these statistics. So to see what ratings they have given to skills they can just login to the cms and navigate to /dashboard and a my ratings components is visible there which lists all the ratings the user has provided in a nice tabular format.
About the API
An API endpoint is implemented on the server which fetches the skill data for skills the user has rated which includes the skill name, stars given and the timestamp.
/cms/getProfileDetails.json?access_token=
So we pass the access token of the authenticated user and a JSON response is received which contains all the details as depicted below, this data is then parsed on the frontend and filled in a tabular form on the MyRatings section.
{ "rated_skills": [ {"amazon_shopping": { "stars": "1", "timestamp": "2018-06-10 13:05:32.295" }}, {"aboutsusi": { "stars": "2", "timestamp": "2018-06-10 13:26:26.222" }}, {"anagrams": { "stars": "3", "timestamp": "2018-06-10 13:25:31.195" }} ], "session": {"identity": { "type": "email", "name": "anshu.av97@gmail.com", "anonymous": false }}, "accepted": true, "message": "User ratings fetched." }
Displaying the results on the web
Make a MyRatings component and render it on the dashboard component
Make an AJAX call to the API and save the returned data to the component state. First create a loadSkills function in componentDidMount which will be called just as the component is mounted to the DOM which will then fetch data from the server, extract the meaningful parts such as skill_name, skill_star and timestamp and push them to an array which in this case is ratingsData. While the data is being fetched we show a circular loader for better UX and once we receive the data we save it in the component state and turn loading to false which will replace the loading animation with the actual data.
loadSkills = () => { let url; url = urls.API_URL + '/cms/getProfileDetails.json?access_token=' + cookies.get('loggedIn'); let self = this; let ratingsData = []; $.ajax({ url: url, jsonpCallback: 'pxcd', dataType: 'jsonp', jsonp: 'callback', crossDomain: true, success: function(data) { if (data.rated_skills) { for (let i of data.rated_skills) { let skill_name = Object.keys(i)[0]; ratingsData.push({ skill_name: skill_name, skill_star: i[skill_name].stars, rating_timestamp: i[skill_name].timestamp, }); } self.setState({ ratingsData, }); } self.setState({ loading: false, }); }, error: function(err) { self.setState({ loading: false, openSnackbar: true, msgSnackbar: "Error. Couldn't rating data.", }); }, }); };
Display a loading animation when the data is being fetched, we maintain a state in the component called loading which is initially true since we don’t have the data just as the component is rendered so after we receive the data we turn the loading state to false which will hide the circular loader and display the component with the data received.
{this.state.loading ? ( <div className="center"> <CircularProgress size={62} color="#4285f5" /> <h4>Loading</h4> </div> ) : ( ... ) }
Add a table to structure the state data, since we’re using material-ui library throughout the project we use material table component from the library and populate the data received in it with 3 columns namely skill name, skill star, and timestamp.
<div className="table-wrap"> <Table className="table-root" selectable={false}> <TableHeader displaySelectAll={false} adjustForCheckbox={false}> <TableRow> <TableHeaderColumn>Skill Name</TableHeaderColumn> <TableHeaderColumn>Rating</TableHeaderColumn> <TableHeaderColumn>Timestamp</TableHeaderColumn> </TableRow> </TableHeader> <TableBody displayRowCheckbox={false}> {ratingsData.map((skill, index) => { return ( <TableRow key={index}> <TableRowColumn style={{ fontSize: '16px' }}> {( skill.skill_name.charAt(0).toUpperCase() + skill.skill_name.slice(1) ).replace(/[_-]/g, ' ')} </TableRowColumn> <TableRowColumn style={{ fontSize: '16px' }}> {skill.skill_star} </TableRowColumn> <TableRowColumn> {this.parseDate(skill.rating_timestamp)} </TableRowColumn> </TableRow> ); })} <TableRow /> </TableBody> </Table> </div>
Display a message when there is no rating data available, let’s say the user has not rated any skills so it does not make sense to display an empty table and therefore we display a message instead for users to rate skills.
{ratingsData.length === 0 && !this.state.loading && ( <div> <div className="center"> <br /> <h2> You have not rated any skill, go to{' '} <Link to="/">SUSI Skills Explorer</Link> and rate. </h2> <br /> </div> </div> )}
Import this component in the dashboard component and render it below My Skills
import MyRatings from './MyRatings';
Render the imported MyRatings component on a separate card from material-ui on the dashboard.
<Paper style={styles.paperStyle} className="botBuilder-page-card" zDepth={1} > <h1 className="center">My Ratings</h1> <MyRatings /> </Paper>
Resources
- Alex, Blog post on material UI: https://medium.freecodecamp.org/meet-your-material-ui-your-new-favorite-user-interface-library-6349a1c88a8c
- ReactJS Documentation, React component state: https://reactjs.org/docs/faq-state.html
- Anshuman, pull request authored by me: https://github.com/fossasia/susi_skill_cms/pull/777