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

Copy to clipboard button functionality

Browse Source
This commit is contained in:
Kalle (Sendou) 2021-12-02 21:29:28 +02:00
parent 30459016c0
commit d42eaf8a81
1 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/routes/to/$organization.$tournament/manage-roster.tsx
View File

@ -13,6 +13,7 @@ export default function ManageRosterPage() {
const [, parentRoute] = useMatches();
const tournamentData = parentRoute.data as FindTournamentByNameForUrlI;
const [urlWithInviteCode, setUrlWithInviteCode] = React.useState("");
const [showCopied, setShowCopied] = React.useState(false);
const ownTeam = tournamentData.teams.find(({ inviteCode }) =>
Boolean(inviteCode)
@ -21,13 +22,20 @@ export default function ManageRosterPage() {
React.useEffect(() => {
if (ownTeam) {
setUrlWithInviteCode(
`${window.location.href.replace("/register", "")}?join=${
`${window.location.href.replace("/manage-roster", "")}?join=${
ownTeam.inviteCode
}`
);
}
}, []);
React.useEffect(() => {
if (!showCopied) return;
const timeout = setTimeout(() => setShowCopied(false), 3000);
return () => clearTimeout(timeout);
}, [showCopied]);
// TODO: if not a captain of a team -> redirect
if (!ownTeam) return null;
@ -47,7 +55,7 @@ export default function ManageRosterPage() {
</select>
<button
className="tournament__manage-roster__input__button"
onClick={() => navigator.clipboard.writeText(urlWithInviteCode)}
onClick={() => console.log("todo: handle add")}
>
Add to roster
</button>
@ -64,9 +72,12 @@ export default function ManageRosterPage() {
/>
<button
className="tournament__manage-roster__input__button"
onClick={() => navigator.clipboard.writeText(urlWithInviteCode)}
onClick={() => {
navigator.clipboard.writeText(urlWithInviteCode);
setShowCopied(true);
}}
>
Copy to clipboard
{showCopied ? "Copied!" : "Copy to clipboard"}
</button>
</div>
</div>