Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-05-15 15:32:39 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

freeagents translated

Browse Source
This commit is contained in:
Sendou 2020-06-27 00:12:43 +03:00
parent 909c4f6ab0
commit f4af040db0
11 changed files with 240 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
frontend-react/public/locales/en/translation.json
View File

@ -1411,5 +1411,62 @@
"Number of placements": "Number of placements",
"Best placement / power": "Best placement / power",
"noPlacementsPrompt": "If you have reached Top 500 in a <1>finished</1> X Rank season you can have it displayed here! Make sure your Twitter account is verified on Discord to get it showing on your sendou.ink profile and then contact Sendou#0043 on Discord with your in-game nick. Once set up new results are added automatically and no further action is needed unless you change your name on Twitter."
},
"freeagents": {
"loginPrompt": "Log in to make your own free agent post and start matching!",
"pleaseWaitPrompt": "You need to wait a week after deleting your old free agent post before making a new one",
"Hide filters": "Hide filters",
"Show filters": "Show filters",
"Playstyle": "Playstyle",
"Region": "Region",
"Any": "Any",
"Frontline/Slayer": "Frontline/Slayer",
"Midline/Support": "Midline/Support",
"Backline/Anchor": "Backline/Anchor",
"Europe": "Europe",
"The Americas": "The Americas",
"Oceania": "Oceania",
"Other": "Other",
"Weapon": "Weapon",
"Edit free agent post": "Edit free agent post",
"New free agent post": "New free agent post",
"MATCHES": "MATCHES",
"youHaveAMatch": "You have a match with <1>{{matchFullName}}</1>! Contact them to see if you can get a team going",
"getLiking": "This match is revealed when you like them back!",
"getLiking_plural": "These matches are revealed when you like them back!",
"No free agents found with the current filter": "No free agents found with the current filter",
"No more free agents to show": "No more free agents to show",
"Return to the top": "Return to the top",
"Can VC": "Can VC",
"Can VC usually": "Can VC usually",
"Can VC sometimes": "Can VC sometimes",
"Can't VC": "Can't VC",
"Show more information": "Show more information",
"Activity": "Activity",
"Looking for": "Looking for",
"Past experience": "Past experience",
"Description": "Description",
"Free agent post added": "Free agent post added",
"Free agent post edited": "Free agent post edited",
"Free agent post deleted": "Free agent post deleted",
"Adding a new free agent post": "Adding a new free agent post",
"Editing a free agent post": "Editing a free agent post",
"Delete free agent post": "Delete free agent post",
"deleteNotif": "Note that if you decide to delete your post you need to wait a week before posting a new one.",
"Confirm deletion": "Confirm deletion",
"theyAreSynced": "Profile picture, Discord name, Twitter user, weapon pool and Top 500 history are automatically synced up with your profile. Also please note that the post automatically sent to Discord can't be edited afterwards so you want to set these before making a post.",
"Playstyles": "Playstyles",
"Required field": "Required field",
"Value too long": "Value too long",
"Free agent has reached Top 500 in X Rank": "Free agent has reached Top 500 in X Rank",
"Can you voice chat?": "Can you voice chat?",
"Yes": "Yes",
"Usually": "Usually",
"Sometimes": "Sometimes",
"No": "No",
"Past competitive experience": "Past competitive experience",
"What is your activity like on a typical week?": "What is your activity like on a typical week?",
"What are you looking from a team?": "What are you looking from a team?",
"Free word": "Free word"
}
}

BIN
frontend-react/src/assets/questionMark.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

12
frontend-react/src/components/elements/RadioGroup.tsx
View File

