change(front/back): Addressing #117

backend/src/controllers/getRepoPages.ts

@@ -0,0 +1,13 @@
+import {Request, Response} from "express";
+import getRepoPages from "../githubapi/getRepoPages";
+import {internalErrorHandler} from "../types/errorHandler";
+
+export const getNumRepoPages = (req: Request, res: Response) => {
+	getRepoPages(req.headers.token as string)
+		.then(lastPageNumber => {
+			res.json({
+				lastPageNumber
+			});
+		})
+		.catch(internalErrorHandler(req, res));
+};

backend/src/githubapi/getRepoPages.ts

@@ -0,0 +1,34 @@
+import axios from "axios";
+import {GithubRepo, isGithubRepo} from "../types/github";
+import {GITHUB_BASE_URL, createGithubHeader} from "./util";
+
+export default (token: string): Promise<GithubRepo[]> =>
+	new Promise<GithubRepo[]>((resolve, reject) => {
+		//we want to get the total number of pages of repos
+		//so that in the frontend we can click the page buttons and have the correct number of pages
+		let lastPageNumber = 1;
+		axios
+			.get(`${GITHUB_BASE_URL}/user/repos`, createGithubHeader(token)) //get the first page of repos
+			.then(resp => {
+				//check resp.headers.link for rel="last"
+				//once we have the link, extract the page number using a regex
+				//this will be the number of total pages of repos
+
+				//get the link header
+				const linkHeader = resp.headers.link;
+				//get the last page number
+				if (linkHeader != null) {
+					//if there is a link header, extract the last page number
+					const lastPageRegex = /<(.*)>; rel="last"/;
+					const lastPageMatch = linkHeader.match(lastPageRegex);
+					if (lastPageMatch != null) {
+						//if there is a match, extract the last page number
+						lastPageNumber = parseInt(
+							lastPageMatch[1].split("=")[1]
+						);
+					}
+				}
+				console.dir(lastPageNumber);
+			})
+			.catch(reject);
+	});

backend/src/routes/v1.ts

@@ -2,6 +2,7 @@
 import {Router} from "express";
 import {getRepoList} from "../controllers/getRepoList";
 import postSettings from "../controllers/postSettings";
+import {getNumRepoPages} from "../controllers/getRepoPages";
 import {settingsValidator} from "../validators/terraformValidator";
 
 const apiV1Router = Router();
@@ -17,6 +18,9 @@ apiV1Router.get("/", (_req, res) =>
 //Repository information
 apiV1Router.get("/repo", getRepoList);
 
+//Number of pages of repos
+apiV1Router.get("/repoPages", getNumRepoPages);
+
 apiV1Router.post("/settings", settingsValidator, postSettings);
 
 //Edit terraform settings

frontend/src/components/PersistentDrawer.tsx

@@ -8,6 +8,7 @@ import {FormControl, RadioGroup, FormControlLabel} from "@mui/material";
 import Radio from "@mui/material/Radio";
 import {lightTheme} from "../style/themes";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import Pagination from "@mui/material/Pagination";
 
 const DrawerHeader = styled("div")(({theme}) => ({
 	display: "flex",
@@ -18,6 +19,13 @@ const DrawerHeader = styled("div")(({theme}) => ({
 	justifyContent: "center"
 }));
 
+const DrawerFooter = styled("div")(({theme}) => ({
+	display: "flex",
+	alignItems: "center",
+	padding: theme.spacing(0, 1),
+	justifyContent: "center"
+}));
+
 export interface GithubRepo {
 	name: string;
 	full_name: string;
@@ -27,6 +35,7 @@ export interface GithubRepo {
 export default function PersistentDrawer(props: {
 	repos: GithubRepo[];
 	shareRepo: (repo_full_name: string) => void;
+	repoPages: number;
 }) {
 	const theme = useTheme();
 	const [value, setValue] = React.useState("false");
@@ -75,6 +84,13 @@ export default function PersistentDrawer(props: {
 						<Divider />
 					</Box>
 				))}
+				<DrawerFooter>
+					<Pagination
+						count={props.repoPages}
+						size="small"
+						color="primary"
+					/>
+				</DrawerFooter>
 			</Drawer>
 		</ThemeProvider>
 	);

frontend/src/pages/toolManager.tsx

@@ -13,6 +13,7 @@ import Grid from "@mui/material/Grid";
 export default function ToolManager() {
 	const [repoList, setRepoList] = React.useState([]);
 	const [selectedRepo, setSelectedRepo] = React.useState<string>("");
+	const [repoPages, setRepoPages] = React.useState<number>(1);
 
 	const setSelectedRepoFromDrawer = (repo_full_name: string) => {
 		setSelectedRepo(repo_full_name);
@@ -21,16 +22,26 @@ export default function ToolManager() {
 
 	//this is the same as componentDidMount
 	React.useEffect(() => {
+		//api call to get repos
 		axios
 			.get(`https://${CONFIG.BACKEND_URL}${CONFIG.REPO_PATH}`)
 			.then((response: any) => {
-				console.dir(response.data);
 				setRepoList(response.data.repos);
 			})
 			.catch((error: any) => {
 				/**TODO: Render an error component */
 				console.error(error);
 			});
+		//api call to get number of pages of repos
+		axios
+			.get(`https://${CONFIG.BACKEND_URL}${CONFIG.REPO_PATH}/repoPages`)
+			.then((response: any) => {
+				setRepoPages(response.data.lastPageNumber);
+			})
+			.catch((error: any) => {
+				//TODO: Render an error component
+				console.error(error);
+			});
 	}, []);
 
 	return (
@@ -39,6 +50,7 @@ export default function ToolManager() {
 				<PersistentDrawer
 					repos={repoList}
 					shareRepo={setSelectedRepoFromDrawer}
+					repoPages={repoPages}
 				/>
 				<Box
 					style={{