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

link to free agent post

Browse Source
This commit is contained in:
Kalle (Sendou) 2021-01-09 01:06:17 +02:00
parent fe13ba86c0
commit 7a1644690d
4 changed files with 96 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/u/AvatarWithInfo.tsx
View File

@ -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>

101
pages/freeagents.tsx
View File

@ -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}>

2
pages/u/[identifier].tsx
View File

@ -87,7 +87,7 @@ const ProfilePage = (props: Props) => {
<>
<Divider my={6} />
<MyContainer>
<Markdown value={user.profile.bio} />
<Markdown value={user.profile.bio} smallHeaders />
</MyContainer>
</>
)}

3
prisma/queries/getUserByIdentifier.ts
View File

@ -48,5 +48,8 @@ export const getUserByIdentifier = (identifier: string) =>
switchAccountId: true,
},
},
freeAgentPost: {
select: { id: true },
},
},
});