Chore fix: Remove index usage.

Author: soup-bowl

frontend/src/api/interface.ts

@@ -1,4 +1,4 @@
-interface artist {
+interface Artist {
 	id: number
 	resource_url: string
 	name: string
@@ -8,7 +8,7 @@ interface artist {
 	tracks: string
 }
 
-interface label {
+interface Label {
 	id: number
 	resource_url: string
 	name: string
@@ -17,32 +17,32 @@ interface label {
 	entity_type_name: string
 }
 
-interface format {
+interface Format {
 	name: string
 	qty: string
 	descriptions: string[]
 }
 
-interface committer {
+interface Committer {
 	username: string
 	resource_url: string
 }
 
-interface identifiers {
+interface Identifiers {
 	type: string
 	value: string
 	description: string
 }
 
-interface videos {
+interface Videos {
 	uri: string
 	title: string
 	description: string
 	duration: number
 	embed: boolean
 }
 
-interface track {
+interface Track {
 	title: string
 	position: string
 	type_: string
@@ -82,9 +82,9 @@ export interface IReleaseLight {
 	cover_image: string
 	title: string
 	year: number
-	formats: format[]
-	artists: artist[]
-	labels: label[]
+	formats: Format[]
+	artists: Artist[]
+	labels: Label[]
 	genres: string[]
 	styles: string[]
 }
@@ -101,8 +101,8 @@ export interface IRelease extends IReleaseLight {
 			count: number
 			average: number
 		}
-		submitter: committer
-		contributors: committer[]
+		submitter: Committer
+		contributors: Committer[]
 		data_quality: string
 		status: string
 	}
@@ -115,10 +115,10 @@ export interface IRelease extends IReleaseLight {
 	released: string
 	notes: string
 	released_formatted: string
-	identifiers: identifiers[]
-	videos: videos[]
-	tracklist: track[]
-	extraartists: artist[]
+	identifiers: Identifiers[]
+	videos: Videos[]
+	tracklist: Track[]
+	extraartists: Artist[]
 	estimated_weight: number
 	blocked_from_sale: boolean
 }

frontend/src/components/AlbumGrid.tsx

@@ -6,12 +6,11 @@ import "./AlbumGrid.css"
 
 interface AlbumProps {
 	album: IReleases
-	index: number
 	onClickAlbum: (album: IReleases) => void
 }
 
-const AlbumGridEntry: React.FC<AlbumProps> = ({ album, index, onClickAlbum }) => (
-	<IonCol size="6" sizeMd="4" sizeLg="3" key={index}>
+const AlbumGridEntry: React.FC<AlbumProps> = ({ album, onClickAlbum }) => (
+	<IonCol size="6" sizeMd="4" sizeLg="3" key={album.id}>
 		<div className="album-art-container" onClick={() => onClickAlbum(album)}>
 			<img
 				src={album.image_base64 ? album.image_base64 : album.basic_information.thumb}
@@ -35,13 +34,13 @@ interface CollectionProps {
 
 const AlbumGrid: React.FC<CollectionProps> = ({ data, onClickAlbum }) => (
 	<>
-		{data.map((options, index) => (
-			<div key={index} className="album-art-div">
+		{data.map((options) => (
+			<div key={options[0]} className="album-art-div">
 				<h2>{options[0]}</h2>
 				<IonGrid>
 					<IonRow>
-						{options[1].map((album, index) => (
-							<AlbumGridEntry key={index} album={album} index={index} onClickAlbum={onClickAlbum} />
+						{options[1].map((album) => (
+							<AlbumGridEntry key={album.id} album={album} onClickAlbum={onClickAlbum} />
 						))}
 					</IonRow>
 				</IonGrid>

frontend/src/components/AlbumList.tsx

@@ -40,13 +40,13 @@ export const AlbumListGroups: React.FC<{
 	onClickAlbum: (album: IReleases) => void
 }> = ({ data, onClickAlbum }) => (
 	<>
-		{data.map((options, index) => (
-			<IonItemGroup key={index}>
+		{data.map((options) => (
+			<IonItemGroup key={options[0]}>
 				<IonItemDivider>
 					<IonLabel>{options[0]}</IonLabel>
 				</IonItemDivider>
-				{options[1].map((album, index) => (
-					<AlbumListItem key={index} album={album} onClickAlbum={onClickAlbum} />
+				{options[1].map((album) => (
+					<AlbumListItem key={album.id} album={album} onClickAlbum={onClickAlbum} />
 				))}
 			</IonItemGroup>
 		))}
@@ -64,8 +64,8 @@ export const AlbumList: React.FC<{
 				<IonLabel>{title}</IonLabel>
 			</IonListHeader>
 		)}
-		{data.map((album, index) => (
-			<AlbumListItem key={index} album={album} onClickAlbum={onClickAlbum} />
+		{data.map((album) => (
+			<AlbumListItem key={album.id} album={album} onClickAlbum={onClickAlbum} />
 		))}
 	</IonList>
 )

frontend/src/components/StatDisplay.tsx

@@ -9,8 +9,8 @@ interface Props {
 const StatDisplay: React.FC<Props> = ({ items }) => (
 	<IonGrid>
 		<IonRow>
-			{items.map((stat, index) => (
-				<IonCol key={index} className="statdisp-text">
+			{items.map((stat) => (
+				<IonCol key={`${stat.label}${stat.value}`} className="statdisp-text">
 					<IonIcon icon={stat.icon} style={{ fontSize: "48px", color: "#3880ff" }} />
 					<IonText style={{ textAlign: "center" }}>
 						<h2 style={{ margin: 4 }}>{stat.value ?? "N/A"}</h2>

frontend/src/modal/ViewAlbumDetails.tsx

@@ -191,8 +191,8 @@ const ViewAlbumDetails: React.FC<DisplayProps> = ({ album, open, onClose }) => {
 
 				{isSuccess && tabState === TabSet.Tracks && (
 					<IonList inset>
-						{data.tracklist.map((track, index) => (
-							<IonItem key={index}>
+						{data.tracklist.map((track) => (
+							<IonItem key={track.position}>
 								<IonNote slot="start">{track.position}</IonNote>
 								<IonLabel>{track.title}</IonLabel>
 								<IonNote slot="end">{track.duration}</IonNote>
@@ -202,8 +202,8 @@ const ViewAlbumDetails: React.FC<DisplayProps> = ({ album, open, onClose }) => {
 				)}
 				{isSuccess && tabState === TabSet.Credits && (
 					<IonList inset>
-						{data.extraartists.map((artist, index) => (
-							<IonItem key={index}>
+						{data.extraartists.map((artist) => (
+							<IonItem key={artist.id}>
 								<IonLabel>
 									<h2>{artist.name}</h2>
 									<p>{artist.role}</p>
@@ -228,8 +228,8 @@ const ViewAlbumDetails: React.FC<DisplayProps> = ({ album, open, onClose }) => {
 				)}
 				{isSuccess && tabState === TabSet.IDs && (
 					<IonList inset>
-						{data.identifiers.map((id, index) => (
-							<IonItem key={index}>
+						{data.identifiers.map((id) => (
+							<IonItem key={`${id.type}${id.value}`}>
 								<IonLabel>
 									<h2>
 										{id.type} {id.description}

frontend/src/utils/collectionSort.ts

@@ -58,14 +58,14 @@ export const splitRecordsByLabel = (records: IReleases[]): IReleaseTuple => {
 
 export const masterSort = (sort: "release" | "label" | "artist" | "none", records: IReleases[]): IReleaseTuple => {
 	switch (sort) {
-		default:
-		case "none":
-			return [["", records]]
 		case "release":
 			return splitRecordsByYear(records)
 		case "label":
 			return splitRecordsByLabel(records)
 		case "artist":
 			return splitRecordsByArtist(records)
+		case "none":
+		default:
+			return [["", records]]
 	}
 }