update speaker works

frontends/twitch-early-access/src/App.tsx

@@ -68,6 +68,15 @@ class App extends React.Component<Props, State> {
     })
   }
 
+  updateSpeakerBySlug = (speakerSlug: string) => {
+    const maybeSpeaker = this.state.speakers.find(speaker => {
+      return speaker.slug === speakerSlug;
+    })
+    this.setState({
+      currentSpeaker: maybeSpeaker,
+    })
+  }
+
   switchComponent = (showComponent: ShowComponent) => {
     this.setState({
       showComponent: showComponent,
@@ -92,6 +101,7 @@ class App extends React.Component<Props, State> {
         <SpeakerDropdown
           speakers={this.state.speakers}
           currentSpeaker={this.state.currentSpeaker}
+          changeSpeakerBySlug={this.updateSpeakerBySlug}
           />
       </div>
     );

frontends/twitch-early-access/src/components/SpeakerDropdown.tsx

@@ -4,6 +4,7 @@ import { Speaker } from '../model/Speaker';
 interface Props {
   currentSpeaker?: Speaker,
   speakers: Speaker[],
+  changeSpeakerBySlug: (speakerSlug: string) => void,
 }
 
 interface State {
@@ -17,7 +18,9 @@ class SpeakerDropdown extends React.Component<Props, State> {
     };
   }
 
-  public updateText(text: string) {
+  changeSpeaker = (ev: React.FormEvent<HTMLSelectElement>) => {
+    const speakerSlug = (ev.target as HTMLInputElement).value;
+    this.props.changeSpeakerBySlug(speakerSlug);
   }
 
   public render() {
@@ -28,7 +31,7 @@ class SpeakerDropdown extends React.Component<Props, State> {
     });
 
     return (
-      <select>
+      <select onChange={this.changeSpeaker}>
         {speakerOptions}
       </select>
     );