Adding a feature to report skills in the CMS
A lot of interesting features were introduced in the SUSI.AI Skills CMS over the past few months but it lacked the functionality for users to be able to report skills which they find inappropriate or for any other reason. So an API was developed at the server to flag the skills as inappropriate and thus using this API endpoint an option was added at the skill page for each skill to mark the skill as inappropriate or report it. This data could be useful by admins to re-review the skills and see if something is wrong with it and it things seem out of place the skill can be removed or can be disabled. About the API An API is developed at the server so from the client we call this API to fetch data from the server and plug this data into the chart we wish to render. Endpoint : /cms/reportSkill.json?model={model}&group={group}&skill={skill}&feedback={feedback message}&access_token={access_token} Parameters : Model Group Skill Language Feedback Access token (taken from the session of the logged in user) Sample API call : /cms/reportSkill.json?model=general&group=Knowledge&skill=Anime Suggestions&feedback=Not good&access_token=6O7cqoMbzlClxPwg1is31Tz5pjVwo3 Displaying option to report on skill page The option to report skill should be available at the skill page for each skill so we add a field in the skill details section to the skill page component which will only be visible to the logged in users and on clicking over this field we display a dialog with a text field, the user can enter the message or the reason for reporting the skill and then clicking on the submit button when the user is done writing or click on the cancel button in case the user changes their mind to report the skill. Once the message is submitted we run a function by passing in the feedback message which in turn hits the corresponding endpoint and posts the data on the server. Import some required components import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import TextField from 'material-ui/TextField'; Adding some variables to the component state which will help us decide when the report dialog is to be shown and the feedback message as the user types and some other relevant data. this.state = { ... skillTag: '', showReportDialog: false, feedbackMessage: '' ... } Display the report feature only when the user is logged in. { cookies.get('loggedIn') ? ( ... ): '' } Adding some jsx to the component’s render function which includes a div in the skill details section and the Dialog component for the report message and confirmation and the dialog contains a text field to take report message and some actions which in our case is the send report action and the cancel report action. <tr> <td>Report: </td> <td> <div style={{ color: '#108ee9', cursor: 'pointer' }} onClick={this.handleReportToggle} > Flag as inappropriate </div> </td> <Dialog title="Flag as inappropriate" actions={reportDialogActions} modal={false} open={this.state.showReportDialog} onRequestClose={this.handleReportToggle} > <TextField hintText="Leave a feedback message" floatingLabelText="Feedback message" multiLine floatingLabelFocusStyle={{ color: 'rgb(66, 133, 244)', }} underlineFocusStyle={{ borderColor: 'rgb(66, 133, 244)', }} fullWidth onChange={(event, val) =>…