Upgrade .NET Core 3.1 → .NET 8, React 16 → 18

.gitignore

@@ -2,3 +2,4 @@
 **/obj/**
 ScrapePi/Sites/
 AonApp/node_modules/**
+AonApp/build/**

AonApp/package.json

@@ -1,20 +1,34 @@
 {
   "name": "aon-app",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@types/react": "^16.8.2",
-    "@types/react-dom": "^16.8.0",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts-ts start",
-    "build": "react-scripts-ts build",
-    "test": "react-scripts-ts test --env=jsdom",
-    "eject": "react-scripts-ts eject"
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
   },
   "devDependencies": {
-    "react-scripts-ts": "latest"
+    "react-scripts": "5.0.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

AonApp/src/Data.tsx

@@ -1,12 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import * as Helpers from './Helpers';
 
+interface StoryItem {
+  text: string;
+}
+
 function DataView() {
-  const pagesize = 64;
-  const offset = 0;
-  const [error, setError] = useState(null);
+  const [error, setError] = useState<Error | null>(null);
   const [isLoaded, setIsLoaded] = useState(false);
-  const [items, setItems] = useState([]);
+  const [items, setItems] = useState<StoryItem[]>([]);
 
   useEffect(() => {
     Helpers.getChapter('lw', '01fftd', 'sect51')
@@ -26,15 +28,14 @@ function DataView() {
   if (error) {
     return <div>Error: {error.message}</div>;
   } else if (!isLoaded) {
-    return 'Loading Data...';
+    return <div>Loading Data...</div>;
   } else {
     return (
       <section className="container-fluid">
         <div className="row">
-          {items.map((item) => (
-            <div>
-              <h2></h2>
-              <p key={item.text}>{Helpers.stripHtml(item.text)}</p>
+          {items.map((item, index) => (
+            <div key={index}>
+              <p>{Helpers.stripHtml(item.text)}</p>
             </div>
           ))}
         </div>
@@ -43,10 +44,4 @@ function DataView() {
   }
 }
 
-class DataList extends React.Component {
-  render() {
-    return <DataView />;
-  }
-}
-
-export default DataList;
+export default DataView;

AonApp/src/Header.tsx

@@ -1,14 +1,18 @@
 import React, { useState, useEffect } from 'react';
 import * as Helpers from './Helpers';
 
+interface AssetData {
+  url: string;
+}
+
 function HeaderView() {
-  const [dataHeader, setHeader] = useState(null);
+  const [dataHeader, setHeader] = useState<AssetData | null>(null);
 
-  function getHeader(series, book, file) {
+  function getHeader(series: string, book: string, file: string) {
     Helpers.getAsset(series, book, file)
       .then((res) => res.json())
       .then(
-        (result) => {
+        (result: AssetData) => {
           setHeader(result);
         },
         (error) => {
@@ -37,10 +41,4 @@ function HeaderView() {
   );
 }
 
-class HeaderList extends React.Component {
-  render() {
-    return <HeaderView />;
-  }
-}
-
-export default HeaderList;
+export default HeaderView;

AonApp/src/Hello.tsx

@@ -1,3 +1,9 @@
 import React from 'react';
 
-export default ({ name }) => <h1>Hello {name}!</h1>;
+interface HelloProps {
+  name: string;
+}
+
+const Hello: React.FC<HelloProps> = ({ name }) => <h1>Hello {name}!</h1>;
+
+export default Hello;

AonApp/src/Helpers.tsx

@@ -10,28 +10,34 @@ export async function getChapter(
   series: string,
   book: string,
   chapter: string
-): Promise<any> {
+): Promise<Response> {
   return fetch(
     'https://aon.tesj.dk/api/chapter/' + series + '/' + book + '/' + chapter
   );
 }
 
-export async function getAssets(book: string, series: string): Promise<any> {
+export async function getAssets(book: string, series: string): Promise<Response> {
   return fetch('https://aon.tesj.dk/api/assets/' + series + '/' + book);
 }
 
 export async function getAsset(
   series: string,
   book: string,
   file: string
-): Promise<any> {
+): Promise<Response> {
   return fetch(
     'https://aon.tesj.dk/api/assets/' + series + '/' + book + '/' + file
   );
 }
 
-export function storeStoryState(series, book, chapter): any {
-  const obj = {
+export interface StoryState {
+  series: string;
+  book: string;
+  chapter: string;
+}
+
+export function storeStoryState(series: string, book: string, chapter: string): void {
+  const obj: StoryState = {
     series: series,
     book: book,
     chapter: chapter,
@@ -40,8 +46,8 @@ export function storeStoryState(series, book, chapter): any {
   localStorage.setItem('storyState', JSON.stringify(obj));
 }
 
-export function getStoryState(): any {
-  let currentState = {
+export function getStoryState(): StoryState {
+  let currentState: StoryState = {
     series: 'lw',
     book: '01fftd',
     chapter: 'sect1',
@@ -51,7 +57,7 @@ export function getStoryState(): any {
 
   if (storage) {
     try {
-      currentState = JSON.parse(localStorage.getItem('storyState'));
+      currentState = JSON.parse(storage);
     } catch (e) {
       console.log(e);
     }

AonApp/src/MainView.tsx

@@ -1,18 +1,11 @@
 import React from 'react';
 
-class MainView extends React.Component {
-  constructor(props) {  
-    super(props);  
-
-  }  
-
-  render() {
-    return (
-      <div>
-        <h2>Hej hej</h2>
-      </div>
-    );
-  }
+function MainView() {
+  return (
+    <div>
+      <h2>Hej hej</h2>
+    </div>
+  );
 }
 
 export default MainView;

AonApp/src/Page.tsx

@@ -1,19 +1,45 @@
 import React, { useState, useEffect } from 'react';
 import * as Helpers from './Helpers';
 
+interface ImageItem {
+  url: string;
+  text: string;
+}
+
+interface StoryItem {
+  text: string;
+}
+
+interface CombatItem {
+  text: string;
+}
+
+interface ChoiceItem {
+  text: string;
+  chapterId: string;
+  book: string;
+}
+
+interface ChapterData {
+  illustration: ImageItem[];
+  story: StoryItem[];
+  combat: CombatItem[];
+  choice: ChoiceItem[];
+}
+
 function PageView() {
-  const [error, setError] = useState(null);
+  const [error, setError] = useState<Error | null>(null);
   const [isLoaded, setIsLoaded] = useState(false);
-  const [data, setData] = useState(null);
+  const [data, setData] = useState<ChapterData | null>(null);
   const series = 'lw';
 
-  function setChapter(chapter, book) {
+  function setChapter(chapter: string, book: string) {
     setIsLoaded(false);
     Helpers.storeStoryState(series, book, chapter);
     Helpers.getChapter(series, book, chapter)
       .then((res) => res.json())
       .then(
-        (result) => {
+        (result: ChapterData) => {
           setIsLoaded(true);
           if (!(result?.choice?.length > 0)) {
             let text = 'Restart this book';
@@ -106,6 +132,7 @@ function PageView() {
             result.choice.push({
               text: text,
               chapterId: 'sect1',
+              book: book,
             });
           }
 
@@ -134,7 +161,7 @@ function PageView() {
   if (error) {
     return <div>Error: {error.message}</div>;
   } else if (!isLoaded) {
-    return 'Loading Data...';
+    return <div>Loading Data...</div>;
   } else {
     return (
       <section className="container-fluid">
@@ -176,14 +203,4 @@ function PageView() {
   }
 }
 
-class PageList extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return <PageView />;
-  }
-}
-
-export default PageList;
+export default PageView;

AonApp/src/index.tsx

@@ -1,37 +1,18 @@
-import React, { Component } from 'react';
-import { render } from 'react-dom';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
 import HeaderView from './Header';
 import PageView from './Page';
 import './style.css';
 
-interface AppProps {}
-
-interface AppState {
-  book: string;
-}
-
-class App extends Component<AppProps, AppState> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      book: '01fftd',
-    };
-    this.bookChangeEvent = this.bookChangeEvent.bind(this);
-  }
-
-  bookChangeEvent(event) {
-    this.setState({ book: event });
-    // alert(event);
-  }
-
-  render() {
-    return (
-      <div>
-        <HeaderView />
-        <PageView changeBook={this.bookChangeEvent} />
-      </div>
-    );
-  }
+function App() {
+  return (
+    <div>
+      <HeaderView />
+      <PageView />
+    </div>
+  );
 }
 
-render(<App />, document.getElementById('root'));
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(<App />);

AonApp/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

AonApp/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}