sendou.ink/components/freeagents/FreeAgentSection.tsx

import { Box, Divider, Flex, IconButton } from "@chakra-ui/react";
import { t, Trans } from "@lingui/macro";
import Flag from "components/common/Flag";
import Markdown from "components/common/Markdown";
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 { countries } from "countries-list";
import { CSSVariables } from "utils/CSSVariables";
import Image from "next/image";
import { RefObject } from "react";
import { FaHeart, FaRegHeart } from "react-icons/fa";
import {
  RiAnchorLine,
  RiMicFill,
  RiPaintLine,
  RiSwordLine,
} from "react-icons/ri";
import { Unpacked } from "utils/types";
import { FreeAgentsGet } from "pages/api/free-agents";
import { useMutation } from "hooks/common";
import { useSWRConfig } from "swr";

const playstyleToEmoji = {
  FRONTLINE: RiSwordLine,
  MIDLINE: RiPaintLine,
  BACKLINE: RiAnchorLine,
} as const;

const FreeAgentSection = ({
  post,
  isLiked,
  canLike,
  showXp,
  showPlusServerMembership,
  postRef,
}: {
  post: Unpacked<FreeAgentsGet>;
  isLiked: boolean;
  canLike: boolean;
  showXp: boolean;
  showPlusServerMembership: boolean;
  postRef?: RefObject<HTMLDivElement>;
}) => {
  const { mutate } = useSWRConfig();
  const addLikeMutation = useMutation<{ postId: number }>({
    url: "/api/free-agents/likes",
    method: "POST",
    afterSuccess: () => {
      mutate("/api/free-agents/likes");
    },
  });
  const deleteLikeMutation = useMutation<{ postId: number }>({
    url: "/api/free-agents/likes",
    method: "DELETE",
    afterSuccess: () => {
      mutate("/api/free-agents/likes");
    },
  });

  const handleClick = () =>
    isLiked
      ? deleteLikeMutation.mutate({ postId: post.id })
      : addLikeMutation.mutate({ postId: post.id });

  return (
    <>
      <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}>
            {post.user.username}#{post.user.discriminator}
          </MyLink>
        </Flex>

        {showXp ? (
          <Flex my={2} ml={1} align="center" fontSize="sm" fontWeight="bold">
            <Image
              src="/layout/xsearch.png"
              height={24}
              width={24}
              alt="X Power icon"
            />
            <Box ml={1}>{post.user.player?.placements[0]?.xPower}</Box>
          </Flex>
        ) : null}

        {showPlusServerMembership ? (
          <Flex my={2} ml={1} align="center" fontSize="sm" fontWeight="bold">
            <Image
              src="/layout/plus.png"
              height={24}
              width={24}
              alt="Plus Server icon"
            />
            <Box ml={1}>+{post.user.plusStatus?.membershipTier}</Box>
          </Flex>
        ) : null}

        {post.user.profile?.country && (
          <Flex align="center" ml={2} my={2}>
            <Box as="span" mr={1} mt={1}>
              <Flag countryCode={post.user.profile.country} />{" "}
            </Box>
            {
              Object.entries(countries).find(
                ([key]) => key === post.user.profile?.country
              )![1].name
            }
          </Flex>
        )}

        {post.user.profile && post.user.profile?.weaponPool.length > 0 && (
          <Box my={2}>
            {post.user.profile.weaponPool.map((wpn) => (
              <WeaponImage key={wpn} name={wpn} size={32} />
            ))}
          </Box>
        )}

        <Flex mt={4} mb={2}>
          {post.playstyles.map((style) => (
            <Box
              key={style}
              w={6}
              h={6}
              mx={1}
              color={CSSVariables.themeColor}
              as={playstyleToEmoji[style]}
            />
          ))}
        </Flex>

        {post.canVC !== "NO" && (
          <Flex alignItems="center" my={4}>
            <Box
              w={6}
              h={6}
              mx={1}
              mr={2}
              color={CSSVariables.themeColor}
              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}
          wordBreak="break-word"
        >
          <Markdown value={post.content} smallHeaders />
        </SubTextCollapse>
        {post.user.profile?.bio && (
          <SubTextCollapse title={t`Bio`} mt={4} wordBreak="break-word">
            <Markdown value={post.user.profile.bio} smallHeaders />
          </SubTextCollapse>
        )}
        {canLike && (
          <IconButton
            color="red.500"
            aria-label="Like"
            size="lg"
            isRound
            mt={4}
            variant="ghost"
            icon={isLiked ? <FaHeart /> : <FaRegHeart />}
            disabled={
              addLikeMutation.isMutating || deleteLikeMutation.isMutating
            }
            onClick={handleClick}
          />
        )}
      </Box>
      <Divider />
    </>
  );
};

export default FreeAgentSection;