fa frontend info displayed

components/common/SubTextCollapse.tsx

@@ -16,8 +16,8 @@ const SubTextCollapse: React.FC<Props & BoxProps> = ({
 }) => {
   const [isOpen, setIsOpen] = useState(isOpenByDefault);
   return (
-    <>
-      <SubText onClick={() => setIsOpen(!isOpen)} {...props} cursor="pointer">
+    <Box {...props}>
+      <SubText onClick={() => setIsOpen(!isOpen)} cursor="pointer" mb={2}>
         <Flex userSelect="none">
           <Box w={4} transform="rotate(0deg)">
             {isOpen ? "▼" : "►"}
@@ -26,7 +26,7 @@ const SubTextCollapse: React.FC<Props & BoxProps> = ({
         </Flex>
       </SubText>
       {isOpen && <>{children}</>}
-    </>
+    </Box>
   );
 };
 

pages/freeagents.tsx

@@ -1,15 +1,26 @@
-import { Box, Button, Divider } from "@chakra-ui/react";
+import { Box, Button, Divider, Flex } 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 MyLink from "components/common/MyLink";
+import SubText from "components/common/SubText";
 import SubTextCollapse from "components/common/SubTextCollapse";
 import UserAvatar from "components/common/UserAvatar";
+import WeaponImage from "components/common/WeaponImage";
 import FAModal from "components/freeagents/FAModal";
+import { countries, getEmojiFlag } from "countries-list";
 import { useFreeAgents } from "hooks/freeagents";
 import { Unpacked } from "lib/types";
+import { useMyTheme } from "lib/useMyTheme";
 import { GetAllFreeAgentPostsData } from "prisma/queries/getAllFreeAgentPosts";
 import { useState } from "react";
+import {
+  RiAnchorLine,
+  RiMicFill,
+  RiPaintLine,
+  RiSwordLine,
+} from "react-icons/ri";
 
 const FreeAgentsPage = () => {
   const { data, usersPost } = useFreeAgents();
@@ -29,16 +40,87 @@ const FreeAgentsPage = () => {
   );
 };
 
+const playstyleToEmoji = {
+  FRONTLINE: RiSwordLine,
+  MIDLINE: RiPaintLine,
+  BACKLINE: RiAnchorLine,
+} as const;
+
 const FreeAgentCard = ({
   post,
 }: {
   post: Unpacked<GetAllFreeAgentPostsData>;
 }) => {
+  const { themeColorShade } = useMyTheme();
   return (
     <>
-      <Box my={8}>
-        <UserAvatar size="xl" user={post.user} />
-        <SubTextCollapse title={t`Free agent post`} isOpenByDefault mt={4}>
+      <Box as="section" my={8}>
+        <Flex alignItems="center" fontWeight="bold" fontSize="1.25rem">
+          <UserAvatar user={post.user} mr={3} />
+          <MyLink href={`/u/${post.user.discordId}`} isColored={false}>
+            {post.user.username}#{post.user.discriminator}
+          </MyLink>
+        </Flex>
+
+        {post.user.profile?.country && (
+          <Box ml={2} my={2}>
+            <Box as="span" mr={2}>
+              {getEmojiFlag(post.user.profile.country)}{" "}
+            </Box>
+            {
+              Object.entries(countries).find(
+                ([key]) => key === post.user.profile?.country
+              )![1].name
+            }
+          </Box>
+        )}
+
+        {post.user.profile?.weaponPool.length && (
+          <Box my={2}>
+            {post.user.profile.weaponPool.map((wpn) => (
+              <WeaponImage name={wpn} size={32} />
+            ))}
+          </Box>
+        )}
+
+        <Flex mt={4} mb={2}>
+          {post.playstyles.map((style) => (
+            <Box
+              w={6}
+              h={6}
+              mx={1}
+              color={themeColorShade}
+              as={playstyleToEmoji[style]}
+            />
+          ))}
+        </Flex>
+
+        {post.canVC !== "NO" && (
+          <Flex alignItems="center" my={4}>
+            <Box
+              w={6}
+              h={6}
+              mx={1}
+              mr={2}
+              color={themeColorShade}
+              as={RiMicFill}
+            />
+            <SubText>
+              {post.canVC === "YES" ? (
+                <Trans>Can VC</Trans>
+              ) : (
+                <Trans>Can VC sometimes</Trans>
+              )}
+            </SubText>
+          </Flex>
+        )}
+
+        <SubTextCollapse
+          title={t`Free agent post`}
+          isOpenByDefault
+          mt={4}
+          my={6}
+        >
           <Markdown value={post.content} smallHeaders />
         </SubTextCollapse>
         {post.user.profile?.bio && (

prisma/queries/getAllFreeAgentPosts.ts

@@ -24,7 +24,6 @@ export const getAllFreeAgentPosts = async () =>
               weaponPool: true,
               country: true,
               bio: true,
-              twitterName: true,
             },
           },
         },

prisma/scripts/seed/user.ts

@@ -6,7 +6,7 @@ const getUsers = (): Prisma.UserCreateArgs["data"][] => {
       username: "Sendou",
       discriminator: "4059",
       discordId: "79237403620945920",
-      discordAvatar: "f809176af93132c3db5f0a5019e96339",
+      discordAvatar: "59c321a21f73c18eda69359ccabdc38e",
       profile: {
         create: {
           bio: "My cool bio! Supports markdown too: **bolded**",