convert components into function components

src/app/App.tsx

@@ -191,7 +191,7 @@ export class App extends React.Component<AppProps, AppState> {
   }
 
   setDialog(dialog: JSX.Element) {
-    // first remove, then add so that the component doesnt get recycled
+    // first remove, then add so that the component doesn't get recycled
     this.setState(
       {
         dialog: null,
@@ -217,7 +217,7 @@ export class App extends React.Component<AppProps, AppState> {
   }
 
   render() {
-    let prosperity = this.state.stacks.prosperity
+    const prosperity = this.state.stacks.prosperity
     return (
       <React.Fragment>
         <div key="button-frame" className="frame">

src/events/BringEventToConclusion.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { css, NoState } from 'lang/react'
 import { StackPopped } from 'stacks/Pop'
-import EventCard, { EventType } from 'events/EventCard'
+import { EventCard, EventType } from 'events/EventCard'
 import Side from 'cards/Side'
 
 interface ButtonWithSelectionHighlightProps {

src/events/EventCard.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
-import { css, NoState } from 'lang/react'
 import Side from 'cards/Side'
+import { css } from 'lang/react'
+import * as React from 'react'
 
 export type EventType = 'City' | 'Road'
 
@@ -10,25 +10,20 @@ interface EventCardProps {
   side: Side
 }
 
-export default class EventCard extends React.Component<EventCardProps, NoState> {
-  constructor(props: EventCardProps) {
-    super(props)
-    this.eventCardImageUrl = this.eventCardImageUrl.bind(this)
-  }
+const imageStyle = css({
+  borderRadius: '15px',
+})
 
-  render() {
-    const style = css({
-      borderRadius: '15px',
-    })
-    return <img key="image-front" style={style} src={this.eventCardImageUrl()} alt="event card" />
-  }
+const eventCardImageUrl = (props: Readonly<EventCardProps>) => {
+  const twoDigitNumber = (props.eventCardId <= 9 ? '0' : '') + props.eventCardId
+  const imageName = props.name.toLowerCase()
+  const firstLetter = imageName.charAt(0)
+  const imageBaseUrl = `https://raw.githubusercontent.com/any2cards/worldhaven/master/images/events/gloomhaven/${imageName}/gh-${firstLetter}e-${twoDigitNumber}-`
+  const sideUrlPart = props.side === Side.Back ? 'b' : 'f'
+  return imageBaseUrl + sideUrlPart + '.png'
+}
 
-  eventCardImageUrl() {
-    const twoDigitNumber = (this.props.eventCardId <= 9 ? '0' : '') + this.props.eventCardId
-    const imageName = this.props.name.toLowerCase()
-    const firstLetter = imageName.charAt(0)
-    const imageBaseUrl = `https://raw.githubusercontent.com/any2cards/worldhaven/master/images/events/gloomhaven/${imageName}/gh-${firstLetter}e-${twoDigitNumber}-`
-    const sideUrlPart = this.props.side === Side.Back ? 'b' : 'f'
-    return imageBaseUrl + sideUrlPart + '.png'
-  }
+export const EventCard = (props: EventCardProps) => {
+  const src = eventCardImageUrl(props)
+  return <img key="image-front" style={imageStyle} src={src} alt="event card" />
 }

src/stacks/Pop.tsx

@@ -1,10 +1,9 @@
-import { EventType } from 'events/EventCard'
-import * as React from 'react'
-import { NoState } from 'lang/react'
 import { OpenDialog } from 'app/OpenDialog'
 import { AddCards, AddCardsProps } from 'cards/addCards'
 import { CardStack } from 'cards/cards'
 import { BringEventToConclusion } from 'events/BringEventToConclusion'
+import { EventType } from 'events/EventCard'
+import * as React from 'react'
 
 export interface StackPopped {
   stackPopped: (name: string, returnToBottom: boolean) => void
@@ -16,29 +15,18 @@ interface PopProps extends OpenDialog, AddCardsProps, StackPopped {
 }
 
 // Pop draws the _top_ card of the deck
-export class Pop extends React.Component<PopProps, NoState> {
-  constructor(props: PopProps) {
-    super(props)
-    this.clicked = this.clicked.bind(this)
-  }
-
-  clicked() {
-    this.props.setDialog(
-      <BringEventToConclusion
-        name={this.props.name}
-        number={this.props.cards.stack[0]}
-        stackPopped={this.props.stackPopped}
-      >
-        <AddCards onAddCards={this.props.onAddCards} />
+export const Pop = (props: PopProps) => {
+  const clicked = () => {
+    props.setDialog(
+      <BringEventToConclusion name={props.name} number={props.cards.stack[0]} stackPopped={props.stackPopped}>
+        <AddCards onAddCards={props.onAddCards} />
       </BringEventToConclusion>,
     )
   }
 
-  render() {
-    return (
-      <button type="button" onClick={this.clicked} disabled={this.props.cards.stack.length === 0}>
-        {'Draw ' + this.props.name + ' Event'}
-      </button>
-    )
-  }
+  return (
+    <button type="button" onClick={clicked} disabled={props.cards.stack.length === 0}>
+      {'Draw ' + props.name + ' Event'}
+    </button>
+  )
 }