Commit 7e57b345 authored by Przemyslaw Kaminski's avatar Przemyslaw Kaminski

[toestand] more R.State refactoring

parent 48aba6c2
...@@ -100,14 +100,14 @@ docViewLayoutCpt :: R.Component LayoutProps ...@@ -100,14 +100,14 @@ docViewLayoutCpt :: R.Component LayoutProps
docViewLayoutCpt = here.component "docViewLayout" cpt docViewLayoutCpt = here.component "docViewLayout" cpt
where where
cpt layout _children = do cpt layout _children = do
query <- R.useState' "" query <- T.useBox ""
let params = TT.initialParams let params = TT.initialParams
pure $ docView { layout, params, query } [] pure $ docView { layout, params, query } []
type Props = ( type Props = (
layout :: Record LayoutProps layout :: Record LayoutProps
, params :: TT.Params , params :: TT.Params
, query :: R.State Query , query :: T.Box Query
) )
docView :: R2.Component Props docView :: R2.Component Props
...@@ -131,11 +131,12 @@ docViewCpt = here.component "docView" cpt where ...@@ -131,11 +131,12 @@ docViewCpt = here.component "docView" cpt where
, query , query
} _ = do } _ = do
cacheState' <- T.useLive T.unequal cacheState cacheState' <- T.useLive T.unequal cacheState
query' <- T.useLive T.unequal query
pure $ H.div { className: "doc-table-doc-view container1" } pure $ H.div { className: "doc-table-doc-view container1" }
[ R2.row [ R2.row
[ chart [ chart
, if showSearch then searchBar query else H.div {} [] , if showSearch then searchBar { query } [] else H.div {} []
, H.div {className: "col-md-12"} , H.div {className: "col-md-12"}
[ pageLayout { cacheState [ pageLayout { cacheState
, frontends , frontends
...@@ -144,53 +145,61 @@ docViewCpt = here.component "docView" cpt where ...@@ -144,53 +145,61 @@ docViewCpt = here.component "docView" cpt where
, mCorpusId , mCorpusId
, nodeId , nodeId
, params , params
, query: fst query , query: query'
, session , session
, sidePanelTriggers , sidePanelTriggers
, tabType , tabType
, totalRecords , totalRecords
} ] ] ] } ] ] ]
searchBar :: R.State Query -> R.Element type SearchBarProps =
searchBar (query /\ setQuery) = R.createElement el {} [] ( query :: T.Box Query )
searchBar :: R2.Component SearchBarProps
searchBar = R.createElement searchBarCpt
searchBarCpt :: R.Component SearchBarProps
searchBarCpt = here.component "searchBar" cpt
where where
el = here.component "SearchBar" cpt cpt { query } _children = do
cpt {} _children = do query' <- T.useLive T.unequal query
queryText <- R.useState' query queryText <- T.useBox query'
queryText' <- T.useLive T.unequal queryText
pure $ H.div {className: "col-md-12 row"} pure $ H.div {className: "col-md-12 row"}
[ H.div {className: "col-md-3"} [] [ H.div {className: "col-md-3"} []
, H.div {className: "col-md-1"} [if query /= "" then clearButton else H.div {} []] , H.div {className: "col-md-1"} [if query' /= "" then (clearButton query) else H.div {} []]
, H.div {className: "col-md-3 form-group"} , H.div {className: "col-md-3 form-group"}
[ H.input { type: "text" [ H.input { className: "form-control"
, className: "form-control" , defaultValue: query'
, on: {change: onSearchChange queryText, keyUp: onSearchKeyup queryText} , on: { change: onSearchChange queryText
, placeholder: query , keyUp: onSearchKeyup query queryText' }
, defaultValue: query} , placeholder: query'
, type: "text" }
] ]
, H.div {className: "col-md-1"} [searchButton queryText] , H.div {className: "col-md-1"} [ searchButton query queryText' ]
] ]
onSearchChange :: forall e. R.State Query -> e -> Effect Unit onSearchChange :: forall e. T.Box Query -> e -> Effect Unit
onSearchChange (_ /\ setQueryText) = \e -> onSearchChange queryText e =
setQueryText $ const $ R.unsafeEventValue e T.write_ (R.unsafeEventValue e) queryText
onSearchKeyup :: R.State Query -> DE.KeyboardEvent -> Effect Unit onSearchKeyup :: T.Box Query -> Query -> DE.KeyboardEvent -> Effect Unit
onSearchKeyup (queryText /\ _) = \e -> onSearchKeyup query queryText e =
if DE.key e == "Enter" then if DE.key e == "Enter" then
setQuery $ const queryText T.write_ queryText query
else else
pure $ unit pure unit
searchButton (queryText /\ _) = searchButton query queryText' =
H.button { type: "submit" H.button { className: "btn btn-primary"
, className: "btn btn-primary" , on: { click: \e -> T.write_ queryText' query }
, on: {click: \e -> setQuery $ const queryText}} , type: "submit" }
[ H.span {className: "fa fa-search"} [] ] [ H.span {className: "fa fa-search"} [] ]
clearButton = clearButton query =
H.button { className: "btn btn-danger" H.button { className: "btn btn-danger"
, on: {click: \e -> setQuery $ const ""}} , on: { click: \e -> T.write_ "" query } }
[ H.span {className: "fa fa-times"} [] ] [ H.span {className: "fa fa-times"} [] ]
mock :: Boolean mock :: Boolean
......
...@@ -6,6 +6,7 @@ import Data.Tuple.Nested ((/\)) ...@@ -6,6 +6,7 @@ import Data.Tuple.Nested ((/\))
import Effect.Aff (Aff) import Effect.Aff (Aff)
import Reactix as R import Reactix as R
import Reactix.DOM.HTML as H import Reactix.DOM.HTML as H
import Toestand as T
import Gargantext.Components.Forest.Tree.Node.Action (Action(..)) import Gargantext.Components.Forest.Tree.Node.Action (Action(..))
import Gargantext.Components.Forest.Tree.Node.Tools (submitButton, panel, checkbox, checkboxesListGroup) import Gargantext.Components.Forest.Tree.Node.Tools (submitButton, panel, checkbox, checkboxesListGroup)
...@@ -32,8 +33,8 @@ mergeNodeCpt = here.component "mergeNode" cpt ...@@ -32,8 +33,8 @@ mergeNodeCpt = here.component "mergeNode" cpt
cpt p@{dispatch, subTreeParams, id, nodeType, session, handed} _ = do cpt p@{dispatch, subTreeParams, id, nodeType, session, handed} _ = do
action@(valAction /\ setAction) :: R.State Action <- R.useState' (MergeNode {params:Nothing}) action@(valAction /\ setAction) :: R.State Action <- R.useState' (MergeNode {params:Nothing})
merge <- R.useState' false merge <- T.useBox false
options <- R.useState' (Set.singleton GT.MapTerm) options <- T.useBox (Set.singleton GT.MapTerm)
let button = case valAction of let button = case valAction of
MergeNode {params} -> case params of MergeNode {params} -> case params of
...@@ -52,15 +53,17 @@ mergeNodeCpt = here.component "mergeNode" cpt ...@@ -52,15 +53,17 @@ mergeNodeCpt = here.component "mergeNode" cpt
, H.ul { className:"merge mx-auto list-group"} , H.ul { className:"merge mx-auto list-group"}
([ H.li { className: "list-group-item" } ([ H.li { className: "list-group-item" }
[ H.h5 { className: "mb-1" } [ H.text "Merge which list?" ] [ H.h5 { className: "mb-1" } [ H.text "Merge which list?" ]
, checkboxesListGroup { groups: [ GT.MapTerm, GT.CandidateTerm, GT.StopTerm ]
, options } []
] ]
] <> (checkboxesListGroup [ GT.MapTerm, GT.CandidateTerm, GT.StopTerm ] options)) ])
, H.ul { className:"merge mx-auto list-group"} , H.ul { className:"merge mx-auto list-group"}
[ H.li { className: "list-group-item" } [ H.li { className: "list-group-item" }
[ H.h5 { className: "mb-1" } [ H.text "Title" ] [ H.h5 { className: "mb-1" } [ H.text "Title" ]
] ]
, H.li { className: "list-group-item" } , H.li { className: "list-group-item" }
[ H.div { className: " form-check" } [ H.div { className: " form-check" }
[ checkbox merge [ checkbox { value: merge }
, H.label { className: "form-check-label" } [ H.text "Merge data?" ] , H.label { className: "form-check-label" } [ H.text "Merge data?" ]
] ]
] ]
......
...@@ -187,39 +187,54 @@ submitButtonHref action href = ...@@ -187,39 +187,54 @@ submitButtonHref action href =
------------------------------------------------------------------------ ------------------------------------------------------------------------
-- | CheckBox tools -- | CheckBox tools
-- checkboxes: Array of poolean values (basic: without pending option) -- checkboxes: Array of boolean values (basic: without pending option)
-- checkbox : One boolean value only -- checkbox : One boolean value only
checkbox :: R.State Boolean -> R.Element type CheckboxProps =
checkbox ( val /\ set ) = ( value :: T.Box Boolean )
H.input
{ className: "form-check-input", type: "checkbox" checkbox :: R2.Leaf CheckboxProps
, value: val, on: { click } } where checkbox props = R.createElement checkboxCpt props []
click _ = set $ const $ not val
checkboxCpt :: R.Component CheckboxProps
checkboxCpt = here.component "checkbox" cpt
where
cpt { value } _ = do
value' <- T.useLive T.unequal value
pure $ H.input { className: "form-check-input"
, on: { click }
, type: "checkbox"
, value: value' }
where
click _ = T.modify_ not value
data CheckBoxes = Multiple | Uniq data CheckBoxes = Multiple | Uniq
checkboxes :: forall a. Ord a => Show a => Array a -> R.State (Set a) -> R.Element type CheckboxesListGroup a =
checkboxes xs (val /\ set) = H.fieldset {} $ map field xs where ( groups :: Array a
field a = , options :: T.Box (Set a) )
H.div {}
[ H.input { defaultChecked, type: "checkbox", on: { click } } checkboxesListGroup :: forall a. Ord a => Show a => R2.Component (CheckboxesListGroup a)
, H.div {} [ H.text $ show a ] ] where checkboxesListGroup = R.createElement checkboxesListGroupCpt
click _ = set (const $ toggleSet a val)
defaultChecked = Set.member a val checkboxesListGroupCpt :: forall a. Ord a => Show a => R.Component (CheckboxesListGroup a)
checkboxesListGroupCpt = here.component "checkboxesListGroup" cpt
checkboxesListGroup where
:: forall a. Ord a => Show a => Array a -> R.State (Set a) -> Array R.Element cpt { groups, options } _ = do
checkboxesListGroup xs (val /\ set) = map one xs where options' <- T.useLive T.unequal options
one a =
let one a =
H.li { className: "list-group-item" } H.li { className: "list-group-item" }
[ H.div { className: "form-check" } [ H.div { className: "form-check" }
[ H.input { defaultChecked, type: "checkbox", on: { click } [ H.input { defaultChecked: Set.member a options'
, on: { click: \_ -> T.write_ (toggleSet a options') options
, type: "checkbox" }
, className: "form-check-input" } , className: "form-check-input" }
, H.label { className: "form-check-label" } [ H.text (show a) ] ] , H.label { className: "form-check-label" } [ H.text (show a) ] ]
] where ]
click _ = set (const $ toggleSet a val)
defaultChecked = Set.member a val pure $ R.fragment $ map one $ Set.toUnfoldable options'
prettyNodeType :: GT.NodeType -> String prettyNodeType :: GT.NodeType -> String
prettyNodeType prettyNodeType
......
...@@ -3,15 +3,18 @@ module Gargantext.Components.GraphExplorer.ControlsToggleButton ...@@ -3,15 +3,18 @@ module Gargantext.Components.GraphExplorer.ControlsToggleButton
) where ) where
import Data.Tuple.Nested ((/\)) import Data.Tuple.Nested ((/\))
import Prelude
import Reactix as R import Reactix as R
import Reactix.DOM.HTML as H import Reactix.DOM.HTML as H
import Toestand as T
import Gargantext.Prelude
import Gargantext.Utils.Reactix as R2 import Gargantext.Utils.Reactix as R2
here :: R2.Here
here = R2.here "Gargantext.Components.GraphExplorer.ControlsToggleButton" here = R2.here "Gargantext.Components.GraphExplorer.ControlsToggleButton"
type Props = ( state :: R.State Boolean ) type Props = ( state :: T.Box Boolean )
controlsToggleButton :: Record Props -> R.Element controlsToggleButton :: Record Props -> R.Element
controlsToggleButton props = R.createElement controlsToggleButtonCpt props [] controlsToggleButton props = R.createElement controlsToggleButtonCpt props []
...@@ -19,11 +22,11 @@ controlsToggleButton props = R.createElement controlsToggleButtonCpt props [] ...@@ -19,11 +22,11 @@ controlsToggleButton props = R.createElement controlsToggleButtonCpt props []
controlsToggleButtonCpt :: R.Component Props controlsToggleButtonCpt :: R.Component Props
controlsToggleButtonCpt = here.component "controlsToggleButton" cpt controlsToggleButtonCpt = here.component "controlsToggleButton" cpt
where where
cpt {state} _ = do cpt { state } _ = do
let (open /\ setOpen) = state open' <- T.useLive T.unequal state
pure $ pure $
H.button H.button
{ className: "btn btn-primary", on: {click: \_ -> setOpen not } } { className: "btn btn-primary", on: {click: \_ -> T.modify_ not state } }
[ H.text (text open) ] [ H.text (text open') ]
text true = "Hide Controls" text true = "Hide Controls"
text false = "Show Controls" text false = "Show Controls"
...@@ -115,7 +115,7 @@ type State = ( ...@@ -115,7 +115,7 @@ type State = (
--, multiNodeSelection :: R.State Boolean --, multiNodeSelection :: R.State Boolean
--, selectedNodes :: R.State (Set SelectedNode) --, selectedNodes :: R.State (Set SelectedNode)
--, showSidePanel :: R.State Boolean --, showSidePanel :: R.State Boolean
--, showControls :: R.State Boolean --, showControls :: T.Box Boolean
--, showTree :: R.State Boolean --, showTree :: R.State Boolean
--, sigmaGraphData :: R.State (Maybe SigmaxTypes.SGraph) --, sigmaGraphData :: R.State (Maybe SigmaxTypes.SGraph)
--, sigmaSettings :: R.State ({|Graph.SigmaSettings}) --, sigmaSettings :: R.State ({|Graph.SigmaSettings})
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment