Todo application in Sodium

[torgeadelin]

Hi!
I'm wondering how could I implement a simple todo application where you can add and delete tasks in a list using Sodium? The main problems I'm facing is how I need to model my state should I have Cell[List[Task]] or Cell[List[Cell[Task]]]? Can anyone provide me with some pseudocode for the basic operations add and remove?

Thanks!

[clinuxrulz]

Cell[List[Task]] or Cell[List[Cell[Task]]]

Either or.

For Cell[List[Task]]: you'll have to keep rerendering all you tasks or use a virtual DOM or some sort of diffing.

For Cell[List[Cell[Task]]]: you have the opportunity to just rerender the tasks that change without diffing. But it is harder to wire up.

For your tasks you include an ID number. So you can identify when task changes when a stream gets fired.

have a the following streams or a single stream with a message defining the operation:

Stream[Task] sAdd
Stream[ID] sRemove
Stream[Task] sUpdate

Or

Stream[Msg] sMessage

where Msg is a closed union of the operations to perform.

Then

Loop you application state:

let slState = new StreamLoop[List[Task]];
let cState = slState.hold(initState);
slState.loop(sMessage.snapshot(cState, yourProcessStateFn));

And that is pretty much it.

[cubuspl42]

This is a good question. It's non obvious how collections should be handled in FRP.

While re-rendering related performance is a potential concern, what is actually critical is the matter of identity of list's elements.

Let's assume that you are building all of your application in FRP, including the view layer. Otherwise it would be "cheating", because mixing FRP with other solutions (like virtual DOM) suggests that FRP itself is too limited for the task (I believe it's not).

It's likely that you want somehow map your list of todos (a model) to a list of (presentation layer) widgets/fragments/components. That elements can have some state of their own (textbox? slowly pulsating animation? hover effect?). So you need a solution to maintain the identity of list's elements and its mapped elements.

Cell[List[Task]] doesn't allow for that. You'd need to go with Cell[List[Task]] + Stream[ListChange]. It's very likely that such a combination could form a new re-usable frp.List class, similar to javafx.collections.ObservableList.

But if you want something simple that just works, and you're either willing to combine Sodium with something like React, or don't care about re-building of HTML elements (or widgets/components in another technology) with all the consequences, go for solution that @clinuxrulz suggested.

By the way, Cell[List[Cell[Task]]] seems to be a non-solution. The inner Cell doesn't help; it manages only the identity of as single cell on a single given list index. I'm not sure how that helps with adding/deleting/reordering.

[cubuspl42]

let slState = new StreamLoop[List[Task]];
let cState = slState.hold(initState);
slState.loop(sMessage.snapshot(cState, yourProcessStateFn));

@clinuxrulz
Isn't that an accum?

[clinuxrulz]

Yep. That is accum also:

TodoMVC example (Incremental DOM via Sodium)

code: https://github.com/clinuxrulz/idom-sodium-todo-mvc live: http://clinuxrulz.github.io/idom-sodium-todo-mvc/index.html Just wanted to show it is possible to incrementally update the DOM from a view function with is defined declaratively. Well .... it looks declarative if you squint yours eyes enough. Instead of defining the view as a pure value and passing it to an interpreter. I just pass the interpreter into the view function directly (saves assembling and disassembling a pure data s…

In that example I dodge the virtual DOM via Cell[List[Cell[Task]]] idea. Well actually Cell[List[Task]], but the Task was made up of sodium objects. The trick is to listen to the outer, then have the handler manage the listeners to the inner elements. That way only the elements responsible for the items that change get rerendered. It is a bit of a messy way to do things though.

[torgeadelin]

Hi!

Thank you both for your replies! This definitely gives me a good direction on how I need to approach my problem.

I created some UI components with that work with scalatags, and they are very similar to the Widgets that Blackheath provided in the book. I injected a Cell inside the components, for example, my Label class looks like this.

class Label(text: Cell[String]) {

  val initialValue = text.sampleNoTrans()
  // UI - using Scalatags
  val element = p(initialValue)
  var domElement = element.render

  // Logic
  var listener = text
    .changes()
    .listen(x => {
      val newLast = p(x).render
      domElement.parentElement.replaceChild(newLast, domElement)
      domElement = newLast
    })
}

I also have a Button that has a Stream injected and emits an event whenever is clicked.
I am planning to use this to display the state of my task in the list, and I'm wondering, from the solutions you have provided which one fits best with what I have?

Thanks!

[torgeadelin]

Also, how do I map my list of tasks to my UI components?
In your example, @clinuxrulz , do I do something like state.sample().map(x => UIComponent(x)) where state: Cell[List[Cell[Task]]] ?

