Merge pull request #1606 from chrissolanilla/1605/Replace-Render

1605/replace render

package.json

@@ -56,8 +56,8 @@
     "lint-staged": "^10.2.11",
     "mini-css-extract-plugin": "^2.7.2",
     "nodemon": "^2.0.20",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-test-renderer": "^17.0.2",
     "sass": "^1.69.5",
     "sass-loader": "^13.2.0",

src/404.js

@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import Action404 from './components/404'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<Action404 />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )

src/500.js

@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import Action500 from './components/500'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<Action500 />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )

src/catalog.js

@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import CatalogPage from './components/catalog-page'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<CatalogPage />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )

src/closed.js

@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import Closed from './components/closed'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<Closed />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )

src/components/detail-carousel.jsx

@@ -248,6 +248,7 @@ const DetailCarousel = ({widget, widgetHeight=''}) => {
 
 	const snapToImage = (fast=false) => {
 		const _pics = picScrollerRef.current
+		if(!_pics) return false //with react 18 rendering order is different, null check needed
 		const i = selectionData.selectedImage.num
 		if (_pics.children.length && _pics.children[i]) {
 			const _offset = _pics.children[i].offsetLeft * -1

src/creator-page.js

@@ -1,12 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
 import WidgetCreatorPage from './components/widget-creator-page'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<WidgetCreatorPage />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )

src/detail.js

@@ -1,14 +1,14 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import DetailPage from './components/detail-page'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<DetailPage />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>)

src/draft-not-playable.js

@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import DraftNotPlayable from './components/draft-not-playable'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<DraftNotPlayable />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )

src/embedded-only.js

@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import EmbeddedOnly from './components/embedded-only'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<EmbeddedOnly />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )

src/guides.js

@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import GuidePage from './components/guide-page'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<GuidePage />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )

src/help.js

@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import HelpPage from './components/help-page'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<HelpPage />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>)

src/homepage.js

@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import Homepage from './components/homepage'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<Homepage />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )

src/login.js

@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import LoginPage from './components/login-page'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<LoginPage />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )

src/lti-error.js

@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import ErrorGeneral from './components/lti/error-general'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<ErrorGeneral />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )

src/lti-open-preview.js

@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import OpenPreview from './components/lti/open-preview'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<OpenPreview />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )

src/lti-post-login.js

@@ -1,12 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
 import PostLogin from './components/lti/post-login'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<PostLogin />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>)

src/lti-select-item.js

@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import SelectItem from './components/lti/select-item'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<SelectItem />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )

src/media.js

@@ -1,12 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
 import MediaImporter from './components/media-importer'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<MediaImporter />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )

src/my-widgets.js

@@ -1,7 +1,6 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import MyWidgetsPage from './components/my-widgets-page'
 import { onError } from './util/global-cache-options'
 
@@ -11,9 +10,9 @@ const queryCache = new QueryCache({
 
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<MyWidgetsPage />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app')
+	</QueryClientProvider>  
 )

src/no-attempts.js

@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import NoAttempts from './components/no-attempts'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<NoAttempts />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )

src/no-permission.js

@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import NoPermission from './components/no-permission'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<NoPermission />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>)