import React from "react"; import Kendra from "aws-sdk/clients/kendra"; import { Relevance } from "../../constants"; import blueThumbsUp from "../../images/blue-thumb-up.svg"; import blueThumbsDown from "../../images/blue-thumb-down.svg"; import whiteThumbsUp from "../../images/white-thumb-up.svg"; import whiteThumbsDown from "../../images/white-thumb-down.svg"; import "../../search.scss"; interface FeedbackProps { queryResultItem: Kendra.QueryResultItem; submitFeedback: ( relevance: Relevance, resultItem: Kendra.QueryResultItem ) => Promise; } interface FeedbackState { relevance?: Relevance; } export default class Feedback extends React.Component< FeedbackProps, FeedbackState > { constructor(props: FeedbackProps) { super(props); this.state = { relevance: undefined }; } private setRelevance(relevance: Relevance) { this.setState({ ...this.state, relevance }); } private submitFeedback = (relevance: Relevance) => () => { this.setRelevance(relevance); this.props.submitFeedback(relevance, this.props.queryResultItem); }; render() { const { relevance } = this.state; return ( relevant { event.currentTarget.src = blueThumbsUp; }} onMouseOut={event => { if (relevance !== Relevance.Relevant) { event.currentTarget.src = whiteThumbsUp; } }} onClick={this.submitFeedback(Relevance.Relevant)} /> not relevant { event.currentTarget.src = blueThumbsDown; }} onMouseOut={event => { if (relevance !== Relevance.NotRelevant) { event.currentTarget.src = whiteThumbsDown; } }} onClick={this.submitFeedback(Relevance.NotRelevant)} /> ); } }