Harmonize view component code style

9 files changed, 329 insertions, 338 deletions

diff --git a/client/src/View/Payment/Add.hs b/client/src/View/Payment/Add.hs
index 163a200..e983465 100644
--- a/client/src/View/Payment/Add.hs
+++ b/client/src/View/Payment/Add.hs
@@ -1,6 +1,6 @@
 module View.Payment.Add
   ( view
-  , Input(..)
+  , In(..)
   ) where
 
 import           Control.Monad          (join)
@@ -21,32 +21,32 @@ import qualified Util.Ajax              as Ajax
 import qualified Util.Reflex            as ReflexUtil
 import qualified View.Payment.Form      as Form
 
-data Input t = Input
-  { _input_categories        :: [Category]
-  , _input_paymentCategories :: Dynamic t [PaymentCategory]
-  , _input_frequency         :: Dynamic t Frequency
+data In t = In
+  { _in_categories        :: [Category]
+  , _in_paymentCategories :: Dynamic t [PaymentCategory]
+  , _in_frequency         :: Dynamic t Frequency
   }
 
-view :: forall t m. MonadWidget t m => Input t -> Modal.Content t m SavedPayment
+view :: forall t m. MonadWidget t m => In t -> Modal.Content t m SavedPayment
 view input cancel = do
 
   currentDay <- liftIO $ Time.getCurrentTime >>= TimeUtil.timeToDay
 
   formOutput <- R.dyn $ do
-    paymentCategories <- _input_paymentCategories input
-    frequency <- _input_frequency input
-    return $ Form.view $ Form.Input
-      { Form._input_cancel = cancel
-      , Form._input_headerLabel = Msg.get Msg.Payment_Add
-      , Form._input_categories = _input_categories input
-      , Form._input_paymentCategories = paymentCategories
-      , Form._input_name = ""
-      , Form._input_cost = ""
-      , Form._input_date = currentDay
-      , Form._input_category = -1
-      , Form._input_frequency = frequency
-      , Form._input_mkPayload = CreatePaymentForm
-      , Form._input_ajax = Ajax.post
+    paymentCategories <- _in_paymentCategories input
+    frequency <- _in_frequency input
+    return $ Form.view $ Form.In
+      { Form._in_cancel = cancel
+      , Form._in_headerLabel = Msg.get Msg.Payment_Add
+      , Form._in_categories = _in_categories input
+      , Form._in_paymentCategories = paymentCategories
+      , Form._in_name = ""
+      , Form._in_cost = ""
+      , Form._in_date = currentDay
+      , Form._in_category = -1
+      , Form._in_frequency = frequency
+      , Form._in_mkPayload = CreatePaymentForm
+      , Form._in_ajax = Ajax.post
       }
 
   hide <- ReflexUtil.flatten (Form._output_hide <$> formOutput)
diff --git a/client/src/View/Payment/Clone.hs b/client/src/View/Payment/Clone.hs
index 2fa27f3..56a33d9 100644
--- a/client/src/View/Payment/Clone.hs
+++ b/client/src/View/Payment/Clone.hs
@@ -1,5 +1,5 @@
 module View.Payment.Clone
-  ( Input(..)
+  ( In(..)
   , view
   ) where
 
@@ -21,35 +21,35 @@ import qualified Util.Ajax              as Ajax
 import qualified Util.Reflex            as ReflexUtil
 import qualified View.Payment.Form      as Form
 
-data Input t = Input
-  { _input_show              :: Event t ()
-  , _input_categories        :: [Category]
-  , _input_paymentCategories :: Dynamic t [PaymentCategory]
-  , _input_payment           :: Dynamic t Payment
-  , _input_category          :: Dynamic t CategoryId
+data In t = In
+  { _in_show              :: Event t ()
+  , _in_categories        :: [Category]
+  , _in_paymentCategories :: Dynamic t [PaymentCategory]
+  , _in_payment           :: Dynamic t Payment
+  , _in_category          :: Dynamic t CategoryId
   }
 
-view :: forall t m. MonadWidget t m => Input t -> Modal.Content t m SavedPayment
+view :: forall t m. MonadWidget t m => In t -> Modal.Content t m SavedPayment
 view input cancel = do
 
   currentDay <- liftIO $ Time.getCurrentTime >>= TimeUtil.timeToDay
 
   formOutput <- R.dyn $ do
-    paymentCategories <- _input_paymentCategories input
-    payment <- _input_payment input
-    category <- _input_category input
-    return . Form.view $ Form.Input
-      { Form._input_cancel = cancel
-      , Form._input_headerLabel = Msg.get Msg.Payment_CloneLong
-      , Form._input_categories = _input_categories input
-      , Form._input_paymentCategories = paymentCategories
-      , Form._input_name = _payment_name payment
-      , Form._input_cost = T.pack . show . _payment_cost $ payment
-      , Form._input_date = currentDay
-      , Form._input_category = category
-      , Form._input_frequency = _payment_frequency payment
-      , Form._input_mkPayload = CreatePaymentForm
-      , Form._input_ajax = Ajax.post
+    paymentCategories <- _in_paymentCategories input
+    payment <- _in_payment input
+    category <- _in_category input
+    return . Form.view $ Form.In
+      { Form._in_cancel = cancel
+      , Form._in_headerLabel = Msg.get Msg.Payment_CloneLong
+      , Form._in_categories = _in_categories input
+      , Form._in_paymentCategories = paymentCategories
+      , Form._in_name = _payment_name payment
+      , Form._in_cost = T.pack . show . _payment_cost $ payment
+      , Form._in_date = currentDay
+      , Form._in_category = category
+      , Form._in_frequency = _payment_frequency payment
+      , Form._in_mkPayload = CreatePaymentForm
+      , Form._in_ajax = Ajax.post
       }
 
   hide <- ReflexUtil.flatten (Form._output_hide <$> formOutput)
diff --git a/client/src/View/Payment/Delete.hs b/client/src/View/Payment/Delete.hs
index dc7e395..471463c 100644
--- a/client/src/View/Payment/Delete.hs
+++ b/client/src/View/Payment/Delete.hs
@@ -1,28 +1,27 @@
 module View.Payment.Delete
-  ( Input(..)
+  ( In(..)
   , view
   ) where
 
-import           Data.Text       (Text)
-import qualified Data.Text       as T
-import           Reflex.Dom      (Dynamic, Event, MonadWidget)
-import qualified Reflex.Dom      as R
-
-import           Common.Model    (Payment (..))
-import qualified Common.Msg      as Msg
-import           Component       (ButtonIn (..), ButtonOut (..))
-import qualified Component       as Component
-import qualified Component.Modal as Modal
-import qualified Component.Modal as Modal
-import qualified Util.Ajax       as Ajax
-import qualified Util.Either     as EitherUtil
-import qualified Util.WaitFor    as WaitFor
-
-data Input t = Input
-  { _input_payment :: Dynamic t Payment
+import           Data.Text        (Text)
+import qualified Data.Text        as T
+import           Reflex.Dom       (Dynamic, Event, MonadWidget)
+import qualified Reflex.Dom       as R
+
+import           Common.Model     (Payment (..))
+import qualified Common.Msg       as Msg
+import qualified Component.Button as Button
+import qualified Component.Modal  as Modal
+import qualified Component.Modal  as Modal
+import qualified Util.Ajax        as Ajax
+import qualified Util.Either      as EitherUtil
+import qualified Util.WaitFor     as WaitFor
+
+data In t = In
+  { _in_payment :: Dynamic t Payment
   }
 
-view :: forall t m. MonadWidget t m => (Input t) -> Modal.Content t m Payment
+view :: forall t m. MonadWidget t m => (In t) -> Modal.Content t m Payment
 view input _ =
   R.divClass "delete" $ do
     R.divClass "deleteHeader" $ R.text $ Msg.get Msg.Payment_DeleteConfirm
@@ -31,20 +30,20 @@ view input _ =
 
       (confirm, cancel) <- R.divClass "buttons" $ do
 
-        cancel <- Component._buttonOut_clic <$> (Component.button $
-          (Component.defaultButtonIn (R.text $ Msg.get Msg.Dialog_Undo))
-            { _buttonIn_class = R.constDyn "undo" })
+        cancel <- Button._out_clic <$> (Button.view $
+          (Button.defaultIn (R.text $ Msg.get Msg.Dialog_Undo))
+            { Button._in_class = R.constDyn "undo" })
 
         rec
-          confirm <- Component._buttonOut_clic <$> (Component.button $
-            (Component.defaultButtonIn (R.text $ Msg.get Msg.Dialog_Confirm))
-              { _buttonIn_class = R.constDyn "confirm"
-              , _buttonIn_submit = True
-              , _buttonIn_waiting = waiting
+          confirm <- Button._out_clic <$> (Button.view $
+            (Button.defaultIn (R.text $ Msg.get Msg.Dialog_Confirm))
+              { Button._in_class = R.constDyn "confirm"
+              , Button._in_submit = True
+              , Button._in_waiting = waiting
               })
 
           let url =
-                R.ffor (_input_payment input) (\id ->
+                R.ffor (_in_payment input) (\id ->
                   T.concat ["/api/payment/", T.pack . show $ _payment_id id]
                 )
 
@@ -56,5 +55,5 @@ view input _ =
 
       return $
         ( R.leftmost [ cancel, () <$ confirm ]
-        , R.tag (R.current $ _input_payment input) confirm
+        , R.tag (R.current $ _in_payment input) confirm
         )
diff --git a/client/src/View/Payment/Edit.hs b/client/src/View/Payment/Edit.hs
index 77841ce..5cb4537 100644
--- a/client/src/View/Payment/Edit.hs
+++ b/client/src/View/Payment/Edit.hs
@@ -1,5 +1,5 @@
 module View.Payment.Edit
-  ( Input(..)
+  ( In(..)
   , view
   ) where
 
@@ -18,33 +18,33 @@ import qualified Util.Ajax         as Ajax
 import qualified Util.Reflex       as ReflexUtil
 import qualified View.Payment.Form as Form
 
-data Input t = Input
-  { _input_show              :: Event t ()
-  , _input_categories        :: [Category]
-  , _input_paymentCategories :: Dynamic t [PaymentCategory]
-  , _input_payment           :: Dynamic t Payment
-  , _input_category          :: Dynamic t CategoryId
+data In t = In
+  { _in_show              :: Event t ()
+  , _in_categories        :: [Category]
+  , _in_paymentCategories :: Dynamic t [PaymentCategory]
+  , _in_payment           :: Dynamic t Payment
+  , _in_category          :: Dynamic t CategoryId
   }
 
-view :: forall t m. MonadWidget t m => Input t -> Modal.Content t m SavedPayment
+view :: forall t m. MonadWidget t m => In t -> Modal.Content t m SavedPayment
 view input cancel = do
 
   formOutput <- R.dyn $ do
-    paymentCategories <- _input_paymentCategories input
-    payment <- _input_payment input
-    category <- _input_category input
-    return . Form.view $ Form.Input
-      { Form._input_cancel = cancel
-      , Form._input_headerLabel = Msg.get Msg.Payment_EditLong
-      , Form._input_categories = _input_categories input
-      , Form._input_paymentCategories = paymentCategories
-      , Form._input_name = _payment_name payment
-      , Form._input_cost = T.pack . show . _payment_cost $ payment
-      , Form._input_date = _payment_date payment
-      , Form._input_category = category
-      , Form._input_frequency = _payment_frequency payment
-      , Form._input_mkPayload = EditPaymentForm (_payment_id payment)
-      , Form._input_ajax = Ajax.put
+    paymentCategories <- _in_paymentCategories input
+    payment <- _in_payment input
+    category <- _in_category input
+    return . Form.view $ Form.In
+      { Form._in_cancel = cancel
+      , Form._in_headerLabel = Msg.get Msg.Payment_EditLong
+      , Form._in_categories = _in_categories input
+      , Form._in_paymentCategories = paymentCategories
+      , Form._in_name = _payment_name payment
+      , Form._in_cost = T.pack . show . _payment_cost $ payment
+      , Form._in_date = _payment_date payment
+      , Form._in_category = category
+      , Form._in_frequency = _payment_frequency payment
+      , Form._in_mkPayload = EditPaymentForm (_payment_id payment)
+      , Form._in_ajax = Ajax.put
       }
 
   hide <- ReflexUtil.flatten (Form._output_hide <$> formOutput)
diff --git a/client/src/View/Payment/Form.hs b/client/src/View/Payment/Form.hs
index 1f068fd..29768aa 100644
--- a/client/src/View/Payment/Form.hs
+++ b/client/src/View/Payment/Form.hs
@@ -1,7 +1,7 @@
 module View.Payment.Form
   ( view
-  , Input(..)
-  , Output(..)
+  , In(..)
+  , Out(..)
   ) where
 
 import           Data.Aeson                (ToJSON)
@@ -25,49 +25,48 @@ import           Common.Model              (Category (..), CategoryId,
                                             SavedPayment (..))
 import qualified Common.Msg                as Msg
 import qualified Common.Validation.Payment as PaymentValidation
-import           Component                 (InputIn (..), InputOut (..),
-                                            ModalFormIn (..), ModalFormOut (..),
-                                            SelectIn (..), SelectOut (..))
-import qualified Component                 as Component
+import qualified Component.Input           as Input
+import qualified Component.ModalForm       as ModalForm
+import qualified Component.Select          as Select
 import qualified Util.Validation           as ValidationUtil
 
-data Input m t a = Input
-  { _input_cancel            :: Event t ()
-  , _input_headerLabel       :: Text
-  , _input_categories        :: [Category]
-  , _input_paymentCategories :: [PaymentCategory]
-  , _input_name              :: Text
-  , _input_cost              :: Text
-  , _input_date              :: Day
-  , _input_category          :: CategoryId
-  , _input_frequency         :: Frequency
-  , _input_mkPayload         :: Text -> Text -> Text -> CategoryId -> Frequency -> a
-  , _input_ajax              :: Text -> Event t a -> m (Event t (Either Text SavedPayment))
+data In m t a = In
+  { _in_cancel            :: Event t ()
+  , _in_headerLabel       :: Text
+  , _in_categories        :: [Category]
+  , _in_paymentCategories :: [PaymentCategory]
+  , _in_name              :: Text
+  , _in_cost              :: Text
+  , _in_date              :: Day
+  , _in_category          :: CategoryId
+  , _in_frequency         :: Frequency
+  , _in_mkPayload         :: Text -> Text -> Text -> CategoryId -> Frequency -> a
+  , _in_ajax              :: Text -> Event t a -> m (Event t (Either Text SavedPayment))
   }
 
-data Output t = Output
+data Out t = Out
   { _output_hide       :: Event t ()
   , _output_addPayment :: Event t SavedPayment
   }
 
-view :: forall t m a. (MonadWidget t m, ToJSON a) => Input m t a -> m (Output t)
+view :: forall t m a. (MonadWidget t m, ToJSON a) => In m t a -> m (Out t)
 view input = do
   rec
     let reset = R.leftmost
-          [ "" <$ _modalFormOut_cancel modalForm
-          , "" <$ _modalFormOut_validate modalForm
-          , "" <$ _input_cancel input
+          [ "" <$ ModalForm._out_cancel modalForm
+          , "" <$ ModalForm._out_validate modalForm
+          , "" <$ _in_cancel input
           ]
 
-    modalForm <- Component.modalForm $ ModalFormIn
-      { _modalFormIn_headerLabel = _input_headerLabel input
-      , _modalFormIn_ajax        = _input_ajax input "/api/payment"
-      , _modalFormIn_form        = form reset (_modalFormOut_confirm modalForm)
+    modalForm <- ModalForm.view $ ModalForm.In
+      { ModalForm._in_headerLabel = _in_headerLabel input
+      , ModalForm._in_ajax        = _in_ajax input "/api/payment"
+      , ModalForm._in_form        = form reset (ModalForm._out_confirm modalForm)
       }
 
-  return $ Output
-    { _output_hide = _modalFormOut_hide modalForm
-    , _output_addPayment = _modalFormOut_validate modalForm
+  return $ Out
+    { _output_hide = ModalForm._out_hide modalForm
+    , _output_addPayment = ModalForm._out_validate modalForm
     }
 
   where
@@ -76,63 +75,63 @@ view input = do
       -> Event t ()
       -> m (Dynamic t (Validation (NonEmpty Text) a))
     form reset confirm = do
-      name <- Component.input
-        (Component.defaultInputIn
-          { _inputIn_label = Msg.get Msg.Payment_Name
-          , _inputIn_initialValue = _input_name input
-          , _inputIn_validation = PaymentValidation.name
+      name <- Input.view
+        (Input.defaultIn
+          { Input._in_label = Msg.get Msg.Payment_Name
+          , Input._in_initialValue = _in_name input
+          , Input._in_validation = PaymentValidation.name
           })
-        (_input_name input <$ reset)
+        (_in_name input <$ reset)
         confirm
 
-      cost <- _inputOut_raw <$> (Component.input
-        (Component.defaultInputIn
-          { _inputIn_label = Msg.get Msg.Payment_Cost
-          , _inputIn_initialValue = _input_cost input
-          , _inputIn_validation = PaymentValidation.cost
+      cost <- Input._out_raw <$> (Input.view
+        (Input.defaultIn
+          { Input._in_label = Msg.get Msg.Payment_Cost
+          , Input._in_initialValue = _in_cost input
+          , Input._in_validation = PaymentValidation.cost
           })
-        (_input_cost input <$ reset)
+        (_in_cost input <$ reset)
         confirm)
 
-      let initialDate = T.pack . Calendar.showGregorian . _input_date $ input
+      let initialDate = T.pack . Calendar.showGregorian . _in_date $ input
 
-      date <- _inputOut_raw <$> (Component.input
-        (Component.defaultInputIn
-          { _inputIn_label = Msg.get Msg.Payment_Date
-          , _inputIn_initialValue = initialDate
-          , _inputIn_inputType = "date"
-          , _inputIn_hasResetButton = False
-          , _inputIn_validation = PaymentValidation.date
+      date <- Input._out_raw <$> (Input.view
+        (Input.defaultIn
+          { Input._in_label = Msg.get Msg.Payment_Date
+          , Input._in_initialValue = initialDate
+          , Input._in_inputType = "date"
+          , Input._in_hasResetButton = False
+          , Input._in_validation = PaymentValidation.date
           })
         (initialDate <$ reset)
         confirm)
 
       let setCategory =
             R.fmapMaybe id . R.updated $
-              R.ffor (_inputOut_raw name) $ \name ->
-                findCategory name (_input_paymentCategories input)
-
-      category <- _selectOut_value <$> (Component.select $ SelectIn
-        { _selectIn_label = Msg.get Msg.Payment_Category
-        , _selectIn_initialValue = _input_category input
-        , _selectIn_value = setCategory
-        , _selectIn_values = R.constDyn categories
-        , _selectIn_reset = _input_category input <$ reset
-        , _selectIn_isValid = PaymentValidation.category (map _category_id $ _input_categories input)
-        , _selectIn_validate = confirm
+              R.ffor (Input._out_raw name) $ \name ->
+                findCategory name (_in_paymentCategories input)
+
+      category <- Select._out_value <$> (Select.view $ Select.In
+        { Select._in_label = Msg.get Msg.Payment_Category
+        , Select._in_initialValue = _in_category input
+        , Select._in_value = setCategory
+        , Select._in_values = R.constDyn categories
+        , Select._in_reset = _in_category input <$ reset
+        , Select._in_isValid = PaymentValidation.category (map _category_id $ _in_categories input)
+        , Select._in_validate = confirm
         })
 
       return $ do
-        n <- _inputOut_value name
+        n <- Input._out_value name
         c <- cost
         d <- date
         cat <- category
-        return ((_input_mkPayload input)
+        return ((_in_mkPayload input)
           <$> ValidationUtil.nelError n
           <*> V.Success c
           <*> V.Success d
           <*> ValidationUtil.nelError cat
-          <*> V.Success (_input_frequency input))
+          <*> V.Success (_in_frequency input))
 
     frequencies =
       M.fromList
@@ -140,7 +139,7 @@ view input = do
         , (Monthly, Msg.get Msg.Payment_MonthlyMale)
         ]
 
-    categories = M.fromList . flip map (_input_categories input) $ \c ->
+    categories = M.fromList . flip map (_in_categories input) $ \c ->
       (_category_id c, _category_name c)
 
 findCategory :: Text -> [PaymentCategory] -> Maybe CategoryId
diff --git a/client/src/View/Payment/Header.hs b/client/src/View/Payment/Header.hs
index 9ad90a9..00987a3 100644
--- a/client/src/View/Payment/Header.hs
+++ b/client/src/View/Payment/Header.hs
@@ -1,7 +1,7 @@
 module View.Payment.Header
-  ( widget
-  , HeaderIn(..)
-  , HeaderOut(..)
+  ( view
+  , In(..)
+  , Out(..)
   ) where
 
 import           Control.Monad          (forM_)
@@ -27,31 +27,30 @@ import qualified Common.Model           as CM
 import qualified Common.Msg             as Msg
 import qualified Common.View.Format     as Format
 
-import           Component              (ButtonIn (..), ButtonOut (..),
-                                         InputIn (..), InputOut (..),
-                                         SelectIn (..), SelectOut (..))
-import qualified Component              as Component
+import qualified Component.Button       as Button
+import qualified Component.Input        as Input
 import qualified Component.Modal        as Modal
+import qualified Component.Select       as Select
 import qualified Util.List              as L
 import qualified View.Payment.Add       as Add
 import           View.Payment.Init      (Init (..))
 
-data HeaderIn t = HeaderIn
-  { _headerIn_init              :: Init
-  , _headerIn_currency          :: Currency
-  , _headerIn_payments          :: Dynamic t [Payment]
-  , _headerIn_searchPayments    :: Dynamic t [Payment]
-  , _headerIn_paymentCategories :: Dynamic t [PaymentCategory]
+data In t = In
+  { _in_init              :: Init
+  , _in_currency          :: Currency
+  , _in_payments          :: Dynamic t [Payment]
+  , _in_searchPayments    :: Dynamic t [Payment]
+  , _in_paymentCategories :: Dynamic t [PaymentCategory]
   }
 
-data HeaderOut t = HeaderOut
-  { _headerOut_searchName      :: Dynamic t Text
-  , _headerOut_searchFrequency :: Dynamic t Frequency
-  , _headerOut_addPayment      :: Event t SavedPayment
+data Out t = Out
+  { _out_searchName      :: Dynamic t Text
+  , _out_searchFrequency :: Dynamic t Frequency
+  , _out_addPayment      :: Event t SavedPayment
   }
 
-widget :: forall t m. MonadWidget t m => HeaderIn t -> m (HeaderOut t)
-widget headerIn =
+view :: forall t m. MonadWidget t m => In t -> m (Out t)
+view input =
   R.divClass "header" $ do
     rec
       addPayment <-
@@ -66,22 +65,22 @@ widget headerIn =
       let resetSearchName = fmap (const ()) $ addPayment
       (searchName, searchFrequency)  <- searchLine resetSearchName
 
-      infos (_headerIn_searchPayments headerIn) users currency
+      infos (_in_searchPayments input) users currency
 
-    return $ HeaderOut
-      { _headerOut_searchName = searchName
-      , _headerOut_searchFrequency = searchFrequency
-      , _headerOut_addPayment = addPayment
+    return $ Out
+      { _out_searchName = searchName
+      , _out_searchFrequency = searchFrequency
+      , _out_addPayment = addPayment
       }
   where
-    init = _headerIn_init headerIn
+    init = _in_init input
     incomes = _init_incomes init
     initPayments = _init_payments init
-    payments = _headerIn_payments headerIn
+    payments = _in_payments input
     users = _init_users init
     categories = _init_categories init
-    currency = _headerIn_currency headerIn
-    paymentCategories = _headerIn_paymentCategories headerIn
+    currency = _in_currency input
+    paymentCategories = _in_paymentCategories input
 
 payerAndAdd
   :: forall t m. MonadWidget t m
@@ -113,18 +112,18 @@ payerAndAdd incomes payments users categories paymentCategories currency frequen
             R.dynText . R.ffor exceedingPayer $ \ep ->
               Format.price currency $ _exceedingPayer_amount ep
 
-    addPayment <- _buttonOut_clic <$>
-      (Component.button $
-        (Component.defaultButtonIn (R.text $ Msg.get Msg.Payment_Add))
-          { _buttonIn_class = R.constDyn "addPayment"
+    addPayment <- Button._out_clic <$>
+      (Button.view $
+        (Button.defaultIn (R.text $ Msg.get Msg.Payment_Add))
+          { Button._in_class = R.constDyn "addPayment"
           })
 
-    Modal.view $ Modal.Input
-      { Modal._input_show    = addPayment
-      , Modal._input_content = Add.view $ Add.Input
-          { Add._input_categories = categories
-          , Add._input_paymentCategories = paymentCategories
-          , Add._input_frequency = frequency
+    Modal.view $ Modal.In
+      { Modal._in_show    = addPayment
+      , Modal._in_content = Add.view $ Add.In
+          { Add._in_categories = categories
+          , Add._in_paymentCategories = paymentCategories
+          , Add._in_frequency = frequency
           }
       }
 
@@ -134,8 +133,8 @@ searchLine
   -> m (Dynamic t Text, Dynamic t Frequency)
 searchLine reset = do
   R.divClass "searchLine" $ do
-    searchName <- _inputOut_raw <$> (Component.input
-      ( Component.defaultInputIn { _inputIn_label = Msg.get Msg.Search_Name })
+    searchName <- Input._out_raw <$> (Input.view
+      ( Input.defaultIn { Input._in_label = Msg.get Msg.Search_Name })
       ("" <$ reset)
       R.never)
 
@@ -144,15 +143,14 @@ searchLine reset = do
           , (Monthly, Msg.get Msg.Payment_MonthlyMale)
           ]
 
-    searchFrequency <- _selectOut_raw <$> (Component.select $
-      SelectIn
-        { _selectIn_label        = ""
-        , _selectIn_initialValue = Punctual
-        , _selectIn_value        = R.never
-        , _selectIn_values       = R.constDyn frequencies
-        , _selectIn_reset        = R.never
-        , _selectIn_isValid      = V.Success
-        , _selectIn_validate     = R.never
+    searchFrequency <- Select._out_raw <$> (Select.view $ Select.In
+        { Select._in_label        = ""
+        , Select._in_initialValue = Punctual
+        , Select._in_value        = R.never
+        , Select._in_values       = R.constDyn frequencies
+        , Select._in_reset        = R.never
+        , Select._in_isValid      = V.Success
+        , Select._in_validate     = R.never
         })
 
     return (searchName, searchFrequency)
diff --git a/client/src/View/Payment/Pages.hs b/client/src/View/Payment/Pages.hs
index 5681935..9a1902c 100644
--- a/client/src/View/Payment/Pages.hs
+++ b/client/src/View/Payment/Pages.hs
@@ -1,41 +1,40 @@
 module View.Payment.Pages
-  ( widget
-  , PagesIn(..)
-  , PagesOut(..)
+  ( view
+  , In(..)
+  , Out(..)
   ) where
 
-import qualified Data.Text   as T
-import           Reflex.Dom  (Dynamic, Event, MonadWidget)
-import qualified Reflex.Dom  as R
+import qualified Data.Text        as T
+import           Reflex.Dom       (Dynamic, Event, MonadWidget)
+import qualified Reflex.Dom       as R
 
-import           Component   (ButtonIn (..), ButtonOut (..))
-import qualified Component   as Component
+import qualified Component.Button as Button
 
-import qualified Util.Reflex as ReflexUtil
-import qualified View.Icon   as Icon
+import qualified Util.Reflex      as ReflexUtil
+import qualified View.Icon        as Icon
 
-data PagesIn t = PagesIn
-  { _pagesIn_total   :: Dynamic t Int
-  , _pagesIn_perPage :: Int
-  , _pagesIn_reset   :: Event t ()
+data In t = In
+  { _in_total   :: Dynamic t Int
+  , _in_perPage :: Int
+  , _in_reset   :: Event t ()
   }
 
-data PagesOut t = PagesOut
-  { _pagesOut_currentPage :: Dynamic t Int
+data Out t = Out
+  { _out_currentPage :: Dynamic t Int
   }
 
-widget :: forall t m. MonadWidget t m => PagesIn t -> m (PagesOut t)
-widget pagesIn = do
+view :: forall t m. MonadWidget t m => In t -> m (Out t)
+view input = do
   currentPage <- ReflexUtil.divVisibleIf ((> 0) <$> total) $ pageButtons total perPage reset
 
-  return $ PagesOut
-    { _pagesOut_currentPage = currentPage
+  return $ Out
+    { _out_currentPage = currentPage
     }
 
   where
-    total = _pagesIn_total pagesIn
-    perPage = _pagesIn_perPage pagesIn
-    reset = _pagesIn_reset pagesIn
+    total = _in_total input
+    perPage = _in_perPage input
+    reset = _in_reset input
 
 pageButtons :: forall t m. MonadWidget t m => Dynamic t Int -> Int -> Event t () -> m (Dynamic t Int)
 pageButtons total perPage reset = do
@@ -75,14 +74,14 @@ range currentPage maxPage = [start..end]
 
 pageButton :: forall t m. MonadWidget t m => Dynamic t (Maybe Int) -> Dynamic t Int -> m () -> m (Event t Int)
 pageButton currentPage page content = do
-  clic <- _buttonOut_clic <$> (Component.button $ ButtonIn
-    { _buttonIn_class   = do
+  clic <- Button._out_clic <$> (Button.view $ Button.In
+    { Button._in_class   = do
         cp <- currentPage
         p <- page
         if cp == Just p then "page current" else "page"
-    , _buttonIn_content = content
-    , _buttonIn_waiting = R.never
-    , _buttonIn_tabIndex = Nothing
-    , _buttonIn_submit = False
+    , Button._in_content = content
+    , Button._in_waiting = R.never
+    , Button._in_tabIndex = Nothing
+    , Button._in_submit = False
     })
   return . fmap fst $ R.attach (R.current page) clic
diff --git a/client/src/View/Payment/Payment.hs b/client/src/View/Payment/Payment.hs
index 5f0d03c..f86acd8 100644
--- a/client/src/View/Payment/Payment.hs
+++ b/client/src/View/Payment/Payment.hs
@@ -1,7 +1,7 @@
 module View.Payment.Payment
   ( init
   , view
-  , PaymentIn(..)
+  , In(..)
   ) where
 
 import           Data.Text           (Text)
@@ -20,12 +20,9 @@ import qualified Common.Util.Text    as T
 import           Loadable            (Loadable (..))
 import qualified Loadable
 import qualified Util.Ajax           as AjaxUtil
-import           View.Payment.Header (HeaderIn (..), HeaderOut (..))
 import qualified View.Payment.Header as Header
 import           View.Payment.Init   (Init (..))
-import           View.Payment.Pages  (PagesIn (..), PagesOut (..))
 import qualified View.Payment.Pages  as Pages
-import           View.Payment.Table  (TableIn (..), TableOut (..))
 import qualified View.Payment.Table  as Table
 
 init :: forall t m. MonadWidget t m => m (Dynamic t (Loadable Init))
@@ -44,21 +41,21 @@ init = do
     return $ Init <$> us <*> ps <*> is <*> cs <*> pcs
 
 
-data PaymentIn t = PaymentIn
-  { _paymentIn_currentUser :: UserId
-  , _paymentIn_currency    :: Currency
-  , _paymentIn_init        :: Dynamic t (Loadable Init)
+data In t = In
+  { _in_currentUser :: UserId
+  , _in_currency    :: Currency
+  , _in_init        :: Dynamic t (Loadable Init)
   }
 
-view :: forall t m. MonadWidget t m => PaymentIn t -> m ()
-view paymentIn = do
-  R.dyn . R.ffor (_paymentIn_init paymentIn) . Loadable.view $ \init ->
+view :: forall t m. MonadWidget t m => In t -> m ()
+view input = do
+  R.dyn . R.ffor (_in_init input) . Loadable.view $ \init ->
 
     R.elClass "main" "payment" $ do
       rec
         let addPayment = R.leftmost
-              [ _headerOut_addPayment header
-              , _tableOut_addPayment table
+              [ Header._out_addPayment header
+              , Table._out_addPayment table
               ]
 
             paymentsPerPage = 7
@@ -66,46 +63,46 @@ view paymentIn = do
         payments <- reducePayments
           (_init_payments init)
           (_savedPayment_payment <$> addPayment)
-          (_savedPayment_payment <$> _tableOut_editPayment table)
-          (_tableOut_deletePayment table)
+          (_savedPayment_payment <$> Table._out_editPayment table)
+          (Table._out_deletePayment table)
 
         paymentCategories <- reducePaymentCategories
           (_init_paymentCategories init)
           payments
           (_savedPayment_paymentCategory <$> addPayment)
-          (_savedPayment_paymentCategory <$> _tableOut_editPayment table)
-          (_tableOut_deletePayment table)
+          (_savedPayment_paymentCategory <$> Table._out_editPayment table)
+          (Table._out_deletePayment table)
 
         (searchNameEvent, searchName) <-
-          debounceSearchName (_headerOut_searchName header)
+          debounceSearchName (Header._out_searchName header)
 
         let searchPayments =
-              getSearchPayments searchName (_headerOut_searchFrequency header) payments
-
-        header <- Header.widget $ HeaderIn
-          { _headerIn_init = init
-          , _headerIn_currency = _paymentIn_currency paymentIn
-          , _headerIn_payments = payments
-          , _headerIn_searchPayments = searchPayments
-          , _headerIn_paymentCategories = paymentCategories
+              getSearchPayments searchName (Header._out_searchFrequency header) payments
+
+        header <- Header.view $ Header.In
+          { Header._in_init = init
+          , Header._in_currency = _in_currency input
+          , Header._in_payments = payments
+          , Header._in_searchPayments = searchPayments
+          , Header._in_paymentCategories = paymentCategories
           }
 
-        table <- Table.widget $ TableIn
-          { _tableIn_init = init
-          , _tableIn_currency = _paymentIn_currency paymentIn
-          , _tableIn_currentUser = _paymentIn_currentUser paymentIn
-          , _tableIn_currentPage = _pagesOut_currentPage pages
-          , _tableIn_payments = searchPayments
-          , _tableIn_perPage = paymentsPerPage
-          , _tableIn_paymentCategories = paymentCategories
+        table <- Table.view $ Table.In
+          { Table._in_init = init
+          , Table._in_currency = _in_currency input
+          , Table._in_currentUser = _in_currentUser input
+          , Table._in_currentPage = Pages._out_currentPage pages
+          , Table._in_payments = searchPayments
+          , Table._in_perPage = paymentsPerPage
+          , Table._in_paymentCategories = paymentCategories
           }
 
-        pages <- Pages.widget $ PagesIn
-          { _pagesIn_total = length <$> searchPayments
-          , _pagesIn_perPage = paymentsPerPage
-          , _pagesIn_reset = R.leftmost $
+        pages <- Pages.view $ Pages.In
+          { Pages._in_total = length <$> searchPayments
+          , Pages._in_perPage = paymentsPerPage
+          , Pages._in_reset = R.leftmost $
               [ () <$ searchNameEvent
-              , () <$ _headerOut_addPayment header
+              , () <$ Header._out_addPayment header
               ]
           }
 
diff --git a/client/src/View/Payment/Table.hs b/client/src/View/Payment/Table.hs
index 3a0a4bf..0793836 100644
--- a/client/src/View/Payment/Table.hs
+++ b/client/src/View/Payment/Table.hs
@@ -1,7 +1,7 @@
 module View.Payment.Table
-  ( widget
-  , TableIn(..)
-  , TableOut(..)
+  ( view
+  , In(..)
+  , Out(..)
   ) where
 
 import qualified Data.List           as L
@@ -20,8 +20,7 @@ import           Common.Model        (Category (..), Currency,
 import qualified Common.Model        as CM
 import qualified Common.Msg          as Msg
 import qualified Common.View.Format  as Format
-import           Component           (ButtonIn (..), ButtonOut (..))
-import qualified Component           as Component
+import qualified Component.Button    as Button
 import qualified Component.Modal     as Modal
 import qualified View.Payment.Clone  as Clone
 import qualified View.Payment.Delete as Delete
@@ -31,25 +30,25 @@ import           View.Payment.Init   (Init (..))
 import qualified Util.Reflex         as ReflexUtil
 import qualified View.Icon           as Icon
 
-data TableIn t = TableIn
-  { _tableIn_init              :: Init
-  , _tableIn_currency          :: Currency
-  , _tableIn_currentUser       :: UserId
-  , _tableIn_currentPage       :: Dynamic t Int
-  , _tableIn_payments          :: Dynamic t [Payment]
-  , _tableIn_perPage           :: Int
-  , _tableIn_paymentCategories :: Dynamic t [PaymentCategory]
-  , _tableIn_categories        :: [Category]
+data In t = In
+  { _in_init              :: Init
+  , _in_currency          :: Currency
+  , _in_currentUser       :: UserId
+  , _in_currentPage       :: Dynamic t Int
+  , _in_payments          :: Dynamic t [Payment]
+  , _in_perPage           :: Int
+  , _in_paymentCategories :: Dynamic t [PaymentCategory]
+  , _in_categories        :: [Category]
   }
 
-data TableOut t = TableOut
-  { _tableOut_addPayment    :: Event t SavedPayment
-  , _tableOut_editPayment   :: Event t SavedPayment
-  , _tableOut_deletePayment :: Event t Payment
+data Out t = Out
+  { _out_addPayment    :: Event t SavedPayment
+  , _out_editPayment   :: Event t SavedPayment
+  , _out_deletePayment :: Event t Payment
   }
 
-widget :: forall t m. MonadWidget t m => TableIn t -> m (TableOut t)
-widget tableIn = do
+view :: forall t m. MonadWidget t m => In t -> m (Out t)
+view input = do
   R.divClass "table" $ do
 
     (addPayment, editPayment, deletePayment) <- R.divClass "lines" $ do
@@ -75,20 +74,20 @@ widget tableIn = do
     ReflexUtil.divClassVisibleIf (null <$> payments) "emptyTableMsg" $
       R.text $ Msg.get Msg.Payment_Empty
 
-    return $ TableOut
-      { _tableOut_addPayment = addPayment
-      , _tableOut_editPayment = editPayment
-      , _tableOut_deletePayment = deletePayment
+    return $ Out
+      { _out_addPayment = addPayment
+      , _out_editPayment = editPayment
+      , _out_deletePayment = deletePayment
       }
 
   where
-    init = _tableIn_init tableIn
-    currency = _tableIn_currency tableIn
-    currentUser = _tableIn_currentUser tableIn
-    currentPage = _tableIn_currentPage tableIn
-    payments = _tableIn_payments tableIn
-    paymentRange = getPaymentRange (_tableIn_perPage tableIn) <$> payments <*> currentPage
-    paymentCategories = _tableIn_paymentCategories tableIn
+    init = _in_init input
+    currency = _in_currency input
+    currentUser = _in_currentUser input
+    currentPage = _in_currentPage input
+    payments = _in_payments input
+    paymentRange = getPaymentRange (_in_perPage input) <$> payments <*> currentPage
+    paymentCategories = _in_paymentCategories input
 
 getPaymentRange :: Int -> [Payment] -> Int -> [Payment]
 getPaymentRange perPage payments currentPage =
@@ -150,19 +149,19 @@ paymentRow init currency currentUser paymentCategories payment =
 
     clonePayment <-
       R.divClass "cell button" $
-        _buttonOut_clic <$> (Component.button $
-          Component.defaultButtonIn Icon.clone)
+        Button._out_clic <$> (Button.view $
+          Button.defaultIn Icon.clone)
 
     paymentCloned <-
-      Modal.view $ Modal.Input
-        { Modal._input_show    = clonePayment
-        , Modal._input_content =
-            Clone.view $ Clone.Input
-              { Clone._input_show = clonePayment
-              , Clone._input_categories = _init_categories init
-              , Clone._input_paymentCategories = paymentCategories
-              , Clone._input_payment = payment
-              , Clone._input_category = categoryId
+      Modal.view $ Modal.In
+        { Modal._in_show    = clonePayment
+        , Modal._in_content =
+            Clone.view $ Clone.In
+              { Clone._in_show = clonePayment
+              , Clone._in_categories = _init_categories init
+              , Clone._in_paymentCategories = paymentCategories
+              , Clone._in_payment = payment
+              , Clone._in_category = categoryId
               }
         }
 
@@ -174,36 +173,36 @@ paymentRow init currency currentUser paymentCategories payment =
     editPayment <-
       R.divClass "cell button" $
         ReflexUtil.divVisibleIf isFromCurrentUser $
-          _buttonOut_clic <$> (Component.button $
-            Component.defaultButtonIn Icon.edit)
+          Button._out_clic <$> (Button.view $
+            Button.defaultIn Icon.edit)
 
     paymentEdited <-
-      Modal.view $ Modal.Input
-        { Modal._input_show    = editPayment
-        , Modal._input_content =
-            Edit.view $ Edit.Input
-              { Edit._input_show = editPayment
-              , Edit._input_categories = _init_categories init
-              , Edit._input_paymentCategories = paymentCategories
-              , Edit._input_payment = payment
-              , Edit._input_category = categoryId
+      Modal.view $ Modal.In
+        { Modal._in_show    = editPayment
+        , Modal._in_content =
+            Edit.view $ Edit.In
+              { Edit._in_show = editPayment
+              , Edit._in_categories = _init_categories init
+              , Edit._in_paymentCategories = paymentCategories
+              , Edit._in_payment = payment
+              , Edit._in_category = categoryId
               }
         }
 
     deletePayment <-
       R.divClass "cell button" $
         ReflexUtil.divVisibleIf isFromCurrentUser $
-          _buttonOut_clic <$> (Component.button $
-            (Component.defaultButtonIn Icon.delete)
-              { _buttonIn_class = R.constDyn "deletePayment"
+          Button._out_clic <$> (Button.view $
+            (Button.defaultIn Icon.delete)
+              { Button._in_class = R.constDyn "deletePayment"
               })
 
     paymentDeleted <-
-      Modal.view $ Modal.Input
-        { Modal._input_show    = deletePayment
-        , Modal._input_content =
-            Delete.view $ Delete.Input
-              { Delete._input_payment = payment
+      Modal.view $ Modal.In
+        { Modal._in_show    = deletePayment
+        , Modal._in_content =
+            Delete.view $ Delete.In
+              { Delete._in_payment = payment
               }
         }