Isolate react components from react loaders

app/javascript/components/TypesDeChampEditor/TypesDeChampEditor.js

@@ -1,62 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import {
-  faArrowCircleDown,
-  faArrowDown,
-  faArrowsAltV,
-  faArrowUp,
-  faPlus,
-  faTrash
-} from '@fortawesome/free-solid-svg-icons';
-
-import Flash from './Flash';
-import OperationsQueue from './OperationsQueue';
-import TypeDeChamps from './components/TypeDeChamps';
-
-library.add(
-  faArrowCircleDown,
-  faArrowDown,
-  faArrowsAltV,
-  faArrowUp,
-  faPlus,
-  faTrash
-);
-
-class TypesDeChampEditor extends Component {
-  constructor(props) {
-    super(props);
-    const defaultTypeDeChampAttributes = {
-      type_champ: 'text',
-      types_de_champ: [],
-      private: props.isAnnotation,
-      libelle: `${
-        props.isAnnotation ? 'Nouvelle annotation' : 'Nouveau champ'
-      } ${props.typeDeChampsTypes[0][0]}`
-    };
-    this.state = {
-      flash: new Flash(props.isAnnotation),
-      queue: new OperationsQueue(props.baseUrl),
-      defaultTypeDeChampAttributes,
-      typeDeChampsTypes: props.typeDeChampsTypes,
-      directUploadUrl: props.directUploadUrl,
-      isAnnotation: props.isAnnotation
-    };
-  }
-
-  render() {
-    return (
-      <TypeDeChamps state={this.state} typeDeChamps={this.props.typeDeChamps} />
-    );
-  }
-}
-
-TypesDeChampEditor.propTypes = {
-  baseUrl: PropTypes.string,
-  directUploadUrl: PropTypes.string,
-  isAnnotation: PropTypes.bool,
-  typeDeChamps: PropTypes.array,
-  typeDeChampsTypes: PropTypes.array
-};
-
-export default TypesDeChampEditor;

app/javascript/components/TypesDeChampEditor/index.js

@@ -1,3 +1,62 @@
-import Loadable from '../Loadable';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import {
+  faArrowCircleDown,
+  faArrowDown,
+  faArrowsAltV,
+  faArrowUp,
+  faPlus,
+  faTrash
+} from '@fortawesome/free-solid-svg-icons';
 
-export default Loadable(() => import('./TypesDeChampEditor'));
+import Flash from './Flash';
+import OperationsQueue from './OperationsQueue';
+import TypeDeChamps from './components/TypeDeChamps';
+
+library.add(
+  faArrowCircleDown,
+  faArrowDown,
+  faArrowsAltV,
+  faArrowUp,
+  faPlus,
+  faTrash
+);
+
+class TypesDeChampEditor extends Component {
+  constructor(props) {
+    super(props);
+    const defaultTypeDeChampAttributes = {
+      type_champ: 'text',
+      types_de_champ: [],
+      private: props.isAnnotation,
+      libelle: `${
+        props.isAnnotation ? 'Nouvelle annotation' : 'Nouveau champ'
+      } ${props.typeDeChampsTypes[0][0]}`
+    };
+    this.state = {
+      flash: new Flash(props.isAnnotation),
+      queue: new OperationsQueue(props.baseUrl),
+      defaultTypeDeChampAttributes,
+      typeDeChampsTypes: props.typeDeChampsTypes,
+      directUploadUrl: props.directUploadUrl,
+      isAnnotation: props.isAnnotation
+    };
+  }
+
+  render() {
+    return (
+      <TypeDeChamps state={this.state} typeDeChamps={this.props.typeDeChamps} />
+    );
+  }
+}
+
+TypesDeChampEditor.propTypes = {
+  baseUrl: PropTypes.string,
+  directUploadUrl: PropTypes.string,
+  isAnnotation: PropTypes.bool,
+  typeDeChamps: PropTypes.array,
+  typeDeChampsTypes: PropTypes.array
+};
+
+export default TypesDeChampEditor;

app/javascript/loaders/TypesDeChampEditor.js

@@ -0,0 +1,3 @@
+import Loadable from '../components/Loadable';
+
+export default Loadable(() => import('../components/TypesDeChampEditor'));

app/javascript/packs/application.js

@@ -73,6 +73,6 @@ window.Turbolinks = Turbolinks;
 
 // Now that Turbolinks is globally exposed,configure ReactRailsUJS
 // eslint-disable-next-line no-undef
-ReactRailsUJS.useContext(require.context('components', true));
+ReactRailsUJS.useContext(require.context('loaders', true));
 // Remove previous event handlers and add new ones:
 ReactRailsUJS.detectEvents();