[documents] Refactor Documents view to reactix

src/Gargantext/Components/AutoUpdate.purs

@@ -5,9 +5,13 @@ import Data.Traversable (traverse_)
 import React as React
 import React (ReactClass, ReactElement, Children)
 import React.DOM (div')
-import Gargantext.Prelude
 import Effect (Effect)
-import Effect.Timer (IntervalId, setInterval, clearInterval)
+import Effect.Timer (IntervalId, TimeoutId, setInterval, clearInterval, setTimeout, clearTimeout)
+import Reactix as R
+import Reactix.DOM.HTML as H
+
+import Gargantext.Prelude
+
 
 data Action = Update
 
@@ -27,7 +31,7 @@ autoUpdateClass =
        pure { state: {intervalId: Nothing}
             , render: pure $ div' []
             , componentDidMount: do
-                {duration,effect} <- React.getProps this
+                {duration, effect} <- React.getProps this
                 intervalId        <- setInterval duration effect
                 React.setState this {intervalId: Just intervalId}
             , componentWillUnmount: do
@@ -37,3 +41,25 @@ autoUpdateClass =
 
 autoUpdateElt :: Props -> ReactElement
 autoUpdateElt props = React.createElement autoUpdateClass props []
+
+autoUpdate :: Record PropsRow -> R.Element
+autoUpdate props = R.createElement autoUpdateCpt props []
+
+autoUpdateCpt :: R.Component PropsRow
+autoUpdateCpt = R.hooksComponent "G.C.AU.autoUpdate" cpt
+  where
+    cpt { duration, effect } _ = do
+      intervalRef <- R.useRef Nothing
+
+      R.useEffect' $ do
+        let mInterval = R.readRef intervalRef
+        case mInterval of
+          Nothing -> do
+            intervalId <- setInterval duration effect
+            R.setRef intervalRef $ Just intervalId
+          Just intervalId -> do
+            clearInterval intervalId
+            intervalId <- setInterval duration effect
+            R.setRef intervalRef $ Just intervalId
+
+      pure $ H.div {} []

src/Gargantext/Components/NgramsTable/Core.purs

@@ -68,6 +68,10 @@ import Data.Either (Either(..))
 import Data.Foldable (class Foldable, foldMap, foldl, foldr)
 import Data.FoldableWithIndex (class FoldableWithIndex, foldMapWithIndex, foldlWithIndex, foldrWithIndex)
 import Data.FunctorWithIndex (class FunctorWithIndex, mapWithIndex)
+import Data.Generic.Rep (class Generic)
+import Data.Generic.Rep.Eq (genericEq)
+import Data.Generic.Rep.Ord (genericCompare)
+import Data.Generic.Rep.Show (genericShow)
 import Data.Lens (Iso', Lens', use, view, (%=), (.~), (?=), (^?))
 import Data.Lens.At (class At, at)
 import Data.Lens.Common (_Just)
@@ -143,8 +147,13 @@ initialPageParams session nodeId listIds tabType =
 
 newtype NgramsTerm = NormNgramsTerm String
 
-derive instance eqNgramsTerm  :: Eq  NgramsTerm
-derive instance ordNgramsTerm :: Ord NgramsTerm
+derive instance genericNgramsTerm :: Generic NgramsTerm _
+instance eqNgramsTerm  :: Eq NgramsTerm where
+  eq = genericEq
+instance ordNgramsTerm :: Ord NgramsTerm where
+  compare = genericCompare
+instance showNgramsTerm :: Show NgramsTerm where
+  show = genericShow
 
 instance encodeJsonNgramsTerm :: EncodeJson NgramsTerm where
   encodeJson (NormNgramsTerm s) = encodeJson s
@@ -692,11 +701,11 @@ syncPatches props { ngramsLocalPatch: ngramsLocalPatch@{ngramsNewElems, ngramsPa
         }
 
 syncPatchesR :: forall p s. CoreParams p -> R.State (CoreState s) -> Effect Unit
-syncPatchesR props ({ ngramsLocalPatch: ngramsLocalPatch@{ngramsNewElems, ngramsPatches}
-                   , ngramsStagePatch
-                   , ngramsValidPatch
-                   , ngramsVersion
-                   } /\ setState) = do
+syncPatchesR props ({ ngramsLocalPatch: ngramsLocalPatch@{ ngramsNewElems, ngramsPatches }
+                    , ngramsStagePatch
+                    , ngramsValidPatch
+                    , ngramsVersion
+                    } /\ setState) = do
   when (isEmptyNgramsTablePatch ngramsStagePatch) $ do
     setState $ \s ->
       s { ngramsLocalPatch = fromNgramsPatches mempty

src/Gargantext/Components/Nodes/Corpus/Document.purs

 module Gargantext.Components.Nodes.Corpus.Document where
 
-import Prelude (class Show, bind, mempty, pure, ($), (<>))
 import Data.Argonaut (class DecodeJson, decodeJson, (.:), (.:?))
 import Data.Generic.Rep (class Generic)
 import Data.Generic.Rep.Show (genericShow)
 import Data.Maybe (Maybe(..), fromMaybe)
+import Data.Tuple (fst)
+import Data.Tuple.Nested ((/\))
+import Effect (Effect)
 import Effect.Aff (Aff)
-import React (ReactClass, Children)
-import React.DOM (div, h4, li, p, span, text, ul)
-import React.DOM.Props (className)
 import Reactix as R
-import Thermite (PerformAction, Render, Spec, simpleSpec, createClass)
+import Reactix.DOM.HTML as H
 
-import Gargantext.Components.AutoUpdate (autoUpdateElt)
+import Gargantext.Prelude
+
+import Gargantext.Components.AutoUpdate ( autoUpdate)
 import Gargantext.Components.Node (NodePoly(..))
 import Gargantext.Components.NgramsTable.Core
   ( CoreState, NgramsPatch(..), NgramsTerm, Replace, Versioned(..)
-  , VersionedNgramsTable, addNewNgram, applyNgramsTablePatch, commitPatch
-  , loadNgramsTable, replace, singletonNgramsTablePatch, syncPatches )
+  , VersionedNgramsTable, addNewNgram, applyNgramsTablePatch, commitPatchR
+  , loadNgramsTable, replace, singletonNgramsTablePatch, syncPatchesR )
 import Gargantext.Components.Annotation.AnnotatedField as AnnotatedField
 import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Routes (SessionRoute(..))
@@ -27,11 +28,13 @@ import Gargantext.Utils as U
 import Gargantext.Utils.Reactix as R2
 
 type DocPath =
-  { nodeId   :: Int
+  {
+    corpusId :: Maybe Int
   , listIds  :: Array Int
-  , corpusId :: Maybe Int
+  , nodeId   :: Int
+  , session  :: Session
   , tabType  :: TabType
-  , session  :: Session }
+  }
 
 type NodeDocument = NodePoly Document
 
@@ -40,10 +43,10 @@ type LoadedData =
   , ngramsTable :: VersionedNgramsTable
   }
 
-type Props =
-  { loaded :: LoadedData
+type Props = (
+    loaded :: LoadedData
   , path   :: DocPath
-  }
+  )
 
 -- This is a subpart of NgramsTable.State.
 type State = CoreState ()
@@ -294,88 +297,104 @@ instance decodeDocument :: DecodeJson Document
                       --, text
                       }
 
-docViewSpec :: Spec State Props Action
-docViewSpec = simpleSpec performAction render
+docViewWrapper :: Record Props -> R.Element
+docViewWrapper props = R.createElement docViewWrapperCpt props []
+
+docViewWrapperCpt :: R.Component Props
+docViewWrapperCpt = R.hooksComponent "G.C.N.C.D.docViewWrapper" cpt
   where
-    performAction :: PerformAction State Props Action
-    performAction Synchronize {path} state = do
-        syncPatches path state
-    performAction (SetTermListItem n pl) _ {ngramsVersion} =
-        commitPatch (Versioned {version: ngramsVersion, data: pt})
-      where
-        pe = NgramsPatch { patch_list: pl, patch_children: mempty }
-        pt = singletonNgramsTablePatch n pe
-    performAction (AddNewNgram ngram termList) _ {ngramsVersion} =
-        commitPatch (Versioned {version: ngramsVersion, data: pt})
-      where
-        pt = addNewNgram ngram termList
-
-    render :: Render State Props Action
-    render dispatch { loaded: { ngramsTable: Versioned { data: initTable }, document } }
-                    { ngramsLocalPatch
-                    , ngramsValidPatch
-                    }
-                    _reactChildren =
-      [ autoUpdateElt { duration: 3000
-                      , effect:   dispatch Synchronize
-                      }
-      , div [className "container1"]
+    cpt { loaded, path } _ = do
+      state <- R.useState' $ initialState { loaded }
+
+      pure $ docView { loaded, path, state }
+
+type DocViewProps = (
+  state :: R.State State
+  | Props
+  )
+
+docView :: Record DocViewProps -> R.Element
+docView props = R.createElement docViewCpt props []
+
+docViewCpt :: R.Component DocViewProps
+docViewCpt = R.hooksComponent "G.C.N.C.D.docView" cpt
+  where
+    cpt props@{ loaded: loaded@{ ngramsTable: Versioned { data: initTable }, document }, state } _ = do
+      pure $ H.div {} [
+        autoUpdate { duration: 3000, effect: dispatch Synchronize }
+      , H.div { className: "container1" }
         [
-          div [className "row"]
+          R2.row
           [
-            div [className "col-md-8"]
-            [ h4 [] [annotate doc.title]
-            , ul [className "list-group"]
-              [ li' [ span [] [text' doc.source]
+            R2.col 8
+            [ H.h4 {} [ annotate state doc.title ]
+            , H.ul { className: "list-group" }
+              [ li' [ H.span {} [ text' doc.source ]
                     , badge "source"
                     ]
               -- TODO add href to /author/ if author present in
-              , li' [ span [] [text' doc.authors]
+              , li' [ H.span {} [ text' doc.authors ]
                     , badge "authors"
                     ]
-              , li' [ span [] [text $ publicationDate $ Document doc]
+              , li' [ H.span {} [ H.text $ publicationDate $ Document doc ]
                     , badge "date"
                     ]
               ]
             , badge "abstract"
-            , annotate doc.abstract
-            , div [className "jumbotron"]
-              [ p [] [text "Empty Full Text"]
+            , annotate state doc.abstract
+            , H.div { className: "jumbotron" }
+              [ H.p {} [ H.text "Empty Full Text" ]
               ]
             ]
           ]
         ]
       ]
         where
