Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Formless component template file #53

Merged
merged 9 commits into from Aug 19, 2019

Further cleanup template

  • Loading branch information...
JordanMartinez committed Aug 13, 2019
commit a3f3e32c32693c3e6badf67d23798ad385666562
@@ -8,34 +8,42 @@ import Data.Generic.Rep.Show (genericShow)
import Data.Lens (preview)
import Data.Maybe (Maybe)
import Data.Newtype (class Newtype)
import Data.Symbol (SProxy(..))
import Data.String.CodeUnits (length)
import Formless (FormFieldResult, Validation, _Error, hoistFnE_)
import Data.Symbol (SProxy(..))
import Formless (class Initial, FormFieldResult, Validation, _Error, hoistFnE_)

-- Data type for one of our fields

newtype Name = Name String
derive instance newtypeName :: Newtype Name _
derive newtype instance showName :: Show Name

type NAME_FIELD f r = (name :: f FieldError String String | r)
-- input output
type NAME_FIELD f r = ( name :: f FieldError String Name | r)

-- The value following 'SProxy' must be the same as the
-- label in the above row kind, so that we can use `_name`
-- to refer to same label in a record or Variant
_name :: SProxy "name"
_name = SProxy

-- Specifies the initial value that the field will have when it is initialized.
instance initialName :: Initial Name where
initial = Name "Nobody"

-- Error type for one of our fields
data FieldError
= TooShort Int

derive instance genericFieldError :: Generic FieldError _
instance showFieldError :: Show FieldError where
show = genericShow
show x = genericShow x

-- | Function for validating one of our field's data
minLength :: form m. Monad m => Int -> Validation form m FieldError String String
minLength :: form m. Monad m => Int -> Validation form m FieldError String Name
minLength n = hoistFnE_ $ \str ->
let n' = length str
in if n' < n then Left (TooShort n) else Right str
in if n' < n then Left (TooShort n) else Right (Name str)

-- | This could be a type class, but we'll just use a function instead.
toErrorText :: FieldError -> String
@@ -7,7 +7,6 @@ import Data.Maybe (Maybe(..))
import Data.Newtype (class Newtype)
import Effect.Aff (Aff)
import Formless as F
import Halogen as H
import Halogen.HTML as HH
import Halogen.HTML.Events as HE
import Halogen.HTML.Properties as HP
@@ -27,7 +26,7 @@ derive instance newtypeForm' :: Newtype (Form r f) _
-- Form component types

type Input = Unit
type AddedState = ()
type AddedState = ( additionalState :: Maybe Int )
data Action
= DoStuff
| Initialize
@@ -57,10 +56,14 @@ component = F.component mkInput $ F.defaultSpec
where
mkInput :: Input -> F.Input Form AddedState Aff
mkInput _ =
-- the two values here are for Formless
{ validators: Form
{ name: minLength 7
}
, initialInputs: Nothing
, initialInputs: Nothing -- when Nothing, will use `Initial` type class

-- everything else below comes from our `AddedState` rows:
, additionalState: Just 5
}

render :: F.PublicState Form AddedState -> F.ComponentHTML Form Action ChildSlots Aff
@@ -71,13 +74,14 @@ component = F.component mkInput $ F.defaultSpec
, HH.p_ [ HH.text $ "Being Submitted: " <> show st.submitting ]

This comment has been minimized.

Copy link
@JordanMartinez

JordanMartinez Aug 18, 2019

Author

Indicates whether the 'submit' button has been clicked and the form's content is still being validated one last time before submission is accepted.

, HH.p_ [ HH.text $ "Number of Errors: " <> show st.errors ]

This comment has been minimized.

Copy link
@JordanMartinez

JordanMartinez Aug 18, 2019

Author

Indicates the number of errors due to validation failing that need to be fixed before submission is accepted

, HH.p_ [ HH.text $ "Number of Submit attempts: " <> show st.submitAttempts ]

This comment has been minimized.

Copy link
@JordanMartinez

JordanMartinez Aug 18, 2019

Author

Indicates the number of times user has attempted to submit the form

-- not sure how to use this value: `st.form`
, HH.p_ [ HH.text $ "Additional state was: " <> show st.additionalState ]

This comment has been minimized.

Copy link
@JordanMartinez

JordanMartinez Aug 18, 2019

Author

This is how we refer to the additional labels we added to the form's state in AddedState.

This comment has been minimized.

Copy link
@thomashoneyman

thomashoneyman Aug 19, 2019

Owner

We can also refer to any additional labels we used to extend the form's state; in this case, that means any field from our AddedState type.


, HH.div_
[ HH.text "Label" ]
, HH.input
[ HP.type_ InputText
, HP.placeholder "Michael"
, HP.value (F.getInput _name st.form)
, HP.value (F.getInput _name st.form) -- access one value in form
, HE.onValueInput (Just <<< F.setValidate _name)

This comment has been minimized.

Copy link
@thomashoneyman

thomashoneyman Aug 17, 2019

Owner

Perhaps a comment here, too:

Suggested change
, HE.onValueInput (Just <<< F.setValidate _name)
, HE.onValueInput (Just <<< F.setValidate _name) -- set the value of _name, then validate it
]
, HH.button
@@ -92,8 +96,16 @@ component = F.component mkInput $ F.defaultSpec
-> F.HalogenM Form AddedState Action ChildSlots Message MonadType Unit
This conversation was marked as resolved by thomashoneyman

This comment has been minimized.

Copy link
@thomashoneyman

thomashoneyman Aug 17, 2019

Owner

Mind dropping these down for indentation?

  handleEvent 
    :: F.Event Form AddedState
    -> F.HalogenM Form AddedState Action ChildSlots Message MonadType Unit
handleEvent = case _ of
F.Submitted formContent -> do

This comment has been minimized.

Copy link
@JordanMartinez

JordanMartinez Aug 18, 2019

Author

Indicates that the form has been successfully submitted.

let sendFormDataToParent = H.raise $ F.unwrapOutputFields formContent
-- but we don't call it in case you want a different message type
-- This is how to get the output values of the form.
let formFields = F.unwrapOutputFields formContent

-- We won't do this here, but this is how most will handle a form
-- submission: raise it as an event to their parent.
-- H.raise formFiels
This conversation was marked as resolved by thomashoneyman

This comment has been minimized.

Copy link
@thomashoneyman

thomashoneyman Aug 17, 2019

Owner

formFields*


-- Alternatively, one could do something custom with the output values.

-- This line exists so the code compiles.
pure unit
F.Changed formState -> do

This comment has been minimized.

Copy link
@JordanMartinez

JordanMartinez Aug 18, 2019

Author

Indicates that the form's content has been changed. This event is triggered anytime a field is changed, whether it passes validation or not.

void $ pure formState
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.