update: import Standata in index.js

dockerfiles/app/Dockerfile

@@ -12,7 +12,6 @@ COPY package.json package.json
 
 RUN npm install
 
-
 COPY . .
 
 EXPOSE 3001

src/MaterialsDesigner.jsx

@@ -79,6 +79,7 @@ class MaterialsDesigner extends mix(React.Component).with(FullscreenComponentMix
                                     maxCombinatorialBasesCount={
                                         this.props.maxCombinatorialBasesCount
                                     }
+                                    defaultMaterialsSet={this.props.defaultMaterialsSet}
                                 />
                                 <div className="bgm-dark col-xs-12">
                                     <ItemsList
@@ -170,6 +171,8 @@ MaterialsDesigner.propTypes = {
     onRemove: PropTypes.func,
 
     maxCombinatorialBasesCount: PropTypes.number,
+
+    defaultMaterialsSet: PropTypes.array,
 };
 
 export default MaterialsDesigner;

src/MaterialsDesignerContainer.jsx

@@ -137,9 +137,12 @@ MaterialsDesignerContainer.propTypes = {
     maxCombinatorialBasesCount: PropTypes.number,
     // eslint-disable-next-line react/require-default-props
     isConventionalCellShown: PropTypes.bool,
+    // eslint-disable-next-line react/require-default-props
+    defaultMaterialsSet: PropTypes.array,
 };
 
 MaterialsDesignerContainer.defaultProps = {
     applyMiddleware: true,
     initialMaterials,
+    defaultMaterialsSet: [],
 };

src/components/header_menu/HeaderMenuToolbar.jsx

@@ -279,7 +279,7 @@ class HeaderMenuToolbar extends React.Component {
 
     renderImportModal() {
         const { showImportMaterialsDialog } = this.state;
-        const { ImportModal, onAdd } = this.props;
+        const { ImportModal, onAdd, defaultMaterialsSet } = this.props;
         return ImportModal ? (
             <ImportModal
                 modalId="defaultImportModalDialog"
@@ -290,6 +290,7 @@ class HeaderMenuToolbar extends React.Component {
                     this.setState({ showImportMaterialsDialog: false });
                 }}
                 onClose={() => this.setState({ showImportMaterialsDialog: false })}
+                defaultMaterialsSet={defaultMaterialsSet}
             />
         ) : null;
     }
@@ -440,6 +441,7 @@ HeaderMenuToolbar.propTypes = {
     index: PropTypes.number.isRequired,
     isFullscreen: PropTypes.bool.isRequired,
     maxCombinatorialBasesCount: PropTypes.number.isRequired,
+    defaultMaterialsSet: PropTypes.array.isRequired,
 
     onUpdate: PropTypes.func.isRequired,
     onUndo: PropTypes.func.isRequired,

src/components/include/DefaultImportModalDialog.jsx

@@ -60,14 +60,12 @@ class DefaultImportModalDialog extends React.Component {
     }
 
     componentDidMount() {
-        if (process.env.NODE_ENV !== "production") {
-            this.getDefaultMaterialsAsync().then((defaultMaterials) => {
-                const defaultMaterialsList = defaultMaterials.map((material) => {
-                    return { label: material.name || "Not available", value: material };
-                });
-                this.setState({ defaultMaterialsList });
-            });
-        }
+        const { defaultMaterialsSet } = this.props;
+        const defaultMaterialsList = defaultMaterialsSet.map((material) => {
+            return { label: material.name || "Not available", value: material };
+        });
+
+        this.setState({ defaultMaterialsList });
     }
 
     handleFileRead = (evt) => {
@@ -164,19 +162,6 @@ class DefaultImportModalDialog extends React.Component {
         });
     }
 
-    /**
-     * Get default materials from Standata during local development
-     * and return an empty array when installed in Web-app.
-     * @returns {Promise<unknown[] | *[]>}
-     */
-    // eslint-disable-next-line class-methods-use-this
-    getDefaultMaterialsAsync() {
-        // eslint-disable-next-line import/no-extraneous-dependencies,import/no-unresolved
-        return import("@exabyte-io/standata/lib/runtime_data/materials").then((standata) => {
-            return Object.values(standata.filesMapByName);
-        });
-    }
-
     formatDate = (date) => {
         const hours = date.getHours().toString().padStart(2, "0");
         const minutes = date.getMinutes().toString().padStart(2, "0");
@@ -388,6 +373,11 @@ DefaultImportModalDialog.propTypes = {
     show: PropTypes.bool.isRequired,
     onClose: PropTypes.func.isRequired,
     onSubmit: PropTypes.func.isRequired,
+    defaultMaterialsSet: PropTypes.array,
+};
+
+DefaultImportModalDialog.defaultProps = {
+    defaultMaterialsSet: [],
 };
 
 export default DefaultImportModalDialog;

src/index.jsx

@@ -5,11 +5,14 @@ import "react-s-alert/dist/s-alert-css-effects/stackslide.css";
 import "@exabyte-io/wave.js/dist/stylesheets/main.css";
 import "./stylesheets/main.scss";
 
+// eslint-disable-next-line import/no-unresolved
+import data from "@exabyte-io/standata/lib/runtime_data/materials";
 import React from "react";
 import ReactDOM from "react-dom";
 
 import { MaterialsDesignerContainer } from "./MaterialsDesignerContainer";
 
+const materials = Object.values(data.filesMapByName);
 /*
  * Set timeout to ensure Codemirror CSS is loaded: https://github.com/graphql/graphiql/issues/33#issuecomment-318188555
  * CSS is loaded in the component using CodeMirror (eg. `Basis`).
@@ -18,7 +21,7 @@ setTimeout(() => {
     // Store component reference in window to access it in console for debugging/tests purposes
     // eslint-disable-next-line react/no-render-return-value
     window.MDContainer = ReactDOM.render(
-        <MaterialsDesignerContainer />,
+        <MaterialsDesignerContainer defaultMaterialsSet={materials} />,
         document.getElementById("root"),
     );
 }, 0);