Merge pull request #53 from hatchways/debug-loading-mentions

Debug loading mentions

client/src/hooks/getMentions.js

@@ -3,15 +3,14 @@ import axios from "axios";
 export const getMentions = async (dispatch, keyword, platforms, page = 1) => {
   const platformsArray = Object.keys(platforms).filter((key) => platforms[key]);
 
-  let platformsString = platformsArray.join();
+  const platformsString = platformsArray.join();
 
   try {
     const url = `/api/mentions?platforms=${platformsString}${
       keyword ? "&keyword=" + keyword : ""
     }&page=${page}`;
 
     const res = await axios.get(url);
-
     return res.data;
   } catch (err) {
     dispatch({

client/src/layout/Mention.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import {
   Typography,
   Card,
@@ -9,7 +9,8 @@ import {
 import { makeStyles } from "@material-ui/core/styles";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSmile } from "@fortawesome/free-regular-svg-icons";
-import redditLogo from "../utils/images/reddit-logo.png"
+import redditLogo from "../utils/images/reddit-logo.png";
+import { UserContext } from "../context/user";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -68,19 +69,19 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-  const image = (image) => {
-    if (image === "default" || image === "self") {
-      return redditLogo;
-    } else {
-      return image;
-    }
-  };
-
+const image = (image) => {
+  if (image === "default" || image === "self") {
+    return redditLogo;
+  } else {
+    return image;
+  }
+};
 
 const Mention = ({ mention }) => {
   const classes = useStyles();
   const keyword = "DolphinCorp";
-  const regex = new RegExp(`${keyword}`, "i");
+  const { searchTerm } = useContext(UserContext);
+  const regex = new RegExp(`${searchTerm}`, "i");
   const indexK = mention.title.search(regex);
 
   return (
@@ -94,8 +95,8 @@ const Mention = ({ mention }) => {
         <Box component="div" className={classes.titleBox}>
           <Typography variant="h6" gutterBottom>
             {/* {mention.title.substring(0, indexK)}
-            <span style={{ color: "#536dfe" }}>{keyword}</span>
-            {mention.title.substring(indexK + keyword.length)} */}
+            <span style={{ color: "#536dfe" }}>{searchTerm}</span>
+            {mention.title.substring(indexK + searchTerm.length)} */}
             {mention.title}
           </Typography>
         </Box>

client/src/pages/HomePage.js

@@ -8,7 +8,6 @@ import { makeStyles } from "@material-ui/core/styles";
 import Spinner from "../layout/Spinner";
 import { getMentions } from "../hooks/getMentions";
 import InfiniteScroll from "react-infinite-scroller";
-import axios from "axios";
 
 const useStyles = makeStyles((theme) => ({
   box: {
@@ -22,32 +21,31 @@ const HomePage = () => {
   const classes = useStyles();
   const [hasMore, setHasMore] = useState(true);
   const [mentionDatas, setMentionDatas] = useState(null);
+  const [currentPage, setCurrentPage] = useState(1);
   const { dispatch, error, searchTerm, user } = useContext(UserContext);
 
-  const loadMore = async (newPage) => {
-    const config = {
-      headers: { "Access-Control-Allow-Origin": "*" },
-    };
-    const url =
-      "/api/mentions?platforms=reddit" +
-      (searchTerm ? "&keyword=" + searchTerm : "") +
-      "&page=" +
-      newPage;
-
-    const results = await axios(url, config);
-    setHasMore(results.data.nextPage ? true : false);
-    const newData = [...mentionDatas, results.data.mentions].flat();
+  const loadMore = async () => {
+    const data = await getMentions(
+      dispatch,
+      searchTerm,
+      user.platforms,
+      currentPage + 1
+    );
+    setHasMore(data.nextPage ? true : false);
+    const newData = [...mentionDatas, data.mentions].flat();
     setMentionDatas(newData);
+    setCurrentPage(currentPage + 1);
   };
 
   useEffect(() => {
-    getMentions(dispatch, searchTerm, user.platforms)
+    getMentions(dispatch, searchTerm, user.platforms, 1)
       .then((data) => {
         setMentionDatas(data.mentions);
         setHasMore(data.nextPage ? true : false);
+        setCurrentPage(1);
       })
       .catch((err) => alert("Cookie expired. Please log in again"));
-  }, [searchTerm, user.platforms]);
+  }, [searchTerm, user.platforms, dispatch]);
 
   if (mentionDatas === null) return <Spinner />;
 
@@ -75,8 +73,8 @@ const HomePage = () => {
           </Box>
 
           <InfiniteScroll
-            pageStart={1}
-            loadMore={loadMore}
+            pageStart={currentPage}
+            loadMore={() => loadMore(currentPage)}
             hasMore={hasMore}
             loader={<Spinner />}>
             {items}

client/src/pages/PagesWrapper.js

@@ -7,7 +7,7 @@ const PagesWrapper = ({ children }) => {
 
   useEffect(() => {
     authenticate(dispatch);
-  }, [isAuthenticated]);
+  }, [isAuthenticated, dispatch]);
 
   return <>{children}</>;
 };

client/src/pages/PrivateRoute.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react";
+import React, { useContext } from "react";
 import { Route, Redirect } from "react-router-dom";
 import { UserContext } from "../context/user";
 

server/controllers/mentionController.js

@@ -76,18 +76,18 @@ const getMentions = async (req, res) => {
         });
       }
 
-      if (endIndex < allMentions.length) {
+      if (endIndex < filteredMentions.length) {
         nextPage = dataPage + 1;
       }
 
       if (startIndex > 0) {
         previousPage = dataPage - 1;
       }
 
-      const paginatedMentions = allMentions.slice(startIndex, endIndex);
+      const paginatedMentions = filteredMentions.slice(startIndex, endIndex);
 
       res.json({
-        nbHits: allMentions.length,
+        nbHits: filteredMentions.length,
         hitsPerPage: 20,
         page: dataPage,
         nextPage,