Comments events

15 December 2019
Got comments working! Woo! So let’s talk about that then, shall we! So there’s like 2 or three parts we need to cover. The data/model, like how it’s structured in the DB. The event system for handling the UI. Annnddd maybe we will cover the UI stuff itself.



Okay soooo before we get to that mess, we should over the DB layout first.

    
public class Comment {
public Comment() {
Replies = new List<Comment>();
}
public int Id { get; set; }
public int BlogId { get; set; }
public string Name { get; set; }
[RequiredAllowEmptyStrings = false, ErrorMessage = "Can't be empty")]
public string Text { get; set; }
public int? ReplyTo { get; set; }
public DateTime DateAdded { get; set; }

[InverseProperty"ParentComment")]
public List<Comment> Replies { get; set; }

[ForeignKey"BlogId")]
public virtual Blog Blog { get; set; }

[ForeignKey"ReplyTo")]
public Comment ParentComment { get; set; }

}
This is the model we use to map the DB to code, it’s not very complex, but sets a good baseline for what’s to follow. The Required tag is used to make sure a comment isn’t empty. InverseProperty and ForeignKey are used for mapping rows/tables together. So if when calling Comment.where(blah) you can use .includes(Replies) and it will get the replies to the current comment. It’s pretty nifty.

Okay, let’s start explaining that mess we posted above. Let’s try to walk though it step by step.
-From outside OnInitialized is called
-That adds StateHasChanged to an event stored in the session
-Starts loading sub components
-The sub component has a button that points to an onclick method
-When that button is clicked, that’s where the magic comes in
--It calls ClearReplies which runs all the events already added
--It adds the RemoveReply method to that event on state
--Created a new sub commpent for posting a reply and set’s that to thing
--thing is Databound in the view so it’s displayed
-So invoking the events does two things
--StateHasChanged, which is on the parent and it cascades down
--RemoveReply, which is on the sub component which removes the Post component
-when this page is left it calls Dispose on the parent
-Dispose clears all events on the session, cleaning itself up

So did some more code tonight to clean this up a bit better. Added it so RemoveReply removes RemoveReply from the events. Made it toggleable so you can click it again to remove the Post Reply component. But it’s basically the same as this, and we didn’t want to take a new image and draw arrows again :3

From there it’s just clicking submit on the comment UI stuff which makes sure the comment is valid and adds it to the DB. Obviously the UI needs to be cleaned up a bit, still kinda messy and very alpha. Next thing we need to do is add a captcha, just to make sure bots can’t spam the site. But otherwises, functionally, comments are done. Oh, we also need to clean up some code here and there on it still, maybe rename some things better, such as “thing.”

That’s really it for tonight, nothing too complex or crazy. Try looking at that image and follow along with what’s happening. Remember, there are many sub components to that parent component. Sense a blog can have more than one root level comment. Okay goodnight~~