gatsby-core-theme 44.4.18 → 44.4.19

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [44.4.19](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.4.18...v44.4.19) (2025-07-23)
+
+
+### Bug Fixes
+
+* added reply + voting ([a2e161b](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/a2e161ba9dea871d666e237e06cfd6aaf5038c8c))
+
 ## [44.4.18](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.4.17...v44.4.18) (2025-07-23)
 
 

package/package.json

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

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

@@ -114,4 +114,8 @@
     text-transform: capitalize;
     margin-left: .8rem;
     padding: 0 1.6rem;
+}
+
+.replySection{
+    display: grid;
 }

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

@@ -1,45 +1,54 @@
+/* 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 from 'react';
+import React, { useState } from 'react';
 import axios from 'axios';
 import PropTypes from 'prop-types';
 import LazyImage from '~hooks/lazy-image';
-
+import LeaveCommentForm from '../leave-comment-form';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import styles from './comment.module.scss';
 
-const Comment = ({ comment, authors, isReply }) => {
+const Comment = ({ pageContext, comment, authors, isReply }) => {
     const commentName = comment?.author_id ? authors?.[comment?.author_id]?.name : comment.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 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"} : {"vote_down": "increase"};
+        const data = like 
+            ? {
+                "vote_up": "increase",
+                "commentID": commentId
+            } 
+            : {
+                "vote_down": "increase",
+                "commentID": commentId
+            };
 
         const headers = {
             headers: {
-                "X-ID": process.env.GATSBY_API_V2_X_ID,
-                "X-Signature": process.env.GATSBY_API_V2_X_SIGNATURE,
                 "Content-Type": "application/json",
                 Accept: "application/json",
             },
         };
 
-        const path = `${process.env.GATSBY_API_URL_V2}/v0.1/content/comments/votes/${commentId}`;
-
         return new Promise((resolve, reject) => {
             axios
-            .post(path, data, headers)
-            .then((response) => resolve(response.data.result))
+            .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));
         });
     }
@@ -63,26 +72,32 @@ const Comment = ({ comment, authors, isReply }) => {
                         <LazyImage className={styles.buttonGroupIcon} src='/images/dislike.svg' />
                         {comment.votes_down}
                     </button>
-                    <button aria-label='Reply Button' type='button' className={styles.replyButton}>
-                        {useTranslate('reply_button', 'Reply')}
-                    </button>
+                    {!isReply && (
+                        <button aria-label='Reply Button' onClick={() => setReply(!reply)} type='button' className={styles.replyButton}>
+                            {reply ? useTranslate('cancel_reply_button', 'Cancel Reply') : useTranslate('reply_button', 'Reply')}
+                        </button>  
+                    )}
                 </div>
+                {reply && <LeaveCommentForm page={pageContext.page} isReply parentCommentID={comment.comment_id} />}
             </div>
 };
 
 Comment.propTypes = {
-  comment: PropTypes.shape({
-    comment_id: PropTypes.number,
-    author_id: PropTypes.number,
-    name: PropTypes.string,
-    email: PropTypes.string,
-    comment: PropTypes.string,
-    updated_at: PropTypes.string,
-    votes_up: PropTypes.number,
-    votes_down: PropTypes.number,
-  }),
-  authors: PropTypes.shape({}),
-  isReply: PropTypes.bool
+    pageContext: PropTypes.shape({
+        page: PropTypes.shape({})
+    }),
+    comment: PropTypes.shape({
+        comment_id: PropTypes.number,
+        author_id: PropTypes.number,
+        name: PropTypes.string,
+        email: PropTypes.string,
+        comment: PropTypes.string,
+        updated_at: PropTypes.string,
+        votes_up: PropTypes.number,
+        votes_down: PropTypes.number,
+    }),
+    authors: PropTypes.shape({}),
+    isReply: PropTypes.bool
 };
 
 export default Comment;

package/src/components/molecules/leave-comment-form/index.js

@@ -6,10 +6,12 @@ import axios from "axios";
 import Form from "gatsby-core-theme/src/components/organisms/form";
 import PropTypes from 'prop-types';
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
-import { commentForm } from '../../../constants/forms';
+import { commentForm, replyForm } from '../../../constants/forms';
 
 const LeaveCommentForm = ({
     page,
+    isReply = false,
+    parentCommentID = 0,
     showLabels = true,
     showButtonIcon = false,
     buttonLabel = 'Add Comment',
@@ -25,6 +27,7 @@ const LeaveCommentForm = ({
         const data = Object.fromEntries(formData.entries());
 
         if(data?.["g-recaptcha-response"] === '' || !data?.tnc) return;
+        if(parentCommentID) data.parent_id = parseInt(parentCommentID);
 
         data.reference_id = page?.id;
         data.site_id = parseInt(process.env.SITE_ID);
@@ -56,7 +59,7 @@ const LeaveCommentForm = ({
 
     return activeMarket && 
         <Form
-            formOptions={commentForm[activeMarket] || commentForm.default}
+            formOptions={isReply ? (replyForm[activeMarket] || replyForm.default) : (commentForm[activeMarket] || commentForm.default)}
             showLabels={showLabels}
             hasButton
             showButtonIcon={showButtonIcon}
@@ -77,7 +80,8 @@ LeaveCommentForm.propTypes = {
     id: PropTypes.number,
     path: PropTypes.string,
   }).isRequired,
-//   submitUrl: PropTypes.string,
+  isReply: PropTypes.bool,
+  parentCommentID: PropTypes.number,
   successMessage: PropTypes.string,
   failMessage: PropTypes.string,
   validationMessage: PropTypes.string,

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

@@ -4,21 +4,23 @@ import PropTypes, { arrayOf } from 'prop-types';
 import keygen from '~helpers/keygen';
 import Comment from "../../../molecules/comment";
 
-const CommentTree = React.memo(({ comment, authors, depth = 0 }) => (
+const CommentTree = React.memo(({ pageContext, comment, authors, depth = 0 }) => (
   <div key={keygen()} style={{ marginLeft: depth * 56 }}>
-    <Comment comment={comment} authors={authors} isReply={depth > 0} />
+    <Comment pageContext={pageContext} comment={comment} authors={authors} isReply={depth > 0} />
     {comment.replies?.map(reply => (
       <CommentTree 
         key={keygen()} 
         comment={reply} 
         authors={authors} 
-        depth={depth + 1} 
+        depth={depth + 1}
+        pageContext={pageContext}
       />
     ))}
   </div>
 ));
 
 CommentTree.propTypes = {
+  pageContext: PropTypes.shape({}),
   comment: PropTypes.shape({
     replies: arrayOf(PropTypes.shape({}))
   }),

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

@@ -10,7 +10,7 @@ const Comments = ({ pageContext }) => {
     return (
         <div>
             <LeaveCommentForm page={pageContext.page} />  
-            {comments.map((comment) => <CommentTree comment={comment} authors={authors?.authors} depth={0} />)}
+            {comments.map((comment) => <CommentTree pageContext={pageContext} comment={comment} authors={authors?.authors} depth={0} />)}
         </div>
     );
 };

package/src/components/organisms/form/form.module.scss

@@ -232,6 +232,14 @@
       display: grid;
       grid-template-columns: 1fr 1fr;
 
+      input:user-invalid{
+        border: .15rem solid var(--comment-input-error, #DD4B39);
+      }
+
+      input:not(:placeholder-shown):invalid{
+        border: .15rem solid var(--comment-input-error, #DD4B39);
+      }
+
       > button{
           border: .2rem solid #161128;
           padding: 8px 16px;

package/src/constants/forms.js

@@ -184,6 +184,92 @@ export const commentForm = {
   },
 };
 
+export const replyForm = {
+  default: {
+    hasReCAPTCHA: true,
+    reCaptcha: {
+      validations: {
+        label: 'Please confirm',
+        translationKey: 'valid_recaptcha'
+      }
+    },
+    fields: [
+      {
+        label: 'Name',
+        translationKey: 'name_label',
+        id: 'name',
+        type: 'text',
+        required: true,
+        placeholder: {
+          label: 'Name',
+          translationKey: 'name_placeholder',
+        },
+        twoCol: true,
+      },
+      {
+        label: 'Email Address',
+        id: 'email',
+        type: 'email',
+        required: true,
+        placeholder: {
+          label: 'Email@placeholder.com',
+          translationKey: 'email_placeholder',
+        },
+        translationKey: 'email_label',
+        twoCol: true,
+      },
+      {
+        label: 'Leave a comment',
+        id: 'comment',
+        type: 'textarea',
+        placeholder: {
+          label: 'Leave a comment',
+          translationKey: 'comment_placeholder',
+        },
+        translationKey: 'textarea_label',
+        twoCol: false,
+        required: true,
+      },
+      {
+        id: 'post_anonymously',
+        type: 'checkbox',
+        required: false,
+        switch: true,
+        translationKey: 'post_anonymously_label',
+        twoCol: false,
+        options: [
+          {
+            id: 'post_anonymously',
+            label:
+              'Post comment anonymously.',
+            translationKey: 'post_anonymously_translation',
+          },
+        ],
+      },
+      {
+        id: 'tnc',
+        type: 'checkbox',
+        required: true,
+        translationKey: 'checkbox_label',
+        twoCol: false,
+        options: [
+          {
+            id: 'tnc',
+            label:
+              'By checking this box, I agree to the Comments [Link] and Terms and Conditions.',
+            link: {
+              url: '/privacy-policy',
+              text: 'Link',
+              translationKey: 'contact_checkbox',
+            },
+            translationKey: 'option_one_translation',
+          },
+        ],
+      },
+    ],
+  },
+};
+
 export const newsLetterForm = {
   default: {
     title: {