In this blog post, we are going to implement the Skill feedback system on the Skills CMS. The features that are added by this implementation are displaying all the comments/feedbacks of the user, ability to add new feedback and also option to edit a previous feedback that was added.
The UI interacts with the back-end server via two APIs –
- API to return all feedbacks –
- URL – https://api.susi.ai/cms/getSkillFeedback.json
- It takes 4 parameters – model, group, language, skill
- API to post/edit feedback –
- URL – https://api.susi.ai/cms/feedbackSkill.json
- It takes 6 parameters – model, group, language, skill, feedback, access_token
Detailed explanation of the implementation
- The first task was to create a separate component for the feedback section – SkillFeedbackCard.js, along with the CSS file SkillFeedbackCard.css
- Create ES6 function to get all the Feedbacks of a skill,namely getFeedback(), on the parent component, i.e, SkillListing.js
- This above code contains the function getFeedback(), that makes an API call to the server for getting all the feedbacks. On successfully getting the response, the feedback array of the response is then passed to a function, saveSkillFeedback(), which in turn updates the skill_feedback state, which was declared in the constructor. This re-renders the components and displays the feedback in the UI.
- The response of the /cms/getSkillFeedback.json API is as follows –
- Then, we go ahead and create the function that is responsible for posting new feedback and editing them as well.
- This above code snippet contains the function postFeedback(newFeedback), that takes the user feedback and make an API call to update it on the server.
- All the required functions are ready. Now we add the SkillFeedbackCard.js component on the SkillListing.js component and pass useful data in the props.
- The next step is creating the UI for the SkillFeedbackCard.js component. We have used standard Material-UI components for creating the UI, that includes List, ListItem, Divider, IconButton, etc.
- Code snippet for the Feedback ListItem –
- The next part of the UI implementation creating option to edit and post feedback.
- Code snippet for the Post feedback section –
- For the edit section, I have used a Dialog box for it. Code snippet for the Edit feedback section –
This was the implementation for the Skill Feedback System on the Skills CMS and I hope, you found the blog helpful in making the understanding of the implementation better.
- Components catalog for the Material-UI components –