-          ngramsTable = applyNgramsTablePatch (ngramsLocalPatch <> ngramsValidPatch) initTable
-          setTermList ngram Nothing        newList = dispatch $ AddNewNgram ngram newList
-          setTermList ngram (Just oldList) newList = dispatch $ SetTermListItem ngram (replace oldList newList)
-          annotate text = R2.scuff $ AnnotatedField.annotatedField { ngrams: ngramsTable, setTermList, text }
-          li' = li [className "list-group-item justify-content-between"]
-          text' x = text $ fromMaybe "Nothing" x
-          badge s = span [className "badge badge-default badge-pill"] [text s]
+          dispatch :: Action -> Effect Unit
+          dispatch (AddNewNgram ngram termList) = do
+            commitPatchR (Versioned {version, data: pt}) state
+            where
+              ({ ngramsVersion: version } /\ _) = state
+              pt = addNewNgram ngram termList
+          dispatch (SetTermListItem ngram termList) = do
+            commitPatchR (Versioned {version, data: pt}) state
+            where
+              ({ ngramsVersion: version } /\ _) = state
+              pe = NgramsPatch { patch_list: termList, patch_children: mempty }
+              pt = singletonNgramsTablePatch ngram pe
+          dispatch Synchronize = do
+            syncPatchesR props.path props.state
+
+          annotate state text = AnnotatedField.annotatedField { ngrams: ngramsTable state
+                                                              , setTermList: setTermList state
+                                                              , text }
+          badge s = H.span { className: "badge badge-default badge-pill" } [ H.text s ]
+          li' = H.li { className: "list-group-item justify-content-between" }
+          ngramsTable ({ ngramsLocalPatch, ngramsValidPatch } /\ _) = applyNgramsTablePatch (ngramsLocalPatch <> ngramsValidPatch) initTable
+          setTermList state ngram Nothing        newList = dispatch (AddNewNgram ngram newList)
+          setTermList state ngram (Just oldList) newList = dispatch (SetTermListItem ngram (replace oldList newList))
+          text' x = H.text $ fromMaybe "Nothing" x
           NodePoly {hyperdata : Document doc} = document
 
