t1c.dev
forked from
rocksky.app/rocksky
A decentralized music tracking and discovery platform built on AT Protocol 🎵
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.
tsiry-sandratraina.com
+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]">