Merge pull request #75 from yulinscottkang/r18

yulinscottkang · web-flow · commit 94458ab26051 · 2022-08-09T11:12:06.000+08:00
chore(deps): upgrade to react 18
diff --git a/README.md b/README.md
@@ -3,9 +3,17 @@
 This project is community-driven initiative originally created by amazing [@psrednicki](https://github.com/psrednicki), [@msasinowski](https://github.com/msasinowski) and [@tbajda](https://github.com/tbajda) and is now maintained by the Azure Maps team.
 
 - How to link local package version:
-  - run yarn watch in `azure-maps-react`
-  - run yarn link `azure-maps-react`
-  - go to the `azure-maps-playground` and run `yarn link "react-azure-maps"`
+  - run `yarn watch` in `azure-maps-react`
+  - run `yarn link` in `azure-maps-react`
+  - go to `azure-maps-playground` and run `yarn link "react-azure-maps"`
+
+- How to avoid "Invalid Hook call" caused by multiple React instances
+  - go to `azure-maps-playground` and run
+    ```
+    cd node_modules/react
+    yarn link
+    ```
+  - go to `azure-maps-react` and run `yarn link react`
 
 ### Subscription key
 
diff --git a/package.json b/package.json
@@ -5,15 +5,15 @@
   "dependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@material-ui/core": "5.0.0-beta.4",
+    "@mui/material": "^5.9.2",
     "@types/jest": "24.0.19",
     "@types/node": "12.11.7",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-router-dom": "^5.1.3",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-azure-maps": "^0.4.2",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^5.0.0-next.37",
     "sanitize.css": "^12.0.1",
@@ -56,4 +56,4 @@
     "nth-check": "^2.0.1",
     "ansi-html": "git+https://github.com/mahdyar/ansi-html-community#0.0.8"
   }
-}
+}
diff --git a/src/App.test.tsx b/src/App.test.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+  const root = createRoot(div!);
+  root.render(<App />);
+  root.unmount();
 });
diff --git a/src/Layout/Sidebar.tsx b/src/Layout/Sidebar.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
 import { Link } from 'react-router-dom';
 import { examplesList } from '../examples/examplesList';
 import { withRouter, RouteProps } from 'react-router';
diff --git a/src/examples/ArrowLinesExample.tsx b/src/examples/ArrowLinesExample.tsx
@@ -9,7 +9,7 @@ import {
 } from 'react-azure-maps';
 import { AuthenticationType } from 'azure-maps-control';
 import { key } from '../key';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import { wrapperStyles } from './RouteExample';
 import { calculateLineEndPoints, lineData, renderMultiLine } from './mapHelper';
 import Description from '../Layout/Description';
diff --git a/src/examples/BubbleLayer.tsx b/src/examples/BubbleLayer.tsx
@@ -7,7 +7,7 @@ import {
   IAzureMapOptions,
 } from 'react-azure-maps';
 import { AuthenticationType } from 'azure-maps-control';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import { key } from '../key';
 import { wrapperStyles } from './RouteExample';
 import Description from '../Layout/Description';
