Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | 19x 19x 19x 19x | import { ReactElement, useEffect, useState } from "react";
import { useRouter } from "next/router";
import { useTranslations } from "hooks";
import {
checkIfUserFollowArtistUser,
follow,
Follow_type,
unFollow,
} from "utils/spotifyCalls";
export default function FollowButton({
type,
id,
}: Readonly<{
type: Follow_type;
id?: string;
}>): ReactElement {
const [isFollowing, setIsFollowing] = useState(false);
const { translations } = useTranslations();
const router = useRouter();
useEffect(() => {
checkIfUserFollowArtistUser(type, id).then((res) => {
setIsFollowing(res);
});
}, [type, id, router]);
return (
<button
type="button"
className="follow-button"
onClick={(e) => {
e.stopPropagation();
if (isFollowing) {
unFollow(type, id).then((res) => {
Iif (res) {
setIsFollowing(false);
}
});
} else {
follow(type, id).then((res) => {
Iif (res) {
setIsFollowing(true);
}
});
}
}}
>
{isFollowing
? translations.pages.artist.following
: translations.pages.artist.follow}
<style jsx>{`
button {
margin-left: 20px;
display: flex;
justify-content: center;
align-items: center;
width: 56px;
height: 56px;
min-width: 56px;
min-height: 56px;
background-color: transparent;
border: none;
min-height: 20px;
max-height: min-content;
}
.follow-button {
height: min-content;
}
button:focus,
button:hover {
border-color: #fff;
}
button:active {
border-color: #fff;
}
button {
background-color: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
box-sizing: border-box;
color: #fff;
font-size: 16px;
width: auto;
font-weight: 700;
letter-spacing: 0.1em;
line-height: 16px;
padding: 7px 15px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
margin-right: 24px;
}
`}</style>
</button>
);
}
|