gatsby-core-theme 44.4.45 → 44.4.46

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [44.4.46](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.4.45...v44.4.46) (2025-09-01)
+
+
+### Bug Fixes
+
+* comment vote logic ([a09a3bd](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/a09a3bd5ef047976362b12099fb37e84c682cb69))
+
 ## [44.4.45](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.4.44...v44.4.45) (2025-08-29)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "44.4.45",
+  "version": "44.4.46",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

package/src/components/atoms/comment-votes/comment-votes.module.scss

@@ -0,0 +1,34 @@
+.buttonGroup{
+    background: #EAE5E0;
+    font-size: 1.2rem;
+    padding: .5rem .8rem;
+    height: 2.8rem;
+    gap: .4rem;
+    color: #0F172A;
+
+    @include flex-align(center, center);
+
+    &.left{
+        border-bottom-left-radius: 5rem;
+        border-top-left-radius: 5rem;
+        padding-right: 0;
+    }
+
+    &.right{
+        border-bottom-right-radius: 5rem;
+        border-top-right-radius: 5rem;
+    }
+}
+
+.buttonGroupIcon{
+    width: 1.6rem;
+    height: 1.6rem;
+}
+
+.buttonGroup[disabled]{
+    cursor: default !important;
+}
+
+.disabled > *{
+    opacity: .3;
+}

package/src/components/atoms/comment-votes/index.js

@@ -0,0 +1,92 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+/* eslint-disable no-console */
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable import/no-extraneous-dependencies */
+import React, { useContext } from 'react';
+import axios from 'axios';
+import PropTypes from 'prop-types';
+import LazyImage from '~hooks/lazy-image';
+import useTranslate from '~hooks/useTranslate/useTranslate';
+import { useVote, VotesContext } from '../../../context/VotesProvider';
+import styles from './comment-votes.module.scss';
+
+const CommentVotes = ({ 
+    comment,
+    voteUpAria = 'Like Button',
+    voteDownAria = 'Dislike Button'
+}) => {
+    const { updateVote } = useContext(VotesContext);
+
+    const userVote = useVote(comment.comment_id);
+    
+    const handleVote = async (like = false, commentId) => {
+        const data = like 
+        ? {
+            "vote_up": "increase",
+            "commentID": commentId
+        } 
+        : {
+            "vote_down": "increase",
+            "commentID": commentId
+        };
+
+        const headers = {
+            headers: {
+                "Content-Type": "application/json",
+                Accept: "application/json",
+            },
+        };
+
+        return new Promise((resolve, reject) => {
+            axios
+            .put('/api/put-vote', data, headers)
+            .then((response) => {
+                response.ok = response.status === 200;
+                resolve(response);
+            })
+            .catch((error) => reject(error?.response?.data?.errors?.join() || error.message));
+        });
+    }
+    
+    return  <>
+                <button 
+                    onClick={async () => {
+                        updateVote(comment.comment_id, 'vote_up');
+                        await handleVote(true, comment.comment_id)
+                    }} 
+                    aria-label={useTranslate('vote_up_aria_label', voteUpAria)}
+                    type='button' 
+                    className={`${styles.buttonGroup} ${styles.left} ${userVote === 'vote_down' && styles.disabled || ''}`}
+                    disabled={Boolean(userVote)}
+                >
+                    <LazyImage className={styles.buttonGroupIcon} src='/images/like.svg' />
+                    <span>{userVote === 'vote_up' ? comment.votes_up + 1 : comment.votes_up}</span>
+                </button>
+                <button 
+                    onClick={async () => {
+                        updateVote(comment.comment_id, 'vote_down');
+                        await handleVote(false, comment.comment_id)
+                    }}
+                    aria-label={useTranslate('vote_down_aria_label', voteDownAria)}
+                    type='button' 
+                    className={`${styles.buttonGroup} ${styles.right} ${userVote === 'vote_up' && styles.disabled || ''}`}
+                    disabled={Boolean(userVote)}
+                >
+                    <LazyImage className={styles.buttonGroupIcon} src='/images/dislike.svg' />
+                    <span>{userVote === 'vote_down' ? comment.votes_down + 1 : comment.votes_down}</span>
+                </button>
+            </>
+};
+
+CommentVotes.propTypes = {
+    voteUpAria: PropTypes.string,
+    voteDownAria: PropTypes.string,
+    comment: PropTypes.shape({
+        comment_id: PropTypes.string,
+        votes_up: PropTypes.number,
+        votes_down: PropTypes.number
+    })
+};
+
+export default CommentVotes;

