From 05057378eeae686e2eb7de827db848904516fe0b Mon Sep 17 00:00:00 2001 From: Jovialiste82 <52076767+Jovialiste82@users.noreply.github.com> Date: Wed, 24 Mar 2021 12:21:05 -0300 Subject: [PATCH 1/5] reorder-switch working styling still missing --- client/src/App.js | 2 + client/src/hooks/getMentions.js | 10 ++--- client/src/layout/SortToggle.js | 26 +++++++++++++ client/src/pages/HomePage.js | 65 +++++++++++++++++++++------------ 4 files changed, 74 insertions(+), 29 deletions(-) create mode 100644 client/src/layout/SortToggle.js diff --git a/client/src/App.js b/client/src/App.js index 11fcdd8..8928d91 100644 --- a/client/src/App.js +++ b/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() { + diff --git a/client/src/hooks/getMentions.js b/client/src/hooks/getMentions.js index 7ac7c1a..d3f4f55 100644 --- a/client/src/hooks/getMentions.js +++ b/client/src/hooks/getMentions.js @@ -1,17 +1,17 @@ -import axios from 'axios'; +import axios from "axios"; -export const getMentions = async (dispatch, keyword, page = 1) => { +export const getMentions = async (dispatch, keyword, page = 1, sort) => { try { const url = `/api/mentions?platforms=reddit${ - keyword ? '&keyword=' + keyword : '' - }&page=${page}`; + keyword ? "&keyword=" + keyword : "" + }&page=${page}${sort ? "&sort=" + sort : "date"}`; const res = await axios.get(url); return res.data; } catch (err) { dispatch({ - type: 'LOGOUT', + type: "LOGOUT", }); throw err; } diff --git a/client/src/layout/SortToggle.js b/client/src/layout/SortToggle.js new file mode 100644 index 0000000..b5e0579 --- /dev/null +++ b/client/src/layout/SortToggle.js @@ -0,0 +1,26 @@ +import React, { useState, useContext } from "react"; +import ToggleButton from "@material-ui/lab/ToggleButton"; +import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup"; +import { getMentions } from "../hooks/getMentions"; +import { UserContext } from "../context/user"; + +const SortToggle = ({ handleAlignment, alignment, setAlignment }) => { + const { dispatch, error, searchTerm } = useContext(UserContext); + + return ( + + + Most Recent + + + Most Popular + + + ); +}; + +export default SortToggle; diff --git a/client/src/pages/HomePage.js b/client/src/pages/HomePage.js index da6e352..31fd6fe 100644 --- a/client/src/pages/HomePage.js +++ b/client/src/pages/HomePage.js @@ -1,20 +1,21 @@ -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 { 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'; +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"; +import InfiniteScroll from "react-infinite-scroller"; +import axios from "axios"; const useStyles = makeStyles((theme) => ({ box: { - alignItems: 'center', + alignItems: "center", margin: theme.spacing(6, 3, 4, 0), - width: '80%', + width: "80%", }, })); @@ -22,16 +23,17 @@ const HomePage = () => { const classes = useStyles(); const [hasMore, setHasMore] = useState(true); const [mentionDatas, setMentionDatas] = useState(null); + const [alignment, setAlignment] = useState("date"); const { dispatch, error, searchTerm } = useContext(UserContext); const loadMore = async (newPage) => { const config = { - headers: { 'Access-Control-Allow-Origin': '*' }, + headers: { "Access-Control-Allow-Origin": "*" }, }; const url = - '/api/mentions?platforms=reddit' + - (searchTerm ? '&keyword=' + searchTerm : '') + - '&page=' + + "/api/mentions?platforms=reddit" + + (searchTerm ? "&keyword=" + searchTerm : "") + + "&page=" + newPage; const results = await axios(url, config); @@ -40,13 +42,23 @@ const HomePage = () => { setMentionDatas(newData); }; + const handleAlignment = (event, newAlignment) => { + setAlignment(newAlignment); + getMentions(dispatch, searchTerm, 1, newAlignment) + .then((data) => { + setMentionDatas(data.mentions); + setHasMore(data.nextPage ? true : false); + }) + .catch((err) => alert(err.message)); + }; + useEffect(() => { getMentions(dispatch, searchTerm, 1) .then((data) => { setMentionDatas(data.mentions); setHasMore(data.nextPage ? true : false); }) - .catch((err) => alert('Cookie expired. Please log in again')); + .catch((err) => alert("Cookie expired. Please log in again")); }, [searchTerm]); if (mentionDatas === null) return ; @@ -63,27 +75,32 @@ const HomePage = () => { return ( <> - + - + - + My mentions + } - > + loader={}> {items} - + ); From 71fa1e2fc1296e174dad42b4f969bb7b2f9c319a Mon Sep 17 00:00:00 2001 From: Jovialiste82 <52076767+Jovialiste82@users.noreply.github.com> Date: Wed, 24 Mar 2021 18:47:14 -0300 Subject: [PATCH 2/5] fixed keyword filtering and fixed sort switch bug --- client/src/hooks/getMentions.js | 14 ++++----- client/src/layout/Scroller.js | 38 +++++++++++++++++++++++++ client/src/layout/SortToggle.js | 6 +--- client/src/pages/HomePage.js | 36 ++++++++++++++--------- server/controllers/mentionController.js | 6 ++-- 5 files changed, 70 insertions(+), 30 deletions(-) create mode 100644 client/src/layout/Scroller.js diff --git a/client/src/hooks/getMentions.js b/client/src/hooks/getMentions.js index 6042306..2ae0733 100644 --- a/client/src/hooks/getMentions.js +++ b/client/src/hooks/getMentions.js @@ -1,20 +1,18 @@ import axios from "axios"; -export const getMentions = async ( - dispatch, - keyword, - platforms, - page = 1, - sort -) => { +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}${sort ? "&sort=" + sort : "&sort=date"}`; + const url = `/api/mentions?platforms=${platformsString}${ keyword ? "&keyword=" + keyword : "" - }&page=${page}${sort ? "&sort=" + sort : "date"}`; + }&page=${page}&sort=${sort}`; const res = await axios.get(url); diff --git a/client/src/layout/Scroller.js b/client/src/layout/Scroller.js new file mode 100644 index 0000000..c3f0681 --- /dev/null +++ b/client/src/layout/Scroller.js @@ -0,0 +1,38 @@ +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")); + // setCurrentPage(1); + }, [sort]); + + return ( + }> + {items} + + ); +}; + +export default Scroller; diff --git a/client/src/layout/SortToggle.js b/client/src/layout/SortToggle.js index b5e0579..e4ede46 100644 --- a/client/src/layout/SortToggle.js +++ b/client/src/layout/SortToggle.js @@ -1,12 +1,8 @@ import React, { useState, useContext } from "react"; import ToggleButton from "@material-ui/lab/ToggleButton"; import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup"; -import { getMentions } from "../hooks/getMentions"; -import { UserContext } from "../context/user"; - -const SortToggle = ({ handleAlignment, alignment, setAlignment }) => { - const { dispatch, error, searchTerm } = useContext(UserContext); +const SortToggle = ({ handleAlignment, alignment }) => { return ( ({ @@ -23,7 +23,8 @@ const HomePage = () => { const classes = useStyles(); const [hasMore, setHasMore] = useState(true); const [mentionDatas, setMentionDatas] = useState(null); - const [alignment, setAlignment] = useState("date"); + const [currentPage, setCurrentPage] = useState(1); + const [sort, setSort] = useState("date"); const { dispatch, error, searchTerm, user } = useContext(UserContext); const loadMore = async (newPage) => { @@ -34,31 +35,37 @@ 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) => { - setAlignment(newAlignment); - getMentions(dispatch, searchTerm, 1, newAlignment) + getMentions(dispatch, searchTerm, user.platforms, 1, newAlignment) .then((data) => { + console.log(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 ; @@ -87,18 +94,19 @@ const HomePage = () => { - }> - {items} - + setHasMore={setHasMore} + setMentionDatas={setMentionDatas} + /> diff --git a/server/controllers/mentionController.js b/server/controllers/mentionController.js index c57f712..ef906d5 100644 --- a/server/controllers/mentionController.js +++ b/server/controllers/mentionController.js @@ -69,7 +69,7 @@ const getMentions = async (req, res) => { }); } - if (endIndex < allMentions.length) { + if (endIndex < filteredMentions.length) { nextPage = dataPage + 1; } @@ -77,10 +77,10 @@ const getMentions = async (req, res) => { 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, From 88ba1c6e16a462bffde10ba391ceb22c1a700e55 Mon Sep 17 00:00:00 2001 From: Jovialiste82 <52076767+Jovialiste82@users.noreply.github.com> Date: Thu, 25 Mar 2021 09:02:34 -0300 Subject: [PATCH 3/5] removing comments and logs --- client/src/hooks/getMentions.js | 4 ---- client/src/layout/Scroller.js | 1 - client/src/pages/HomePage.js | 1 - 3 files changed, 6 deletions(-) diff --git a/client/src/hooks/getMentions.js b/client/src/hooks/getMentions.js index 2ae0733..79b09a9 100644 --- a/client/src/hooks/getMentions.js +++ b/client/src/hooks/getMentions.js @@ -6,10 +6,6 @@ export const getMentions = async (dispatch, keyword, platforms, page, sort) => { let platformsString = platformsArray.join(); try { - // const url = `/api/mentions?platforms=${platformsString}${ - // keyword ? "&keyword=" + keyword : "" - // }&page=${page}${sort ? "&sort=" + sort : "&sort=date"}`; - const url = `/api/mentions?platforms=${platformsString}${ keyword ? "&keyword=" + keyword : "" }&page=${page}&sort=${sort}`; diff --git a/client/src/layout/Scroller.js b/client/src/layout/Scroller.js index c3f0681..bce9123 100644 --- a/client/src/layout/Scroller.js +++ b/client/src/layout/Scroller.js @@ -21,7 +21,6 @@ const Scroller = ({ setHasMore(data.nextPage ? true : false); }) .catch((err) => alert("Cookie expired. Please log in again")); - // setCurrentPage(1); }, [sort]); return ( diff --git a/client/src/pages/HomePage.js b/client/src/pages/HomePage.js index 10ec1a9..b0020d0 100644 --- a/client/src/pages/HomePage.js +++ b/client/src/pages/HomePage.js @@ -49,7 +49,6 @@ const HomePage = () => { const handleAlignment = (event, newAlignment) => { getMentions(dispatch, searchTerm, user.platforms, 1, newAlignment) .then((data) => { - console.log(data); setMentionDatas(data.mentions); setHasMore(data.nextPage ? true : false); }) From 882bb238cbb8bc3d6204255b636e697cfdd3d57b Mon Sep 17 00:00:00 2001 From: Jovialiste82 <52076767+Jovialiste82@users.noreply.github.com> Date: Thu, 25 Mar 2021 10:44:07 -0300 Subject: [PATCH 4/5] addind Loader while switching and handling warnings --- client/src/App.js | 2 -- client/src/layout/Scroller.js | 14 +++++++++--- client/src/layout/SortToggle.js | 2 +- client/src/pages/HomePage.js | 38 ++++++++++++++++----------------- 4 files changed, 30 insertions(+), 26 deletions(-) diff --git a/client/src/App.js b/client/src/App.js index 8928d91..11fcdd8 100644 --- a/client/src/App.js +++ b/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() { - diff --git a/client/src/layout/Scroller.js b/client/src/layout/Scroller.js index bce9123..39d0f1e 100644 --- a/client/src/layout/Scroller.js +++ b/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={}> - {items} + {!error && mentionDatas.length > 0 ? ( + mentionDatas.map((mentionData) => ( + + )) + ) : ( +
No results found
+ )} ); }; diff --git a/client/src/layout/SortToggle.js b/client/src/layout/SortToggle.js index e4ede46..437716f 100644 --- a/client/src/layout/SortToggle.js +++ b/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"; diff --git a/client/src/pages/HomePage.js b/client/src/pages/HomePage.js index b0020d0..857c283 100644 --- a/client/src/pages/HomePage.js +++ b/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 ; - const items = - !error && mentionDatas.length > 0 ? ( - mentionDatas.map((mentionData) => ( - - )) - ) : ( -
No results found
- ); - return ( <> @@ -90,6 +83,7 @@ const HomePage = () => { My mentions + { setAlignment={setSort} /> - - + {switching ? ( + + ) : ( + + )} From ee3cde33e59978860f83aa1e8ac8a9b8ccae09e9 Mon Sep 17 00:00:00 2001 From: Jovialiste82 <52076767+Jovialiste82@users.noreply.github.com> Date: Mon, 29 Mar 2021 01:42:06 -0300 Subject: [PATCH 5/5] refactoring --- client/src/pages/HomePage.js | 35 ++++++++++++++--------------------- 1 file changed, 14 insertions(+), 21 deletions(-) diff --git a/client/src/pages/HomePage.js b/client/src/pages/HomePage.js index 857c283..8b72170 100644 --- a/client/src/pages/HomePage.js +++ b/client/src/pages/HomePage.js @@ -7,8 +7,6 @@ import SortToggle from "../layout/SortToggle"; import { makeStyles } from "@material-ui/core/styles"; import Spinner from "../layout/Spinner"; import { getMentions } from "../hooks/getMentions"; -import Scroller from "../layout/Scroller"; -import axios from "axios"; const useStyles = makeStyles((theme) => ({ box: { @@ -27,23 +25,18 @@ const HomePage = () => { const [sort, setSort] = useState("date"); 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=" + - (currentPage + 1) + - "&sort=" + - sort; - - 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, + sort + ); + setHasMore(data.nextPage ? true : false); + const newData = [...mentionDatas, data.mentions].flat(); setMentionDatas(newData); - setCurrentPage((prev) => prev + 1); + setCurrentPage(currentPage + 1); }; const handleAlignment = (event, newAlignment) => { @@ -52,11 +45,11 @@ const HomePage = () => { .then((data) => { setMentionDatas(data.mentions); setHasMore(data.nextPage ? true : false); + setSort(newAlignment); + setCurrentPage(1); }) .catch((err) => alert(err.message)) .finally(() => setSwitching(false)); - setSort(newAlignment); - setCurrentPage(1); }; useEffect(() => { @@ -64,9 +57,9 @@ const HomePage = () => { .then((data) => { setMentionDatas(data.mentions); setHasMore(data.nextPage ? true : false); + setCurrentPage(1); }) .catch((err) => alert("Cookie expired. Please log in again")); - setCurrentPage(1); }, [searchTerm, user.platforms]); if (mentionDatas === null) return ;