-docViewClass :: ReactClass { children :: Children
-                           , loaded   :: LoadedData
-                           , path     :: DocPath
-                           }
-docViewClass = createClass "DocumentView" docViewSpec initialState
-
-type LayoutProps = ( session :: Session, nodeId :: Int, listId :: Int, corpusId :: Maybe Int )
+type LayoutProps = (
+    corpusId :: Maybe Int
+  , listId :: Int
+  , nodeId :: Int
+  , session :: Session
+  )
 
 documentLayout :: Record LayoutProps -> R.Element
 documentLayout props = R.createElement documentLayoutCpt props []
 
 documentLayoutCpt :: R.Component LayoutProps
-documentLayoutCpt = R.hooksComponent "G.P.Corpus.Document.documentLayout" cpt
+documentLayoutCpt = R.hooksComponent "G.C.N.C.D.documentLayout" cpt
   where
     cpt {session, nodeId, listId, corpusId} _ = do
       useLoader path loadData $ \loaded ->
-        R2.createElement' docViewClass {path, loaded} []
+        docViewWrapper {path, loaded}
       where
         tabType = TabDocument (TabNgramType CTabTerms)
-        path = {session, nodeId, listIds: [listId], corpusId, tabType}
+        path = { corpusId, listIds: [listId], nodeId, session, tabType }
 
 ------------------------------------------------------------------------
 

src/Gargantext/Utils/Reactix.purs

@@ -253,7 +253,7 @@ row :: Array R.Element -> R.Element
 row children = H.div { className: "row" } children
 
 col :: Int -> Array R.Element -> R.Element
-col n children = H.div { className : "col-md" <> show n } children
+col n children = H.div { className : "col-md-" <> show n } children
 
 innerText :: DOM.Element -> String
 innerText e = e .. "innerText"