diff --git a/src/examples/Buildings3D.tsx b/src/examples/Buildings3D.tsx
@@ -3,7 +3,7 @@ import { AzureMap, AzureMapsProvider, IAzureMapOptions } from 'react-azure-maps'
 import { AuthenticationType } from 'azure-maps-control';
 import { key } from '../key';
 import Description from '../Layout/Description';
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import { wrapperStyles } from './Options/ChangeOptionsWrapper';
 
 const option: IAzureMapOptions = {
diff --git a/src/examples/ControlExample.tsx b/src/examples/ControlExample.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { AzureMap, AzureMapsProvider, IAzureMapControls, IAzureMapOptions } from 'react-azure-maps';
 import { AuthenticationType, ControlOptions } from 'azure-maps-control';
 import { key } from '../key';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import { wrapperStyles } from './RouteExample';
 import Description from '../Layout/Description';
 
diff --git a/src/examples/CustomControl/BringDataControl.tsx b/src/examples/CustomControl/BringDataControl.tsx
@@ -11,7 +11,7 @@ import {
 import { AuthenticationType, ControlPosition } from 'azure-maps-control';
 import { BringDataIntoViewControl } from './BringDataControlHelper';
 import { key } from '../../key';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import Description from '../../Layout/Description';
 import { wrapperStyles } from '../RouteExample';
 
diff --git a/src/examples/Live/COVID-19.tsx b/src/examples/Live/COVID-19.tsx
@@ -9,7 +9,7 @@
 // import {AuthenticationType} from "azure-maps-control";
 // import {io} from "azure-maps-spatial-io";
 // import {key} from "../../key";
-// import {Button} from "@material-ui/core";
+// import {Button} from "@mui/material";
 
 // const option: IAzureMapOptions = {
 //   authOptions: {
diff --git a/src/examples/MapRef/MapController.tsx b/src/examples/MapRef/MapController.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { AzureMapsContext, IAzureMapsContextProps } from 'react-azure-maps';
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import Description from '../../Layout/Description';
 import { data, layer, source } from 'azure-maps-control';
 import MapComponent from './MapComponent';
diff --git a/src/examples/MarkersExample/MarkersExample.tsx b/src/examples/MarkersExample/MarkersExample.tsx
@@ -13,7 +13,7 @@ import {
   IAzureMapOptions,
 } from 'react-azure-maps';
 import { AuthenticationType, data, HtmlMarkerOptions, SymbolLayerOptions } from 'azure-maps-control';
-import { Button, Chip } from '@material-ui/core';
+import { Button, Chip } from '@mui/material';
 import { key } from '../../key';
 
 const point1 = new data.Position(-100.01, 45.01);
diff --git a/src/examples/MarkersExample/MarkersExampleWrapper.tsx b/src/examples/MarkersExample/MarkersExampleWrapper.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react';
 import MarkersExample from './MarkersExample';
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import Description from '../../Layout/Description';
 
 const MarkersExampleWrapper: React.FC = () => {
diff --git a/src/examples/MultiplePointWithPopup.tsx b/src/examples/MultiplePointWithPopup.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useMemo, useState } from 'react';
+import React, { memo, useMemo, useState, ReactElement } from 'react';
 import {
   AzureMap,
   AzureMapDataSourceProvider,
@@ -10,7 +10,7 @@ import {
   IAzureMapFeature,
 } from 'react-azure-maps';
 import { AuthenticationType, data, MapMouseEvent, PopupOptions } from 'azure-maps-control';
-import { Button, Chip } from '@material-ui/core';
+import { Button, Chip } from '@mui/material';
 import { key } from '../key';
 import Description from '../Layout/Description';
 
@@ -20,7 +20,7 @@ const points = Array.from({ length: 100 }).map(() => {
   return new data.Position(randomLongitude, randomLatitude);
 });
 
-const renderPoint = (coordinates: data.Position): IAzureMapFeature => {
+const renderPoint = (coordinates: data.Position): ReactElement<IAzureMapFeature> => {
   const rendId = Math.random();
   return (
     <AzureMapFeature
@@ -64,8 +64,8 @@ const MarkersExample: React.FC = () => {
     setMarkers([]);
   };
 
-  const memoizedMarkerRender: IAzureMapFeature[] = useMemo(
-    (): IAzureMapFeature[] => markers.map((marker) => renderPoint(marker)),
+  const memoizedMarkerRender: ReactElement<IAzureMapFeature>[] = useMemo(
+    (): ReactElement<IAzureMapFeature>[] => markers.map((marker) => renderPoint(marker)),
     [markers],
   );
 
diff --git a/src/examples/Options/ChangeOptionsWrapper.tsx b/src/examples/Options/ChangeOptionsWrapper.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import Description from '../../Layout/Description';
 import ChangeOptionsExample from './ChangeOptions';
 
diff --git a/src/examples/PopupExample.tsx b/src/examples/PopupExample.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import {
   AzureMap,
   AzureMapsProvider,
diff --git a/src/examples/RouteExample.tsx b/src/examples/RouteExample.tsx
@@ -9,7 +9,7 @@ import {
 } from 'react-azure-maps';
 import { AuthenticationType } from 'azure-maps-control';
 import { key } from '../key';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import Description from '../Layout/Description';
 
 function mouseOverLineString(e: any) {
diff --git a/src/examples/Shape/Shape.tsx b/src/examples/Shape/Shape.tsx
@@ -9,7 +9,7 @@ import {
 } from 'react-azure-maps';
 import { AuthenticationType, data } from 'azure-maps-control';
 import { key } from '../../key';
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import Description from '../../Layout/Description';
 
 const option: IAzureMapOptions = {
diff --git a/src/examples/TrafficOptions.tsx b/src/examples/TrafficOptions.tsx
@@ -4,7 +4,7 @@ import { AuthenticationType, TrafficOptions } from 'azure-maps-control';
 import { key } from '../key';
 import { wrapperStyles } from './RouteExample';
 import Description from '../Layout/Description';
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 
 const option: IAzureMapOptions = {
   authOptions: {
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+createRoot(document.getElementById('root')!).render(<App />);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
diff --git a/yarn.lock b/yarn.lock
