Use trpc for easier communication

Author: nekiro

package-lock.json

@@ -1,5 +1,6 @@
 {
 	"name": "shibaac",
+	"version": "0.0.1",
 	"private": true,
 	"scripts": {
 		"dev": "next dev",
@@ -25,6 +26,11 @@
 		"@emotion/styled": "^11.13.5",
 		"@prisma/client": "^5.22.0",
 		"@stripe/stripe-js": "^5.2.0",
+		"@tanstack/react-query": "^4.36.1",
+		"@trpc/client": "^10.45.2",
+		"@trpc/next": "^10.45.2",
+		"@trpc/react-query": "^10.45.2",
+		"@trpc/server": "^10.45.2",
 		"@types/jsonwebtoken": "^9.0.7",
 		"@types/multer": "^1.4.12",
 		"@types/nodemailer": "^6.4.17",
@@ -52,7 +58,8 @@
 		"shibaac": "file:",
 		"speakeasy": "^2.0.0",
 		"stripe": "^17.4.0",
-		"yup": "^1.4.0"
+		"yup": "^1.4.0",
+		"zod": "^3.23.8"
 	},
 	"devDependencies": {
 		"@testing-library/jest-dom": "^6.6.3",

package.json

@@ -1,13 +1,13 @@
 import React from "react";
 import Link from "next/link";
-import { Button as ChakraButton } from "@chakra-ui/react";
+import { Button as ChakraButton, ButtonProps as ChakraButtonProps } from "@chakra-ui/react";
 
 const btnTypeToColor = { danger: "red", primary: "violet" };
 
 export type ButtonType = "button" | "submit" | "reset";
 export type ButtonColorType = "danger" | "primary";
 
-export interface ButtonProps {
+export interface ButtonProps extends ChakraButtonProps {
 	value: string;
 	size?: string;
 	type?: ButtonType;

src/components/Button.tsx

@@ -4,7 +4,7 @@ import { Table, Thead, Tbody, Tr, Th, Td } from "@chakra-ui/react";
 
 export interface StripedTableProps {
 	head?: { text: string }[];
-	body: { text: string; href?: string }[][];
+	body: { text: string | number; href?: string }[][];
 }
 
 const StripedTable = ({ head, body }: StripedTableProps) => {
@@ -23,13 +23,7 @@ const StripedTable = ({ head, body }: StripedTableProps) => {
 				{body.map((row, index) => (
 					<Tr key={`${index}`}>
 						{row.map((data, dataIndex) => (
-							<Td key={`${data.text} ${dataIndex}`}>
-								{data.href ? (
-									<Link href={data.href} text={data.text} />
-								) : (
-									data.text
-								)}
-							</Td>
+							<Td key={`${data.text} ${dataIndex}`}>{data.href ? <Link href={data.href} text={data.text} /> : data.text}</Td>
 						))}
 					</Tr>
 				))}

src/components/StrippedTable.tsx

@@ -25,7 +25,7 @@ const Head = ({ title = "shibaac", description = "Automatic Account Creator" }:
 					description: description,
 					//url: properties.canonical,
 					locale: "en",
-					site_name: "SHIBAac",
+					site_name: "shibaac",
 				}}
 			/>
 		</>

src/layout/Head.tsx

@@ -6,25 +6,22 @@ import Link from "../components/Link";
 import { Box, LayoutProps } from "@chakra-ui/react";
 import StripedTable from "../components/StrippedTable";
 import { type ProtocolStatusCache } from "../cache/protocolStatus";
-import { players } from ".prisma/client";
+import { trpc } from "@util/trpc";
 
 const SideBar = (props: LayoutProps) => {
 	const [serverStatus, setServerStatus] = useState<ProtocolStatusCache>();
-	const [topPlayers, setTopPlayers] = useState<players[]>();
+
+	const topPlayers = trpc.player.top5.useQuery();
 	const [isLoading, setIsLoading] = useState(false);
 
 	useEffect(() => {
 		const fetchData = async () => {
 			setIsLoading(true);
 
-			const [players, status] = await Promise.all([
-				fetchApi<{ players: any[] }>("GET", `/api/player/top5`),
-				fetchApi<{ status: ProtocolStatusCache }>("GET", `/api/status`),
-			]);
+			const [status] = await Promise.all([fetchApi<{ status: ProtocolStatusCache }>("GET", `/api/status`)]);
 
-			if (players.success && status.success) {
+			if (status.success) {
 				setIsLoading(false);
-				setTopPlayers(players.players || []);
 				setServerStatus(status.status);
 			}
 		};
@@ -34,7 +31,7 @@ const SideBar = (props: LayoutProps) => {
 
 	return (
 		<Box minWidth="15em" {...props}>
-			<Panel header="Server Status" isLoading={isLoading}>
+			<Panel header="Server Status" isLoading={isLoading || !topPlayers.data}>
 				<table className="table table-condensed table-content table-striped">
 					<tbody>
 						<tr>
@@ -51,14 +48,14 @@ const SideBar = (props: LayoutProps) => {
 				<StripedTable
 					head={[{ text: "Name" }, { text: "Level" }]}
 					body={
-						topPlayers && topPlayers.length > 0
-							? topPlayers.map((player, index) => [
+						topPlayers.data && topPlayers.data.length > 0
+							? topPlayers.data.map((player, index) => [
 									{
 										text: `${index + 1}. ${player.name}`,
 										href: `/character/${player.name}`,
 									},
 									{
-										text: player.level,
+										text: player.level.toString(),
 									},
 								])
 							: [

src/layout/SideBar.tsx

@@ -3,14 +3,15 @@ import { UserContextWrapper } from "../hooks/useUser";
 import { ChakraProvider } from "@chakra-ui/react";
 import { Theme, Fonts } from "../layout/theme";
 import React from "react";
+import { trpc } from "../utils/trpc";
 
 // @ts-ignore
 BigInt.prototype.toJSON = function () {
 	const int = Number.parseInt(this.toString());
 	return int ?? this.toString();
 };
 
-export default function MyApp({ Component, pageProps }) {
+const MyApp = ({ Component, pageProps }) => {
 	return (
 		<UserContextWrapper>
 			<ChakraProvider theme={Theme}>
@@ -21,4 +22,6 @@ export default function MyApp({ Component, pageProps }) {
 			</ChakraProvider>
 		</UserContextWrapper>
 	);
-}
+};
+
+export default trpc.withTRPC(MyApp);