Add suggested work-around for Mosaic error

See nomcopter/react-mosaic#162 (comment)
NCI-Agency · Jul 21, 2022 · c602d23 · c602d23
1 parent f28211f
commit c602d23
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/client/src/components/MosaicLayout.js b/client/src/components/MosaicLayout.js
@@ -16,8 +16,8 @@ import {
   getNodeAtPath,
   getOtherDirection,
   getPathToCorner,
-  Mosaic,
   MosaicWindow,
+  MosaicWithoutDragDropContext,
   updateTree
 } from "react-mosaic-component"
 import "react-mosaic-component/react-mosaic-component.css"
@@ -29,7 +29,7 @@ const MosaicLayout = ({ visualizations, initialNode, description, style }) => {
     <div className="mosaic-box" style={style}>
       <div className="mosaic-container">
         {renderNavBar()}
-        <Mosaic
+        <MosaicWithoutDragDropContext
           value={currentNode}
           onChange={updateCurrentNode}
           renderTile={(id, path) => {

diff --git a/client/src/index.js b/client/src/index.js
@@ -5,6 +5,8 @@ import { jumpToTop } from "components/Page"
 import "locale-compare-polyfill"
 import App from "pages/App"
 import React from "react"
+import { DndProvider } from "react-dnd-multi-backend"
+import HTML5ToTouch from "react-dnd-multi-backend/dist/cjs/HTML5toTouch"
 import { createRoot } from "react-dom/client"
 import { Provider } from "react-redux"
 import { BrowserRouter, Route } from "react-router-dom"
@@ -28,9 +30,11 @@ root.render(
   <Provider store={store}>
     <PersistGate persistor={persistor}>
       <ApolloProvider client={API.client}>
-        <BrowserRouter onUpdate={jumpToTop}>
-          <Route path="/" component={App} />
-        </BrowserRouter>
+        <DndProvider options={HTML5ToTouch}>
+          <BrowserRouter onUpdate={jumpToTop}>
+            <Route path="/" component={App} />
+          </BrowserRouter>
+        </DndProvider>
       </ApolloProvider>
     </PersistGate>
   </Provider>