players page get from db

components/LoadingBoundary.tsx

@@ -1,38 +0,0 @@
-import { ApolloError } from "@apollo/client";
-import { Alert, AlertDescription, AlertIcon, Spinner } from "@chakra-ui/core";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-
-interface Props {
-  children: React.ReactNode;
-  loading?: boolean;
-  error?: ApolloError;
-}
-
-const LoadingBoundary: React.FC<Props> = ({ children, loading, error }) => {
-  const [showSpinner, setShowSpinner] = useState(false);
-  const router = useRouter();
-
-  useEffect(() => {
-    const timer = setTimeout(() => setShowSpinner(true), 1000);
-
-    return () => clearTimeout(timer);
-  }, []);
-
-  if (loading || router.isFallback) {
-    return showSpinner ? <Spinner size="xl" /> : null;
-  }
-
-  if (error) {
-    return (
-      <Alert status="error">
-        <AlertIcon />
-        <AlertDescription>{error.message}</AlertDescription>
-      </Alert>
-    );
-  }
-
-  return <>{children}</>;
-};
-
-export default LoadingBoundary;

pages/player/[id].tsx

@@ -1,12 +1,11 @@
+import { t } from "@lingui/macro";
 import { PrismaClient } from "@prisma/client";
-import LoadingBoundary from "components/LoadingBoundary";
-import {
-  GetPlayersXRankPlacementsDocument,
-  useGetPlayersXRankPlacementsQuery,
-} from "generated/graphql";
-import { initializeApollo } from "lib/apollo";
+import Breadcrumbs from "components/Breadcrumbs";
 import { GetStaticPaths, GetStaticProps } from "next";
-import { useRouter } from "next/router";
+import {
+  GetPlayersTop500Placements,
+  getPlayersTop500Placements,
+} from "prisma/queries/getPlayersTop500Placements";
 import Player from "scenes/Player";
 
 const prisma = new PrismaClient();
@@ -20,41 +19,38 @@ export const getStaticPaths: GetStaticPaths = async () => {
   };
 };
 
-export const getStaticProps: GetStaticProps = async ({ params }) => {
-  const apolloClient = initializeApollo(null, { prisma: new PrismaClient() });
+interface Props {
+  placements: GetPlayersTop500Placements;
+}
 
-  const data = await apolloClient.query({
-    query: GetPlayersXRankPlacementsDocument,
-    variables: {
-      // FIXME: why ! needed?
-      switchAccountId: params!.id,
-    },
+export const getStaticProps: GetStaticProps<Props> = async ({ params }) => {
+  const placements = await getPlayersTop500Placements({
+    prisma,
+    switchAccountId: params!.id as string,
   });
 
-  console.log({ params });
-  console.log({ data });
-
   return {
     props: {
-      initialApolloState: apolloClient.cache.extract(),
-      switchAccountId: params!.id,
+      placements,
     },
-    //notfound
+    notFound: !placements.length,
   };
 };
 
-const PlayerPage = ({ switchAccountId }: { switchAccountId: string }) => {
-  const router = useRouter();
-
-  const { data } = useGetPlayersXRankPlacementsQuery({
-    variables: { switchAccountId },
-    skip: router.isFallback,
-  });
+const PlayerPage = ({ placements }: Props) => {
+  // FIXME: spinner
+  if (!placements) return null;
 
   return (
-    <LoadingBoundary>
-      <Player placements={data!.getPlayersXRankPlacements} />
-    </LoadingBoundary>
+    <>
+      <Breadcrumbs
+        pages={[
+          { name: t`Top 500 Browser`, link: "/top500" },
+          { name: placements[0].playerName },
+        ]}
+      />
+      <Player placements={placements} />
+    </>
   );
 };
 

pages/u/[identifier].tsx

@@ -61,6 +61,7 @@ const ProfilePage = (props: Props) => {
   const [loggedInUser] = useUser();
 
   // same as router.isFallback
+  // FIXME: return null
   if (!user) return null;
 
   return (

prisma/queries/getPlayersTop500Placements.ts

@@ -0,0 +1,19 @@
+import { PrismaClient } from "@prisma/client";
+import { Unwrap } from "lib/types";
+
+export type GetPlayersTop500Placements = Unwrap<
+  ReturnType<typeof getPlayersTop500Placements>
+>;
+
+export const getPlayersTop500Placements = async ({
+  prisma,
+  switchAccountId,
+}: {
+  prisma: PrismaClient;
+  switchAccountId: string;
+}) => {
+  return prisma.xRankPlacement.findMany({
+    where: { switchAccountId },
+    orderBy: [{ month: "desc" }, { year: "desc" }],
+  });
+};

scenes/Player/index.tsx

@@ -9,21 +9,18 @@ import {
   TableRow,
 } from "components/Table";
 import WeaponImage from "components/WeaponImage";
-import { GetPlayersXRankPlacementsQuery } from "generated/graphql";
 import { getRankingString } from "lib/strings";
 import { useTranslation } from "lib/useMockT";
 import { useMyTheme } from "lib/useMyTheme";
+import { GetPlayersTop500Placements } from "prisma/queries/getPlayersTop500Placements";
 
 interface Props {
-  placements: NonNullable<
-    GetPlayersXRankPlacementsQuery["getPlayersXRankPlacements"]
-  >;
+  placements: GetPlayersTop500Placements;
 }
 
 const PlayerPage: React.FC<Props> = ({ placements }) => {
   const { t } = useTranslation();
   const { gray } = useMyTheme();
-  console.log({ placements });
 
   return (
     <>