update dependencies

package.json

@@ -6,26 +6,27 @@
   "author": "Kosta <theoneandonlykosta@gmail.com>",
   "private": true,
   "devDependencies": {
-    "@testing-library/react": "12.1.2",
-    "@testing-library/user-event": "13.5.0",
-    "@types/jest": "27.0.3",
-    "@types/react-dom": "17.0.11",
-    "css-loader": "6.5.1",
+    "@testing-library/react": "13.4.0",
+    "@testing-library/user-event": "14.4.3",
+    "@types/jest": "29.2.5",
+    "@types/react-dom": "18.0.10",
+    "css-loader": "6.7.3",
     "file-loader": "6.2.0",
     "html-webpack-plugin": "5.5.0",
-    "jest": "27.3.1",
-    "source-map-loader": "3.0.0",
+    "jest": "29.3.1",
+    "jest-environment-jsdom": "29.3.1",
+    "source-map-loader": "4.0.1",
     "style-loader": "3.3.1",
-    "ts-jest": "27.0.7",
-    "ts-loader": "9.2.6",
-    "typescript": "4.5.2",
-    "webpack": "5.64.3",
-    "webpack-cli": "4.9.1",
-    "webpack-dev-server": "4.5.0"
+    "ts-jest": "29.0.4",
+    "ts-loader": "9.4.2",
+    "typescript": "4.9.4",
+    "webpack": "5.75.0",
+    "webpack-cli": "5.0.1",
+    "webpack-dev-server": "4.11.1"
   },
   "dependencies": {
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "scripts": {
     "build": "webpack --mode development",

src/app/App.spec.tsx

@@ -72,19 +72,19 @@ describe('App', () => {
 const addCards = async (cardType: string, ... cardIds: number[]) => {
   const cardRegex = new RegExp(cardType, 'i')
   const cardIdsAsString = cardIds.join(' ');
-  userEvent.click(await screen.findByRole('button', { name: 'Add Cards' }));
+  await userEvent.click(await screen.findByRole('button', { name: 'Add Cards' }));
   const itemDesignsInput = await screen.findByRole('textbox', {
     name: cardRegex
   });
-  userEvent.type(itemDesignsInput, cardIdsAsString);
+  await userEvent.type(itemDesignsInput, cardIdsAsString);
   const itemDesignsAddButton = await screen.findByRole('button', {
     name: cardRegex
   });
-  userEvent.click(itemDesignsAddButton);
+  await userEvent.click(itemDesignsAddButton);
 };
 
 const exportedStacks = async () => {
-  userEvent.click(await screen.findByRole('button', {
+  await userEvent.click(await screen.findByRole('button', {
     name: /import \/ export/i
   }));
   const textElement = await screen.findByRole('textbox') as HTMLTextAreaElement;

src/events/BringEventToConclusion.tsx

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { NoState } from "lang/react";
-import { StackPopped } from "stacks/Pop";
-import EventCard from "events/EventCard";
-import Side from "cards/Side";
+import * as React from 'react';
+import { NoState } from 'lang/react';
+import { StackPopped } from 'stacks/Pop';
+import EventCard from 'events/EventCard';
+import Side from 'cards/Side';
 
 interface ButtonWithSelectionHighlightProps {
   onClick: React.MouseEventHandler;
@@ -23,52 +23,54 @@ class ButtonWithSelectionHighlight extends React.Component<ButtonWithSelectionHi
 interface BringEventToConclusionProps extends StackPopped {
   name: string,
   number: number,
+  children: React.ReactNode
 }
 
 enum Choice {
-  A = "A",
-  B = "B",
+  A = 'A',
+  B = 'B',
 }
 
 interface BringEventToConclusionState {
-  selected: Choice | undefined
+  selected: Choice | undefined;
+
 }
 
 export class BringEventToConclusion extends React.Component<BringEventToConclusionProps, BringEventToConclusionState> {
   constructor(props: BringEventToConclusionProps) {
     super(props);
-
+    
     this.selectA = this.selectA.bind(this);
     this.selectB = this.selectB.bind(this);
     this.returnToBottom = this.returnToBottom.bind(this);
     this.removeFromGame = this.removeFromGame.bind(this);
     this.state = { selected: undefined };
   }
-
+  
   selectA(e: React.MouseEvent) {
     this.setState({ selected: Choice.A });
     e.preventDefault();
     return false;
   }
-
+  
   selectB(e: React.MouseEvent) {
     this.setState({ selected: Choice.B });
     e.preventDefault();
     return false;
   }
-
+  
   returnToBottom(e: React.MouseEvent) {
     this.props.stackPopped(this.props.name, true);
     e.preventDefault();
     return false;
   }
-
+  
   removeFromGame(e: React.MouseEvent) {
     this.props.stackPopped(this.props.name, false);
     e.preventDefault();
     return false;
   }
-
+  
   render() {
     const containerStyle = {
       'display': 'flex',
@@ -86,15 +88,15 @@ export class BringEventToConclusion extends React.Component<BringEventToConclusi
     } as React.CSSProperties;
     return <React.Fragment>
       <h2 key="h2">{this.props.name} Event {this.props.number}</h2>
-      <div key='event-conclusion-container' style={containerStyle}>
-        <EventCard key='event-card-front' eventCardId={this.props.number} side={Side.Front} name={this.props.name}/>
-        <div key='choice-container' style={choiceStyle}>
+      <div key="event-conclusion-container" style={containerStyle}>
+        <EventCard key="event-card-front" eventCardId={this.props.number} side={Side.Front} name={this.props.name}/>
+        <div key="choice-container" style={choiceStyle}>
           <ButtonWithSelectionHighlight onClick={this.selectA} selected={this.state.selected === Choice.A} text="A"/>
           <ButtonWithSelectionHighlight onClick={this.selectB} selected={this.state.selected === Choice.B} text="B"/>
         </div>
         {this.state.selected && [
-          <EventCard key='event-card-back' eventCardId={this.props.number} side={Side.Back} name={this.props.name}/>,
-          <div key='resolution-container' style={resolutionStyle}>
+          <EventCard key="event-card-back" eventCardId={this.props.number} side={Side.Back} name={this.props.name}/>,
+          <div key="resolution-container" style={resolutionStyle}>
             {this.props.children}
             <h3>Conclusion</h3>
             <button key="ret" type="button" onClick={this.returnToBottom}>Return to bottom</button>

src/index.tsx

@@ -1,11 +1,13 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom';
-import { App } from "app/App";
-import "./style.css";
+import { App } from 'app/App';
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import './style.css';
 
 const initialCardStacks = App.initializeStacksFromLocalStorage();
-let app = <App initialCardStacks={initialCardStacks}/>;
-ReactDOM.render(
-  app,
-  document.getElementById('root')
-);
+const app = <App initialCardStacks={initialCardStacks}/>;
+
+const container = document.getElementById('root');
+if (container === null) {
+  throw new Error('root element not found')
+}
+createRoot(container).render(app);