Merge pull request #151 from TueNguyen2911/main

Fixes PaginationControl upper page limit is always 100
codefordenver · Oct 7, 2021 · b34d60f · b34d60f
2 parents 4701078 + d0c1b7a
commit b34d60f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/frontend/src/components/Home.js b/frontend/src/components/Home.js
@@ -61,8 +61,8 @@ export default function Home() {
 
   const [page, setPage] = useState(1);
   const [perpage, setPerpage] = useState(10);
+  const [maxpages, setMaxPages] = useState(100);
   const [search, setSearch] = useState('');
-
   const [leads, setLeads] = useState([]);
 
   const history = useHistory();
@@ -83,25 +83,34 @@ export default function Home() {
 
   useEffect(() => {
     let url = `${API_HOST}/leads?page=${page}&perpage=${perpage}`;
+    const n_pagesUrl = `${API_HOST}/leads/n_pages?perpage=${perpage}`;
     if (search) {
       url += `&search=${search}`;
     }
     const token = localStorage.getItem('partnerFinderToken');
     if (!token) {
       history.push('/login');
     }
+    const headers = {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    };
     fetch(url, {
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${token}`,
-      },
+      headers: headers,
     })
       .then((response) => checkForErrors(response))
       .then((data) => setLeads(data.leads))
       // TODO: create state for error and set state instead of just console.error
       // conditional rendering if there is an error
       .catch((error) => console.error(error.message));
-  }, [page, perpage, search]);
+
+    fetch(n_pagesUrl, {
+      headers: headers,
+    })
+      .then((response) => checkForErrors(response))
+      .then((data) => setMaxPages(data.pages))
+      .catch((error) => console.error(error.message));
+  }, [page, perpage, maxpages, search]);
 
   return (
     <div id="home">
@@ -132,7 +141,7 @@ export default function Home() {
           <PaginationControl
             page={page}
             perpage={perpage}
-            maxpages={100}
+            maxpages={maxpages}
             setPage={setPage}
             setPerpage={setPerpage}
           />

diff --git a/frontend/src/components/PaginationControl.js b/frontend/src/components/PaginationControl.js
@@ -7,6 +7,7 @@ import { DEBOUNCE_TIME_MS } from '../constants';
 const useStyles = makeStyles((theme) => ({
   paginationTextField: {
     width: '115px',
+    marginLeft: '5px',
   },
 }));
 
@@ -66,7 +67,9 @@ export default function PaginationControl({
       <Typography>
         {page} / {maxpages}
       </Typography>
-      <Button onClick={() => setPage(page + 1 <= 100 ? page + 1 : 100)}>
+      <Button
+        onClick={() => setPage(page + 1 <= maxpages ? page + 1 : maxpages)}
+      >
         <ChevronRightIcon></ChevronRightIcon>
       </Button>
     </Fragment>