liking functionality

hooks/freeagents.ts

@@ -60,13 +60,18 @@ export function useFreeAgents() {
     return { playstyle: router.query.playstyle as Playstyle };
   }
 
+  const filteredPostsData = (postsData ?? []).filter(
+    (post) => !state.playstyle || post.playstyles.includes(state.playstyle)
+  );
+
   return {
-    postsData: (postsData ?? []).filter(
-      (post) => !state.playstyle || post.playstyles.includes(state.playstyle)
-    ),
+    postsData: filteredPostsData,
     likesData,
     isLoading: !postsData,
     usersPost,
+    matchedPosts: (likesData?.matchedPostIds ?? []).map((id) =>
+      (filteredPostsData ?? []).find((post) => post.id === id)
+    ),
     playstyleCounts: (postsData ?? []).reduce(
       (acc, cur) => {
         cur.playstyles.forEach((playstyle) => acc[playstyle]++);

pages/api/freeagents/like.ts

@@ -19,7 +19,6 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
 };
 
 export type FreeAgentLikeInfo = {
-  likersCount: number;
   likedPostIds: number[];
   matchedPostIds: number[];
 };
@@ -51,7 +50,6 @@ async function getHandler(req: NextApiRequest, res: NextApiResponse) {
   );
 
   res.status(200).json({
-    likersCount: post.likersPosts.length,
     likedPostIds: post.likedPosts.map((post) => post.id),
     matchedPostIds: post.likedPosts
       .filter((post) => likerPostIds.has(post.id))

pages/freeagents.tsx

@@ -1,4 +1,6 @@
 import {
+  Alert,
+  AlertIcon,
   Box,
   Button,
   Center,
@@ -8,6 +10,8 @@ import {
   Radio,
   RadioGroup,
   Stack,
+  Wrap,
+  WrapItem,
 } from "@chakra-ui/react";
 import { t, Trans } from "@lingui/macro";
 import { Playstyle } from "@prisma/client";
@@ -44,18 +48,21 @@ const FreeAgentsPage = () => {
     likesData,
     isLoading,
     usersPost,
+    matchedPosts,
     playstyleCounts,
     state,
     dispatch,
   } = useFreeAgents();
   const [user] = useUser();
   const router = useRouter();
+
+  const [postIdToScrollTo, setPostIdToScrollTo] = useState<undefined | number>(
+    undefined
+  );
   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);
+  console.log("getIdToScrollTo", getIdToScrollTo());
 
   useEffect(() => {
     if (!postRef.current) return;
@@ -110,6 +117,14 @@ const FreeAgentsPage = () => {
           </RadioGroup>
         </Center>
       )}
+      {usersPost && likesData ? (
+        <MatchesInfo
+          matchedPosts={matchedPosts}
+          focusOnMatch={(id) => setPostIdToScrollTo(id)}
+        />
+      ) : (
+        <Box height="6.5rem" />
+      )}
       {postsData.map((post) => (
         <FreeAgentCard
           key={post.id}
@@ -118,11 +133,58 @@ const FreeAgentsPage = () => {
           canLike={
             !!user && post.user.discordId !== user.discordId && !!usersPost
           }
-          postRef={post.id === idToScrollTo ? postRef : undefined}
+          postRef={post.id === getIdToScrollTo() ? postRef : undefined}
         />
       ))}
     </MyContainer>
   );
+
+  function getIdToScrollTo() {
+    if (postIdToScrollTo) return postIdToScrollTo;
+
+    return Number.isNaN(parseInt(router.query.id as any))
+      ? undefined
+      : parseInt(router.query.id as any);
+  }
+};
+
+const MatchesInfo = ({
+  matchedPosts,
+  focusOnMatch,
+}: {
+  matchedPosts: (Unpacked<GetAllFreeAgentPostsData> | undefined)[];
+  focusOnMatch: (id: number) => void;
+}) => {
+  if (!matchedPosts.length)
+    return (
+      <Alert status="info" my={6}>
+        <AlertIcon />
+        <Trans>
+          Once you match with other free agents they are shown here.
+        </Trans>
+      </Alert>
+    );
+
+  return (
+    <Flex flexDir="column" align="center">
+      <SubText mt={4}>
+        <Trans>Matches</Trans>
+      </SubText>
+      <Wrap mt={4} mb={2}>
+        {matchedPosts.map((post) =>
+          post ? (
+            <WrapItem key={post.id}>
+              <UserAvatar
+                user={post.user}
+                onClick={() => focusOnMatch(post.id)}
+                cursor="pointer"
+              />
+            </WrapItem>
+          ) : null
+        )}
+      </Wrap>
+    </Flex>
+  );
 };
 
 const playstyleToEmoji = {
@@ -239,6 +301,7 @@ const FreeAgentCard = ({
             aria-label="Like"
             size="lg"
             isRound
+            mt={4}
             variant="ghost"
             icon={isLiked ? <FaHeart /> : <FaRegHeart />}
             onClick={handleClick}

prisma/queries/getAllFreeAgentPosts.ts

@@ -5,8 +5,11 @@ export type GetAllFreeAgentPostsData = Prisma.PromiseReturnType<
   typeof getAllFreeAgentPosts
 >;
 
-export const getAllFreeAgentPosts = async () =>
-  prisma.freeAgentPost.findMany({
+export const getAllFreeAgentPosts = async () => {
+  const dateMonthAgo = new Date();
+  dateMonthAgo.setMonth(dateMonthAgo.getMonth() - 1);
+
+  const post = prisma.freeAgentPost.findMany({
     select: {
       id: true,
       canVC: true,
@@ -32,4 +35,10 @@ export const getAllFreeAgentPosts = async () =>
     orderBy: {
       updatedAt: "desc",
     },
+    where: {
+      updatedAt: { gte: dateMonthAgo },
+    },
   });
+
+  return post;
+};