DEP Update code to work with upgraded libraries

silverstripe · Dec 7, 2022 · 09961fa · 09961fa
1 parent 1f734b5
commit 09961fa
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 15 deletions.
diff --git a/client/src/legacy/CMSMain.EditForm.js b/client/src/legacy/CMSMain.EditForm.js
@@ -3,7 +3,7 @@
  */
 import $ from 'jquery';
 import i18n from 'i18n';
-import reactConfirm from "@silverstripe/reactstrap-confirm";
+import reactConfirm from 'reactstrap-confirm';
 
 $.entwine('ss', function($){
 	/**

diff --git a/client/src/legacy/CMSMain.Tree.js b/client/src/legacy/CMSMain.Tree.js
@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import i18n from 'i18n';
-import reactConfirm from "@silverstripe/reactstrap-confirm";
+import reactConfirm from 'reactstrap-confirm';
 
 $.entwine('ss.tree', function($) {
   $('.cms-tree').entwine({

diff --git a/client/src/legacy/TinyMCE_sslink-anchor.js b/client/src/legacy/TinyMCE_sslink-anchor.js
@@ -2,8 +2,8 @@
 import i18n from 'i18n';
 import TinyMCEActionRegistrar from 'lib/TinyMCEActionRegistrar';
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { ApolloProvider } from 'react-apollo';
+import { createRoot } from 'react-dom/client';
+import { ApolloProvider } from '@apollo/client';
 import { Provider } from 'react-redux';
 import jQuery from 'jquery';
 import ShortcodeSerialiser from 'lib/ShortcodeSerialiser';
@@ -68,6 +68,8 @@ jQuery.entwine('ss', ($) => {
    * Assumes that $('.insert-link__dialog-wrapper').entwine({}); is defined for shared functions
    */
   $(`#${modalId}`).entwine({
+    ReactRoot: null,
+
     renderModal(isOpen) {
       const store = ss.store;
       const client = ss.apolloClient;
@@ -82,7 +84,12 @@ jQuery.entwine('ss', ($) => {
       const currentPageID = Number($('#Form_EditForm_ID').val() || 0);
 
       // create/update the react component
-      ReactDOM.render(
+      let root = this.getReactRoot();
+      if (!root) {
+        root = createRoot(this[0]);
+        this.setReactRoot(root);
+      }
+      root.render(
         <ApolloProvider client={client}>
           <Provider store={store}>
             <InsertLinkInternalModal
@@ -98,8 +105,7 @@ jQuery.entwine('ss', ($) => {
               currentPageID={currentPageID}
             />
           </Provider>
-        </ApolloProvider>,
-        this[0]
+        </ApolloProvider>
       );
     },
 

diff --git a/client/src/legacy/TinyMCE_sslink-internal.js b/client/src/legacy/TinyMCE_sslink-internal.js
@@ -2,8 +2,8 @@
 import i18n from 'i18n';
 import TinyMCEActionRegistrar from 'lib/TinyMCEActionRegistrar';
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { ApolloProvider } from 'react-apollo';
+import { createRoot } from 'react-dom/client';
+import { ApolloProvider } from '@apollo/client';
 import { Provider } from 'react-redux';
 import jQuery from 'jquery';
 import ShortcodeSerialiser from 'lib/ShortcodeSerialiser';
@@ -60,6 +60,8 @@ jQuery.entwine('ss', ($) => {
    * Assumes that $('.insert-link__dialog-wrapper').entwine({}); is defined for shared functions
    */
   $(`#${modalId}`).entwine({
+    ReactRoot: null,
+
     renderModal(isOpen) {
       const store = ss.store;
       const client = ss.apolloClient;
@@ -69,7 +71,12 @@ jQuery.entwine('ss', ($) => {
       const requireLinkText = this.getRequireLinkText();
 
       // create/update the react component
-      ReactDOM.render(
+      let root = this.getReactRoot();
+      if (!root) {
+        root = createRoot(this[0]);
+        this.setReactRoot(root);
+      }
+      root.render(
         <ApolloProvider client={client}>
           <Provider store={store}>
             <InsertLinkInternalModal
@@ -84,8 +91,7 @@ jQuery.entwine('ss', ($) => {
               requireLinkText={requireLinkText}
             />
           </Provider>
-        </ApolloProvider>,
-        this[0]
+        </ApolloProvider>
       );
     },
 

diff --git a/client/src/state/history/readOnePageQuery.js b/client/src/state/history/readOnePageQuery.js
@@ -1,4 +1,4 @@
-import { graphql } from 'react-apollo';
+import { graphql } from '@apollo/client/react/hoc';
 import gql from 'graphql-tag';
 
 // GraphQL query for retrieving the version history of a specific page. The

diff --git a/client/src/state/history/revertToPageVersionMutation.js b/client/src/state/history/revertToPageVersionMutation.js
@@ -1,4 +1,4 @@
-import { graphql } from 'react-apollo';
+import { graphql } from '@apollo/client/react/hoc';
 import gql from 'graphql-tag';
 
 const mutation = gql`

diff --git a/client/src/state/history/rollbackPageMutation.js b/client/src/state/history/rollbackPageMutation.js
@@ -1,4 +1,4 @@
-import { graphql } from 'react-apollo';
+import { graphql } from '@apollo/client/react/hoc';
 import gql from 'graphql-tag';
 
 const mutation = gql`