I think this way it would not work because I'm sampling the outer cell once.

[torgeadelin]

Ok, so I have managed to create it!!! And it works as expected. I can add and delete new tasks for now.

But, I think I broke the FRP law in one place.
I have created a new UI component that deals with Cell[List[Task]]. The code can be found below:

class Listing[T](text: Cell[List[T]], f: T => scalatags.JsDom.Modifier) {

  val initialValue: List[T] = List()

  val element = span(for(elem <- initialValue.toSeq) yield f(elem))

  var domElement = element.render

  var listener = text
    .changes()
    .listen((newVal: List[T]) => {
      val newLast =
        span(for(elem <- newVal.toSeq) yield f(elem)).render
      domElement.parentElement.replaceChild(newLast, domElement)
      domElement = newLast
    })
}

I basically map inside the component the list to a function that is provided as parameter. (that way I can wrap around the values in my list in HTML tags)

The main part of the program is here.

    var stream: StreamSink[Message[Task]] = new StreamSink()

    var loopState = new StreamLoop[List[Task]]
    var cState = loopState.hold(List());
    loopState.loop(
      stream.snapshot(
        cState,
        (event, _state: List[Task]) => {
          event.action match {
            case "add" => {
              println("add")
              println(event.value)
              event.value :: _state
            }
            case "remove" => {
              println("remove")
              println(event.value)
              _state.filter(p => p.id != event.value.id)
            }
          }
        }
      )
    )
    //textfield for new task
    val textField = new TextField("")

    //button for adding a new task
    val addButton = new Button("+", "")

    addButton.eventClicked.snapshot(textField.text, (click, text: String) => {
      // as I mentioned before, I think I break FRP law here because I'm explicitly sending events inside this stream
      stream.send(new Message[Task]("add", new Task(text, false)))
      ""
    })
    
    //this is the new UI component I created. the second argument is a function that is 
    //applied to each element on my list and returns a fragment of HTML code
    //i also create a button for each list, and I'm also using send here, which I believe it's a bad idea.
    val listing = new Listing[Task](cState, elem => {
      val delete = new Button("-", "")
      delete.eventClicked.listen(u =>
        stream.send(new Message[Task]("remove", elem))
      )
      div(cls := "d-flex align-items-center")(
        div(cls := "d-flex align-items-center border p-2")(
          span(cls := "mr-2", elem.description),
          if (elem.isDone)
            span(cls := "badge badge-pill badge-warning", "Ongoing")
          else span(cls := "badge badge-pill badge-success", "Done")
        ),
        delete.domElement(cls := "btn btn-light ml-2")
      )
    })

    dom.document.body.innerHTML = ""
    dom.document.body.appendChild(
      div(cls := "mt-3")(
        h1("Todo Application"),
        br,
        div(cls := "d-flex align-items-center")(
          addButton.domElement,
          textField.domElement
        ),
        br,
        br,
        listing.domElement
      ).render
    )

Here's my Message and Task classes if you're wondering how they look like.

class Task(var description: String, var isDone: Boolean) {
  val id: String = ju.UUID.randomUUID.toString
}
 
class Message[T](var action: String, var value: T)

So, to conclude, my questions are how do I map the list inside a cell and render it properly? Or is my Listing component a good way of doing this? Also, How can I avoid explicitly emitting events (see comments in 2nd snippet of code).

[clinuxrulz]

I think my solution might be a bit complicated:

I went for listener handler managing listeners solution:

clinuxrulz/idom-sodium-todo-mvc/blob/653a5624f09c48650d24dfb013739354b68a8449/src/dom_ctx.ts#L153

I'm not sure of an easier solution that does not do diffing either by framework or in sodium via Cell.calm() on each element after mapping them out.

Second part of the question, what I did was a Cell[Event=>Msg] . A cell that contains a funtion that will convert a dom event into a message for the application.

clinuxrulz/idom-sodium-todo-mvc/blob/653a5624f09c48650d24dfb013739354b68a8449/src/dom_ctx.ts#L131

and sample usage:

clinuxrulz/idom-sodium-todo-mvc/blob/653a5624f09c48650d24dfb013739354b68a8449/src/app.ts#L262

[clinuxrulz]

cubuspl42's solution would work too.

Cell[List[Task]] + Stream[ListChange[Task]]

There is enough information to track down which Dom elements to individually modify.

I'd argue that if there was a table and your sorting data by a selected column, and then changing column to sort by. That you would find Cell[List[Cell[Row]]] less painful to deal with.