Reorder switch

client/src/App.js

@@ -9,7 +9,6 @@ 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 (
@@ -21,7 +20,6 @@ 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/layout/Scroller.js

@@ -3,16 +3,18 @@ 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,
-  items,
+  error,
   loadmore,
   hasMore,
   setHasMore,
+  mentionDatas,
   setMentionDatas,
 }) => {
-  const { dispatch, error, searchTerm, user } = useContext(UserContext);
+  const { dispatch, searchTerm, user } = useContext(UserContext);
 
   useEffect(() => {
     getMentions(dispatch, searchTerm, user.platforms, 1, sort)
@@ -29,7 +31,13 @@ const Scroller = ({
       loadMore={loadmore}
       hasMore={hasMore}
       loader={<Spinner />}>
-      {items}
+      {!error && mentionDatas.length > 0 ? (
+        mentionDatas.map((mentionData) => (
+          <Mention key={mentionData._id} mention={mentionData} />
+        ))
+      ) : (
+        <div>No results found</div>
+      )}
     </InfiniteScroll>
   );
 };

client/src/layout/SortToggle.js

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from "react";
+import React from "react";
 import ToggleButton from "@material-ui/lab/ToggleButton";
 import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
 

client/src/pages/HomePage.js

@@ -2,7 +2,6 @@ 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";
@@ -23,6 +22,7 @@ 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);
@@ -47,12 +47,14 @@ const HomePage = () => {
   };
 
   const handleAlignment = (event, newAlignment) => {
+    setSwitching(true);
     getMentions(dispatch, searchTerm, user.platforms, 1, newAlignment)
       .then((data) => {
         setMentionDatas(data.mentions);
         setHasMore(data.nextPage ? true : false);
       })
-      .catch((err) => alert(err.message));
+      .catch((err) => alert(err.message))
+      .finally(() => setSwitching(false));
     setSort(newAlignment);
     setCurrentPage(1);
   };
@@ -69,15 +71,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 />
@@ -90,22 +83,27 @@ const HomePage = () => {
             <Typography variant="h3" align="left">
               My mentions
             </Typography>
+
             <SortToggle
               align="right"
               handleAlignment={handleAlignment}
               alignment={sort}
               setAlignment={setSort}
             />
           </Box>
-
-          <Scroller
-            sort={sort}
-            items={items}
-            loadmore={loadMore}
-            hasMore={hasMore}
-            setHasMore={setHasMore}
-            setMentionDatas={setMentionDatas}
-          />
+          {switching ? (
+            <Spinner />
+          ) : (
+            <Scroller
+              sort={sort}
+              loadmore={loadMore}
+              hasMore={hasMore}
+              setHasMore={setHasMore}
+              mentionDatas={mentionDatas}
+              setMentionDatas={setMentionDatas}
+              error={error}
+            />
+          )}
         </Grid>
         <Grid item xs={2} style={{ backgroundColor: "#FAFBFF" }}></Grid>
       </Grid>