upgrade to React 18

Author: farskipper

packages/pico-engine-ui/package.json

@@ -22,16 +22,14 @@
     "build": "tsc && vite build && cp dist/pico-engine-ui.* ../pico-engine/public/"
   },
   "dependencies": {
-    "react": "^16.8.5",
-    "react-dom": "^16.8.5",
-    "react-router-dom": "^6.20.0",
-    "whatwg-fetch": "^3.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.0"
   },
   "devDependencies": {
     "@types/node": "^20.9.2",
-    "@types/react": "^16.8.8",
-    "@types/react-dom": "^16.8.3",
-    "@types/react-router-dom": "^5.3.3",
+    "@types/react": "^18.2.38",
+    "@types/react-dom": "^18.2.17",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "sass": "^1.45.2",
     "scriptsp": "^1.1.1",

packages/pico-engine-ui/src/components/PicoTabs/Rulesets.tsx

@@ -162,7 +162,7 @@ const Rulesets: React.FC<Props> = ({ pico }) => {
                     <div>
                       <div>
                         <b className="text-muted">Last flushed:</b>{" "}
-                        {ruleset.meta.flushed}
+                        {ruleset.meta.flushed + ""}
                       </div>
                       <div>
                         <b className="text-muted">Hash:</b> {ruleset.meta.hash}

packages/pico-engine-ui/src/components/widgets/ChannelPolicies.tsx

@@ -98,7 +98,7 @@ export function parseQueryPolicy(src: string): QueryPolicy {
   return policy;
 }
 
-export const ParseError: React.SFC<{
+export const ParseError: React.FC<{
   error: any;
   line: string;
 }> = ({ error, line }) => {
@@ -112,7 +112,7 @@ export const ParseError: React.SFC<{
   );
 };
 
-export const ParseNViewEventPolicy: React.SFC<{
+export const ParseNViewEventPolicy: React.FC<{
   src: string;
 }> = ({ src }) => {
   return (
@@ -137,7 +137,7 @@ export const ParseNViewEventPolicy: React.SFC<{
   );
 };
 
-export const ParseNViewQueryPolicy: React.SFC<{
+export const ParseNViewQueryPolicy: React.FC<{
   src: string;
 }> = ({ src }) => {
   return (
@@ -162,7 +162,7 @@ export const ParseNViewQueryPolicy: React.SFC<{
   );
 };
 
-export const ViewEventPolicy: React.SFC<{
+export const ViewEventPolicy: React.FC<{
   policy: EventPolicy;
 }> = ({ policy }) => {
   return (
@@ -177,7 +177,7 @@ export const ViewEventPolicy: React.SFC<{
   );
 };
 
-export const ViewQueryPolicy: React.SFC<{
+export const ViewQueryPolicy: React.FC<{
   policy: QueryPolicy;
 }> = ({ policy }) => {
   return (
@@ -192,7 +192,7 @@ export const ViewQueryPolicy: React.SFC<{
   );
 };
 
-const ViewEventPolicyRule: React.SFC<{
+const ViewEventPolicyRule: React.FC<{
   rule: EventPolicyRule;
   isAllow?: boolean;
 }> = ({ isAllow, rule }) => {
@@ -210,7 +210,7 @@ const ViewEventPolicyRule: React.SFC<{
   );
 };
 
-const ViewQueryPolicyRule: React.SFC<{
+const ViewQueryPolicyRule: React.FC<{
   rule: QueryPolicyRule;
   isAllow?: boolean;
 }> = ({ isAllow, rule }) => {

packages/pico-engine-ui/src/components/widgets/ErrorStatus.tsx

@@ -4,7 +4,7 @@ interface Props {
   error?: string | null;
 }
 
-const ErrorStatus: React.SFC<Props> = props => {
+const ErrorStatus: React.FC<Props> = (props) => {
   return props.error ? (
     <span className="text-danger">{props.error}</span>
   ) : (

packages/pico-engine-ui/src/index.tsx

@@ -1,14 +1,14 @@
-import * as ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { HashRouter, Route, Routes } from "react-router-dom";
-import "whatwg-fetch"; // polyfill for fetch
 import PicosPage from "./components/PicosPage";
 import "./bootstrap.4.6.2.min.css";
 import "./index.scss";
 
 const mountPoint = document.createElement("DIV");
 document.body.append(mountPoint);
+const root = createRoot(mountPoint);
 
-ReactDOM.render(
+root.render(
   <HashRouter>
     <Routes>
       {/* NOTE: Order matters, go from specific to general */}
@@ -17,5 +17,4 @@ ReactDOM.render(
       <Route path="*" element={<PicosPage />} />
     </Routes>
   </HashRouter>,
-  mountPoint,
 );