move searchbar into new component and make it default hidden, expandable

src/Gargantext/Pages/Layout/Actions.purs

@@ -16,6 +16,7 @@ import Gargantext.Pages.Corpus.Document       as D
 import Gargantext.Pages.Corpus.Graph     as GE
 import Gargantext.Pages.Layout.Specs.AddCorpus      as AC
 import Gargantext.Pages.Layout.Specs.Search         as S
+import Gargantext.Pages.Layout.Specs.SearchBar      as SB
 import Gargantext.Pages.Layout.States                  (AppState)
 import Gargantext.Prelude
 import Gargantext.Router                               (Routes)
@@ -25,29 +26,26 @@ import Gargantext.Router                               (Routes)
 data Action
   = LoginA     LN.Action
   | SetRoute   Routes
-    | SearchA    S.Action
-    | Search             String
-    | AddCorpusA AC.Action
-    | GraphExplorerA     GE.Action
-    | DocumentViewA D.Action
+  | SearchA    S.Action
+  | AddCorpusA AC.Action
+  | GraphExplorerA     GE.Action
+  | DocumentViewA D.Action
   | AnnuaireAction     Annuaire.Action
-  | Go
+  | SearchBarAction SB.Action
   | ShowLogin
   | Logout
-  | ShowAddcorpus
+  | ShowAddCorpus
   | ToggleTree
 
 
 performAction :: PerformAction AppState {} Action
 performAction (SetRoute route)  _ _ = void do
   modifyState $ _ {currentRoute = pure route}
-performAction (Search s)  _ _ = void do
-  modifyState $ _ {search = s}
 
 performAction (ToggleTree)  _ (state) = void do -- TODO
   modifyState $ _ {showTree = not (state.showTree)}
 
-performAction (ShowLogin)  _ _ = void do
+performAction ShowLogin  _ _ = void do
   liftEffect $ modalShow "loginModal"
   modifyState $ _ {showLogin = true}
 
@@ -60,23 +58,21 @@ performAction Logout _ _ = do
 
 ---------------------------------------------------------
 -- TODO chose one of them
-performAction (ShowAddcorpus)  _ _ = void do
+performAction ShowAddCorpus  _ _ = void do
   liftEffect $ modalShow "addCorpus"
   modifyState $ _ {showCorpus = true}
 
-performAction Go  _ _ = void do
-  liftEffect $ modalShow "addCorpus"
-  modifyState $ _ {showCorpus = true}
- -- _ <- lift $ setHash "/addCorpus"
-  --modifyState id
 ---------------------------------------------------------
 
-performAction (LoginA        _) _ _ = pure unit
-performAction (AddCorpusA    _) _ _ = pure unit
-performAction (SearchA       _) _ _ = pure unit
-performAction (DocumentViewA _) _ _ = pure unit
-performAction (GraphExplorerA     _) _ _ = pure unit
-performAction (AnnuaireAction     _) _ _ = pure unit
+performAction (LoginA          _) _ _ = pure unit
+performAction (AddCorpusA      _) _ _ = pure unit
+performAction (SearchA         _) _ _ = pure unit
+performAction (DocumentViewA   _) _ _ = pure unit
+performAction (GraphExplorerA  _) _ _ = pure unit
+performAction (AnnuaireAction  _) _ _ = pure unit
+performAction (SearchBarAction _) _ _ = pure unit
+  -- liftEffect $ modalShow "addCorpus"
+  -- modifyState $ _ {showCorpus = true}
 
 ----------------------------------------------------------
 
@@ -104,6 +100,12 @@ _annuaireAction = prism AnnuaireAction \action ->
        AnnuaireAction a -> Right a
        _                -> Left  action
 
+_searchBarAction :: Prism' Action SB.Action
+_searchBarAction = prism SearchBarAction \action ->
+  case action of
+       SearchBarAction a -> Right a
+       _                 -> Left  action
+
 _documentViewAction :: Prism' Action D.Action
 _documentViewAction = prism DocumentViewA \action ->
   case action of

src/Gargantext/Pages/Layout/Specs.purs

