Merge pull request #352 from yashpandav/reaction-frontend

Frontend Implementation for User Reactions

Author: OkenHaha

front-end/src/pages/Article.jsx

@@ -16,6 +16,111 @@ import { useSelector } from 'react-redux';
 import SaveForLaterButton from '../components/SaveForLaterComp/SaveforlaterButton';
 Modal.setAppElement('#root');
 
+const ReactionButton = ({ articleId, usertoken }) => {
+  const [reactionCounts, setReactionCounts] = useState({});
+  const [userReaction, setUserReaction] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [showReactions, setShowReactions] = useState(false);
+  const validEmojis = ['👍', '❤️', '😂', '😮', '😢', '😡'];
+
+  useEffect(() => {
+    const fetchReactions = async () => {
+      try {
+        const response = await axios.get(`${link}/api/article/reactions/${articleId}`);
+        setReactionCounts(response.data.reactionCounts || {});
+        const userReaction = response.data.reactions.find(r => r.user?._id === JSON.parse(atob(usertoken.split('.')[1])).userId)?.emoji;
+        setUserReaction(userReaction);
+      } catch (error) {
+        console.error('Error fetching reactions:', error);
+      }
+    };
+    fetchReactions();
+  }, [articleId, usertoken]);
+
+  const handleReaction = async (emoji) => {
+    if (!usertoken) {
+      alert('Please login to react');
+      return;
+    }
+    
+    try {
+      setLoading(true);
+      if (userReaction === emoji) {
+        await axios.delete(`${link}/api/article/react/${articleId}`, {
+          headers: { Authorization: `Bearer ${usertoken}` }
+        });
+        setUserReaction(null);
+        setReactionCounts(prev => ({ ...prev, [emoji]: (prev[emoji] || 1) - 1 }));
+      } else {
+        await axios.post(`${link}/api/article/react/${articleId}`, { emoji }, {
+          headers: { Authorization: `Bearer ${usertoken}` }
+        });
+        if (userReaction) {
+          setReactionCounts(prev => ({
+            ...prev,
+            [userReaction]: (prev[userReaction] || 1) - 1,
+            [emoji]: (prev[emoji] || 0) + 1
+          }));
+        } else {
+          setReactionCounts(prev => ({ ...prev, [emoji]: (prev[emoji] || 0) + 1 }));
+        }
+        setUserReaction(emoji);
+      }
+    } catch (error) {
+      console.error('Error updating reaction:', error);
+      alert(error.response?.data?.error || 'Failed to update reaction');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="relative inline-block">
+      {/* Main reaction button that shows current reaction or default */}
+      <button
+        onMouseEnter={() => setShowReactions(true)}
+        className={`p-2 rounded-lg transition-all duration-200 
+          ${userReaction ? 'bg-blue-100 dark:bg-yellow-900' : 'bg-gray-100 dark:bg-gray-700'}
+        `}
+      >
+        <span className="text-xl">{userReaction || '👍'}</span>
+        <span className="ml-2 text-sm font-medium">
+          {reactionCounts[userReaction] || reactionCounts['👍'] || 0}
+        </span>
+      </button>
+
+      {/* Reaction picker popup */}
+      {showReactions && (
+        <div 
+          className="absolute bottom-full left-0 mb-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-2 flex gap-1"
+          onMouseEnter={() => setShowReactions(true)}
+          onMouseLeave={() => setShowReactions(false)}
+        >
+          {validEmojis.map(emoji => (
+            <button
+              key={emoji}
+              onClick={() => {
+                handleReaction(emoji);
+                setShowReactions(false);
+              }}
+              disabled={loading}
+              className={`p-2 rounded-lg transition-all duration-200 hover:scale-125 
+                ${userReaction === emoji 
+                  ? 'bg-blue-100 dark:bg-yellow-900' 
+                  : 'hover:bg-gray-100 dark:hover:bg-gray-700'
+                }
+              `}
+              title={userReaction === emoji ? 'Remove reaction' : 'Add reaction'}
+            >
+              <span className="text-xl">{emoji}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
 const Article = ({ loggedInUserId }) => {
   const { name } = useParams();
   const [article, setArticle] = useState(null);
@@ -219,6 +324,10 @@ const Article = ({ loggedInUserId }) => {
                 initialLikes={article.likes || 0}
                 initialLikedState={likedBy?.includes(userId)}
               />
+              <ReactionButton 
+                articleId={article._id}
+                usertoken={localStorage.getItem('token')}
+              />
               <button
                 onClick={() => {
                   if (!localStorage.getItem('token')) {