From 7a1644690dde4f19a2c6faafc35e1b03c4e3eef1 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 9 Jan 2021 01:06:17 +0200
Subject: [PATCH] link to free agent post

---
 components/u/AvatarWithInfo.tsx       |  31 +++++++-
 pages/freeagents.tsx                  | 101 +++++++++++++++++---------
 pages/u/[identifier].tsx              |   2 +-
 prisma/queries/getUserByIdentifier.ts |   3 +
 4 files changed, 96 insertions(+), 41 deletions(-)

diff --git a/components/u/AvatarWithInfo.tsx b/components/u/AvatarWithInfo.tsx
index db19246cc..7095c20d8 100644
--- a/components/u/AvatarWithInfo.tsx
+++ b/components/u/AvatarWithInfo.tsx
@@ -20,7 +20,7 @@ import useUser from "lib/useUser";
 import { GetUserByIdentifierData } from "prisma/queries/getUserByIdentifier";
 import { FaGamepad, FaTwitch, FaTwitter, FaYoutube } from "react-icons/fa";
 import { FiInfo } from "react-icons/fi";
-import { RiTrophyLine } from "react-icons/ri";
+import { RiFileTextLine, RiTrophyLine } from "react-icons/ri";
 
 interface AvatarWithInfoProps {
   user: NonNullable<GetUserByIdentifierData>;
@@ -181,18 +181,41 @@ const AvatarWithInfo: React.FC<AvatarWithInfoProps> = ({
                   </Flex>
                 </>
               )}
-              <Box width="100%" textAlign="center" mt={4}>
+              <Flex
+                width="100%"
+                alignItems="center"
+                justifyContent="center"
+                mt={4}
+              >
                 {!!user.player?.switchAccountId && (
                   <MyLink
                     href={`/player/${user.player?.switchAccountId}`}
                     prefetch={true}
                   >
-                    <Button leftIcon={<RiTrophyLine />} variant="outline">
+                    <Button
+                      leftIcon={<RiTrophyLine />}
+                      variant="outline"
+                      mx={2}
+                    >
                       <Trans>View results</Trans>
                     </Button>
                   </MyLink>
                 )}
-              </Box>
+                {!!user.freeAgentPost?.id && (
+                  <MyLink
+                    href={`/freeagents?id=${user.freeAgentPost.id}`}
+                    prefetch={true}
+                  >
+                    <Button
+                      leftIcon={<RiFileTextLine />}
+                      variant="outline"
+                      mx={2}
+                    >
+                      <Trans>View free agent post</Trans>
+                    </Button>
+                  </MyLink>
+                )}
+              </Flex>
               <Top500HelpText />
             </Flex>
           </Flex>
diff --git a/pages/freeagents.tsx b/pages/freeagents.tsx
index 7732b49c4..9c4223980 100644
--- a/pages/freeagents.tsx
+++ b/pages/freeagents.tsx
@@ -26,8 +26,9 @@ import { sendData } from "lib/postData";
 import { Unpacked } from "lib/types";
 import { useMyTheme } from "lib/useMyTheme";
 import useUser from "lib/useUser";
+import { useRouter } from "next/router";
 import { GetAllFreeAgentPostsData } from "prisma/queries/getAllFreeAgentPosts";
-import { useState } from "react";
+import { RefObject, useEffect, useRef, useState } from "react";
 import { FaHeart, FaRegHeart } from "react-icons/fa";
 import {
   RiAnchorLine,
@@ -37,9 +38,28 @@ import {
 } from "react-icons/ri";
 
 const FreeAgentsPage = () => {
-  const { data, usersPost, playstyleCounts, state, dispatch } = useFreeAgents();
+  const {
+    data,
+    isLoading,
+    usersPost,
+    playstyleCounts,
+    state,
+    dispatch,
+  } = useFreeAgents();
+  const router = useRouter();
+  const postRef = useRef<HTMLDivElement>(null);
   const [modalIsOpen, setModalIsOpen] = useState(false);
 
+  const idToScrollTo = Number.isNaN(parseInt(router.query.id as any))
+    ? undefined
+    : parseInt(router.query.id as any);
+
+  useEffect(() => {
+    if (!postRef.current) return;
+
+    postRef.current.scrollIntoView();
+  }, [postRef.current]);
+
   return (
     <MyContainer>
       {modalIsOpen && (
@@ -53,40 +73,47 @@ const FreeAgentsPage = () => {
           <Trans>New free agent post</Trans>
         )}
       </Button>
-      <Center mt={6}>
-        <RadioGroup
-          value={state.playstyle ?? "ALL"}
-          onChange={(value) =>
-            dispatch({
-              type: "SET_PLAYSTYLE",
-              playstyle: value === "ALL" ? undefined : (value as Playstyle),
-            })
-          }
-        >
-          <Stack spacing={4} direction={["column", "row"]}>
-            <Radio value="ALL">
-              <Trans>
-                All (
-                {playstyleCounts.FRONTLINE +
-                  playstyleCounts.MIDLINE +
-                  playstyleCounts.BACKLINE}
-                )
-              </Trans>
-            </Radio>
-            <Radio value="FRONTLINE">
-              <Trans>Frontline ({playstyleCounts.FRONTLINE})</Trans>
-            </Radio>
-            <Radio value="MIDLINE">
-              <Trans>Support ({playstyleCounts.MIDLINE})</Trans>
-            </Radio>
-            <Radio value="BACKLINE">
-              <Trans>Backline ({playstyleCounts.BACKLINE})</Trans>
-            </Radio>
-          </Stack>
-        </RadioGroup>
-      </Center>
+      {!isLoading && (
+        <Center mt={6}>
+          <RadioGroup
+            value={state.playstyle ?? "ALL"}
+            onChange={(value) =>
+              dispatch({
+                type: "SET_PLAYSTYLE",
+                playstyle: value === "ALL" ? undefined : (value as Playstyle),
+              })
+            }
+          >
+            <Stack spacing={4} direction={["column", "row"]}>
+              <Radio value="ALL">
+                <Trans>
+                  All (
+                  {playstyleCounts.FRONTLINE +
+                    playstyleCounts.MIDLINE +
+                    playstyleCounts.BACKLINE}
+                  )
+                </Trans>
+              </Radio>
+              <Radio value="FRONTLINE">
+                <Trans>Frontline ({playstyleCounts.FRONTLINE})</Trans>
+              </Radio>
+              <Radio value="MIDLINE">
+                <Trans>Support ({playstyleCounts.MIDLINE})</Trans>
+              </Radio>
+              <Radio value="BACKLINE">
+                <Trans>Backline ({playstyleCounts.BACKLINE})</Trans>
+              </Radio>
+            </Stack>
+          </RadioGroup>
+        </Center>
+      )}
       {data.map((post) => (
-        <FreeAgentCard key={post.id} post={post} isLiked={false} />
+        <FreeAgentCard
+          key={post.id}
+          post={post}
+          isLiked={false}
+          postRef={post.id === idToScrollTo ? postRef : undefined}
+        />
       ))}
     </MyContainer>
   );
@@ -101,9 +128,11 @@ const playstyleToEmoji = {
 const FreeAgentCard = ({
   post,
   isLiked,
+  postRef,
 }: {
   post: Unpacked<GetAllFreeAgentPostsData>;
   isLiked: boolean;
+  postRef?: RefObject<HTMLDivElement>;
 }) => {
   const { themeColorShade } = useMyTheme();
   const [user] = useUser();
@@ -114,7 +143,7 @@ const FreeAgentCard = ({
 
   return (
     <>
-      <Box as="section" my={8}>
+      <Box ref={postRef} 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}>
diff --git a/pages/u/[identifier].tsx b/pages/u/[identifier].tsx
index e9213717f..809f3c680 100644
--- a/pages/u/[identifier].tsx
+++ b/pages/u/[identifier].tsx
@@ -87,7 +87,7 @@ const ProfilePage = (props: Props) => {
         <>
           <Divider my={6} />
           <MyContainer>
-            <Markdown value={user.profile.bio} />
+            <Markdown value={user.profile.bio} smallHeaders />
           </MyContainer>
         </>
       )}
diff --git a/prisma/queries/getUserByIdentifier.ts b/prisma/queries/getUserByIdentifier.ts
index 8e5f188d5..27df8dbeb 100644
--- a/prisma/queries/getUserByIdentifier.ts
+++ b/prisma/queries/getUserByIdentifier.ts
@@ -48,5 +48,8 @@ export const getUserByIdentifier = (identifier: string) =>
           switchAccountId: true,
         },
       },
+      freeAgentPost: {
+        select: { id: true },
+      },
     },
   });