SUSI exhibits several skills which are managed by the SUSI Skill CMS, it essentially is a client which allows users to create/update skills conveniently since for each skill it is important to have the functionality of rating system so developers can get to know which skills are performing better than the rest and consequently improve them, thus a skill rating system which allows the users to give positive or negative feedback for each skill is implemented on the server.

Fetching skill_rating from the server

1. Fetch skill data for which ratings are to be displayed through ajax calls
   API Endpoint –
   

   /cms/getSkillMetadata.json?…
   

2. Parse the received metadata object to get positive and negative ratings for that skill

if(skillData.skill_rating) {
       	let positive_rating = skillData.skill_rating.positive;
        	let negative_rating = skillData.skill_rating.negative;
}

Sample API response


{
  "skill_metadata": {
    "model": "general",
    "group": "Knowledge",
    "language": "en",
    "developer_privacy_policy": null,
    "descriptions": "Want to know about fossasia, just ask susi to tell that, Susi tells about the SUSI.AI creators",
    "image": "images/creator_info.png",
    "author": "madhav rathi",
    "author_url": "https://github.com/madhavrathi",
    "author_email": null,
    "skill_name": "Creator Info",
    "terms_of_use": null,
    "dynamic_content": false,
    "examples": [
      "Who created you?",
      "what is fossasia?"
    ],
    "skill_rating": {
      "negative": "0",
      "positive": "0",
      "stars": {
        "one_star": 0,
        "four_star": 0,
        "five_star": 0,
        "total_star": 0,
        "three_star": 0,
        "avg_star": 0,
        "two_star": 0
      },
      "feedback_count": 0
    },
    "creationTime": "2018-03-17T16:38:29Z",
    "lastAccessTime": "2018-06-15T15:51:50Z",
    "lastModifiedTime": "2018-03-17T16:38:29Z"
  },
  "accepted": true,
  "message": "Success: Fetched Skill's Metadata",
  "session": {"identity": {
    "type": "host",
    "name": "162.158.166.37_d80fb5c9",
    "anonymous": true
  }}
}

3. Set the react state of the component to store positive and negative rating.

this.setState({
  positive_rating,
  negative_rating
})

4. Use react-icons to fetch like and dislike icon components from font-awesome.

npm i -S react-icons

5. Import the corresponding icons in the SkillPage component

import { FaThumbsOUp, FaThumbsODown } from 'react-icons/lib/fa/'

6. Display the rating count along with their icons

<div className="rating">
    <div className="positive">
         <FaThumbsOUp />
         {this.state.positive_rating}
     </div>
       <div className="negative">
             <FaThumbsODown />
             {this.state.negative_rating}
         </div>
</div>

Example

References

• react-icons npm package
• Blog on icons as react components – https://medium.com/@david.gilbertson/icons-as-react-components-de3e33cb8792