@@ -8,7 +8,7 @@ import React (ReactElement)
 import React.DOM (a, button, div, footer, hr', img, input, li, p, span, text, ul,i)
 import React.DOM.Props (_data, _id, _type, aria, className, href, onChange, onClick, placeholder, role, src, style, tabIndex, target, title)
 import Thermite (Render, Spec, _render, defaultPerformAction, defaultRender, focus, simpleSpec, withState, noState, cmapProps)
-import Unsafe.Coerce (unsafeCoerce)
+-- import Unsafe.Coerce (unsafeCoerce)
 
 import Gargantext.Prelude
 import Gargantext.Components.Data.Lang (Lang(..))
@@ -23,10 +23,11 @@ import Gargantext.Pages.Corpus.Document as Annotation
 import Gargantext.Pages.Corpus.Dashboard as Dsh
 import Gargantext.Pages.Corpus.Graph as GE
 import Gargantext.Pages.Home as L
-import Gargantext.Pages.Layout.Actions (Action(..), _addCorpusAction, _documentViewAction, _graphExplorerAction, _loginAction, _searchAction, performAction)
+import Gargantext.Pages.Layout.Actions (Action(..), _addCorpusAction, _documentViewAction, _graphExplorerAction, _loginAction, _searchAction, _searchBarAction, performAction)
 import Gargantext.Pages.Layout.Specs.AddCorpus as AC
 import Gargantext.Pages.Layout.Specs.Search    as S
-import Gargantext.Pages.Layout.States (AppState, _addCorpusState, _documentViewState, _graphExplorerState, _loginState, _searchState)
+import Gargantext.Pages.Layout.Specs.SearchBar as SB
+import Gargantext.Pages.Layout.States (AppState, _addCorpusState, _documentViewState, _graphExplorerState, _loginState, _searchState, _searchBarState)
 import Gargantext.Router (Routes(..))
 
 layoutSpec :: Spec AppState {} Action
@@ -61,7 +62,6 @@ pagesComponent s = case s.currentRoute of
     selectSpec (Document i)      = layout0 $ focus _documentViewState _documentViewAction  Annotation.docview
     selectSpec (PGraphExplorer i)= layout1  $ focus _graphExplorerState _graphExplorerAction  GE.specOld
     selectSpec Dashboard         = layout0 $ noState Dsh.layoutDashboard
-
     selectSpec (Annuaire i)      = layout0 $ cmapProps (const {annuaireId: i}) $ noState A.layout
     selectSpec (UserPage i)      = layout0 $ cmapProps (const {nodeId: i}) $ noState C.layoutUser
     selectSpec (ContactPage i)   = layout0 $ cmapProps (const {nodeId: i}) $ noState C.layoutUser
@@ -75,11 +75,12 @@ layout0 :: Spec AppState {} Action
         -> Spec AppState {} Action
 layout0 layout =
   fold
-  [ layoutSidebar divSearchBar
+  [ searchBar
   , outerLayout
   , layoutFooter
   ]
   where
+    searchBar = layoutSidebar $ focus _searchBarState _searchBarAction SB.renderSpec
     outerLayout1 = simpleSpec defaultPerformAction defaultRender
     outerLayout :: Spec AppState {} Action
     outerLayout =
@@ -122,12 +123,13 @@ layout1 :: Spec AppState {} Action
         -> Spec AppState {} Action
 layout1 layout =
   fold
-  [ layoutSidebar divSearchBar
+  [ searchBar
   , layout
   -- , outerLayout
   , layoutFooter
   ]
   where
+    searchBar = layoutSidebar $ focus _searchBarState _searchBarAction SB.renderSpec
     outerLayout1 = simpleSpec defaultPerformAction defaultRender
     outerLayout :: Spec AppState {} Action
     outerLayout =
@@ -163,8 +165,7 @@ layout1 layout =
       ]
 
 
-layoutSidebar :: Spec AppState {} Action
-              -> Spec AppState {} Action
+layoutSidebar :: Spec AppState {} Action -> Spec AppState {} Action
 layoutSidebar = over _render \render d p s c ->
       [ div [ _id "dafixedtop"
             , className "navbar navbar-inverse navbar-fixed-top"
@@ -297,31 +298,6 @@ liNav (LiNav { title : title'
                       ]
                 ]
 
--- TODO put the search form in the center of the navBar
-divSearchBar :: Spec AppState {} Action
-divSearchBar = simpleSpec performAction render
-  where
-    render :: Render AppState {} Action
-    render dispatch _ state _ = [div [ className "" ] [ searchbar']]
-      where
-        searchbar' = ul [ className "nav navbar-nav col-md-6 col-md-offset-3"
-                        , style { "marginLeft" : "15%"}
-                        ] [ {-div [className "navbar-form"]
-                            [ input [ className   "search-query"
-                                    , placeholder "Query, URL or FILE (works with Firefox or Chromium browsers)"
-                                    , _type "text"
-                                    , style { height: "35px"
-                                            , width: "400px"
-                                            }
-                                    , onChange \e -> dispatch $ Search (unsafeCoerce e).target.value
-                                    ]
-                           --,  button [onClick \e -> dispatch Go, className "btn btn-primary"] [text "Enter"]
-                            , span [onClick \e -> dispatch Go, style {color : "#039BE5"}]
-                            [ i [className "material-icons md-36"] [text "control_point"]]
-                            ]
-                            -}
-                          ]
-
 divDropdownRight :: (Action -> Effect Unit) -> AppState -> ReactElement
 divDropdownRight d s =
   ul [className "nav navbar-nav pull-right"]

src/Gargantext/Pages/Layout/Specs/SearchBar.purs

+module Gargantext.Pages.Layout.Specs.SearchBar
+  (State, Action(..), initialState, performAction, renderSpec) where
+
+import Data.Foldable (fold, intercalate)
+import Data.Lens (Lens', lens, over, (^.), (.~))
+import Data.Maybe (Maybe(Nothing, Just))
+import Effect (Effect)
+import Effect.Class.Console (log)
+import React (ReactElement)
+import React.DOM (a, button, div, footer, hr', img, input, li, p, span, text, ul,i)
+import React.DOM.Props (_data, _id, _type, aria, className, href, onChange, onClick, placeholder, role, src, style, tabIndex, target, title)
+import Thermite (Render, Spec, _render, defaultPerformAction, defaultRender, focus, simpleSpec, withState, noState, cmapProps)
+import Unsafe.Coerce (unsafeCoerce)
+
+import Gargantext.Prelude
+import Gargantext.Components.Data.Lang (Lang(..))
+import Gargantext.Components.Login.Types (AuthData(..))
+import Gargantext.Components.Login as LN
+import Gargantext.Components.Tree  as Tree
+import Gargantext.Folder           as F
+import Gargantext.Pages.Annuaire   as A
+import Gargantext.Pages.Annuaire.User.Contacts as C
+import Gargantext.Pages.Corpus     as Corpus
+import Gargantext.Pages.Corpus.Document as Annotation
+import Gargantext.Pages.Corpus.Dashboard as Dsh
+import Gargantext.Pages.Corpus.Graph as GE
+import Gargantext.Pages.Home as L
+import Gargantext.Pages.Layout.Specs.AddCorpus as AC
+import Gargantext.Pages.Layout.Specs.Search    as S
+import Gargantext.Router (Routes(..))
+import Thermite (PerformAction, Render, Spec, modifyState, simpleSpec)
+import Gargantext.Components.Modals.Modal              (modalShow)
+import Effect.Class                                    (liftEffect)
+import Data.Newtype as N
+
+type State' = { open :: Boolean, searchTerm :: String }
+
+newtype State = State State'
+
+derive instance newtypeState :: N.Newtype State _
+
+initialState :: State
+initialState = State { open: false, searchTerm: "" }
+
+data Action =
+    ToggleOpen
+  | SetSearchTerm String
+  | PerformSearch
+
+performAction :: PerformAction State {} Action
+performAction ToggleOpen _ st = void $ do
+  let new = st ^. _open
+  let msg = "Toggled open from " <> show new
+  liftEffect $ log msg
+  modifyState $ over _open not
+performAction (SetSearchTerm term) _ _ = void $ do
+  liftEffect $ log $ "Search term set " <> term
+  modifyState $ _searchTerm .~ term
+performAction PerformSearch _ _ = void $ do
+  liftEffect $ log "Search performed"
+  liftEffect $ modalShow "addCorpus"
+
+render :: Render State {} Action
+render dispatch _ state _ = [ expander ] <> (draw $ state ^. _open)
+  where
+    draw true  = [ searchbar ]
+    draw false = [ ]
+    go = button [onClick \e -> dispatch PerformSearch, className "btn btn-primary"]
+                [text "Enter"]
+    expander = ul [ className "nav navbar pull-left" ]
+                  [ li [ onClick \e -> dispatch ToggleOpen, style { color: "#039BE5" } ]
+                       [ i [ className "material-icons md-36", style { marginTop: "-5px" } ]
+                           [ text "control_point" ] ] ]
+    search = input [ className   "search-query"
+                   , placeholder "Query, URL or FILE (works with Firefox or Chromium browsers)"
+                   , _type "text"
+                   , style { height: "35px", width: "400px" }
+                   , onChange \e -> dispatch $ SetSearchTerm (unsafeCoerce e).target.value
+                   ]
+    searchbar = ul [ className "nav navbar pull-left" ]
+                   [ div [className "navbar-form"] [ search, go ] ]
+
+
+-- TODO:
+ -- render differently based on whether we are open or not
+ -- tidy up css
+ -- subtle css animation
+
+renderSpec :: Spec State {} Action
+renderSpec = simpleSpec performAction render
+
+
+----------------------------
+
+overState :: (State' -> State') -> State -> State
+overState = N.over State
+
+_open :: Lens' State Boolean
+_open = lens (_.open <<< N.unwrap) $ \s o -> overState (_ { open = o }) s
+
+_searchTerm :: Lens' State String
+_searchTerm = lens (_.searchTerm <<< N.unwrap) $ \s t -> overState (_ { searchTerm = t }) s
+

src/Gargantext/Pages/Layout/States.purs

@@ -11,19 +11,20 @@ import Gargantext.Pages.Corpus.Document       as D
 import Gargantext.Pages.Corpus.Graph     as GE
 import Gargantext.Pages.Layout.Specs.AddCorpus      as AC
 import Gargantext.Pages.Layout.Specs.Search         as S
+import Gargantext.Pages.Layout.Specs.SearchBar      as SB
 import Gargantext.Router                               (Routes(..))
 
 type AppState =
-  { currentRoute   :: Maybe Routes
-  , loginState   :: LN.State
-  , addCorpusState :: AC.State
-  , searchState    :: S.State
-  , documentState  :: D.State
-  , search         :: String
-  , showLogin      :: Boolean
-  , showCorpus     :: Boolean
-  , graphExplorerState  :: GE.State
-  , showTree :: Boolean
+  { currentRoute       :: Maybe Routes
+  , loginState         :: LN.State
+  , addCorpusState     :: AC.State
+  , searchState        :: S.State
+  , documentState      :: D.State
+  , searchBarState     :: SB.State
+  , showLogin          :: Boolean
+  , showCorpus         :: Boolean
+  , graphExplorerState :: GE.State
+  , showTree           :: Boolean
   }
 
 initAppState :: Effect AppState
@@ -35,14 +36,16 @@ initAppState = do
     , addCorpusState : AC.initialState
     , searchState    : S.initialState
     , documentState  : D.initialState {}
-    , search         : ""
+    , searchBarState : SB.initialState
     , showLogin      : false
     , showCorpus     : false
     , graphExplorerState : GE.initialState
     , showTree : false
     }
 
+
 ---------------------------------------------------------
+
 _loginState :: Lens' AppState LN.State
 _loginState = lens (\s -> s.loginState) (\s ss -> s{loginState = ss})
 
@@ -52,8 +55,12 @@ _addCorpusState = lens (\s -> s.addCorpusState) (\s ss -> s{addCorpusState = ss}
 _searchState :: Lens' AppState S.State
 _searchState = lens (\s -> s.searchState) (\s ss -> s{searchState = ss})
 
+_searchBarState :: Lens' AppState SB.State
+_searchBarState = lens (\s -> s.searchBarState) (\s ss -> s{searchBarState = ss})
+
 _documentViewState :: Lens' AppState D.State
 _documentViewState = lens (\s -> s.documentState) (\s ss -> s{documentState = ss})
 
 _graphExplorerState :: Lens' AppState GE.State
 _graphExplorerState = lens (\s -> s.graphExplorerState) (\s ss -> s{graphExplorerState = ss})
+