A decentralized music tracking and discovery platform built on AT Protocol 🎵 rocksky.app
spotify atproto lastfm musicbrainz scrobbling listenbrainz
98
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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]">