Moved logic into controllers

client/src/components/QAComponents/AnswerComment.jsx

@@ -1,22 +1,18 @@
 import { Divider, ListItem, ListItemText } from '@mui/material';
 import { CreationInfoTag } from 'controllers';
 import { VoteControl } from 'controllers/QAControllers';
-import { getAnswerCommentVote, updateAnswerCommentVote } from 'services/questionsServices';
-import { useQuestion } from 'contexts';
+
 export default function AnswerComment({
-    answer_id,
     comment_id,
     creator,
     createdAt,
     downvotes,
     text,
-    question_id,
-    upvotes
+    upvotes,
+    getVote,
+    updateVote,
+    canVote,
 }) {
-    const getVote = () => getAnswerCommentVote(question_id, answer_id, comment_id);
-    const updateVote = (data) => updateAnswerCommentVote(question_id, answer_id, comment_id, data);
-    const {permissions} = useQuestion();
-    let canVote = permissions.canVote;
     return (
         <span key={comment_id}>
             <ListItem disablePadding>
@@ -25,8 +21,8 @@ export default function AnswerComment({
                     {text}
                 </ListItemText>
                 <VoteControl {...{ downvotes, getVote, updateVote, upvotes, canVote }} />
-            </ListItem >
+            </ListItem>
             <Divider />
-        </span >
+        </span>
     );
-}
+}

client/src/components/QAComponents/Comment.jsx

@@ -1,20 +1,17 @@
 import { Divider, ListItem, ListItemText } from '@mui/material';
 import { CreationInfoTag } from 'controllers';
 import { VoteControl } from 'controllers/QAControllers';
-import { getCommentVote, updateCommentVote } from 'services/questionsServices';
-import { useQuestion } from 'contexts';
 
 export default function Comment({
     comment_id,
     creator,
     createdAt,
     downvotes,
-    question_id,
     text,
     upvotes,
+    getVote,
+    updateVote,
 }) {
-    const getVote = () => getCommentVote(question_id, comment_id);
-    const updateVote = (data) => updateCommentVote(question_id, comment_id, data);
     return (
         <span key={comment_id}>
             <ListItem disablePadding>

client/src/controllers/QAControllers/AnswerCommentController.jsx

@@ -0,0 +1,14 @@
+import { getAnswerCommentVote, updateAnswerCommentVote } from 'services/questionsServices';
+import { useQuestion } from 'contexts';
+import { AnswerComment } from 'components/QAComponents';
+
+export default function AnswerCommentController({ answer_id, comment_id, question_id, ...props }) {
+    const {
+        permissions: { canVote },
+    } = useQuestion();
+
+    const getVote = () => getAnswerCommentVote(question_id, answer_id, comment_id);
+    const updateVote = (data) => updateAnswerCommentVote(question_id, answer_id, comment_id, data);
+
+    return <AnswerComment {...{ ...props, canVote, getVote, updateVote }} />;
+}

client/src/controllers/QAControllers/CommentController.jsx

@@ -0,0 +1,9 @@
+import { getCommentVote, updateCommentVote } from 'services/questionsServices';
+import { Comment } from 'components/QAComponents';
+
+export default function CommentController({ comment_id, question_id, ...props }) {
+    const getVote = () => getCommentVote(question_id, comment_id);
+    const updateVote = (data) => updateCommentVote(question_id, comment_id, data);
+
+    return <Comment {...{ getVote, updateVote, ...props }} />;
+}

client/src/controllers/QAControllers/QAPaginatedListController.jsx

@@ -1,7 +1,6 @@
 import { useQuestion } from 'contexts';
 import { PaginatedList } from 'controllers';
-import { AnswerComment, Comment } from 'components/QAComponents';
-import { Answer } from 'controllers/QAControllers';
+import { Answer, Comment, AnswerComment } from 'controllers/QAControllers';
 import { getAnswerComments, getAnswers, getQuestionComments } from 'services/questionsServices';
 
 export function AnswerCommentsList({ answer_id, comments: count }) {

client/src/controllers/QAControllers/index.js

@@ -4,6 +4,8 @@ import CreateAnswer from './CreateAnswerController';
 import Question from './QuestionController';
 import VoteControl from './VoteControlController';
 import Answer from './AnswerController';
+import AnswerComment from './AnswerCommentController';
+import Comment from './CommentController';
 
 export {
     AnswersList,
@@ -14,4 +16,6 @@ export {
     CreateAnswer,
     Question,
     VoteControl,
+    AnswerComment,
+    Comment,
 };