Created
May 23, 2022 11:17
-
-
Save deemp/3f374a0bf52c8d69a5e1cb5ceb63d5f1 to your computer and use it in GitHub Desktop.
An update of a guide part to reflect the breaking change https://github.com/purescript-contrib/purescript-affjax/blob/main/CHANGELOG.md#v1300---2022-04-28
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module Main where | |
| import Prelude | |
| import Affjax as AX | |
| import Affjax.ResponseFormat as AXRF | |
| import Affjax.Web as AW | |
| import Data.Either (hush) | |
| import Data.Maybe (Maybe(..)) | |
| import Effect (Effect) | |
| import Effect.Aff.Class (class MonadAff) | |
| import Halogen as H | |
| import Halogen.Aff (awaitBody, runHalogenAff) | |
| import Halogen.HTML as HH | |
| import Halogen.HTML.Events as HE | |
| import Halogen.HTML.Properties as HP | |
| import Halogen.VDom.Driver (runUI) | |
| import Web.Event.Event (Event) | |
| import Web.Event.Event as Event | |
| main :: Effect Unit | |
| main = runHalogenAff do | |
| body <- awaitBody | |
| runUI component unit body | |
| type State = | |
| { loading :: Boolean | |
| , username :: String | |
| , result :: Maybe String | |
| } | |
| data Action | |
| = SetUsername String | |
| | MakeRequest Event | |
| component :: forall query input output m. MonadAff m => H.Component query input output m | |
| component = | |
| H.mkComponent | |
| { initialState | |
| , render | |
| , eval: H.mkEval $ H.defaultEval { handleAction = handleAction } | |
| } | |
| initialState :: forall input. input -> State | |
| initialState _ = { loading: false, username: "", result: Nothing } | |
| render :: forall m. State -> H.ComponentHTML Action () m | |
| render st = | |
| HH.form | |
| [ HE.onSubmit \ev -> MakeRequest ev ] | |
| [ HH.h1_ [ HH.text "Look up GitHub user" ] | |
| , HH.label_ | |
| [ HH.div_ [ HH.text "Enter username:" ] | |
| , HH.input | |
| [ HP.value st.username | |
| , HE.onValueInput \str -> SetUsername str | |
| ] | |
| ] | |
| , HH.button | |
| [ HP.disabled st.loading | |
| , HP.type_ HP.ButtonSubmit | |
| ] | |
| [ HH.text "Fetch info" ] | |
| , HH.p_ | |
| [ HH.text $ if st.loading then "Working..." else "" ] | |
| , HH.div_ | |
| case st.result of | |
| Nothing -> [] | |
| Just res -> | |
| [ HH.h2_ | |
| [ HH.text "Response:" ] | |
| , HH.pre_ | |
| [ HH.code_ [ HH.text res ] ] | |
| ] | |
| ] | |
| handleAction :: forall output m. MonadAff m => Action -> H.HalogenM State Action () output m Unit | |
| handleAction = case _ of | |
| SetUsername username -> do | |
| H.modify_ _ { username = username, result = Nothing } | |
| MakeRequest event -> do | |
| H.liftEffect $ Event.preventDefault event | |
| username <- H.gets _.username | |
| H.modify_ _ { loading = true } | |
| response <- H.liftAff $ AX.get AW.driver AXRF.string ("https://api.github.com/users/" <> username) | |
| H.modify_ _ { loading = false, result = map _.body (hush response) } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment