fix(firstMile): remember the thumbs up feedback for the session (#4499)

Author: ChitlangeSahas

src/homepageExperience/components/FeedbackBar.tsx

@@ -15,40 +15,36 @@ import 'src/homepageExperience/components/HomepageExperience.scss'
 
 type OwnProps = {
   wizardEventName: string
-}
-type State = {
   selectedFeedback: number
+  onFeedbackSelection: (feedbackValue: number) => void
 }
 
 enum feedbackValue {
   THUMBS_DOWN,
   THUMBS_UP,
 }
 
-export default class FeedbackBar extends React.Component<OwnProps, State> {
+export default class FeedbackBar extends React.Component<OwnProps> {
   constructor(props) {
     super(props)
-    this.state = {
-      selectedFeedback: null,
-    }
   }
 
   // for now, we're only registering the first feedback user selects.
   private handleThumbsUpClick = () => {
-    if (this.state.selectedFeedback === null) {
+    if (this.props.selectedFeedback === null) {
       event(`firstMile.${this.props.wizardEventName}.thumbsUp.clicked`)
-      this.setState({selectedFeedback: feedbackValue.THUMBS_UP})
+      this.props.onFeedbackSelection(feedbackValue.THUMBS_UP)
     }
   }
   private handleThumbsDownClick = () => {
-    if (this.state.selectedFeedback === null) {
+    if (this.props.selectedFeedback === null) {
       event(`firstMile.${this.props.wizardEventName}.thumbsDown.clicked`)
-      this.setState({selectedFeedback: feedbackValue.THUMBS_DOWN})
+      this.props.onFeedbackSelection(feedbackValue.THUMBS_DOWN)
     }
   }
 
   render() {
-    const {selectedFeedback} = this.state
+    const {selectedFeedback} = this.props
     return (
       <FlexBox
         margin={ComponentSize.Large}

src/homepageExperience/components/steps/Finish.tsx

@@ -21,6 +21,8 @@ type OwnProps = {
   wizardEventName: string
   markStepAsCompleted: () => void
   finishStepCompleted: boolean
+  finalFeedback: number
+  setFinalFeedback: (feedbackValue: number) => void
 }
 
 const fireConfetti = () => {
@@ -82,7 +84,11 @@ export const Finish = (props: OwnProps) => {
     <>
       <h1>Congrats!</h1>
       <p>You completed setting up, writing, and querying data.</p>
-      <FeedbackBar wizardEventName={props.wizardEventName} />
+      <FeedbackBar
+        wizardEventName={props.wizardEventName}
+        selectedFeedback={props.finalFeedback}
+        onFeedbackSelection={props.setFinalFeedback}
+      />
       <p style={{marginTop: '80px'}}>
         Curious to learn more? Try these next steps!
       </p>

src/homepageExperience/containers/GoWizard.tsx

@@ -32,6 +32,7 @@ interface State {
   selectedBucket: string
   finishStepCompleted: boolean
   tokenValue: string
+  finalFeedback: number
 }
 
 export class GoWizard extends PureComponent<null, State> {
@@ -40,6 +41,7 @@ export class GoWizard extends PureComponent<null, State> {
     selectedBucket: 'my-bucket',
     finishStepCompleted: false,
     tokenValue: null,
+    finalFeedback: null,
   }
 
   private handleSelectBucket = (bucketName: string) => {
@@ -54,6 +56,10 @@ export class GoWizard extends PureComponent<null, State> {
     this.setState({tokenValue})
   }
 
+  private setFinalFeedback = (feedbackValue: number) => {
+    this.setState({finalFeedback: feedbackValue})
+  }
+
   handleNextClick = () => {
     this.setState(
       {
@@ -116,6 +122,8 @@ export class GoWizard extends PureComponent<null, State> {
             wizardEventName="goWizard"
             markStepAsCompleted={this.handleMarkStepAsCompleted}
             finishStepCompleted={this.state.finishStepCompleted}
+            finalFeedback={this.state.finalFeedback}
+            setFinalFeedback={this.setFinalFeedback}
           />
         )
       }

src/homepageExperience/containers/NodejsWizard.tsx

@@ -32,6 +32,7 @@ interface State {
   selectedBucket: string
   finishStepCompleted: boolean
   tokenValue: string
+  finalFeedback: number
 }
 
 export class NodejsWizard extends PureComponent<null, State> {
@@ -40,6 +41,7 @@ export class NodejsWizard extends PureComponent<null, State> {
     selectedBucket: 'my-bucket',
     finishStepCompleted: false,
     tokenValue: null,
+    finalFeedback: null,
   }
 
   private handleSelectBucket = (bucketName: string) => {
@@ -54,6 +56,10 @@ export class NodejsWizard extends PureComponent<null, State> {
     this.setState({tokenValue})
   }
 
+  private setFinalFeedback = (feedbackValue: number) => {
+    this.setState({finalFeedback: feedbackValue})
+  }
+
   handleNextClick = () => {
     this.setState(
       {
@@ -116,6 +122,8 @@ export class NodejsWizard extends PureComponent<null, State> {
             wizardEventName="nodejsWizard"
             markStepAsCompleted={this.handleMarkStepAsCompleted}
             finishStepCompleted={this.state.finishStepCompleted}
+            finalFeedback={this.state.finalFeedback}
+            setFinalFeedback={this.setFinalFeedback}
           />
         )
       }

src/homepageExperience/containers/PythonWizard.tsx

@@ -32,6 +32,7 @@ interface State {
   selectedBucket: string
   finishStepCompleted: boolean
   tokenValue: string
+  finalFeedback: number
 }
 
 export class PythonWizard extends PureComponent<null, State> {
@@ -40,6 +41,7 @@ export class PythonWizard extends PureComponent<null, State> {
     selectedBucket: 'my-bucket',
     finishStepCompleted: false,
     tokenValue: null,
+    finalFeedback: null,
   }
 
   private handleSelectBucket = (bucketName: string) => {
@@ -54,6 +56,10 @@ export class PythonWizard extends PureComponent<null, State> {
     this.setState({tokenValue})
   }
 
+  private setFinalFeedback = (feedbackValue: number) => {
+    this.setState({finalFeedback: feedbackValue})
+  }
+
   handleNextClick = () => {
     this.setState(
       {
@@ -116,6 +122,8 @@ export class PythonWizard extends PureComponent<null, State> {
             wizardEventName="pythonWizard"
             markStepAsCompleted={this.handleMarkStepAsCompleted}
             finishStepCompleted={this.state.finishStepCompleted}
+            finalFeedback={this.state.finalFeedback}
+            setFinalFeedback={this.setFinalFeedback}
           />
         )
       }