Reorder switch

client/src/App.js

@@ -9,6 +9,7 @@ import Login from "./pages/Login";
 import PagesWrapper from "./pages/PagesWrapper";
 import "./App.css";
 import PrivateRoute from "./pages/PrivateRoute";
+import SortToggle from "./layout/SortToggle";
 
 function App() {
   return (
@@ -20,6 +21,7 @@ function App() {
             <PrivateRoute path="/setting" component={SettingPage} />
             <Route path="/signup" component={Signup} />
             <Route path="/login" component={Login} />
+            <Route path="/testingmaterial" component={SortToggle} />
           </PagesWrapper>
         </Switch>
       </BrowserRouter>

client/src/hooks/getMentions.js

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

client/src/layout/Scroller.js

@@ -0,0 +1,37 @@
+import React, { useContext, useEffect } from "react";
+import InfiniteScroll from "react-infinite-scroller";
+import { UserContext } from "../context/user";
+import { getMentions } from "../hooks/getMentions";
+import Spinner from "./Spinner";
+
+const Scroller = ({
+  sort,
+  items,
+  loadmore,
+  hasMore,
+  setHasMore,
+  setMentionDatas,
+}) => {
+  const { dispatch, error, searchTerm, user } = useContext(UserContext);
+
+  useEffect(() => {
+    getMentions(dispatch, searchTerm, user.platforms, 1, sort)
+      .then((data) => {
+        setMentionDatas(data.mentions);
+        setHasMore(data.nextPage ? true : false);
+      })
+      .catch((err) => alert("Cookie expired. Please log in again"));
+  }, [sort]);
+
+  return (
+    <InfiniteScroll
+      pageStart={1}
+      loadMore={loadmore}
+      hasMore={hasMore}
+      loader={<Spinner />}>
+      {items}
+    </InfiniteScroll>
+  );
+};
+
+export default Scroller;

client/src/layout/SortToggle.js

@@ -0,0 +1,22 @@
+import React, { useState, useContext } from "react";
+import ToggleButton from "@material-ui/lab/ToggleButton";
+import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
+
+const SortToggle = ({ handleAlignment, alignment }) => {
+  return (
+    <ToggleButtonGroup
+      value={alignment}
+      exclusive
+      onChange={handleAlignment}
+      aria-label="text alignment">
+      <ToggleButton value="date" aria-label="left aligned">
+        Most Recent
+      </ToggleButton>
+      <ToggleButton value="popularity" aria-label="right aligned">
+        Most Popular
+      </ToggleButton>
+    </ToggleButtonGroup>
+  );
+};
+
+export default SortToggle;

client/src/pages/HomePage.js

@@ -4,10 +4,11 @@ import { Grid, Typography, Box } from "@material-ui/core";
 import { UserContext } from "../context/user";
 import Mention from "../layout/Mention";
 import MentionList from "../layout/MentionList";
+import SortToggle from "../layout/SortToggle";
 import { makeStyles } from "@material-ui/core/styles";
 import Spinner from "../layout/Spinner";
 import { getMentions } from "../hooks/getMentions";
-import InfiniteScroll from "react-infinite-scroller";
+import Scroller from "../layout/Scroller";
 import axios from "axios";
 
 const useStyles = makeStyles((theme) => ({
@@ -22,6 +23,8 @@ const HomePage = () => {
   const classes = useStyles();
   const [hasMore, setHasMore] = useState(true);
   const [mentionDatas, setMentionDatas] = useState(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [sort, setSort] = useState("date");
   const { dispatch, error, searchTerm, user } = useContext(UserContext);
 
   const loadMore = async (newPage) => {
@@ -32,21 +35,36 @@ const HomePage = () => {
       "/api/mentions?platforms=reddit" +
       (searchTerm ? "&keyword=" + searchTerm : "") +
       "&page=" +
-      newPage;
+      (currentPage + 1) +
+      "&sort=" +
+      sort;
 
     const results = await axios(url, config);
     setHasMore(results.data.nextPage ? true : false);
     const newData = [...mentionDatas, results.data.mentions].flat();
     setMentionDatas(newData);
+    setCurrentPage((prev) => prev + 1);
+  };
+
+  const handleAlignment = (event, newAlignment) => {
+    getMentions(dispatch, searchTerm, user.platforms, 1, newAlignment)
+      .then((data) => {
+        setMentionDatas(data.mentions);
+        setHasMore(data.nextPage ? true : false);
+      })
+      .catch((err) => alert(err.message));
+    setSort(newAlignment);
+    setCurrentPage(1);
   };
 
   useEffect(() => {
-    getMentions(dispatch, searchTerm, user.platforms)
+    getMentions(dispatch, searchTerm, user.platforms, 1, sort)
       .then((data) => {
         setMentionDatas(data.mentions);
         setHasMore(data.nextPage ? true : false);
       })
       .catch((err) => alert("Cookie expired. Please log in again"));
+    setCurrentPage(1);
   }, [searchTerm, user.platforms]);
 
   if (mentionDatas === null) return <Spinner />;
@@ -72,15 +90,22 @@ const HomePage = () => {
             <Typography variant="h3" align="left">
               My mentions
             </Typography>
+            <SortToggle
+              align="right"
+              handleAlignment={handleAlignment}
+              alignment={sort}
+              setAlignment={setSort}
+            />
           </Box>
 
-          <InfiniteScroll
-            pageStart={1}
-            loadMore={loadMore}
+          <Scroller
+            sort={sort}
+            items={items}
+            loadmore={loadMore}
             hasMore={hasMore}
-            loader={<Spinner />}>
-            {items}
-          </InfiniteScroll>
+            setHasMore={setHasMore}
+            setMentionDatas={setMentionDatas}
+          />
         </Grid>
         <Grid item xs={2} style={{ backgroundColor: "#FAFBFF" }}></Grid>
       </Grid>

server/controllers/mentionController.js

@@ -69,18 +69,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,