Task 573 next previous buttons (#103)

Demo of changes: 

![PrevNextPR](https://github.com/HacktheHill/track-the-hack/assets/95104238/6e7964eb-7b64-463c-9655-65bdc246a11d)

Changes:
Added new hacker routers to get the next and previous hacker from a
unique id (in the url) using cursor-based pagination. Buttons are just
preliminary and should be changed based on desired design later

Author: kevinwu15

src/pages/hackers/hacker.tsx

@@ -27,6 +27,9 @@ const Hacker: NextPage = () => {
 
 	const hackerQuery = trpc.hackers.get.useQuery({ id: id ?? "" }, { enabled: !!id });
 	const presenceQuery = trpc.presence.getFromHackerId.useQuery({ id: id ?? "" }, { enabled: !!id });
+	
+	const nextHackerQuery = trpc.hackers.getNext.useQuery({ id: id ?? "" }, { enabled: !!id });
+	const prevHackerQuery = trpc.hackers.getPrev.useQuery({ id: id ?? "" }, { enabled: !!id });
 
 	if (hackerQuery.isLoading || hackerQuery.data == null) {
 		return (
@@ -82,6 +85,24 @@ const Hacker: NextPage = () => {
 		>
 			<div className="mx-auto flex max-w-2xl flex-col gap-4">
 				<OnlyRole filter={role => role === Role.ORGANIZER || role === Role.SPONSOR}>
+					<div className="flex justify-between">
+						{prevHackerQuery.data ? (<a
+							href={`/hackers/hacker?id=${prevHackerQuery.data.id}`}
+							className="flex items-center justify-center gap-2 rounded-md bg-gray-800 px-4 py-2 text-white hover:bg-gray-700"
+						>
+							Previous
+						</a>
+						) : (
+							<a></a>
+						)}
+						{nextHackerQuery.data && ( <a
+							href={`/hackers/hacker?id=${nextHackerQuery.data.id}`}
+							className="flex items-center justify-center gap-2 rounded-md bg-gray-800 px-4 py-2 text-white hover:bg-gray-700"
+						>
+							Next
+						</a>
+						)}
+					</div>
 					<HackerView hackerData={hackerQuery.data} presenceData={presenceQuery.data} />
 				</OnlyRole>
 				<OnlyRole filter={role => role === Role.HACKER}>{t("not-authorized-to-view-this-page")}</OnlyRole>

src/server/api/routers/hackers.ts

@@ -42,6 +42,60 @@ export const hackerRouter = createTRPCRouter({
 
 			return hacker;
 		}),
+	
+	// Get next hacker in db from an id
+	getNext: publicProcedure
+	.input(
+		z
+			.object({
+				id: z.string(),
+			}),
+	)
+	.query(async ({ ctx, input }) => {
+		let hacker: HackerInfo | null = null;
+		if ("id" in input) {
+			hacker = await ctx.prisma.hackerInfo.findFirst({
+				take: 1,
+				skip: 1,
+				cursor: {
+					id: input.id,
+				},
+			});
+		}
+
+		if (!hacker) {
+			throw new Error("Hacker not found");
+		}
+
+		return hacker;
+	}),
+
+	// Get prev hacker in db from an id
+	getPrev: publicProcedure
+	.input(
+		z
+			.object({
+				id: z.string(),
+			}),
+	)
+	.query(async ({ ctx, input }) => {
+		let hacker: HackerInfo | null = null;
+		if ("id" in input) {
+			hacker = await ctx.prisma.hackerInfo.findFirst({
+				take: -1,
+				skip: 1,
+				cursor: {
+					id: input.id,
+				},
+			});
+		}
+
+		if (!hacker) {
+			throw new Error("Hacker not found");
+		}
+
+		return hacker;
+	}),
 
 	// Get all hackers
 	all: protectedProcedure