rocksky.app
A decentralized music tracking and discovery platform built on AT Protocol 🎵
rocksky.app
spotify
atproto
lastfm
musicbrainz
scrobbling
listenbrainz
Prompt sign-in for likes and stop click propagation
Show SignInModal (with a `like` flag) when a user attempts to like
without a token. Add optimistic local state for liked and likesCount to
update UI immediately. Stop event propagation on the like button and
cover to prevent parent click handlers.
tsiry-sandratraina.com
+5
-2
apps/web/src/components/SignInModal/SignInModal.tsx
+5
-2
apps/web/src/components/SignInModal/SignInModal.tsx
···
7
7
interface SignInModalProps {
8
8
isOpen: boolean;
9
9
onClose: () => void;
10
+
like?: boolean;
10
11
}
11
12
12
13
function SignInModal(props: SignInModalProps) {
13
-
const { isOpen, onClose } = props;
14
+
const { isOpen, onClose, like } = props;
14
15
const [handle, setHandle] = useState("");
15
16
16
17
const onLogin = async () => {
···
55
56
<ModalBody style={{ padding: 10 }}>
56
57
<h1 style={{ color: "#ff2876", textAlign: "center" }}>Rocksky</h1>
57
58
<p className="text-[var(--color-text)] text-[18px] mt-[40px] mb-[20px]">
58
-
Sign in or create your account to join the conversation!
59
+
{!like
60
+
? "Sign in or create your account to join the conversation!"
61
+
: "Sign in or create your account to like songs!"}
59
62
</p>
60
63
<div style={{ marginBottom: 20 }}>
61
64
<div style={{ marginBottom: 15 }}>
+1
apps/web/src/components/SongCover/InteractionBar/InteractionBar.tsx
+1
apps/web/src/components/SongCover/InteractionBar/InteractionBar.tsx
+24
-3
apps/web/src/components/SongCover/SongCover.tsx
+24
-3
apps/web/src/components/SongCover/SongCover.tsx
···
2
2
import styled from "@emotion/styled";
3
3
import InteractionBar from "./InteractionBar";
4
4
import useLike from "../../hooks/useLike";
5
+
import SignInModal from "../SignInModal";
6
+
import { useState } from "react";
5
7
6
8
const Cover = styled.img<{ size?: number }>`
7
9
border-radius: 8px;
···
62
64
};
63
65
64
66
function SongCover(props: SongCoverProps) {
67
+
const [isSignInOpen, setIsSignInOpen] = useState(false);
68
+
const [liked, setLiked] = useState(props.liked);
65
69
const { like, unlike } = useLike();
66
-
const { title, artist, cover, size, liked, likesCount, uri, withLikeButton } =
67
-
props;
70
+
const [likesCount, setLikesCount] = useState(props.likesCount);
71
+
const { title, artist, cover, size, uri, withLikeButton } = props;
68
72
const handleLike = async () => {
69
73
if (!uri) return;
74
+
if (!localStorage.getItem("token")) {
75
+
setIsSignInOpen(true);
76
+
return;
77
+
}
70
78
if (liked) {
79
+
setLiked(false);
80
+
if (likesCount !== undefined && likesCount > 0) {
81
+
setLikesCount(likesCount - 1);
82
+
}
71
83
await unlike(uri);
72
84
} else {
85
+
setLiked(true);
86
+
if (likesCount !== undefined) {
87
+
setLikesCount(likesCount + 1);
88
+
}
73
89
await like(uri);
74
90
}
75
91
};
76
92
return (
77
-
<CoverWrapper>
93
+
<CoverWrapper onClick={(e) => e.stopPropagation()}>
78
94
<div className={`relative h-[100%] w-[92%]`}>
79
95
{withLikeButton && (
80
96
<InteractionBar
···
91
107
</SongTitle>
92
108
<Artist>{artist}</Artist>
93
109
</div>
110
+
<SignInModal
111
+
isOpen={isSignInOpen}
112
+
onClose={() => setIsSignInOpen(false)}
113
+
like
114
+
/>
94
115
</CoverWrapper>
95
116
);
96
117
}