@ -3,7 +3,7 @@ import { RadioGroup as ChakraRadioGroup, Radio, Box } from "@chakra-ui/core"
import MyThemeContext from "../../themeContext"
interface RadioGroupProps {
options: string[]
options: { label: string; value: string }[]
value: string
label?: string
setValue: (value: any) => void
@ -29,14 +29,14 @@ const RadioGroup: React.FC<RadioGroupProps> = ({
onChange={(e) => setValue(e.target.value)}
value={value}
>
{options.map((option) => (
{options.map(({ label, value }) => (
<Radio
key={option}
key={value}
variantColor={themeColor}
value={option}
isChecked={value === option}
value={value}
isChecked={value === value}
>
{option}
{label}
</Radio>
))}
</ChakraRadioGroup>

3
frontend-react/src/components/elements/Select.tsx
View File

@ -115,7 +115,7 @@ const Select: React.FC<SelectProps> = ({
}
return (
<Box>
<Box zIndex={99999999}>
{label && <Label required={required}>{label}</Label>}
<ReactSelect
className="basic-single"
@ -180,6 +180,7 @@ const Select: React.FC<SelectProps> = ({
color: getOptionColor(isFocused),
}
},
menu: (styles) => ({ ...styles, zIndex: 999 }),
}}
/>
</Box>

84
frontend-react/src/components/freeagents/FAPostModal.tsx
View File

@ -26,6 +26,7 @@ import { UPDATE_FREE_AGENT_POST } from "../../graphql/mutations/updateFreeAgentP
import { HIDE_FREE_AGENT_POST } from "../../graphql/mutations/hideFreeAgentPost"
import Alert from "../elements/Alert"
import { FREE_AGENT_MATCHES } from "../../graphql/queries/freeAgentMatches"
import { useTranslation } from "react-i18next"
interface FAPostModalProps {
closeModal: () => void
@ -33,6 +34,7 @@ interface FAPostModalProps {
}
const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
const { t } = useTranslation()
const [form, setForm] = useState<Partial<AddFreeAgentPostVars>>(
post ? post : {}
)
@ -49,7 +51,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
onCompleted: (data) => {
closeModal()
toast({
description: `Free agent post added`,
description: t("freeagents;Free agent post added"),
position: "top-right",
status: "success",
duration: 10000,
@ -57,7 +59,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
},
onError: (error) => {
toast({
title: "An error occurred",
title: t("users;An error occurred"),
description: error.message,
position: "top-right",
status: "error",
@ -75,7 +77,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
onCompleted: (data) => {
closeModal()
toast({
description: `Free agent post edited`,
description: t("freeagents;Free agent post edited"),
position: "top-right",
status: "success",
duration: 10000,
@ -83,7 +85,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
},
onError: (error) => {
toast({
title: "An error occurred",
title: t("users;An error occurred"),
description: error.message,
position: "top-right",
status: "error",
@ -101,7 +103,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
onCompleted: (data) => {
closeModal()
toast({
description: `Free agent post deleted`,
description: t("freeagents;Free agent post deleted"),
position: "top-right",
status: "success",
duration: 10000,
@ -109,7 +111,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
},
onError: (error) => {
toast({
title: "An error occurred",
title: t("users;An error occurred"),
description: error.message,
position: "top-right",
status: "error",
@ -149,8 +151,8 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
<Modal
title={
actionType === "NEW"
? "Adding a new free agent post"
: "Editing a free agent post"
? t("freeagents;Adding a new free agent post")
: t("freeagents;Editing a free agent post")
}
closeModal={closeModal}
>
@ -162,41 +164,33 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
cursor="pointer"
onClick={() => setDeleting(true)}
>
Delete free agent post
{t("freeagents;Delete free agent post")}
</Box>
)}
{deleting && (
<>
<Box color={grayWithShade}>
Note that if you decide to delete your post you need to wait a week
before posting a new one.
</Box>
<Box color={grayWithShade}>{t("freeagents;deleteNotif")}</Box>
<Flex flexWrap="wrap" mt="1em">
<Box mr="1em">
<Button onClick={() => hideFreeAgentPost()} loading={hideLoading}>
Confirm deletion
{t("freeagents;Confirm deletion")}
</Button>
</Box>
<Button outlined onClick={() => setDeleting(false)}>
Cancel
{t("users;Cancel")}
</Button>
</Flex>
</>
)}
{actionType === "NEW" && (
<Alert status="info">
Profile picture, Discord name, Twitter user, weapon pool and Top 500
history are automatically synced up with your profile. Also please
note that the post automatically sent to Discord can't be edited
afterwards so you want to set these before making a post.
</Alert>
<Alert status="info">{t("freeagents;theyAreSynced")}</Alert>
)}
<FormControl
isRequired
isInvalid={showErrors && form.playstyles?.length === 0}
mt="1em"
>
<FormLabel htmlFor="playstyles">Playstyles</FormLabel>
<FormLabel htmlFor="playstyles">{t("freeagents;Playstyles")}</FormLabel>
<CheckboxGroup
id="playstyles"
variantColor={themeColor}
@ -207,15 +201,21 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
})
}
>
<Checkbox value="FRONTLINE">Frontline/Slayer</Checkbox>
<Checkbox value="MIDLINE">Midline/Support</Checkbox>
<Checkbox value="BACKLINE">Backline/Anchor</Checkbox>
<Checkbox value="FRONTLINE">
{t("freeagents;Frontline/Slayer")}
</Checkbox>
<Checkbox value="MIDLINE">{t("freeagents;Midline/Support")}</Checkbox>
<Checkbox value="BACKLINE">
{t("freeagents;Backline/Anchor")}
</Checkbox>
</CheckboxGroup>
<FormErrorMessage>Required field</FormErrorMessage>
<FormErrorMessage>{t("freeagents;Required field")}</FormErrorMessage>
</FormControl>
<FormControl isRequired isInvalid={showErrors && !form.can_vc} mt="1em">
<FormLabel htmlFor="canVc">Can you voice chat?</FormLabel>
<FormLabel htmlFor="canVc">
{t("freeagents;Can you voice chat?")}
</FormLabel>
<RadioGroup
id="canVc"
variantColor={themeColor}
@ -226,12 +226,12 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
})
}
>
<Radio value="YES">Yes</Radio>
<Radio value="USUALLY">Usually</Radio>
<Radio value="SOMETIMES">Sometimes</Radio>
<Radio value="NO">No</Radio>
<Radio value="YES">{t("freeagents;Yes")}</Radio>
<Radio value="USUALLY">{t("freeagents;Usually")}</Radio>
<Radio value="SOMETIMES">{t("freeagents;Sometimes")}</Radio>
<Radio value="NO">{t("freeagents;No")}</Radio>
</RadioGroup>
<FormErrorMessage>Required field</FormErrorMessage>
<FormErrorMessage>{t("freeagents;Required field")}</FormErrorMessage>
</FormControl>
<FormControl
@ -243,7 +243,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
mt="1em"
>
<FormLabel htmlFor="pastExperience">
Past competitive experience
{t("freeagents;Past competitive experience")}
</FormLabel>
<TextArea
id="pastExperience"
@ -253,7 +253,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
value={form.past_experience ?? ""}
limit={100}
/>
<FormErrorMessage>Value too long</FormErrorMessage>
<FormErrorMessage>{t("freeagents;Value too long")}</FormErrorMessage>
</FormControl>
<FormControl
@ -261,7 +261,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
mt="1em"
>
<FormLabel htmlFor="activity">
What is your activity like on a typical week?
{t("freeagents;What is your activity like on a typical week?")}
</FormLabel>
<TextArea
id="activity"
@ -271,7 +271,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
value={form.activity ?? ""}
limit={100}
/>
<FormErrorMessage>Value too long</FormErrorMessage>
<FormErrorMessage>{t("freeagents;Value too long")}</FormErrorMessage>
</FormControl>
<FormControl
@ -281,7 +281,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
mt="1em"
>
<FormLabel htmlFor="lookingFor">
What are you looking from a team?
{t("freeagents;What are you looking from a team?")}
</FormLabel>
<TextArea
id="lookingFor"
@ -291,7 +291,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
value={form.looking_for ?? ""}
limit={100}
/>
<FormErrorMessage>Value too long</FormErrorMessage>
<FormErrorMessage>{t("freeagents;Value too long")}</FormErrorMessage>
</FormControl>
<FormControl
@ -300,7 +300,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
}
mt="1em"
>
<FormLabel htmlFor="lookingFor">Free word</FormLabel>
<FormLabel htmlFor="lookingFor">{t("freeagents;Free word")}</FormLabel>
<TextArea
id="lookingFor"
setValue={(value: string) =>
@ -310,7 +310,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
height="150px"
limit={1000}
/>
<FormErrorMessage>Value too long</FormErrorMessage>
<FormErrorMessage>{t("freeagents;Value too long")}</FormErrorMessage>
</FormControl>
<Flex flexWrap="wrap" mt="1em">
@ -319,11 +319,11 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
onClick={() => handleSubmit()}
loading={loading || editLoading}
>
Submit
{t("users;Submit")}
</Button>
</Box>
<Button outlined onClick={() => closeModal()}>
Cancel
{t("users;Cancel")}
</Button>
</Flex>
</Modal>

14
frontend-react/src/components/freeagents/FreeAgentCard.tsx
View File

@ -86,10 +86,10 @@ const FreeAgentCard: React.FC<FreeAgentCardProps> = ({
{discord_user.top500 && (
<Image
src={top500}
alt="x rank top 500 logo"
alt={t("freeagents;Free agent has reached Top 500 in X Rank")}
height="40px"
width="auto"
title="Free agent has reached Top 500 in X Rank"
title={t("freeagents;Free agent has reached Top 500 in X Rank")}
/>
)}
</Box>
@ -161,7 +161,7 @@ const FreeAgentCard: React.FC<FreeAgentCardProps> = ({
{canBeExpanded && (
<IconButton
variant="ghost"
aria-label="More information"
aria-label={t("freeagents;Show more information")}
isRound
size="lg"
icon={expanded ? FaMinus : FaPlus}
@ -174,7 +174,7 @@ const FreeAgentCard: React.FC<FreeAgentCardProps> = ({
{post.activity && (
<Box>
<Heading size="md" color={themeColorWithShade}>
Activity
{t("freeagents;Activity")}
</Heading>
{post.activity}
</Box>
@ -182,7 +182,7 @@ const FreeAgentCard: React.FC<FreeAgentCardProps> = ({
{post.looking_for && (
<Box mt={post.activity ? "1em" : undefined}>
<Heading size="md" color={themeColorWithShade}>
Looking for
{t("freeagents;Looking for")}
</Heading>
{post.looking_for}
</Box>
@ -190,7 +190,7 @@ const FreeAgentCard: React.FC<FreeAgentCardProps> = ({
{post.past_experience && (
<Box mt={post.activity || post.looking_for ? "1em" : undefined}>
<Heading size="md" color={themeColorWithShade}>
Past experience
{t("freeagents;Past experience")}
</Heading>
{post.past_experience}
</Box>
@ -204,7 +204,7 @@ const FreeAgentCard: React.FC<FreeAgentCardProps> = ({
}
>
<Heading size="md" color={themeColorWithShade}>
Description
{t("freeagents;Description")}
</Heading>
{post.description}
</Box>

56
frontend-react/src/components/freeagents/FreeAgentsPage.tsx
View File

@ -27,6 +27,7 @@ import {
} from "../../graphql/queries/freeAgentMatches"
import Matches from "./Matches"
import Alert from "../elements/Alert"
import { useTranslation, Trans } from "react-i18next"
const playstyleToEnum = {
"Frontline/Slayer": "FRONTLINE",
@ -35,6 +36,7 @@ const playstyleToEnum = {
} as const
const FreeAgentsPage: React.FC<RouteComponentProps> = () => {
const { t } = useTranslation()
const [weapon, setWeapon] = useState<Weapon | null>(null)
const [showFilters, setShowFilters] = useState(false)
const [showModal, setShowModal] = useState(false)
@ -69,8 +71,8 @@ const FreeAgentsPage: React.FC<RouteComponentProps> = () => {
const buttonText =
ownFAPost && !ownFAPost.hidden
? "Edit free agent post"
: "New free agent post"
? t("freeagents;Edit free agent post")
: t("freeagents;New free agent post")
const altWeaponMap = new Map([
["Splattershot", "Hero Shot Replica"],
@ -140,7 +142,7 @@ const FreeAgentsPage: React.FC<RouteComponentProps> = () => {
return (
<Box maxW="300px">
<Alert status="info" mt="0">
Log in to make your own free agent post and start matching!
{t("freeagents;loginPrompt")}
</Alert>
</Box>
)
@ -151,8 +153,7 @@ const FreeAgentsPage: React.FC<RouteComponentProps> = () => {
return (
<Box maxW="300px">
<Alert status="info" mt="0">
You need to wait a week after deleting your old free agent post
before making a new one
{t("freeagents;pleaseWaitPrompt")}
</Alert>
</Box>
)
@ -166,12 +167,16 @@ const FreeAgentsPage: React.FC<RouteComponentProps> = () => {
)
}
const name = userData!.user!.username
const disc = userData!.user!.discord_id
const matchFullName = `${name}#${disc}`
return (
<>
<Helmet>
<title>Free Agents | sendou.ink</title>
<title>{t("navigation;Free Agents")} | sendou.ink</title>
</Helmet>
<PageHeader title="Free Agents" />
<PageHeader title={t("navigation;Free Agents")} />
{showModal && (
<FAPostModal
closeModal={() => setShowModal(false)}
@ -181,7 +186,9 @@ const FreeAgentsPage: React.FC<RouteComponentProps> = () => {
<Flex justifyContent="space-between" flexWrap="wrap">
<Box m="0.5em">
<Button icon={FaFilter} onClick={() => setShowFilters(!showFilters)}>
{showFilters ? "Hide filters" : "Show filters"}
{showFilters
? t("freeagents;Hide filters")
: t("freeagents;Show filters")}
</Button>
</Box>
{getTopRightContent()}
@ -191,26 +198,41 @@ const FreeAgentsPage: React.FC<RouteComponentProps> = () => {
<RadioGroup
value={playstyle}
setValue={setPlaystyle}
label="Filter by playstyle"
label={t("freeagents;Playstyle")}
options={[
"Any",
"Frontline/Slayer",
"Midline/Support",
"Backline/Anchor",
{ value: "Any", label: t("freeagents;Any") },
{
value: "Frontline/Slayer",
label: t("freeagents;Frontline/Slayer"),
},
{
value: "Midline/Support",
label: t("freeagents;Midline/Support"),
},
{
value: "Backline/Anchor",
label: t("freeagents;Backline/Anchor"),
},
]}
/>
></RadioGroup>
</Box>
<Box maxW="600px" my="1em">
<RadioGroup
value={region}
setValue={setRegion}
label="Filter by region"
options={["Any", "Europe", "The Americas", "Oceania", "Other"]}
label={t("freeagents;Region")}
options={[
{ value: "Any", label: t("freeagents;Any") },
{ value: "Europe", label: t("freeagents;Europe") },
{ value: "The Americas", label: t("freeagents;The Americas") },
{ value: "Oceania", label: t("freeagents;Oceania") },
{ value: "Other", label: t("freeagents;Other") },
]}
/>
</Box>
<Box maxW="600px" my="1em">
<WeaponSelector
label="Filter by weapon"
label="Weapon"
value={weapon}
setValue={(weapon: string) => setWeapon(weapon as Weapon)}
clearable

126
frontend-react/src/components/freeagents/Matches.tsx
View File

@ -7,9 +7,13 @@ import {
PopoverTrigger,
PopoverContent,
PopoverArrow,
AvatarGroup,
Avatar,
} from "@chakra-ui/core"
import UserAvatar from "../common/UserAvatar"
import MyThemeContext from "../../themeContext"
import { useTranslation, Trans } from "react-i18next"
import questionMark from "../../assets/questionMark.jpg"
interface MatchesProps {
matches: {
@ -21,88 +25,70 @@ interface MatchesProps {
}
const Matches: React.FC<MatchesProps> = ({ matches, likesReceived }) => {
const { grayWithShade, themeColorWithShade, darkerBgColor } = useContext(
MyThemeContext
)
const { t } = useTranslation()
const { grayWithShade, darkerBgColor } = useContext(MyThemeContext)
if (matches.length === 0 && likesReceived === 0) return null
const unrequitedLove = likesReceived - matches.length
const getText1 = () => {
if (unrequitedLove > 1 && matches.length > 0) return "Also there are "
if (unrequitedLove > 1 && matches.length === 0) return "There are "
if (unrequitedLove === 1 && matches.length > 0) return "Also there is "
return "There is "
}
const text1 = getText1()
const text2 =
unrequitedLove > 1 ? (
<>{unrequitedLove} free agents</>
) : (
<>{unrequitedLove} free agent</>
)
const text3 =
unrequitedLove > 1 ? (
<>that liked you but you didn't like any of them back yet!</>
) : (
<>that liked you but you didn't like them back yet!</>
)
return (
<Flex justifyContent="center">
<FieldsetWithLegend title="MATCHES" titleFontSize="xs">
{matches.length > 0 ? (
<FieldsetWithLegend
title={t("freeagents;MATCHES")}
titleFontSize="xs"
minW="250px"
>
{matches.length > 0 && (
<>
<Flex justifyContent="center" flexWrap="wrap">
{matches.map((match) => (
<Box key={`${match.username}${match.discriminator}`} p="0.5em">
<Popover trigger="hover">
<PopoverTrigger>
<Box>
<UserAvatar src={match.avatar} name={match.username} />
</Box>
</PopoverTrigger>
<PopoverContent zIndex={4} p="0.5em" bg={darkerBgColor}>
<PopoverArrow />
<Box>
You have a match with{" "}
<b>
{match.username}#{match.discriminator}
</b>
! Contact them to see if you can get a team going
</Box>
</PopoverContent>
</Popover>
</Box>
))}
{matches.map((match) => {
const matchFullName = `${match.username}#${match.discriminator}`
return (
<Box
key={`${match.username}${match.discriminator}`}
p="0.5em"
>
<Popover trigger="hover">
<PopoverTrigger>
<Box>
<UserAvatar
src={match.avatar}
name={match.username}
/>
</Box>
</PopoverTrigger>
<PopoverContent zIndex={4} p="0.5em" bg={darkerBgColor}>
<PopoverArrow />
<Box>
<Trans i18nKey="freeagents;youHaveAMatch">
You have a match with <b>{{ matchFullName }}</b>!
Contact them to see if you can get a team going{" "}
</Trans>
</Box>
</PopoverContent>
</Popover>
</Box>
)
})}
</Flex>
{unrequitedLove > 0 && (
<Box
color={grayWithShade}
mt="1em"
fontWeight="bold"
textAlign="center"
>
{text1}
<Box as="span" color={themeColorWithShade}>
{text2}
</Box>{" "}
{text3}
</Box>
)}
</>
) : (
unrequitedLove > 0 && (
<Box color={grayWithShade} fontWeight="bold" textAlign="center">
{text1}
<Box as="span" color={themeColorWithShade}>
{text2}
</Box>{" "}
{text3}
)}
{unrequitedLove > 0 && (
<>
<Flex justifyContent="center" mt="1em">
<AvatarGroup size="md" max={3}>
{Array(unrequitedLove)
.fill(1)
.map((_, i) => (
<Avatar key={i} name="?a" />
))}
</AvatarGroup>
</Flex>
<Box color={grayWithShade} mt="0.5em" fontSize="15px">
{t("freeagents;getLiking", { count: unrequitedLove })}
</Box>
)
</>
)}
</FieldsetWithLegend>
</Flex>

18
frontend-react/src/components/freeagents/Posts.tsx
View File

@ -5,6 +5,7 @@ import Alert from "../elements/Alert"
import FreeAgentCard from "./FreeAgentCard"
import InfiniteScroll from "react-infinite-scroller"
import Button from "../elements/Button"
import { useTranslation } from "react-i18next"
interface PostsAccordionProps {
posts: FreeAgentPost[]
@ -17,11 +18,14 @@ const Posts: React.FC<PostsAccordionProps> = ({
canLike,
likedUsersIds,
}) => {
const { t } = useTranslation()
const [agentsToShow, setAgentsToShow] = useState(5)
if (posts.length === 0) {
return (
<Alert status="info">No free agents found with the current filter</Alert>
<Alert status="info">
{t("freeagents;No free agents found with the current filter")}
</Alert>
)
}
return (
@ -29,12 +33,12 @@ const Posts: React.FC<PostsAccordionProps> = ({
<Grid gridTemplateColumns="repeat(auto-fit, minmax(260px, 1fr))" mt="1em">
<InfiniteScroll
pageStart={1}
loadMore={page => setAgentsToShow(page * 10)}
loadMore={(page) => setAgentsToShow(page * 10)}
hasMore={agentsToShow < posts.length}
>
{posts
.filter((post, index) => index < agentsToShow)
.map(post => (
.filter((_, index) => index < agentsToShow)
.map((post) => (
<Box my="1em" key={post.id}>
<FreeAgentCard
post={post}
@ -46,10 +50,12 @@ const Posts: React.FC<PostsAccordionProps> = ({
</InfiniteScroll>
</Grid>
<Box w="50%" textAlign="center" mx="auto" mt="1em">
<Heading size="sm">No more free agents to show</Heading>
<Heading size="sm">
{t("freeagents;No more free agents to show")}
</Heading>
<Box mt="1em">
<Button outlined onClick={() => window.scrollTo(0, 0)}>
Return to the top
{t("freeagents;Return to the top")}
</Button>
</Box>
</Box>

8
frontend-react/src/components/freeagents/RoleIcons.tsx
View File

@ -1,12 +1,14 @@
import React from "react"
import { Flex, Box } from "@chakra-ui/core"
import { FaCrosshairs, FaBriefcaseMedical, FaAnchor } from "react-icons/fa"
import { useTranslation } from "react-i18next"
interface RoleIconsProps {
playstyles: ("FRONTLINE" | "MIDLINE" | "BACKLINE")[]
}
const RoleIcons: React.FC<RoleIconsProps> = ({ playstyles }) => {
const { t } = useTranslation()
return (
<Flex>
<Box
@ -14,7 +16,7 @@ const RoleIcons: React.FC<RoleIconsProps> = ({ playstyles }) => {
w="30px"
h="auto"
color={playstyles.indexOf("FRONTLINE") === -1 ? "grey" : "green.500"}
title="Frontline/Slayer"
title={t("freeagents;Frontline/Slayer")}
cursor="help"
/>
<Box
@ -22,7 +24,7 @@ const RoleIcons: React.FC<RoleIconsProps> = ({ playstyles }) => {
w="30px"
h="auto"
color={playstyles.indexOf("MIDLINE") === -1 ? "grey" : "green.500"}
title="Midline/Support"
title={t("freeagents;Midline/Support")}
mx="10px"
cursor="help"
/>
@ -31,7 +33,7 @@ const RoleIcons: React.FC<RoleIconsProps> = ({ playstyles }) => {
w="30px"
h="auto"
color={playstyles.indexOf("BACKLINE") === -1 ? "grey" : "green.500"}
title="Backline/Anchor"
title={t("freeagents;Backline/Anchor")}
cursor="help"
/>
</Flex>

24
frontend-react/src/components/freeagents/VCIcon.tsx
View File

@ -1,6 +1,7 @@
import React from "react"
import { Box } from "@chakra-ui/core"
import { FaMicrophone } from "react-icons/fa"
import { useTranslation } from "react-i18next"
interface VCIconProps {
canVC: "YES" | "USUALLY" | "SOMETIMES" | "NO"
@ -20,15 +21,18 @@ const title = {
NO: "Can't VC",
}
const VCIcon: React.FC<VCIconProps> = ({ canVC }) => (
<Box
as={FaMicrophone}
title={title[canVC]}
color={color[canVC]}
w="30px"
h="auto"
cursor="help"
/>
)
const VCIcon: React.FC<VCIconProps> = ({ canVC }) => {
const { t } = useTranslation()
return (
<Box
as={FaMicrophone}
title={t(`freeagents;${title[canVC]}`)}
color={color[canVC]}
w="30px"
h="auto"
cursor="help"
/>
)
}
export default VCIcon