apricote/Listory
1
0
Fork 0
mirror of https://github.com/apricote/Listory.git synced 2026-01-13 21:21:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(frontend): invalid react list keys

Browse source
This commit is contained in:
Julian Tölle 2022-06-25 17:17:32 +02:00
parent 8ecfe57661
commit fa2d1f426f
3 changed files with 9 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/components/ReportTopGenres.tsx
View file

@ -59,6 +59,7 @@ export const ReportTopGenres: React.FC = () => {
{reportHasItems && {reportHasItems &&
topGenres.map(({ genre, artists, count }) => ( topGenres.map(({ genre, artists, count }) => (
<ReportItem <ReportItem
key={genre.id}
genre={genre} genre={genre}
count={count} count={count}
artists={artists} artists={artists}
@ -79,14 +80,13 @@ const ReportItem: React.FC<{
}> = ({ genre, artists, count, maxCount }) => { }> = ({ genre, artists, count, maxCount }) => {
const artistList = artists const artistList = artists
.map(({ artist, count: artistCount }) => ( .map(({ artist, count: artistCount }) => (
<ArtistItem artist={artist} count={artistCount} /> <ArtistItem key={artist.id} artist={artist} count={artistCount} />
)) ))
// @ts-expect-error // @ts-expect-error
.reduce((acc, curr) => (acc === null ? [curr] : [acc, ", ", curr]), null); .reduce((acc, curr) => (acc === null ? [curr] : [acc, ", ", curr]), null);
return ( return (
<TopListItem <TopListItem
key={genre.id}
title={capitalizeString(genre.name)} title={capitalizeString(genre.name)}
subTitle={artistList} subTitle={artistList}
count={count} count={count}

8
frontend/src/components/ReportTopTracks.tsx
View file

@ -55,7 +55,12 @@ export const ReportTopTracks: React.FC = () => {
)} )}
{reportHasItems && {reportHasItems &&
topTracks.map(({ track, count }) => ( topTracks.map(({ track, count }) => (
<ReportItem track={track} count={count} maxCount={maxCount} /> <ReportItem
key={track.id}
track={track}
count={count}
maxCount={maxCount}
/>
))} ))}
</div> </div>
</div> </div>
@ -72,7 +77,6 @@ const ReportItem: React.FC<{
return ( return (
<TopListItem <TopListItem
key={track.id}
title={track.name} title={track.name}
subTitle={artists} subTitle={artists}
count={count} count={count}

7
frontend/src/components/TopListItem.tsx
View file

@ -1,7 +1,6 @@
import React from "react"; import React from "react";
export interface TopListItemProps { export interface TopListItemProps {
key: string;
title: string; title: string;
subTitle?: string | React.ReactNode; subTitle?: string | React.ReactNode;
count: number; count: number;
@ -13,17 +12,13 @@ export interface TopListItemProps {
} }
export const TopListItem: React.FC<TopListItemProps> = ({ export const TopListItem: React.FC<TopListItemProps> = ({
key,
title, title,
subTitle, subTitle,
count, count,
maxCount, maxCount,
}) => { }) => {
return ( return (
<div <div className="group hover:bg-gray-200 bg-gray-100 border-b border-gray-200 md:justify-around text-gray-700 md:px-2">
key={key}
className="group hover:bg-gray-200 bg-gray-100 border-b border-gray-200 md:justify-around text-gray-700 md:px-2"
>
<div className="flex pt-2"> <div className="flex pt-2">
<div className="md:flex w-11/12"> <div className="md:flex w-11/12">
<div className={`${subTitle ? "md:w-1/2" : "md:w-full"} font-bold`}> <div className={`${subTitle ? "md:w-1/2" : "md:w-full"} font-bold`}>