add like WIP b00tc4mp#167

staff/anna-gonzalez/unsocial/compo/Button.js

@@ -5,4 +5,12 @@ function Button(text, type) {
     this.container.type = type
 }
 
-Button.extends(Compo)
+Button.extends(Compo)
+
+Button.prototype.getText = function () {
+    return this.container.textContent
+};
+
+Button.prototype.setText = function (text) {
+    this.container.textContent = text
+};

staff/anna-gonzalez/unsocial/view/PostItem.js

@@ -1,5 +1,10 @@
-function PostItem(username, image, text, date) {
+function PostItem(username, image, text, date, emoji) {
     Compo.call(this, document.createElement('article'))
+    this.container.style.display = 'flex'
+    this.container.style.flexDirection = 'column'
+    this.container.style.justifyContent = 'center'
+    this.container.style.textAlign = 'center'
+    this.container.style.alignItems = 'center'
 
     var userTitle = new Heading(username, 4)
     userTitle.container.style.textDecoration = 'underline'
@@ -15,6 +20,15 @@ function PostItem(username, image, text, date) {
 
     var time = new Time(date)
     this.add(time)
+
+    var like = new Button(emoji || '👎')
+    this.add(like)
+    like.container.style.marginTop = '20px'
+
+    like.addBehaviour('click', function (event) {
+        var currentEmoji = like.getText();
+        like.setText(currentEmoji === '👍' ? '👎' : '👍')
+    })
 }
 
 PostItem.extends(Compo)

staff/anna-gonzalez/unsocial/view/PostList.js

@@ -8,7 +8,7 @@ function PostList() {
         var posts = getPosts().toReversed()
 
         posts.forEach(function (post) {
-            var postItem = new PostItem(post.username, post.image, post.text, post.date)
+            var postItem = new PostItem(post.username, post.image, post.text, post.date, post.emoji)
 
             this.add(postItem)
         }.bind(this))