add game info component

Hartaithan · May 22, 2023 · 1091ae3 · 1091ae3
1 parent b615a67
commit 1091ae3
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 13 deletions.
diff --git a/components/GameInfo.tsx b/components/GameInfo.tsx
@@ -0,0 +1,56 @@
+import { type IGame } from "@/models/GameModel";
+import { Flex, Group, Title, createStyles } from "@mantine/core";
+import Image from "next/image";
+import { type FC } from "react";
+import ProgressStats from "./ProgressStats";
+import PlatformBadge from "./PlatformBadge";
+import ColumnBadge from "./ColumnBadge";
+
+interface IGameInfoProps {
+  game: IGame | null;
+}
+
+const useStyles = createStyles(() => ({
+  container: {
+    width: "100%",
+  },
+  content: {
+    flexDirection: "column",
+    flex: 1,
+  },
+  icon: { height: "auto", objectFit: "contain" },
+}));
+
+const GameInfo: FC<IGameInfoProps> = (props) => {
+  const { game } = props;
+  const { classes } = useStyles();
+
+  if (game === null) return null;
+
+  const { title, status, platform, image_url, progress } = game;
+
+  return (
+    <Group className={classes.container}>
+      <Image
+        width={250}
+        height={100}
+        className={classes.icon}
+        src={image_url}
+        alt={title ?? "game image"}
+        unoptimized
+      />
+      <Flex className={classes.content}>
+        <Title order={4} mb={4}>
+          {title}
+        </Title>
+        <Group>
+          <ColumnBadge status={status} />
+          <PlatformBadge platform={platform} />
+        </Group>
+      </Flex>
+      <ProgressStats width={300} progress={progress} />
+    </Group>
+  );
+};
+
+export default GameInfo;
diff --git a/components/ProgressStats.tsx b/components/ProgressStats.tsx
@@ -2,17 +2,18 @@ import { columnColors, columnsLabels } from "@/constants/board";
 import { calculateProgress } from "@/helpers/progress";
 import { type IGame } from "@/models/GameModel";
 import { type IProgressStats } from "@/models/ProgressModel";
-import { Text, Group, Progress, useMantineTheme } from "@mantine/core";
+import { Text, Group, Progress, useMantineTheme, Box } from "@mantine/core";
 import { useMemo, type FC, memo } from "react";
 
 interface IProgressStatsProps {
+  width?: string | number;
   progress: IGame["progress"];
 }
 
 const { platinum, complete } = columnColors;
 
 const ProgressStats: FC<IProgressStatsProps> = (props) => {
-  const { progress } = props;
+  const { width = "100%", progress } = props;
   const { colors } = useMantineTheme();
 
   const platinumColor = colors[platinum.color][platinum.shade];
@@ -23,7 +24,7 @@ const ProgressStats: FC<IProgressStatsProps> = (props) => {
   }, [progress]);
 
   return (
-    <>
+    <Box w={width}>
       <Group position="apart" mt="xs">
         <Text size={12}>{columnsLabels.platinum} Progress</Text>
         <Text size={12} fw={500}>
@@ -50,7 +51,7 @@ const ProgressStats: FC<IProgressStatsProps> = (props) => {
         size="sm"
         mt={5}
       />
-    </>
+    </Box>
   );
 };
 

diff --git a/pages/game/[id].tsx b/pages/game/[id].tsx
@@ -1,10 +1,10 @@
+import GameInfo from "@/components/GameInfo";
 import TrophyList from "@/components/TrophyList";
 import { type IPage } from "@/models/AppModel";
 import { type IGame } from "@/models/GameModel";
 import { type IFormattedResponse } from "@/models/TrophyModel";
-import { Text, Flex, Title } from "@mantine/core";
+import { Flex } from "@mantine/core";
 import { type GetServerSidePropsContext, type GetServerSideProps } from "next";
-import { useRouter } from "next/router";
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL;
 
@@ -58,7 +58,7 @@ export const getServerSideProps: GetServerSideProps<IGamePageProps> = async (
       ),
     ]);
     if (gameResponse.status === "fulfilled") {
-      game = gameResponse.value;
+      game = gameResponse.value.game ?? null;
     }
     if (trophiesResponse.status === "fulfilled") {
       trophies = trophiesResponse.value;
@@ -76,7 +76,6 @@ export const getServerSideProps: GetServerSideProps<IGamePageProps> = async (
 
 const GamePage: IPage<IGamePageProps> = (props) => {
   const { game, trophies } = props;
-  const { query } = useRouter();
 
   return (
     <Flex
@@ -87,11 +86,7 @@ const GamePage: IPage<IGamePageProps> = (props) => {
       align="center"
       py="md"
     >
-      <Title order={2}>GamePage</Title>
-      <Text>query: {JSON.stringify(query, null, 2)}</Text>
-      <Text component="pre" size={9} mb="xl">
-        game: {JSON.stringify(game, null, 2)}
-      </Text>
+      <GameInfo game={game} />
       <TrophyList trophies={trophies} />
     </Flex>
   );