Merge pull request #15 from soup-bowl/soup-bowl/issue11

Added wantlist

Author: soup-bowl

frontend/src/api/discogs.ts

@@ -28,6 +28,48 @@ export const getProfile = async (username: string, password: string): Promise<IP
 	return response.json()
 }
 
+export const getCollectionWants = async (
+	username: string,
+	password: string,
+	onProgress?: (page: number, pages: number) => void
+): Promise<IReleases[]> => {
+	let allReleases: IReleases[] = []
+	let url: string | undefined = `${API_URL}/users/${username}/wants?per_page=100`
+
+	while (url) {
+		const response = await fetch(url, {
+			headers: {
+				"Content-Type": "application/json",
+				Authorization: `Discogs token=${password}`,
+			},
+		})
+
+		if (!response.ok) {
+			throw new Error("Network response was not ok")
+		}
+
+		const data: ICollections = await response.json()
+
+		// Cheating a bit - converting the reference to keep the same models.
+		const transformedData = {
+			...data,
+			// @ts-expect-error
+			releases: data.wants,
+		}
+
+		allReleases = [...allReleases, ...transformedData.releases]
+
+		if (onProgress) {
+			onProgress(data.pagination.page, data.pagination.pages)
+		}
+
+		// Set the url to the next page, or undefined if there are no more pages
+		url = data.pagination.urls.next
+	}
+
+	return allReleases
+}
+
 export const getCollectionReleases = async (
 	username: string,
 	password: string,

frontend/src/api/index.ts

@@ -1,7 +1,8 @@
-export { getCollectionReleases, getMe, getProfile } from "./discogs"
+export { getCollectionReleases, getCollectionWants, getMe, getProfile } from "./discogs"
 export { postVinylQueue } from "./vinyl"
 export type {
 	ICollections,
+	IWants,
 	IIdentify,
 	IProfile,
 	IPagination,

frontend/src/api/interface.ts

@@ -64,6 +64,11 @@ export interface ICollections {
 	releases: IReleases[]
 }
 
+export interface IWants {
+	pagination: IPagination
+	wants: IReleases[]
+}
+
 export interface IIdentify {
 	id: number
 	username: string

frontend/src/components/AlbumGrid.tsx

@@ -27,13 +27,14 @@ const AlbumGridEntry: React.FC<AlbumProps> = ({ album, index, staticImage = unde
 interface CollectionProps {
 	data: IReleases[]
 	sort?: "release" | "label" | "artist" | "none"
+	type: "collection" | "want"
 	username?: string
 	onClickAlbum: (album: IReleases) => void
 }
 
-const AlbumGrid: React.FC<CollectionProps> = ({ data, sort = "none", username = "", onClickAlbum }) => {
+const AlbumGrid: React.FC<CollectionProps> = ({ data, sort = "none", type, username = "", onClickAlbum }) => {
 	const imageData = useQuery<IVinylResponse | undefined>({
-		queryKey: [`${username}images`],
+		queryKey: [`${username}${type}images`],
 		queryFn: () => postVinylQueue(data?.map((item) => item.basic_information.id) ?? []),
 		staleTime: 1000 * 60 * 60 * 24, // 24 hours
 		enabled: data !== undefined,
@@ -49,7 +50,7 @@ const AlbumGrid: React.FC<CollectionProps> = ({ data, sort = "none", username =
 			break
 		case "release":
 			displayData = splitRecordsByYear(data)
-			labelText = "Collected in "
+			labelText = `${type === "collection" ? "Collected" : "Wanted"} in `
 			break
 		case "label":
 			displayData = splitRecordsByLabel(data)

frontend/src/components/AlbumList.tsx

@@ -1,4 +1,4 @@
-import { IonAvatar, IonChip, IonIcon, IonItem, IonLabel, IonList, IonText } from "@ionic/react"
+import { IonAvatar, IonChip, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonText } from "@ionic/react"
 import { disc } from "ionicons/icons"
 import { useQuery } from "@tanstack/react-query"
 import { IReleases, IVinylResponse, postVinylQueue } from "../api"
@@ -8,19 +8,26 @@ import "./AlbumList.css"
 interface Props {
 	data: IReleases[]
 	username?: string
+	title?: string
+	type: "collection" | "want"
 	onClickAlbum: (album: IReleases) => void
 }
 
-const AlbumList: React.FC<Props> = ({ data, username = "", onClickAlbum }) => {
+const AlbumList: React.FC<Props> = ({ data, username = "", title = undefined, type, onClickAlbum }) => {
 	const imageData = useQuery<IVinylResponse | undefined>({
-		queryKey: [`${username}images`],
+		queryKey: [`${username}${type}images`],
 		queryFn: () => postVinylQueue(data?.map((item) => item.basic_information.id) ?? []),
 		staleTime: 1000 * 60 * 60 * 24, // 24 hours
 		enabled: data !== undefined,
 	})
 
 	return (
 		<IonList lines="full">
+			{title && (
+				<IonListHeader>
+					<IonLabel>{title}</IonLabel>
+				</IonListHeader>
+			)}
 			{data.map((album, index) => {
 				let image = undefined
 				if (imageData.data) {

frontend/src/modal/ViewAlbumDetails.tsx

@@ -17,13 +17,14 @@ import { findLocalImageById } from "../utils"
 interface DisplayProps {
 	album: IReleases
 	username?: string
+	type: "collection" | "want"
 	open: boolean
 	onClose: () => void
 }
 
-const ViewAlbumDetails: React.FC<DisplayProps> = ({ album, username = "", open, onClose }) => {
+const ViewAlbumDetails: React.FC<DisplayProps> = ({ album, username = "", type, open, onClose }) => {
 	const imageData = useQuery<IVinylResponse | undefined>({
-		queryKey: [`${username}images`],
+		queryKey: [`${username}${type}images`],
 		staleTime: 1000 * 60 * 60 * 24, // 24 hours
 		enabled: false,
 	})

frontend/src/pages/Collection.tsx

@@ -5,17 +5,20 @@ import {
 	IonContent,
 	IonHeader,
 	IonIcon,
+	IonLabel,
 	IonPage,
 	IonRefresher,
 	IonRefresherContent,
+	IonSegment,
+	IonSegmentButton,
 	IonTitle,
 	IonToolbar,
 	RefresherEventDetail,
 	useIonActionSheet,
 } from "@ionic/react"
 import { useQuery, useQueryClient } from "@tanstack/react-query"
 import { filterOutline, personOutline, pricetagOutline, timeOutline } from "ionicons/icons"
-import { IReleases, getCollectionReleases } from "../api"
+import { IReleases, getCollectionReleases, getCollectionWants } from "../api"
 import { FullpageLoading, AlbumGrid, FullpageInfo } from "../components"
 import { ViewAlbumDetails } from "../modal"
 import { useAuth } from "../hooks"
@@ -60,6 +63,7 @@ const CollectionPage: React.FC = () => {
 	const [filter, setFilter] = useState<"release" | "label" | "artist" | "none">("none")
 	const [modalInfo, setModalInfo] = useState<IReleases | undefined>(undefined)
 	const [loading, setLoading] = useState<{ page: number; pages: number }>({ page: 0, pages: 0 })
+	const [viewState, setViewState] = useState<"collection" | "want">("collection")
 	const betaBanner = import.meta.env.VITE_BETA_BANNER
 
 	const [{ username, token }, saveAuth, clearAuth] = useAuth()
@@ -88,27 +92,41 @@ const CollectionPage: React.FC = () => {
 		)
 	}
 
-	const { data, isLoading, isError } = useQuery<IReleases[]>({
+	const collectionData = useQuery<IReleases[]>({
 		queryKey: [`${username}collection`],
 		queryFn: () =>
 			getCollectionReleases(username, token ?? "", (page, pages) => setLoading({ page: page, pages: pages })),
 		staleTime: 1000 * 60 * 60 * 24, // 24 hours
 	})
 
+	const wantData = useQuery<IReleases[]>({
+		queryKey: [`${username}want`],
+		queryFn: () =>
+			getCollectionWants(username, token ?? "", (page, pages) => setLoading({ page: page, pages: pages })),
+		staleTime: 1000 * 60 * 60 * 24, // 24 hours
+	})
+
 	const handleRefresh = async (event: CustomEvent<RefresherEventDetail>) => {
-		await queryClient.invalidateQueries({ queryKey: [`${username}collection`, `${username}images`] })
+		await queryClient.invalidateQueries({
+			queryKey: [
+				`${username}collection`,
+				`${username}want`,
+				`${username}collectionimages`,
+				`${username}wantimages`,
+			],
+		})
 		event.detail.complete()
 	}
 
-	if (isLoading) {
+	if (collectionData.isLoading || wantData.isLoading) {
 		return (
 			<IonPage>
-				<FullpageLoading loadingProgress={loading.page + 1} loadingComplete={loading.pages} />
+				<FullpageLoading />
 			</IonPage>
 		)
 	}
 
-	if (isError) {
+	if (collectionData.isError || wantData.isError) {
 		return (
 			<IonPage>
 				<FullpageInfo text="An error occurred when loading information." />
@@ -137,7 +155,24 @@ const CollectionPage: React.FC = () => {
 							<IonIcon slot="icon-only" md={getFilterIcon(filter)}></IonIcon>
 						</IonButton>
 					</IonButtons>
-					<IonTitle>Collection</IonTitle>
+					<IonSegment
+						value={viewState}
+						onIonChange={(e) => {
+							const selectedValue = e.detail.value
+							if (selectedValue === "collection" || selectedValue === "want") {
+								setViewState(selectedValue)
+							} else {
+								setViewState("collection")
+							}
+						}}
+					>
+						<IonSegmentButton value="collection">
+							<IonLabel>Collection</IonLabel>
+						</IonSegmentButton>
+						<IonSegmentButton value="want">
+							<IonLabel>Wanted</IonLabel>
+						</IonSegmentButton>
+					</IonSegment>
 				</IonToolbar>
 				{betaBanner && (
 					<IonToolbar className="beta-banner" color="warning">
@@ -149,11 +184,22 @@ const CollectionPage: React.FC = () => {
 				<IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
 					<IonRefresherContent></IonRefresherContent>
 				</IonRefresher>
-				{data && (
+				{viewState === "collection" && collectionData.data && (
+					<AlbumGrid
+						data={collectionData.data}
+						sort={filter}
+						username={username}
+						type={viewState}
+						onClickAlbum={(album) => setModalInfo(album)}
+					/>
+				)}
+
+				{viewState === "want" && wantData.data && (
 					<AlbumGrid
-						data={data}
+						data={wantData.data}
 						sort={filter}
 						username={username}
+						type={viewState}
 						onClickAlbum={(album) => setModalInfo(album)}
 					/>
 				)}
@@ -162,6 +208,7 @@ const CollectionPage: React.FC = () => {
 					<ViewAlbumDetails
 						album={modalInfo}
 						username={username}
+						type={viewState}
 						open={typeof modalInfo !== undefined}
 						onClose={() => setModalInfo(undefined)}
 					/>