discus-lib - npm Package Compare versions

Comparing version 1.0.13 to 1.0.14

dist/cjs/components/Comment.js

@@ -11,2 +11,4 @@ "use strict";
     var _c = (0, react_1.useState)(false), showCommentBox = _c[0], setShowCommentBox = _c[1];
+    var _d = (0, react_1.useState)(true), canVote = _d[0], setCanVote = _d[1];
+    var _e = (0, react_1.useState)(false), liked = _e[0], setLiked = _e[1];
     (0, react_1.useEffect)(function () {
@@ -34,5 +36,13 @@ setComments(function (prevComments) {
                         comment.likeCount += 1;
+                        setLiked(true);
+                        if (!canVote) {
+                            comment.dislikeCount -= 1;
+                        }
                     }
                     else if (operation === "dislike") {
                         comment.dislikeCount += 1;
+                        setLiked(false);
+                        if (!canVote) {
+                            comment.likeCount -= 1;
+                        }
                     }
@@ -44,2 +54,3 @@ }
         });
+        setCanVote(false);
     };
@@ -80,7 +91,13 @@ return (react_1["default"].createElement("div", { id: "c-container", style: {
                         } },
-                        react_1["default"].createElement("span", { style: { width: "40px", display: "flex", gap: "3px" } },
-                            react_1["default"].createElement("span", { style: { cursor: "pointer" }, onClick: function () { return commentLikeDislikeHandler("like"); } }, "\uD83D\uDC4D"),
+                        react_1["default"].createElement("span", { style: { width: "40px", display: "flex", gap: "4px" } },
+                            react_1["default"].createElement("span", { style: { cursor: "pointer" }, onClick: canVote || !liked
+                                    ? function () { return commentLikeDislikeHandler("like"); }
+                                    : function () { } },
+                                react_1["default"].createElement("img", { src: require("../static/thumbs-up.png"), alt: "thumbs-up", style: { width: "15px" } })),
                             react_1["default"].createElement("span", { style: { paddingTop: "1px" } }, cmt.likeCount !== 0 && cmt.likeCount)),
-                        react_1["default"].createElement("span", { style: { width: "40px", display: "flex", gap: "3px" } },
-                            react_1["default"].createElement("span", { style: { cursor: "pointer" }, onClick: function () { return commentLikeDislikeHandler("dislike"); } }, "\uD83D\uDC4E"),
+                        react_1["default"].createElement("span", { style: { width: "40px", display: "flex", gap: "4px" } },
+                            react_1["default"].createElement("span", { style: { cursor: "pointer" }, onClick: canVote || liked
+                                    ? function () { return commentLikeDislikeHandler("dislike"); }
+                                    : function () { } },
+                                react_1["default"].createElement("img", { src: require("../static/negative-vote.png"), alt: "thumbs-up", style: { width: "15px" } })),
                             react_1["default"].createElement("span", { style: { paddingTop: "1px" } }, cmt.dislikeCount !== 0 && cmt.dislikeCount))),
@@ -87,0 +104,0 @@ react_1["default"].createElement("div", { style: {

dist/esm/components/Comment.js

@@ -7,2 +7,4 @@ import React, { useEffect, useState } from "react";
     var _c = useState(false), showCommentBox = _c[0], setShowCommentBox = _c[1];
+    var _d = useState(true), canVote = _d[0], setCanVote = _d[1];
+    var _e = useState(false), liked = _e[0], setLiked = _e[1];
     useEffect(function () {
@@ -30,5 +32,13 @@ setComments(function (prevComments) {
                         comment.likeCount += 1;
+                        setLiked(true);
+                        if (!canVote) {
+                            comment.dislikeCount -= 1;
+                        }
                     }
                     else if (operation === "dislike") {
                         comment.dislikeCount += 1;
+                        setLiked(false);
+                        if (!canVote) {
+                            comment.likeCount -= 1;
+                        }
                     }
@@ -40,2 +50,3 @@ }
         });
+        setCanVote(false);
     };
@@ -76,7 +87,13 @@ return (React.createElement("div", { id: "c-container", style: {
                         } },
-                        React.createElement("span", { style: { width: "40px", display: "flex", gap: "3px" } },
-                            React.createElement("span", { style: { cursor: "pointer" }, onClick: function () { return commentLikeDislikeHandler("like"); } }, "\uD83D\uDC4D"),
+                        React.createElement("span", { style: { width: "40px", display: "flex", gap: "4px" } },
+                            React.createElement("span", { style: { cursor: "pointer" }, onClick: canVote || !liked
+                                    ? function () { return commentLikeDislikeHandler("like"); }
+                                    : function () { } },
+                                React.createElement("img", { src: require("../static/thumbs-up.png"), alt: "thumbs-up", style: { width: "15px" } })),
                             React.createElement("span", { style: { paddingTop: "1px" } }, cmt.likeCount !== 0 && cmt.likeCount)),
-                        React.createElement("span", { style: { width: "40px", display: "flex", gap: "3px" } },
-                            React.createElement("span", { style: { cursor: "pointer" }, onClick: function () { return commentLikeDislikeHandler("dislike"); } }, "\uD83D\uDC4E"),
+                        React.createElement("span", { style: { width: "40px", display: "flex", gap: "4px" } },
+                            React.createElement("span", { style: { cursor: "pointer" }, onClick: canVote || liked
+                                    ? function () { return commentLikeDislikeHandler("dislike"); }
+                                    : function () { } },
+                                React.createElement("img", { src: require("../static/negative-vote.png"), alt: "thumbs-up", style: { width: "15px" } })),
                             React.createElement("span", { style: { paddingTop: "1px" } }, cmt.dislikeCount !== 0 && cmt.dislikeCount))),
@@ -83,0 +100,0 @@ React.createElement("div", { style: {

package.json

 {
   "name": "discus-lib",
-  "version": "1.0.13",
-  "description": "",
+  "version": "1.0.14",
+  "description": "A user discussion component library where the user can comment on a post and discuss among other users.",
   "main": "./dist/cjs/index.js",
@@ -6,0 +6,0 @@ "module": "./dist/esm/index.js",

No alert changes

Improved metrics

Total package byte prevSize

44456

increased by8.64%

Lines of code

498

increased by7.33%

No dependency changes