How to generate an array of widgets after waiting for an Aff action

multi-td-generation.purs

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
  ]

Try this -

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 :: (Array (Widget HTML Unit) -> Widget HTML Unit) -> Widget HTML Unit
waitEvent f = 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
      f $ pure $ td [colSpan 2]
        [ text $ "Error occured: " <> err
        , button [void onClick] [text "Retry"]
        ]
    Right res ->
      f [ td' [text $ "Value is=" <> show res]
      , td' $ pure $ text "Finished"
      ]
  
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))
  ]

Thank you for your prompt reply. It works but not the way I want.

1. If computation returns Left then clicking Retry button clears the page. This can be prevented by recursing in the Leftcase.
2. If computation returns Left then no columns are shown
3. Assume that col1 and col2 are input elements and the computation is based on these. And there will be many of them on the page. I prefer to show col1 and col2 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.

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..

1. The behaviour with retry can be fixed by recursing as you noted. Just get add a call to waitEvent after the error handling.
2. This already works fine as far as I can tell.
3. 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))
  ]