Merge pull request #55 from hatchways/reorder-switch

Reorder switch

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]);
 
   const 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);
     return res.data;

client/src/layout/Scroller.js

@@ -0,0 +1,45 @@
+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";
+import Mention from "../layout/Mention";
+
+const Scroller = ({
+  sort,
+  error,
+  loadmore,
+  hasMore,
+  setHasMore,
+  mentionDatas,
+  setMentionDatas,
+}) => {
+  const { dispatch, 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 />}>
+      {!error && mentionDatas.length > 0 ? (
+        mentionDatas.map((mentionData) => (
+          <Mention key={mentionData._id} mention={mentionData} />
+        ))
+      ) : (
+        <div>No results found</div>
+      )}
+    </InfiniteScroll>
+  );
+};
+
+export default Scroller;

client/src/layout/SortToggle.js

@@ -0,0 +1,22 @@
+import React 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

@@ -2,8 +2,8 @@ import React, { useContext, useEffect, useState } from "react";
 import AppBarLoggedIn from "../layout/AppBarLoggedIn";
 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";
@@ -21,24 +21,41 @@ const HomePage = () => {
   const classes = useStyles();
   const [hasMore, setHasMore] = useState(true);
   const [mentionDatas, setMentionDatas] = useState(null);
+  const [switching, setSwitching] = useState(false);
   const [currentPage, setCurrentPage] = useState(1);
+  const [sort, setSort] = useState("date");
+
   const { dispatch, error, searchTerm, user } = useContext(UserContext);
 
   const loadMore = async () => {
     const data = await getMentions(
       dispatch,
       searchTerm,
       user.platforms,
-      currentPage + 1
+      currentPage + 1,
+      sort
     );
     setHasMore(data.nextPage ? true : false);
     const newData = [...mentionDatas, data.mentions].flat();
     setMentionDatas(newData);
     setCurrentPage(currentPage + 1);
   };
 
+  const handleAlignment = (event, newAlignment) => {
+    setSwitching(true);
+    getMentions(dispatch, searchTerm, user.platforms, 1, newAlignment)
+      .then((data) => {
+        setMentionDatas(data.mentions);
+        setHasMore(data.nextPage ? true : false);
+        setSort(newAlignment);
+        setCurrentPage(1);
+      })
+      .catch((err) => alert(err.message))
+      .finally(() => setSwitching(false));
+  };
+
   useEffect(() => {
-    getMentions(dispatch, searchTerm, user.platforms, 1)
+    getMentions(dispatch, searchTerm, user.platforms, 1, sort)
       .then((data) => {
         setMentionDatas(data.mentions);
         setHasMore(data.nextPage ? true : false);
@@ -49,15 +66,6 @@ const HomePage = () => {
 
   if (mentionDatas === null) return <Spinner />;
 
-  const items =
-    !error && mentionDatas.length > 0 ? (
-      mentionDatas.map((mentionData) => (
-        <Mention key={mentionData._id} mention={mentionData} />
-      ))
-    ) : (
-      <div>No results found</div>
-    );
-
   return (
     <>
       <AppBarLoggedIn />
@@ -70,15 +78,28 @@ const HomePage = () => {
             <Typography variant="h3" align="left">
               My mentions
             </Typography>
+
+            <SortToggle
+              align="right"
+              handleAlignment={handleAlignment}
+              alignment={sort}
+              setAlignment={setSort}
+            />
           </Box>
+          {switching ? (
+            <Spinner />
+          ) : (
+            <Scroller
+              sort={sort}
+              loadmore={loadMore}
+              hasMore={hasMore}
+              setHasMore={setHasMore}
+              mentionDatas={mentionDatas}
+              setMentionDatas={setMentionDatas}
+              error={error}
+            />
+          )}
 
-          <InfiniteScroll
-            pageStart={currentPage}
-            loadMore={() => loadMore(currentPage)}
-            hasMore={hasMore}
-            loader={<Spinner />}>
-            {items}
-          </InfiniteScroll>
         </Grid>
         <Grid item xs={2} style={{ backgroundColor: "#FAFBFF" }}></Grid>
       </Grid>