Add new type de champ after type de champ on screen

app/javascript/components/TypesDeChampEditor/components/TypeDeChamp.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { sortableElement, sortableHandle } from 'react-sortable-hoc';
+import { useInView } from 'react-intersection-observer';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import DescriptionInput from './DescriptionInput';
@@ -29,6 +30,10 @@ const TypeDeChamp = sortableElement(
     const canBeMandatory =
       !isHeaderSection && !isExplication && !state.isAnnotation;
 
+    const [ref, inView] = useInView({
+      threshold: [0.6]
+    });
+
     const updateHandlers = createUpdateHandlers(
       dispatch,
       typeDeChamp,
@@ -42,8 +47,10 @@ const TypeDeChamp = sortableElement(
 
     return (
       <div
-        ref={isLastItem ? state.lastTypeDeChampRef : null}
+        ref={ref}
         data-index={index}
+        data-in-view={inView ? true : undefined}
+        data-repetition={isRepetition ? true : undefined}
         className={`type-de-champ form flex column justify-start ${
           isHeaderSection ? 'type-header-section' : ''
         }`}

app/javascript/components/TypesDeChampEditor/components/TypeDeChampRepetitionOptions.js

@@ -1,4 +1,4 @@
-import React, { useReducer, useRef } from 'react';
+import React, { useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -11,11 +11,7 @@ function TypeDeChampRepetitionOptions({
   state: parentState,
   typeDeChamp
 }) {
-  const lastTypeDeChampRef = useRef(null);
-  const [state, dispatch] = useReducer(typeDeChampsReducer, {
-    ...parentState,
-    lastTypeDeChampRef
-  });
+  const [state, dispatch] = useReducer(typeDeChampsReducer, parentState);
 
   if (isVisible) {
     return (

app/javascript/components/TypesDeChampEditor/components/TypeDeChamps.js

@@ -1,4 +1,4 @@
-import React, { useReducer, useRef } from 'react';
+import React, { useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -7,10 +7,8 @@ import TypeDeChamp from './TypeDeChamp';
 import typeDeChampsReducer from '../typeDeChampsReducer';
 
 function TypeDeChamps({ state: rootState, typeDeChamps }) {
-  const lastTypeDeChampRef = useRef(null);
   const [state, dispatch] = useReducer(typeDeChampsReducer, {
     ...rootState,
-    lastTypeDeChampRef,
     typeDeChamps
   });
 

app/javascript/components/TypesDeChampEditor/typeDeChampsReducer.js

@@ -37,30 +37,52 @@ export default function typeDeChampsReducer(state, { type, params, done }) {
   }
 }
 
-function addNewTypeDeChamp(state, typeDeChamps, done) {
+function addTypeDeChamp(state, typeDeChamps, insertAfter, done) {
   const typeDeChamp = {
     ...state.defaultTypeDeChampAttributes,
     order_place: typeDeChamps.length
   };
 
   createTypeDeChampOperation(typeDeChamp, state.queue)
-    .then(() => {
+    .then(async () => {
+      if (insertAfter) {
+        // Move the champ to the correct position server-side
+        await moveTypeDeChampOperation(
+          typeDeChamp,
+          insertAfter.index,
+          state.queue
+        );
+      }
       state.flash.success();
       done();
-      if (state.lastTypeDeChampRef) {
-        scrollToComponent(state.lastTypeDeChampRef.current);
+      if (insertAfter) {
+        scrollToComponent(insertAfter.target.nextElementSibling);
       }
     })
     .catch(message => state.flash.error(message));
 
+  let newTypeDeChamps = [...typeDeChamps, typeDeChamp];
+  if (insertAfter) {
+    // Move the champ to the correct position client-side
+    newTypeDeChamps = arrayMove(
+      newTypeDeChamps,
+      typeDeChamps.length,
+      insertAfter.index
+    );
+  }
+
   return {
     ...state,
-    typeDeChamps: [...typeDeChamps, typeDeChamp]
+    typeDeChamps: newTypeDeChamps
   };
 }
 
+function addNewTypeDeChamp(state, typeDeChamps, done) {
+  return addTypeDeChamp(state, typeDeChamps, findItemToInsertAfter(), done);
+}
+
 function addNewRepetitionTypeDeChamp(state, typeDeChamps, typeDeChamp, done) {
-  return addNewTypeDeChamp(
+  return addTypeDeChamp(
     {
       ...state,
       defaultTypeDeChampAttributes: {
@@ -69,6 +91,7 @@ function addNewRepetitionTypeDeChamp(state, typeDeChamps, typeDeChamp, done) {
       }
     },
     typeDeChamps,
+    null,
     done
   );
 }
@@ -182,3 +205,23 @@ function getUpdateHandler(typeDeChamp, { queue, flash }) {
   }
   return handler;
 }
+
+function findItemToInsertAfter() {
+  const target = getFirstTarget();
+
+  return {
+    target,
+    index: parseInt(target.dataset.index) + 1
+  };
+}
+
+function getFirstTarget() {
+  const [target] = document.querySelectorAll('[data-in-view]');
+  if (target) {
+    const parentTarget = target.closest('[data-repetition]');
+    if (parentTarget) {
+      return parentTarget;
+    }
+    return target;
+  }
+}

package.json

@@ -23,6 +23,7 @@
     "ramda": "=0.24.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-intersection-observer": "^8.23.0",
     "react-scroll-to-component": "^1.0.2",
     "react-sortable-hoc": "^1.7.1",
     "react_ujs": "^2.5.0",

yarn.lock

@@ -688,6 +688,13 @@
     "@babel/plugin-transform-react-jsx-self" "^7.0.0"
     "@babel/plugin-transform-react-jsx-source" "^7.0.0"
 
+"@babel/runtime@^7.0.0":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.4.tgz#dc2e34982eb236803aa27a07fea6857af1b9171d"
+  integrity sha512-w0+uT71b6Yi7i5SE0co4NioIpSYS6lLiXvCzWzGSKvpK5vdQtCbICHMj+gbAKAOtxiV6HsVh/MBdaF9EQ6faSg==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2":
   version "7.4.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.3.tgz#79888e452034223ad9609187a0ad1fe0d2ad4bdc"
@@ -6737,6 +6744,14 @@ react-dom@^16.8.6:
     prop-types "^15.6.2"
     scheduler "^0.13.6"
 
+react-intersection-observer@^8.23.0:
+  version "8.23.0"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.23.0.tgz#1533aaf39cc70300ff8ca37e6551d2d68a589cd0"
+  integrity sha512-kHXfxhGKvVDNkrvmh9CKCnAWvJBigyB7oSDzMXL54weFDwwI4WfTr58YauZ0RRPkGzoD/hYEuzfS1wipXn23fA==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    invariant "^2.2.4"
+
 react-is@^16.8.1:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"