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
getFeedback = () => { let getFeedbackUrl = `${urls.API_URL}/cms/getSkillFeedback.json`; let modelValue = 'general'; this.groupValue = this.props.location.pathname.split('/')[1]; this.languageValue = this.props.location.pathname.split('/')[3]; getFeedbackUrl = getFeedbackUrl + '?model=' + modelValue + '&group=' + this.groupValue + '&language=' + this.languageValue + '&skill=' + this.name; let self = this; // Get skill feedback of the visited skill $.ajax({ url: getFeedbackUrl, dataType: 'jsonp', crossDomain: true, jsonp: 'callback', success: function (data) { self.saveSkillFeedback(data.feedback); }, error: function(e) { console.log(e); } }); }; saveSkillFeedback = (feedback = []) => { this.setState({ skill_feedback: feedback }) }
- 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 –
{ "feedback": [ { "feedback": "Awesome skill!", "email": "coolakshat24@gmail.com", "timestamp": "2018-06-12 19:28:39.297" }, { "feedback": "Awesome skill!", "email": "akshatnitd@gmail.com", "timestamp": "2018-06-12 21:35:53.048" } ], "session": {"identity": { "type": "host", "name": "141.101.98.18_a7ab9c4d", "anonymous": true }}, "skill_name": "aboutsusi", "accepted": true, "message": "Skill feedback fetched" }
- Then, we go ahead and create the function that is responsible for posting new feedback and editing them as well.
postFeedback = (newFeedback) => { let baseUrl = urls.API_URL + '/cms/feedbackSkill.json'; let modelValue = 'general'; this.groupValue = this.props.location.pathname.split('/')[1]; this.languageValue = this.props.location.pathname.split('/')[3]; let postFeedbackUrl = baseUrl + '?model=' + modelValue + '&group=' + this.groupValue + '&language=' + this.languageValue + '&skill=' + this.name + '&feedback=' + newFeedback + '&access_token='+cookies.get('loggedIn'); let self = this; $.ajax({ url: postFeedbackUrl, dataType: 'jsonp', jsonp: 'callback', crossDomain: true, success: function (data) { self.getFeedback() }, error: function(e) { console.log(e); } }); };
- 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.
<SkillFeedbackCard skill_name={this.state.skill_name} skill_feedback={this.state.skill_feedback} postFeedback={this.postFeedback} />
- 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 –
<ListItem key={index} leftAvatar={<CircleImage name={data.email.toUpperCase()} size='40' />} primaryText={data.email} secondaryText={<p> {data.feedback} </p>} />
- The next part of the UI implementation creating option to edit and post feedback.
- Code snippet for the Post feedback section –
className=“feedback-textbox”> id=“post-feedback” hintText=“Skill Feedback” defaultValue=“” errorText={this.state.errorText} multiLine={true} fullWidth={true} /> label=“Post” primary={true} backgroundColor={‘#4285f4’} style={{ margin: 10 }} onClick={this.postFeedback} />
- For the edit section, I have used a Dialog box for it. Code snippet for the Edit feedback section –
<Dialog title="Edit Feedback" actions={actions} modal={false} open={this.state.openDialog} onRequestClose={this.handleClose} > <TextField id="edit-feedback" hintText="Skill Feedback" defaultValue={userFeedback} errorText={this.state.errorText} multiLine={true} fullWidth={true} /> </Dialog>
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.
Resources
- Components catalog for the Material-UI components –