Turned the tupe into a type.

Author: soup-bowl

frontend/src/components/AlbumGrid.tsx

@@ -1,5 +1,6 @@
 import { IonCol, IonGrid, IonIcon, IonRow, IonText } from "@ionic/react"
 import { IReleases } from "../api"
+import { IReleaseTuple } from "../types"
 import { cloudOfflineOutline } from "ionicons/icons"
 import "./AlbumGrid.css"
 
@@ -28,7 +29,7 @@ const AlbumGridEntry: React.FC<AlbumProps> = ({ album, index, onClickAlbum }) =>
 )
 
 interface CollectionProps {
-	data: [string, IReleases[]][]
+	data: IReleaseTuple
 	onClickAlbum: (album: IReleases) => void
 }
 

frontend/src/components/AlbumList.tsx

@@ -12,6 +12,7 @@ import {
 } from "@ionic/react"
 import { disc } from "ionicons/icons"
 import { IReleases } from "../api"
+import { IReleaseTuple } from "../types"
 import "./AlbumList.css"
 
 const AlbumListItem: React.FC<{
@@ -35,7 +36,7 @@ const AlbumListItem: React.FC<{
 )
 
 export const AlbumListGroups: React.FC<{
-	data: [string, IReleases[]][]
+	data: IReleaseTuple
 	onClickAlbum: (album: IReleases) => void
 }> = ({ data, onClickAlbum }) => (
 	<>

frontend/src/pages/Collection.tsx

@@ -23,6 +23,7 @@ import { FullpageLoading, AlbumGrid, FullpageInfo, AlbumListGroups } from "../co
 import { ViewAlbumDetails } from "../modal"
 import { useAuth } from "../hooks"
 import { masterSort } from "../utils"
+import { IReleaseTuple } from "../types"
 
 const filterActionButtons = [
 	{
@@ -67,8 +68,8 @@ const CollectionPage: React.FC = () => {
 	const [loading, setLoading] = useState<{ page: number; pages: number }>({ page: 0, pages: 0 })
 	const [viewState, setViewState] = useState<"collection" | "want">("collection")
 	const [dataSorted, setDataSorted] = useState<{
-		collected: [string, IReleases[]][]
-		wanted: [string, IReleases[]][]
+		collected: IReleaseTuple
+		wanted: IReleaseTuple
 	}>()
 	const betaBanner = import.meta.env.VITE_BETA_BANNER
 

frontend/src/types.ts

@@ -4,6 +4,8 @@ export type IReleasesSort = {
 	[group: string]: IReleases[]
 }
 
+export type IReleaseTuple = [string, IReleases[]][]
+
 export type IStatDisplay = {
 	icon: string
 	value?: number

frontend/src/utils/collectionSort.ts

@@ -1,7 +1,7 @@
 import { IReleases } from "../api"
-import { IReleasesSort } from "../types"
+import { IReleasesSort, IReleaseTuple } from "../types"
 
-export const splitRecordsByYear = (records: IReleases[]): [string, IReleases[]][] => {
+export const splitRecordsByYear = (records: IReleases[]): IReleaseTuple => {
 	const recordsByYear = records.reduce<IReleasesSort>((acc, record) => {
 		const year = new Date(record.date_added).getFullYear().toString()
 		if (!acc[year]) {
@@ -18,7 +18,7 @@ export const splitRecordsByYear = (records: IReleases[]): [string, IReleases[]][
 	return Object.entries(recordsByYear).sort((a, b) => parseInt(b[0]) - parseInt(a[0]))
 }
 
-export const splitRecordsByArtist = (records: IReleases[]): [string, IReleases[]][] => {
+export const splitRecordsByArtist = (records: IReleases[]): IReleaseTuple => {
 	const recordsByArtist = records.reduce<IReleasesSort>((acc, record) => {
 		const artists = record.basic_information.artists.map((artist) => artist.name)
 		artists.forEach((artist) => {
@@ -37,7 +37,7 @@ export const splitRecordsByArtist = (records: IReleases[]): [string, IReleases[]
 	return Object.entries(recordsByArtist).sort((a, b) => a[0].localeCompare(b[0]))
 }
 
-export const splitRecordsByLabel = (records: IReleases[]): [string, IReleases[]][] => {
+export const splitRecordsByLabel = (records: IReleases[]): IReleaseTuple => {
 	const recordsByLabel = records.reduce<IReleasesSort>((acc, record) => {
 		const labels = record.basic_information.labels.map((label) => label.name)
 		labels.forEach((label) => {
@@ -56,10 +56,7 @@ export const splitRecordsByLabel = (records: IReleases[]): [string, IReleases[]]
 	return Object.entries(recordsByLabel).sort((a, b) => a[0].localeCompare(b[0]))
 }
 
-export const masterSort = (
-	sort: "release" | "label" | "artist" | "none",
-	records: IReleases[]
-): [string, IReleases[]][] => {
+export const masterSort = (sort: "release" | "label" | "artist" | "none", records: IReleases[]): IReleaseTuple => {
 	switch (sort) {
 		default:
 		case "none":