SideBar.purs 1.66 KB
Newer Older
arturo's avatar
arturo committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
module Gargantext.Components.PhyloExplorer.SideBar
  ( sideBar
  ) where

import Gargantext.Prelude

import Effect (Effect)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.PhyloExplorer.DetailsTab (detailsTab)
import Gargantext.Components.PhyloExplorer.SelectionTab (selectionTab)
import Gargantext.Components.PhyloExplorer.Store as PhyloStore
import Gargantext.Components.PhyloExplorer.Types (TabView(..))
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
import Toestand as T

type Props =
  ( selectTermCallback    :: String -> Effect Unit
  )

sideBar :: R2.Leaf Props
sideBar = R2.leaf component

componentName :: String
componentName = "Gargantext.Components.PhyloExplorer.SideBar"

component :: R.Component Props
component = R.hooksComponent componentName cpt where
  cpt props _ = do
    -- | States
    -- |
    { sideBarTabView
    , phyloId
    } <- PhyloStore.use

    sideBarTabView' <- R2.useLive' sideBarTabView
    phyloId'        <- R2.useLive' phyloId

    -- | Computed
    -- |
    let
      tabList = [ DetailsTab, SelectionTab ]

    -- | Render
    -- |
    pure $

      H.div
      { className: "phylo-sidebar" }
      [
        -- Menu
        B.tabs
        { value: sideBarTabView'
        , list: tabList
        , callback: flip T.write_ sideBarTabView
        }
      ,
        -- Content
        case sideBarTabView' of

          DetailsTab ->
            detailsTab
            { key: (show phyloId') <> "-details" }

          SelectionTab ->
            selectionTab
            { key: (show phyloId') <> "-selection"
            , selectTermCallback: props.selectTermCallback
            }
      ]