feat: Add character page

next.config.mjs

@@ -3,16 +3,25 @@
  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
  * This is especially useful for Docker builds.
  */
-!process.env.SKIP_ENV_VALIDATION && (await import("./src/env/server.mjs"));
+!process.env.SKIP_ENV_VALIDATION && (await import('./src/env/server.mjs'));
 
 /** @type {import("next").NextConfig} */
 const config = {
   reactStrictMode: true,
   /* If trying out the experimental appDir, comment the i18n config out
    * @see https://github.com/vercel/next.js/issues/41980 */
   i18n: {
-    locales: ["en"],
-    defaultLocale: "en",
+    locales: ['en'],
+    defaultLocale: 'en',
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**',
+      },
+    ],
   },
 };
+
 export default config;

package.json

@@ -6,7 +6,7 @@
     "build": "next build",
     "dev": "next dev",
     "postinstall": "prisma generate",
-    "lint": "next lint && eslint --fix --max-warnings=0 && prettier --config .prettierrc.json '**/*.{tsx,ts}' --write",
+    "lint": "next lint && eslint --fix --max-warnings=0 && prettier --config .prettierrc.json \"**/*.{tsx,ts}\" --write",
     "start": "next start",
     "prepare": "husky install"
   },

src/pages/character/[id].tsx

@@ -0,0 +1,110 @@
+import { useRouter } from 'next/router';
+import { api } from '../../utils/api';
+
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  Stack,
+  Heading,
+  Text,
+  Button,
+  Box,
+  Flex,
+  Center,
+  Image,
+  AspectRatio,
+} from '@chakra-ui/react';
+
+const Post = () => {
+  const router = useRouter();
+  const { id } = router.query;
+
+  // https://trpc.io/docs/nextjs#6-make-an-api-request
+  const characterRequest = api.characterRouter.getCharacter.useQuery({
+    id: id ? +id : 0,
+  });
+
+  const characterInfo = characterRequest.data;
+
+  return (
+    <Box w="100%" h="100vh" bg="black">
+      <Center pb={4}>
+        <Image src="/LordOfRingLogo.png" alt="Logo" width="300px" />
+      </Center>
+      <Center>
+        <Card
+          direction={{ base: 'column', sm: 'row' }}
+          overflow="hidden"
+          variant="outline"
+          bg="black"
+          borderRadius="0"
+          border="none"
+        >
+          <Stack>
+            <CardBody>
+              <Heading color="white" py={2} size="lg">
+                {characterInfo?.name}
+              </Heading>
+
+              <Heading size="sm" color="white" py={2}>
+                General Information
+              </Heading>
+              <Box
+                overflow="hidden"
+                backgroundColor="gray.900"
+                border="none"
+                borderRadius="none"
+                p={3}
+                mb={3}
+              >
+                <Text py="1" color="white">
+                  Gender: {characterInfo?.gender}
+                </Text>
+                <Text py="1" color="white">
+                  Race: {characterInfo?.race}
+                </Text>
+                <Text py="1" color="white">
+                  Realm: {characterInfo?.realm}
+                </Text>
+              </Box>
+
+              <Heading size="sm" color="white" py={2}>
+                Wiki URL
+              </Heading>
+              <Box
+                overflow="hidden"
+                backgroundColor="gray.900"
+                border="none"
+                borderRadius="none"
+                p={2}
+              >
+                <Text color="white">{characterInfo?.wikiUrl}</Text>
+              </Box>
+            </CardBody>
+
+            <CardFooter>
+              <Button variant="solid" colorScheme="yellow" borderRadius="0">
+                Edit Character
+              </Button>
+            </CardFooter>
+          </Stack>
+          {characterInfo && (
+            <Center boxSize="sm">
+              <AspectRatio maxH="350px" ratio={3 / 4} flex="1 1 auto">
+                <Image
+                  src={characterInfo.imageUrl}
+                  alt={`Picture of ${characterInfo.name}`}
+                  objectFit="cover"
+                />
+              </AspectRatio>
+            </Center>
+          )}
+        </Card>
+      </Center>
+    </Box>
+  );
+};
+
+export default Post;

src/server/api/routers/character.ts

@@ -14,4 +14,18 @@ export const characterRouter = createTRPCRouter({
     const count = await ctx.prisma.character.count();
     return count;
   }),
+  getCharacter: publicProcedure
+    .input(z.object({ id: z.number() }))
+    .query(async ({ ctx, input }) => {
+      // Implement the getCharacter procedure in src/server/api/routers/character.ts so that the procedure returns a character given the character's id
+      // https://www.prisma.io/docs/reference/api-reference/prisma-client-reference#findunique
+      const character = await ctx.prisma.character.findUnique({
+        where: { id: input.id },
+      });
+      return character;
+    }),
+  getAllCharacters: publicProcedure.query(async ({ ctx }) => {
+    const allCharacters = await ctx.prisma.character.findMany();
+    return allCharacters;
+  }),
 });

src/server/api/trpc.ts

@@ -31,6 +31,7 @@ type CreateContextOptions = Record<string, never>;
  * - trpc's `createSSGHelpers` where we don't have req/res
  * @see https://create.t3.gg/en/usage/trpc#-servertrpccontextts
  */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const createInnerTRPCContext = (_opts: CreateContextOptions) => {
   return {
     prisma,
@@ -42,6 +43,7 @@ const createInnerTRPCContext = (_opts: CreateContextOptions) => {
  * process every request that goes through your tRPC endpoint
  * @link https://trpc.io/docs/context
  */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const createTRPCContext = (_opts: CreateNextContextOptions) => {
   return createInnerTRPCContext({});
 };