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