-
-
Save MuratOzsoyler/7fccd107916a76f37e1ae50fa239ec6d to your computer and use it in GitHub Desktop.
How to generate an array of widgets after waiting for an Aff action
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 Effect (Effect) | |
import Data.Either (Either (..)) | |
import Data.Traversable (traverse) | |
import Control.MultiAlternative (orr) | |
import Concur.Core (Widget) | |
import Concur.React (HTML) | |
import Concur.React.DOM (button, div', div_, text, table', th', tr', td, td', td_) | |
import Concur.React.Props (colSpan, onClick) | |
import Concur.React.Run (runWidgetInDom) | |
import Control.Alternative ((<|>)) | |
import Effect.Aff (delay) | |
import Effect.Aff.Class (liftAff) | |
import Data.Time.Duration (Milliseconds (..)) | |
waitEvent :: forall a. Array (Widget HTML a) | |
waitEvent = do | |
result <- liftAff (delay (Milliseconds 10000.0) *> pure (Right 1111)) <|> td_ [colSpan 2] (text "Loading...") | |
{- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ | |
No type class instance was found for | |
Effect.Aff.Class.MonadAff Array | |
while applying a function liftAff | |
-} | |
case result of | |
Left err -> do | |
void $ td [colSpan 2] | |
[ text $ "Error occured: " <> err | |
, button [onClick] [text "Retry"] | |
] | |
waitEvent | |
Right res -> | |
[ td' [text $ "Value is=" <> show res] | |
, td' $ text "Finished" | |
] | |
main :: Effect Unit | |
main = runWidgetInDom "main" $ table' | |
[ tr' | |
[ th' [text "col1"] | |
, th' [text "col2"] | |
, th' [text "col3"] | |
, th' [text "col4"] | |
] | |
, tr' | |
[ td' [text "1"] | |
, td' [text "2"] | |
] <> waitEvent | |
] |
I saw your Discource reply after writing my comment here. I actually thought that children of a Widget
populated in an array. So if I could return a Widget array then I could append after other children.
Maybe it is possible to create a pseudo element in the library so that its sole purpose is appending its children to the Widget
array like this..
- The behaviour with retry can be fixed by recursing as you noted. Just get add a call to waitEvent after the error handling.
- This already works fine as far as I can tell.
- It's easy to show the columns while the ajax call is in progress, if you add the columns to be parallel to the call.
Here's the code with all of these modifications made -
module Main where
import Prelude
import Effect (Effect)
import Data.Either (Either (..))
import Data.Traversable (traverse)
import Control.MultiAlternative (orr)
import Concur.Core (Widget)
import Concur.React (HTML)
import Concur.React.DOM (button, div', div_, text, table', th', tr', td, td', td_)
import Concur.React.Props (colSpan, onClick)
import Concur.React.Run (runWidgetInDom)
import Control.Alternative ((<|>))
import Effect.Aff (delay)
import Effect.Aff.Class (liftAff)
import Data.Time.Duration (Milliseconds (..))
waitEvent :: (forall a. Array (Widget HTML a) -> Widget HTML a) -> Widget HTML Unit
waitEvent f = do
result <- liftAff (delay (Milliseconds 1000.0) *> pure (Left "ERR" :: Either String Int)) <|> f [td_ [colSpan 2] (text "Loading...")]
{- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
No type class instance was found for
Effect.Aff.Class.MonadAff Array
while applying a function liftAff
-}
_ <- case result of
Left err -> do
f $ pure $ td [colSpan 2]
[ text $ "Error occured: " <> err
, button [onClick] [text "Retry"]
]
Right res ->
f [ td' [text $ "Value is=" <> show res]
, td' $ pure $ text "Finished"
]
waitEvent f
main :: Effect Unit
main = runWidgetInDom "main" $ table'
[ tr'
[ th' [text "col1"]
, th' [text "col2"]
, th' [text "col3"]
, th' [text "col4"]
]
, waitEvent (\elems -> tr'
([ td' [text "1"]
, td' [text "2"]
] <> elems))
]
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you for your prompt reply. It works but not the way I want.
Left
then clickingRetry
button clears the page. This can be prevented by recursing in theLeft
case.Left
then no columns are showncol1
andcol2
are input elements and the computation is based on these. And there will be many of them on the page. I prefer to showcol1
andcol2
in the first place and then the computation begin. Especially when rendering the page for the first time. In this case every row will show "Loading...".Thanks again for your help.