package/src/components/molecules/comment/comment.module.scss

@@ -59,33 +59,6 @@
     @include flex-direction(row);
 }
 
-.buttonGroup{
-    background: #EAE5E0;
-    font-size: 1.2rem;
-    padding: .5rem .8rem;
-    height: 2.8rem;
-    gap: .4rem;
-    color: #0F172A;
-
-    @include flex-align(center, center);
-
-    &.left{
-        border-bottom-left-radius: 5rem;
-        border-top-left-radius: 5rem;
-        padding-right: 0;
-    }
-
-    &.right{
-        border-bottom-right-radius: 5rem;
-        border-top-right-radius: 5rem;
-    }
-}
-
-.buttonGroupIcon{
-    width: 1.6rem;
-    height: 1.6rem;
-}
-
 .replyButton{
     border-radius: 10rem;
     border: 1.5px solid #161128;
@@ -101,10 +74,6 @@
     display: grid;
 }
 
-.disabled > *{
-    opacity: .3;
-}
-
 .buttonGroup[disabled]{
     cursor: default;
 }

package/src/components/molecules/comment/index.js

@@ -3,12 +3,12 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable import/no-extraneous-dependencies */
-import React, { useRef, useState } from 'react';
-import axios from 'axios';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import LazyImage from '~hooks/lazy-image';
 import LeaveCommentForm from '../leave-comment-form';
 import useTranslate from '~hooks/useTranslate/useTranslate';
