A decentralized music tracking and discovery platform built on AT Protocol 🎵
rocksky.app
spotify
atproto
lastfm
musicbrainz
scrobbling
listenbrainz
Add UUID keys and guard avatar checks
Check avatar existence before calling endsWith to avoid
runtime errors. Use v4() for story item keys instead of the
composite id/did/createdAt key.
+14
-11
+14
-11
apps/web/src/pages/home/stories/Stories.tsx
+14
-11
apps/web/src/pages/home/stories/Stories.tsx
···
17
17
import styles, { getModalStyles } from "./styles";
18
18
import _ from "lodash";
19
19
import ContentLoader from "react-content-loader";
20
+
import { v4 } from "uuid";
20
21
21
22
dayjs.extend(relativeTime);
22
23
dayjs.extend(utc);
···
337
338
>
338
339
{stories.map((item, index) => (
339
340
<StoryContainer
340
-
key={`${item.id}-${item.did}-${item.createdAt}`}
341
+
key={v4()}
341
342
onClick={() => {
342
343
setCurrentlyPlaying(item);
343
344
setCurrentIndex(index);
344
345
setIsOpen(true);
345
346
}}
346
347
>
347
-
{!item.avatar?.endsWith("/@jpeg") && (
348
+
{item.avatar && !item.avatar.endsWith("/@jpeg") && (
348
349
<Story src={item.avatar} />
349
350
)}
350
-
{item.avatar?.endsWith("/@jpeg") && (
351
+
{item.avatar && item.avatar.endsWith("/@jpeg") && (
351
352
<div className="w-[64px] h-[64px] rounded-full border-2 border-[rgb(255,40,118)] p-[2px]">
352
353
<div className="w-[64px] h-[64px] rounded-full bg-[var(--color-avatar-background)] flex items-center justify-center mr-[12px]">
353
354
<IconUser size={32} color="#fff" />
···
397
398
</div>
398
399
<div className="flex flex-row items-center">
399
400
<Link to={`/profile/${currentlyPlaying?.handle}`}>
400
-
{!currentlyPlaying?.avatar?.endsWith("/@jpeg") && (
401
-
<Avatar src={currentlyPlaying?.avatar} />
402
-
)}
403
-
{currentlyPlaying?.avatar?.endsWith("/@jpeg") && (
404
-
<div className="w-[48px] h-[48px] rounded-full bg-[var(--color-avatar-background)] flex items-center justify-center mr-[12px]">
405
-
<IconUser size={24} color="#fff" />
406
-
</div>
407
-
)}
401
+
{currentlyPlaying?.avatar &&
402
+
!currentlyPlaying?.avatar?.endsWith("/@jpeg") && (
403
+
<Avatar src={currentlyPlaying?.avatar} />
404
+
)}
405
+
{currentlyPlaying?.avatar &&
406
+
currentlyPlaying.avatar.endsWith("/@jpeg") && (
407
+
<div className="w-[48px] h-[48px] rounded-full bg-[var(--color-avatar-background)] flex items-center justify-center mr-[12px]">
408
+
<IconUser size={24} color="#fff" />
409
+
</div>
410
+
)}
408
411
</Link>
409
412
<Link to={`/profile/${currentlyPlaying?.handle}`}>
410
413
<div className="text-[#fff] no-underline text-[15px]">