[CodeEditor] some refactoring

src/Gargantext/Components/CodeEditor.purs

@@ -10,10 +10,8 @@ import Data.Nullable (Nullable, null, toMaybe)
 import Data.String.Utils (endsWith)
 import Data.Tuple (fst, snd)
 import Data.Tuple.Nested ((/\))
-import DOM.Simple.Console (log2)
 import DOM.Simple.Types (Element)
 import Effect (Effect)
-import FFI.Simple ((.=), delay)
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Text.Markdown.SlamDown.Parser (parseMd)
@@ -99,32 +97,11 @@ codeEditorCpt = R.hooksComponent "G.C.CE.CodeEditor" cpt
   where
     cpt {code, defaultCodeType, onChange} _ = do
       controls <- initControls code defaultCodeType
-      -- codeRef <- R.useRef code
-      -- defaultCodeTypeRef <- R.useRef defaultCodeType
-
-      -- R.useEffect2' code defaultCodeType $ do
-      --   if R.readRef codeRef == code && R.readRef defaultCodeTypeRef == defaultCodeType then
-      --     pure unit
-      --   else do
-      --     log2 "[codeEditorCpt] code" code
-      --     log2 "[codeEditorCpt] defaultCodeType" defaultCodeType
-      --     R.setRef codeRef code
-      --     R.setRef defaultCodeTypeRef defaultCodeType
-      --     reinitControls controls code defaultCodeType
-      --     setCodeOverlay controls code
-      --     renderHtml code controls
-
-      -- Initial rendering of elements with given data
-
-      -- Note: delay is necessary here, otherwise initially the HTML won't get
-      -- rendered (DOM Element refs are still null)
-      R.useEffectOnce $ delay unit $ \_ -> do
-        _ <- renderHtml code controls
-        pure $ pure unit
-
-      R.useEffectOnce $ delay unit $ \_ -> do
-        _ <- setCodeOverlay controls code
-        pure $ pure unit
+
+      R.useEffect2' (fst controls.codeS) (fst controls.codeType) $ do
+        let code' = fst controls.codeS
+        setCodeOverlay controls code'
+        renderHtml code' controls
 
       pure $ H.div { className: "code-editor" } [
           toolbar {controls, onChange}
@@ -176,8 +153,6 @@ codeEditorCpt = R.hooksComponent "G.C.CE.CodeEditor" cpt
     onEditChange controls@{codeElRef, codeOverlayElRef, codeType: (codeType /\ _), codeS} onChange e = do
       let code = R2.unsafeEventValue e
       snd codeS $ const code
-      setCodeOverlay controls code
-      renderHtml (fst codeS) controls
       onChange codeType code
 
 setCodeOverlay :: Record Controls -> Code -> Effect Unit
@@ -229,8 +204,6 @@ toolbarCpt = R.hooksComponent "G.C.CE.toolbar" cpt
     -- Handle rerendering of preview when viewType changed
     onChangeCodeType :: forall e. Record ToolbarProps -> e -> Effect Unit
     onChangeCodeType {controls, onChange} _ = do
-      setCodeOverlay controls code
-      renderHtml code controls
       onChange (fst controls.codeType) code
       where
         code = fst controls.codeS

src/Gargantext/Components/Nodes/Corpus.purs

@@ -20,7 +20,7 @@ import Gargantext.Prelude
 
 import Gargantext.Components.CodeEditor as CE
 import Gargantext.Components.Node (NodePoly(..), HyperdataList)
-import Gargantext.Components.Nodes.Corpus.Types (CorpusData, FTField, Field(..), FieldType(..), Hyperdata(..), defaultField, defaultHaskell', defaultJSON', defaultMarkdown')
+import Gargantext.Components.Nodes.Corpus.Types (CorpusData, FTField, Field(..), FieldType(..), Hash, Hyperdata(..), defaultField, defaultHaskell', defaultJSON', defaultMarkdown')
 import Gargantext.Data.Array as GDA
 import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Routes (SessionRoute(NodeAPI, Children))
@@ -136,11 +136,10 @@ fieldsCodeEditorCpt = R.hooksComponent "G.C.N.C.fieldsCodeEditorCpt" cpt
       pure $ H.div {} $ List.toUnfoldable (editors masterKey)
       where
         editors masterKey =
-          (\idxField@(Tuple idx field) ->
+          (\(Tuple idx field) ->
             fieldCodeEditorWrapper { canMoveDown: idx < (List.length fields - 1)
                                    , canMoveUp: idx > 0
                                    , field
-                                   , hash: hash idxField
                                    , key: (show $ fst masterKey) <> "-" <> (show idx)
                                    , onChange: onChange fS idx
                                    , onMoveDown: onMoveDown masterKey fS idx
@@ -158,13 +157,13 @@ fieldsCodeEditorCpt = R.hooksComponent "G.C.N.C.fieldsCodeEditorCpt" cpt
 
     onMoveDown :: R.State Int -> R.State FTFieldsWithIndex -> Index -> Unit -> Effect Unit
     onMoveDown (_ /\ setMasterKey) (fs /\ setFields) idx _ = do
-      setFields $ recomputeIndices <<< (GDA.swapList idx (idx + 1))
       setMasterKey $ (+) 1
+      setFields $ recomputeIndices <<< (GDA.swapList idx (idx + 1))
 
     onMoveUp :: R.State Int -> R.State FTFieldsWithIndex -> Index -> Unit -> Effect Unit
     onMoveUp (_ /\ setMasterKey) (_ /\ setFields) idx _ = do
-      setFields $ recomputeIndices <<< (GDA.swapList idx (idx - 1))
       setMasterKey $ (+) 1
+      setFields $ recomputeIndices <<< (GDA.swapList idx (idx - 1))
 
     onRemove :: R.State FTFieldsWithIndex -> Index -> Unit -> Effect Unit
     onRemove (_ /\ setFields) idx _ = do
@@ -191,7 +190,6 @@ type FieldCodeEditorProps =
     canMoveDown :: Boolean
   , canMoveUp :: Boolean
   , field :: FTField
-  , hash :: Hash  -- TODO this isn't needed anymore
   , key :: String
   , onChange :: FieldType -> Effect Unit
   , onMoveDown :: Unit -> Effect Unit
@@ -206,8 +204,8 @@ fieldCodeEditorWrapper props = R.createElement fieldCodeEditorWrapperCpt props [
 fieldCodeEditorWrapperCpt :: R.Component FieldCodeEditorProps
 fieldCodeEditorWrapperCpt = R.hooksComponent "G.C.N.C.fieldCodeEditorWrapperCpt" cpt
   where
-    cpt props@{canMoveDown, canMoveUp, field: Field {name, typ}, hash, onMoveDown, onMoveUp, onRemove, onRename} _ = do
-      pure $ H.div { className: "row panel panel-default hash-" <> hash } [
+    cpt props@{canMoveDown, canMoveUp, field: Field {name, typ}, onMoveDown, onMoveUp, onRemove, onRename} _ = do
+      pure $ H.div { className: "row panel panel-default" } [
         H.div { className: "panel-heading" } [
           H.div { className: "code-editor-heading" } [
               renameable {onRename, text: name}