+import CommentVotes from '../../atoms/comment-votes';
 import styles from './comment.module.scss';
 
 const Comment = ({ 
@@ -16,71 +16,21 @@ const Comment = ({
     comment, 
     authors, 
     isReply, 
-    userInteractions,
     showVotes = true
 }) => {
     const commentName = comment?.author_id ? authors?.[comment?.author_id]?.name : comment.author_name;
     const commentJobTitle = comment?.author_id ? authors?.[comment?.author_id]?.author_title : undefined;
+
     const date = new Date(comment.updated_at);
     const day = String(date.getUTCDate()).padStart(2, '0');
     const month = String(date.getUTCMonth() + 1).padStart(2, '0'); 
     const year = date.getUTCFullYear();
-    const [reply, setReply] = useState(false);
-    const [likes, setLikes] = useState(comment.votes_up);
-    const [dislikes, setDislikes] = useState(comment.votes_down);
-    const currentUserInteractions = useRef(userInteractions);
 
     const hours = String(date.getUTCHours()).padStart(2, '0');
     const minutes = String(date.getUTCMinutes()).padStart(2, '0');
     const commentDate = `${day}/${month}/${year} | ${hours}:${minutes}`;
-    
-    const handleVote = async (like = false, commentId) => {
-        const data = like 
-        ? {
-            "vote_up": "increase",
-            "commentID": commentId
-        } 
-        : {
-            "vote_down": "increase",
-            "commentID": commentId
-        };
-
-        const headers = {
-            headers: {
-                "Content-Type": "application/json",
-                Accept: "application/json",
-            },
-        };
-
-        const existingCookie = document.cookie
-            .split('; ')
-            .find((row) => row.startsWith('comments='))
-            ?.split('=')[1] || '';
-
-        const ids = existingCookie.split(',').filter(Boolean);
-
-        const alreadyVoted = ids.some((entry) => entry.startsWith(`${commentId}:`));
-        if (!alreadyVoted) {
-            ids.push(`${commentId}: ${like ? 'vote_up' : 'vote_down'}`);
-            document.cookie = `comments=${ids.join(',')}; path=/;`;
-            currentUserInteractions.current = ids;
-        }
-
-        return new Promise((resolve, reject) => {
-            axios
-            .put('/api/put-vote', data, headers)
-            .then((response) => {
-                response.ok = response.status === 200;
-                resolve(response);
-            })
-            .catch((error) => reject(error?.response?.data?.errors?.join() || error.message));
-        });
-    }
-    const userVote = currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))?.split(': ')[1];
-
-    const displayedLikes = userVote === 'vote_down' ? likes + 1 : likes;
-    const displayedDislikes = userVote === 'vote_down' ? dislikes + 1 : dislikes;
 
+    const [reply, setReply] = useState(false);
     
     return  <div className={`${styles.commentContainer} ${isReply ? styles.isReply : ''}`}>
                 <div className={styles.commentTopArea}>
@@ -94,34 +44,7 @@ const Comment = ({
                 </div>
                 <div className={styles.commentActions}>
                     {showVotes && (
-                        <>
-                            <button 
-                                onClick={async () => {
-                                    await handleVote(true, comment.comment_id)
-                                    setLikes((prev) => prev + 1)
-                                }} 
-                                aria-label='Like Button' 
-                                type='button' 
-                                className={`${styles.buttonGroup} ${styles.left} ${userVote === 'vote_down' && styles.disabled || ''}`}
-                                disabled={userVote === 'vote_up'}
-                                >
-                                <LazyImage className={styles.buttonGroupIcon} src='/images/like.svg' />
-                                <span>{displayedLikes}</span>
-                            </button>
-                            <button 
-                                onClick={async () => {
-                                    await handleVote(false, comment.comment_id)
-                                    setDislikes((prev) => prev + 1)
-                                }}
-                                aria-label='Dislike Button' 
-                                type='button' 
-                                className={`${styles.buttonGroup} ${styles.right} ${userVote === 'vote_up' && styles.disabled || ''}`}
-                                disabled={userVote === 'vote_down'}
-                                >
-                                <LazyImage className={styles.buttonGroupIcon} src='/images/dislike.svg' />
-                                <span>{displayedDislikes}</span>
-                            </button>
-                        </>
+                        <CommentVotes comment={comment} />
                     )}
                     {!isReply && (
                         <button aria-label='Reply Button' onClick={() => setReply(!reply)} type='button' className={styles.replyButton}>
@@ -149,7 +72,6 @@ Comment.propTypes = {
     }),
     authors: PropTypes.shape({}),
     isReply: PropTypes.bool,
-    userInteractions: PropTypes.arrayOf(PropTypes.string),
     showVotes: PropTypes.bool
 };
 

package/src/components/organisms/comments/comment-tree/index.js

@@ -1,17 +1,16 @@
 import React from "react";
 
 import PropTypes, { arrayOf } from 'prop-types';
-import keygen from '~helpers/keygen';
 import Comment from "../../../molecules/comment";
 
 import styles from './comment-tree.module.scss';
 
-const CommentTree = React.memo(({ pageContext, comment, authors, depth = 0, cookieComments }) => 
-  <div key={keygen()} className={`${styles?.[`comment_${depth}`]} ${depth > 0 && styles.isReply}`}>
-    <Comment pageContext={pageContext} comment={comment} authors={authors} isReply={depth > 0} userInteractions={cookieComments} />
+const CommentTree = React.memo(({ pageContext, comment, authors, depth = 0 }) => 
+  <div key={comment.comment_id} className={`${styles?.[`comment_${depth}`]} ${depth > 0 && styles.isReply}`}>
+    <Comment pageContext={pageContext} comment={comment} authors={authors} isReply={depth > 0} />
     {comment.replies?.map(reply => (
       <CommentTree 
-        key={keygen()} 
+        key={reply.comment_id} 
         comment={reply} 
         authors={authors} 
         depth={depth + 1}
@@ -24,11 +23,11 @@ const CommentTree = React.memo(({ pageContext, comment, authors, depth = 0, cook
 CommentTree.propTypes = {
   pageContext: PropTypes.shape({}),
   comment: PropTypes.shape({
-    replies: arrayOf(PropTypes.shape({}))
+    replies: arrayOf(PropTypes.shape({})),
+    comment_id: PropTypes.number
   }),
   authors: PropTypes.shape({}),
   depth: PropTypes.number, 
-  cookieComments: PropTypes.arrayOf(PropTypes.string)
 };
 
 export default CommentTree;

package/src/components/organisms/comments/index.js

@@ -1,39 +1,28 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import CommentTree from './comment-tree';
 import LeaveCommentForm from '../../molecules/leave-comment-form';
+import { VotesProvider } from '../../../context/VotesProvider';
 
 const Comments = ({ pageContext }) => {
   const { comments, authors } = pageContext;
-  const [cookieComments, setCookieComments] = useState([]);
-
-  useEffect(() => {
-    const storedVotes =
-      document.cookie
-        .split('; ')
-        .find((row) => row.startsWith('comments='))
-        ?.split('=')[1]
-        ?.split(',')
-        .filter(Boolean) || [];
-
-    setCookieComments(storedVotes);
-  }, []);
 
   if (!comments) return null;
 
   return (
     <div>
       <LeaveCommentForm page={pageContext.page} />
-      {comments.map((comment) => (
-        <CommentTree
-          key={comment.comment_id}
-          pageContext={pageContext}
-          comment={comment}
-          authors={authors?.authors}
-          depth={0}
-          cookieComments={cookieComments}
-        />
-      ))}
+      <VotesProvider>
+        {comments.map((comment) => (
+          <CommentTree
+            key={comment.comment_id}
+            pageContext={pageContext}
+            comment={comment}
+            authors={authors?.authors}
+            depth={0}
+          />
+        ))}
+      </VotesProvider>
     </div>
   );
 };

package/src/context/VotesProvider.js

@@ -0,0 +1,49 @@
+import React, {createContext, useContext, useEffect, useState} from "react";
+
+export const VotesContext = createContext({});
+
+// eslint-disable-next-line react/prop-types
+export const VotesProvider = ({ children }) => {
+  const [votes, setVotes] = useState({});
+
+  useEffect(() => {
+    const storedVotes =
+      document.cookie
+        .split("; ")
+        .find((row) => row.startsWith("comments="))
+        ?.split("=")[1]
+        ?.split(",")
+        .filter(Boolean) || [];
+    const votesMap = storedVotes.reduce((acc, entry) => {
+      const [id, vote] = entry.split(":");
+      if (id && vote) acc[id] = vote;
+      return acc;
+    }, {});
+    setVotes(votesMap);
+  }, []);
+
+  const updateVote = (commentId, voteValue) => {
+    setVotes((prevVotes) => {
+        const newVotes = { ...prevVotes, [commentId]: voteValue };
+
+        // Convert votes object to cookie string
+        const cookieValue = Object.entries(newVotes)
+        .map(([id, vote]) => `${id}:${vote}`)
+        .join(",");
+
+        // Set the cookie (expires in 1 year)
+        document.cookie = `comments=${cookieValue}; path=/;`;
+
+        return newVotes;
+    });
+};
+
+  return (
+    <VotesContext.Provider value={{votes, updateVote}}>{children}</VotesContext.Provider>
+  );
+};
+
+export const useVote = (commentId) => {
+  const { votes } = useContext(VotesContext);
+  return votes?.[commentId];
+};