fa page renders something

components/common/Markdown.tsx

@@ -26,9 +26,14 @@ import MyLink from "./MyLink";
 interface MarkdownProps {
   value: string;
   allowAll?: boolean;
+  smallHeaders?: boolean;
 }
 
-const Markdown: React.FC<MarkdownProps> = ({ value, allowAll = false }) => {
+const Markdown: React.FC<MarkdownProps> = ({
+  value,
+  allowAll = false,
+  smallHeaders = false,
+}) => {
   const { themeColorHex: themeColor } = useMyTheme();
 
   //https://github.com/mustaphaturhan/chakra-ui-markdown-renderer/blob/master/src/index.js
@@ -141,6 +146,21 @@ const Markdown: React.FC<MarkdownProps> = ({ value, allowAll = false }) => {
       heading: (props: any) => {
         const { children } = props;
 
+        if (smallHeaders) {
+          return (
+            <Heading
+              as="h3"
+              mt={2}
+              mb={1}
+              size="md"
+              {...getCoreProps(props)}
+              fontFamily="'Rubik', sans-serif"
+            >
+              {children}
+            </Heading>
+          );
+        }
+
         if (props.level === 1) {
           return (
             <Heading

hooks/freeagents.ts

@@ -0,0 +1,14 @@
+import useUser from "lib/useUser";
+import { GetAllFreeAgentPostsData } from "prisma/queries/getAllFreeAgentPosts";
+import useSWR from "swr";
+
+export function useFreeAgents() {
+  const [user] = useUser();
+  const { data } = useSWR<GetAllFreeAgentPostsData>("/api/freeagents");
+
+  return {
+    data: data ?? [],
+    isLoading: !data,
+    usersPost: data?.find((post) => post.user.discordId === user?.discordId),
+  };
+}

pages/api/freeagents/index.ts

@@ -2,9 +2,13 @@ import { getMySession } from "lib/getMySession";
 import { freeAgentPostSchema } from "lib/validators/fapost";
 import { NextApiRequest, NextApiResponse } from "next";
 import prisma from "prisma/client";
+import { getAllFreeAgentPosts } from "prisma/queries/getAllFreeAgentPosts";
 
 const freeAgentsHandler = async (req: NextApiRequest, res: NextApiResponse) => {
   switch (req.method) {
+    case "GET":
+      await getHandler(req, res);
+      break;
     case "PUT":
       await putHandler(req, res);
       break;
@@ -45,4 +49,9 @@ async function deleteHandler(req: NextApiRequest, res: NextApiResponse) {
   res.status(200).end();
 }
 
+async function getHandler(_: NextApiRequest, res: NextApiResponse) {
+  const freeAgents = await getAllFreeAgentPosts();
+  res.status(200).json(freeAgents);
+}
+
 export default freeAgentsHandler;

pages/freeagents.tsx

@@ -1,20 +1,63 @@
-import { Button } from "@chakra-ui/react";
+import { Box, Button, Divider } from "@chakra-ui/react";
 import { t, Trans } from "@lingui/macro";
 import Breadcrumbs from "components/common/Breadcrumbs";
+import Markdown from "components/common/Markdown";
+import MyContainer from "components/common/MyContainer";
+import SubText from "components/common/SubText";
+import UserAvatar from "components/common/UserAvatar";
 import FAModal from "components/freeagents/FAModal";
+import { useFreeAgents } from "hooks/freeagents";
+import { Unpacked } from "lib/types";
+import { GetAllFreeAgentPostsData } from "prisma/queries/getAllFreeAgentPosts";
 import { useState } from "react";
 
-interface Props {}
-
-const FreeAgentsPage: React.FC<Props> = ({}) => {
+const FreeAgentsPage = () => {
+  const { data, usersPost } = useFreeAgents();
   const [modalIsOpen, setModalIsOpen] = useState(false);
+
   return (
-    <>
+    <MyContainer>
       {modalIsOpen && <FAModal onClose={() => setModalIsOpen(false)} />}
       <Breadcrumbs pages={[{ name: t`Free Agents` }]} />
       <Button onClick={() => setModalIsOpen(true)}>
         <Trans>New free agent post</Trans>
       </Button>
+      {[...data, ...data, ...data].map((post) => (
+        <FreeAgentCard post={post} />
+      ))}
+    </MyContainer>
+  );
+};
+
+const FreeAgentCard = ({
+  post,
+}: {
+  post: Unpacked<GetAllFreeAgentPostsData>;
+}) => {
+  const [showBio, setShowBio] = useState(true);
+  return (
+    <>
+      <Box my={8}>
+        <UserAvatar size="xl" user={post.user} />
+        <SubText mt={4}>
+          <Trans>Free agent post</Trans>
+        </SubText>
+        <Markdown value={post.content} smallHeaders />
+        {post.user.profile?.bio && (
+          <Button onClick={() => setShowBio(!showBio)}>
+            {showBio ? <Trans>Hide bio</Trans> : <Trans>Show bio</Trans>}
+          </Button>
+        )}
+        {showBio && post.user.profile?.bio && (
+          <>
+            <SubText mt={4}>
+              <Trans>Bio</Trans>
+            </SubText>
+            <Markdown value={post.user.profile.bio} smallHeaders />
+          </>
+        )}
+      </Box>
+      <Divider />
     </>
   );
 };

prisma/scripts/seed/freeAgentPost.ts

@@ -0,0 +1,21 @@
+import { Prisma } from "@prisma/client";
+
+const getFreeAgentPosts = (
+  testUserId: number
+): Prisma.FreeAgentPostCreateArgs["data"][] => {
+  return [
+    {
+      canVC: "YES",
+      content:
+        "# Availability  \n Really good!\n\n*lorem ipsum* **lorem ipsum**",
+      user: {
+        connect: {
+          id: testUserId,
+        },
+      },
+      playstyles: ["FRONTLINE", "MIDLINE"],
+    },
+  ];
+};
+
+export default getFreeAgentPosts;

prisma/scripts/seed/index.ts

@@ -2,6 +2,7 @@ import fs from "fs";
 import path from "path";
 import prisma from "../../client";
 import getBuilds from "./build";
+import getFreeAgentPosts from "./freeAgentPost";
 import getUsers from "./user";
 
 const main = async () => {
@@ -33,6 +34,14 @@ const main = async () => {
   );
 
   console.log("Builds created");
+
+  await Promise.all(
+    getFreeAgentPosts(testUser.id).map((data) =>
+      prisma.freeAgentPost.create({ data })
+    )
+  );
+
+  console.log("FA posts created");
 };
 
 function throwIfNotLocalhost() {
@@ -59,6 +68,7 @@ function throwIfNotLocalhost() {
 }
 
 async function deleteExistingRecords() {
+  await prisma.freeAgentPost.deleteMany({});
   await prisma.salmonRunRecord.deleteMany({});
   await prisma.salmonRunRotation.deleteMany({});
   await prisma.build.deleteMany({});

prisma/scripts/seed/user.ts

@@ -3,9 +3,9 @@ import { Prisma } from "@prisma/client";
 const getUsers = (): Prisma.UserCreateArgs["data"][] => {
   const result = [
     {
-      username: "N-ZAP",
-      discriminator: "6227",
-      discordId: "455039198672453645",
+      username: "Sendou",
+      discriminator: "4059",
+      discordId: "79237403620945920",
       discordAvatar: "f809176af93132c3db5f0a5019e96339",
       profile: {
         create: {