Update index.tsx to use new React API

Fix nesting in <p> in DemoInfo

Author: monocle

src/frontend/src/components/Demo/DemoInfo.tsx

@@ -10,7 +10,7 @@ class DemoInfo extends React.Component {
   ) => {
     return (
       <div>
-        <p className="flex lh-title mb3">
+        <div className="flex lh-title mb3">
           <div className="mr4">
             <div className="fw6">First Name</div>
             <div>{firstName}</div>
@@ -25,7 +25,7 @@ class DemoInfo extends React.Component {
               <div>{dateOfBirth}</div>
             </div>
           )}
-        </p>
+        </div>
         {description.map((line: string, idx: number) => (
           <p key={idx} className="pb2">
             {line}

src/frontend/src/components/Demo/__snapshots__/Demo.test.tsx.snap

@@ -66,7 +66,7 @@ exports[`renders correctly 1`] = `
             className="mw7 mb4"
           >
             <div>
-              <p
+              <div
                 className="flex lh-title mb3"
               >
                 <div
@@ -93,7 +93,7 @@ exports[`renders correctly 1`] = `
                     Conviction
                   </div>
                 </div>
-              </p>
+              </div>
               <p
                 className="pb2"
               >
@@ -112,7 +112,7 @@ exports[`renders correctly 1`] = `
             className="mw7 mb4"
           >
             <div>
-              <p
+              <div
                 className="flex lh-title mb3"
               >
                 <div
@@ -139,7 +139,7 @@ exports[`renders correctly 1`] = `
                     Charges
                   </div>
                 </div>
-              </p>
+              </div>
               <p
                 className="pb2"
               >
@@ -163,7 +163,7 @@ exports[`renders correctly 1`] = `
             className="mw7 mb4"
           >
             <div>
-              <p
+              <div
                 className="flex lh-title mb3"
               >
                 <div
@@ -190,7 +190,7 @@ exports[`renders correctly 1`] = `
                     Common
                   </div>
                 </div>
-              </p>
+              </div>
               <p
                 className="pb2"
               >
@@ -214,7 +214,7 @@ exports[`renders correctly 1`] = `
             className="mw7 mb4"
           >
             <div>
-              <p
+              <div
                 className="flex lh-title mb3"
               >
                 <div
@@ -251,7 +251,7 @@ exports[`renders correctly 1`] = `
                     1/1/1970
                   </div>
                 </div>
-              </p>
+              </div>
               <p
                 className="pb2"
               >
@@ -270,7 +270,7 @@ exports[`renders correctly 1`] = `
             className="mw7 mb4"
           >
             <div>
-              <p
+              <div
                 className="flex lh-title mb3"
               >
                 <div
@@ -307,7 +307,7 @@ exports[`renders correctly 1`] = `
                     2/2/1985
                   </div>
                 </div>
-              </p>
+              </div>
               <p
                 className="pb2"
               >

src/frontend/src/index.tsx

@@ -1,21 +1,21 @@
 // These imports are all defaults from create-react-app.
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./components/App";
-import * as serviceWorker from "./serviceWorker";
-import "./index.scss";
-
-// The following is based on the example code at
-// https://react-redux.js.org/introduction/quick-start
+import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
+import { BrowserRouter } from "react-router-dom";
+
+import * as serviceWorker from "./serviceWorker";
 import store from "./redux/store";
+import App from "./components/App";
+import "./index.scss";
 
-const rootElement = document.getElementById("root");
-ReactDOM.render(
+const container = document.getElementById("root");
+const root = createRoot(container!);
+root.render(
   <Provider store={store}>
-    <App />
-  </Provider>,
-  rootElement
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </Provider>
 );
 
 // Service Workers are intentionally turned off; they were causing

src/frontend/src/redux/store.tsx

@@ -1,10 +1,8 @@
-// See the following guides for an explanation:
 // https://redux-starter-kit.js.org/usage/usage-guide
 // https://redux.js.org/recipes/usage-with-typescript
-import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
-import { combineReducers } from "redux";
 
-// Reducers:
+import { configureStore } from "@reduxjs/toolkit";
+import { combineReducers } from "redux";
 import { searchReducer } from "./search/reducer";
 
 const rootReducer = combineReducers({
@@ -13,9 +11,9 @@ const rootReducer = combineReducers({
 
 const store = configureStore({
   reducer: rootReducer,
-  middleware: [...getDefaultMiddleware()],
 });
 
 export type AppState = ReturnType<typeof rootReducer>;
-
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
 export default store;