From f5c0a4196e6bd404d65fdb02fe271b905cdfd5ad Mon Sep 17 00:00:00 2001 From: Michael Fatemi Date: Wed, 25 Nov 2020 19:07:13 -0500 Subject: [PATCH] Added article pagination --- .eslintcache | 2 +- .vscode/settings.json | 3 ++ src/components/ArticleList.tsx | 53 ++++++++++++++++++++++++++++++---- 3 files changed, 51 insertions(+), 7 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.eslintcache b/.eslintcache index 46ead8b..2676e21 100644 --- a/.eslintcache +++ b/.eslintcache @@ -1 +1 @@ -[{"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\reportWebVitals.js":"1","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\InitiativeList.tsx":"2","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\hooks\\useFooter.tsx":"3","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\hooks\\useMission.tsx":"4","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\index.tsx":"5","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\InitiativeColumn.tsx":"6","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\index.tsx":"7","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\App.tsx":"8","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\initiatives.tsx":"9","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Navbar.tsx":"10","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\InitiativeRow.tsx":"11","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Hero.tsx":"12","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\404.tsx":"13","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\news.tsx":"14","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\ArticleList.tsx":"15","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\ArticleRow.tsx":"16","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\newsArticle.tsx":"17","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Mission.tsx":"18","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Layout.tsx":"19"},{"size":362,"mtime":1606326357566,"results":"20","hashOfConfig":"21"},{"size":501,"mtime":1606328501647,"results":"22","hashOfConfig":"21"},{"size":462,"mtime":1606328149896,"results":"23","hashOfConfig":"21"},{"size":511,"mtime":1606328176836,"results":"24","hashOfConfig":"21"},{"size":500,"mtime":1606328294452,"results":"25","hashOfConfig":"21"},{"size":618,"mtime":1606331752021,"results":"26","hashOfConfig":"21"},{"size":510,"mtime":1606329069016,"results":"27","hashOfConfig":"21"},{"size":798,"mtime":1606331983608,"results":"28","hashOfConfig":"21"},{"size":605,"mtime":1606329101801,"results":"29","hashOfConfig":"21"},{"size":627,"mtime":1606331620633,"results":"30","hashOfConfig":"21"},{"size":727,"mtime":1606329117521,"results":"31","hashOfConfig":"21"},{"size":671,"mtime":1606331360251,"results":"32","hashOfConfig":"21"},{"size":209,"mtime":1606329157659,"results":"33","hashOfConfig":"21"},{"size":155,"mtime":1606329326076,"results":"34","hashOfConfig":"21"},{"size":539,"mtime":1606329945945,"results":"35","hashOfConfig":"21"},{"size":1014,"mtime":1606332759971,"results":"36","hashOfConfig":"21"},{"size":1034,"mtime":1606332728657,"results":"37","hashOfConfig":"21"},{"size":658,"mtime":1606331766968,"results":"38","hashOfConfig":"21"},{"size":564,"mtime":1606331555747,"results":"39","hashOfConfig":"21"},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"e5jqdg",{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"50","messages":"51","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"52","messages":"53","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"54","messages":"55","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"56","messages":"57","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"58","messages":"59","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"60","messages":"61","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"62","messages":"63","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"64","messages":"65","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"66","messages":"67","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"68","messages":"69","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"70","messages":"71","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"72","messages":"73","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"74","messages":"75","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"76","messages":"77","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\reportWebVitals.js",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\InitiativeList.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\hooks\\useFooter.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\hooks\\useMission.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\index.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\InitiativeColumn.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\index.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\App.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\initiatives.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Navbar.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\InitiativeRow.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Hero.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\404.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\news.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\ArticleList.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\ArticleRow.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\newsArticle.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Mission.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Layout.tsx",[]] \ No newline at end of file +[{"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\reportWebVitals.js":"1","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\InitiativeList.tsx":"2","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\hooks\\useFooter.tsx":"3","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\hooks\\useMission.tsx":"4","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\index.tsx":"5","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\InitiativeColumn.tsx":"6","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\index.tsx":"7","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\App.tsx":"8","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\initiatives.tsx":"9","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Navbar.tsx":"10","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\InitiativeRow.tsx":"11","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Hero.tsx":"12","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\404.tsx":"13","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\news.tsx":"14","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\ArticleList.tsx":"15","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\ArticleRow.tsx":"16","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\newsArticle.tsx":"17","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Mission.tsx":"18","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Layout.tsx":"19","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Footer.tsx":"20"},{"size":362,"mtime":1606326357566,"results":"21","hashOfConfig":"22"},{"size":531,"mtime":1606348100862,"results":"23","hashOfConfig":"22"},{"size":462,"mtime":1606328149896,"results":"24","hashOfConfig":"22"},{"size":511,"mtime":1606328176836,"results":"25","hashOfConfig":"22"},{"size":495,"mtime":1606345497930,"results":"26","hashOfConfig":"22"},{"size":618,"mtime":1606331752021,"results":"27","hashOfConfig":"22"},{"size":510,"mtime":1606329069016,"results":"28","hashOfConfig":"22"},{"size":798,"mtime":1606331983608,"results":"29","hashOfConfig":"22"},{"size":606,"mtime":1606345456179,"results":"30","hashOfConfig":"22"},{"size":627,"mtime":1606331620633,"results":"31","hashOfConfig":"22"},{"size":727,"mtime":1606329117521,"results":"32","hashOfConfig":"22"},{"size":671,"mtime":1606331360251,"results":"33","hashOfConfig":"22"},{"size":209,"mtime":1606329157659,"results":"34","hashOfConfig":"22"},{"size":255,"mtime":1606345458665,"results":"35","hashOfConfig":"22"},{"size":1540,"mtime":1606349201104,"results":"36","hashOfConfig":"22"},{"size":1014,"mtime":1606332759971,"results":"37","hashOfConfig":"22"},{"size":1053,"mtime":1606345461880,"results":"38","hashOfConfig":"22"},{"size":658,"mtime":1606331766968,"results":"39","hashOfConfig":"22"},{"size":564,"mtime":1606331555747,"results":"40","hashOfConfig":"22"},{"size":713,"mtime":1606345684335,"results":"41","hashOfConfig":"22"},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"e5jqdg",{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"50","messages":"51","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"52","messages":"53","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"54","messages":"55","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"56","messages":"57","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"58","messages":"59","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"60","messages":"61","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"62","messages":"63","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"64","messages":"65","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"66","messages":"67","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"68","messages":"69","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"70","messages":"71","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"72","messages":"73","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"74","messages":"75","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"76","messages":"77","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"78","messages":"79","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"80","messages":"81","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\reportWebVitals.js",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\InitiativeList.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\hooks\\useFooter.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\hooks\\useMission.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\index.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\InitiativeColumn.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\index.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\App.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\initiatives.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Navbar.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\InitiativeRow.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Hero.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\404.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\news.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\ArticleList.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\ArticleRow.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\newsArticle.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Mission.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Layout.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Footer.tsx",[]] \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..68ecdba --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "typescript.tsdk": "node_modules\\typescript\\lib" +} \ No newline at end of file diff --git a/src/components/ArticleList.tsx b/src/components/ArticleList.tsx index 65dc1cb..4ff6c0e 100644 --- a/src/components/ArticleList.tsx +++ b/src/components/ArticleList.tsx @@ -1,23 +1,64 @@ import React from 'react'; -import useQuery from '../hooks/useInitiatives'; import ArticleRow from './ArticleRow'; +import sanity from '../sanity'; export default function ArticleList() { - let articles = useQuery( - '*[_type == "article"] | order(publish_date desc) [0...3]' - ); + let [articles, setArticles] = React.useState([]); + let [reachedEnd, setReachedEnd] = React.useState(false); + + // Fetch the next three articles + const addArticles = async (last_date: string, last_title: string) => { + const query = `*[_type == "article" && ( + publish_date < $last_date || + ( + publish_date == $last_date && + title > $last_title + ) + )] | order(publish_date desc, title) [0...3]`; + + const params = { + last_date, + last_title, + }; + + let articles = await sanity.fetch(query, params); + + console.log(articles.length); + + if (articles.length < 3) { + setReachedEnd(true); + } + + // Add the next articles + setArticles((oldArticles) => oldArticles.concat(articles)); + }; + + React.useEffect(() => { + addArticles('3000-01-01', ''); + }, []); if (!articles) { return null; } - console.log(articles); - return (
{articles.map((article) => { return ; })} + + {!reachedEnd ? ( + + ) : ( +
No more articles to show
+ )}
); }