Display scraped youtube comments

src/components/NavItems/Assistant/Assistant.jsx

@@ -34,6 +34,7 @@ import {
 import { setError } from "redux/reducers/errorReducer";
 import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
 import { Close } from "@mui/icons-material";
+import AssistantCommentResult from "./AssistantScrapeResults/AssistantCommentResult";
 
 const Assistant = () => {
   // styles, language, dispatch, params
@@ -55,6 +56,9 @@ const Assistant = () => {
   const videoList = useSelector((state) => state.assistant.videoList);
   const text = useSelector((state) => state.assistant.urlText);
   const linkList = useSelector((state) => state.assistant.linkList);
+  const collectedComments = useSelector(
+    (state) => state.assistant.collectedComments,
+  );
   const errorKey = useSelector((state) => state.assistant.errorKey);
 
   // checking if user logged in
@@ -221,7 +225,7 @@ const Assistant = () => {
                   <AssistantWarnings />
                 </Grid2>
               ) : null}
-
+              
               {/* source crediblity//URL domain analysis results */}
               {positiveSourceCred || cautionSourceCred || mixedSourceCred ? (
                 <Grid2 size={{ xs: 12 }}>
@@ -257,6 +261,12 @@ const Assistant = () => {
                 </Grid2>
               ) : null}
 
+              {collectedComments ? (
+                <Grid2 size={12}>
+                  <AssistantCommentResult collectdComments={collectedComments} />
+                </Grid2>
+              ) : null}
+
               {/* named entity results */}
               {text && neResult ? (
                 <Grid2 size={{ xs: 12 }}>

src/components/NavItems/Assistant/AssistantScrapeResults/AssistantCommentResult.jsx

@@ -0,0 +1,110 @@
+import React from "react";
+import { useState } from "react";
+import Card from "@mui/material/Card";
+import { CardHeader, Divider, Grid2, Pagination } from "@mui/material";
+import CardContent from "@mui/material/CardContent";
+import Collapse from "@mui/material/Collapse";
+import moment from "moment/moment";
+
+import { WarningOutlined } from "@mui/icons-material";
+import HelpOutlineOutlinedIcon from "@mui/icons-material/HelpOutlineOutlined";
+import LinearProgress from "@mui/material/LinearProgress";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import { setWarningExpanded } from "../../../../redux/actions/tools/assistantActions";
+import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
+import useMyStyles from "../../../Shared/MaterialUiStyles/useMyStyles";
+import { treeMapToElements } from "./assistantUtils";
+import { useDispatch } from "react-redux";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+
+const AssistantCommentResult = ({ collectdComments }) => {
+  const keyword = i18nLoadNamespace("components/NavItems/tools/Assistant");
+  //const sharedKeyword = i18nLoadNamespace("components/Shared/utils");
+  const expandMinimiseText = keyword("expand_minimise_text");
+
+  const classes = useMyStyles();
+  const dispatch = useDispatch();
+  const pageSize = 20;
+  const numPages = Math.ceil(collectdComments.length / pageSize);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  function renderCommentList(commentList, offset = null, pageSize = null) {
+    let renderedComments = [];
+    if (offset === null) {
+      offset = 0;
+      pageSize = 99999;
+    }
+
+    let lastIndex = commentList.length;
+    if (offset + pageSize < lastIndex) {
+      lastIndex = offset + pageSize;
+    }
+    for (let i = offset; i < lastIndex; i++) {
+      const comment = commentList[i];
+      const text = comment.textOriginal;
+      const authorName = comment.authorDisplayName;
+      const publishedDate = moment(comment.publishedAt);
+      const updatedDate = moment(comment.updatedAt);
+
+      let renderedReplies = [];
+      if ("replies" in comment) {
+        renderedReplies = renderCommentList(comment.replies);
+      }
+      renderedComments.push(
+        <ListItem key={comment.id}>
+          <Card sx={{ width: "100%" }}>
+            <CardContent>
+              <div>
+                <span style={{ fontWeight: "bold" }}>{authorName}</span>{" "}
+                <span style={{ fontStyle: "italic", fontSize: "small" }}>
+                  {updatedDate.format("Do MMM YYYY hh:mm")}
+                </span>
+              </div>
+              <Divider flexItem />
+              <p>{text}</p>
+              {renderedReplies}
+            </CardContent>
+          </Card>
+        </ListItem>,
+      );
+    }
+
+    return <List>{renderedComments}</List>;
+  }
+
+  function renderComments() {
+    const offset = (currentPage - 1) * pageSize;
+    return renderCommentList(collectdComments, offset, pageSize);
+  }
+
+  function pageChangeHandler(event, page) {
+    setCurrentPage(page);
+  }
+
+  return (
+    <Card data-testid="assistant-collected-comments">
+      <CardHeader
+        className={classes.assistantCardHeader}
+        title={keyword("collected_comments_title")}
+      />
+      <CardContent width="100%">
+        <Pagination
+          count={numPages}
+          variant="outlined"
+          onChange={pageChangeHandler}
+          page={currentPage}
+        />
+        {renderComments()}
+        <Pagination
+          count={numPages}
+          variant="outlined"
+          onChange={pageChangeHandler}
+          page={currentPage}
+        />
+      </CardContent>
+    </Card>
+  );
+};
+export default AssistantCommentResult;

src/redux/actions/tools/assistantActions.jsx

@@ -62,6 +62,7 @@ export const setScrapedData = (
   images,
   videos,
   textHtmlMap,
+  collectedComments,
 ) => {
   return {
     type: "SET_SCRAPED_DATA",
@@ -72,6 +73,7 @@ export const setScrapedData = (
       imageList: images,
       videoList: videos,
       urlTextHtmlMap: textHtmlMap,
+      collectedComments: collectedComments,
     },
   };
 };

src/redux/reducers/assistantReducer.jsx

@@ -11,6 +11,7 @@ const defaultState = {
   linkList: [],
   urlText: null,
   urlTextHtmlMap: null,
+  collectedComments: null,
   textLang: null,
   processUrlActions: [],
   processUrlType: null,

src/redux/sagas/assistantSaga.jsx

@@ -619,6 +619,7 @@ function* handleAssistantScrapeCall(action) {
         filteredSR.imageList,
         filteredSR.videoList,
         filteredSR.urlTextHtmlMap,
+        filteredSR.collectedComments,
       ),
     );
     yield put(setAssistantLoading(false));
@@ -672,7 +673,17 @@ function* extractFromLocalStorage(instagram_result, inputUrl, urlType) {
   window.localStorage.removeItem("instagram_result");
 
   yield put(setInputUrl(inputUrl, urlType));
-  yield put(setScrapedData(text_result, null, [], image_result, video_result));
+  yield put(
+    setScrapedData(
+      text_result,
+      null,
+      [],
+      image_result,
+      video_result,
+      null,
+      null,
+    ),
+  );
   yield put(setAssistantLoading(false));
 }
 
@@ -702,12 +713,12 @@ function formatTelegramLink(url) {
  **/
 const decideWhetherToScrape = (urlType, contentType) => {
   switch (urlType) {
-    case KNOWN_LINKS.YOUTUBE:
     case KNOWN_LINKS.YOUTUBESHORTS:
     case KNOWN_LINKS.LIVELEAK:
     case KNOWN_LINKS.VIMEO:
     case KNOWN_LINKS.DAILYMOTION:
       return false;
+    case KNOWN_LINKS.YOUTUBE:
     case KNOWN_LINKS.TIKTOK:
     case KNOWN_LINKS.INSTAGRAM:
     case KNOWN_LINKS.FACEBOOK:
@@ -778,6 +789,7 @@ const filterAssistantResults = (
   let urlText = null;
   let urlTextHtmlMap = null;
   let textLang = null;
+  let collectedComments = null;
 
   switch (urlType) {
     case KNOWN_LINKS.YOUTUBE:
@@ -856,6 +868,10 @@ const filterAssistantResults = (
       .sort()
       .filter((value, index, array) => array.indexOf(value) === index);
     urlTextHtmlMap = scrapeResult.text_html_mapping;
+
+    if ("collected_comments" in scrapeResult) {
+      collectedComments = scrapeResult.collected_comments;
+    }
   }
 
   return {
@@ -865,6 +881,7 @@ const filterAssistantResults = (
     imageList: imageList,
     linkList: linkList,
     urlTextHtmlMap: urlTextHtmlMap,
+    collectedComments: collectedComments,
   };
 };