TL;DR
In the previous post, we have added the Comment feature to our Picshare application. We only displayed the comment input box, and today we are adding a feature for adding and storing picture comments. This post is part of the functional language series, and it is based on a remarkable book, Programming Elm Build Safe and Maintainable Front-End Applications by Jeremy Fairbank.
Here is how we add a feature that stores comment in the comment list.
In the first and second Elm source comments, we expose two new functions from Attribute Module, value and disable, and onSubmit function from the Events Module.
In the third source comment, we are expanding PicShare messages with UpdateComment and SaveComment. UpdateComment has input String that is an actual comment, and SaveComment will add a comment from Model to Model comments List.
It is time to update the View viewComments function. In the fourth comment, we add an onSubmit SaveComment event that emits a SaveComment message when we click SaveButton , or press the enter key. The fifth comment adds onInput an event that emits UpdateComment a message. That message has as input string. For that, we use value an attribute that has a value of model.NewComment.
The sixth comment disables Save button if the comment input box is empty.
The seventh source comment adds two cases for update function pattern matching. For UpdateComment message, we update the model with the comment input parameter. For SaveComment we call a new method that will add to model comments list new comment.
The eight comment implements saveNewComment update model function.
Now you can compile Picshare application and open index.html.
elm make src/Picshare.elm --output picshare.js
Enter a couple comments. What happens when you refresh index.html page?
