fix: handle not json reponse body and update examples

api/shared/paging.ts

@@ -1,3 +1,5 @@
+import { QueryParams } from "../../utils.ts";
+
 export interface PagingObject<T> {
 	href: string;
 	items: T[];
@@ -17,7 +19,7 @@ export interface CursorPagingObject<T> {
 	total: number;
 }
 
-export interface PagingOptions extends Record<string, number | undefined> {
+export interface PagingOptions extends QueryParams {
 	/**
 	 * The maximum number of items to return. Default: 20. Minimum: 1. Maximum: 50.
 	 */

api/user/user.endpoints.ts

@@ -3,6 +3,7 @@ import { Track } from "../track/track.types.ts";
 import { UserPrivate, UserPublic } from "./user.types.ts";
 import { PagingObject, PagingOptions } from "../shared/index.ts";
 import { ISpotifyClient } from "../../client.ts";
+import { QueryParams } from "../../utils.ts";
 
 /**
  * Get detailed profile information about the current user
@@ -12,9 +13,9 @@ export const getCurrentUserProfile = (spotifyClient: ISpotifyClient) => {
 	return spotifyClient.fetch<UserPrivate>("/me");
 };
 
-type GetUserTopItemsOpts = PagingOptions & {
+interface GetUserTopItemsOpts extends QueryParams {
 	time_range?: "long_term" | "medium_term" | "short_term";
-};
+}
 
 type TopItemType = "artists" | "tracks";
 type TopItem = Artist | Track;
@@ -32,11 +33,14 @@ export const getUserTopItems = <
 >(
 	spotifyClient: ISpotifyClient,
 	type: T,
-	query: GetUserTopItemsOpts,
+	query?: GetUserTopItemsOpts & PagingOptions,
 ) => {
-	return spotifyClient.fetch<PagingObject<M[T]>>(`/me/top/${type}`, {
-		query,
-	});
+	return spotifyClient.fetch<PagingObject<M[T]>>(
+		`/me/top/${type}`,
+		{
+			query,
+		},
+	);
 };
 
 /**

client.ts

@@ -1,5 +1,5 @@
 import { IAuthProvider } from "./auth/types.ts";
-import { searchParamsFromObj } from "./utils.ts";
+import { QueryParams, searchParamsFromObj } from "./utils.ts";
 
 export const API_PREFIX = "https://api.spotify.com/v1";
 
@@ -29,7 +29,7 @@ export interface ISpotifyClient {
 	>(baseURL: string, opts?: {
 		method?: HTTPMethod;
 		body?: Record<string, unknown>;
-		query?: Record<string, string | number | boolean | undefined>;
+		query?: QueryParams;
 	}) => Promise<R>;
 }
 
@@ -50,7 +50,7 @@ export class SpotifyClient implements ISpotifyClient {
 		{ body, query, method }: {
 			method?: HTTPMethod;
 			body?: Record<string, unknown>;
-			query?: Record<string, string | number | boolean | undefined>;
+			query?: QueryParams;
 		} = {},
 	) => {
 		const url = new URL(API_PREFIX + baseURL);
@@ -74,20 +74,29 @@ export class SpotifyClient implements ISpotifyClient {
 			});
 
 			if (!res.ok) {
-				const { error: { message, status } } = await res
-					.json() as SpotifyRawError;
+				let error: SpotifyRawError;
+				try {
+					error = await res.json() as SpotifyRawError;
+				} catch (_) {
+					throw new SpotifyError(
+						"Unable to read response body(not a json value)",
+						res.status,
+					);
+				}
 
+				const { error: { message } } = error;
 				if (
-					typeof this.#authProvider !== "string" && status === 401 && !authRetry
+					res.status === 401 && typeof this.#authProvider !== "string" &&
+					!authRetry
 				) {
 					const access_token = await this.#authProvider.getAccessToken(
 						true,
 					);
 					authRetry = true;
 					return await call(access_token);
-				} else {
-					throw new SpotifyError(message, status);
 				}
+
+				throw new SpotifyError(message, res.status);
 			}
 
 			return res;

examples/deno-oak-auth/README.md

@@ -1,3 +1,5 @@
+<img width="360" alt="Soundify example banner" src="https://user-images.githubusercontent.com/51422045/221211970-06ef3ffc-20b2-4bfb-a468-92e92a84ed22.png">
+
 # Soundify exapmle (deno-oak-auth)
 
 This example uses [OAK](https://github.com/oakserver/oak) (deno http framework)

examples/deno-oak-auth/main.ts

@@ -7,21 +7,9 @@ import { AuthCode } from "../../mod.ts";
 
 const PORT = 3000;
 
-/**
- * You can create your app and get all the secrets here
- * Spoity Dashboard - `https://developer.spotify.com/dashboard`
- */
 const env = cleanEnv(config(), {
 	SPOTIFY_CLIENT_ID: str(),
 	SPOTIFY_CLIENT_SECRET: str(),
-	/**
-	 * Make sure that in the dashboard of your Spotify app,
-	 * in Settings -> Redirect URIs, this link is specified:
-	 *
-	 * @link `http://localhost:${PORT}/callback`
-	 *
-	 * @var PORT - variable that exists above. By default it is `3000`
-	 */
 	SPOTIFY_REDIRECT_URI: url(),
 });
 

examples/next-ssr/README.md

@@ -0,0 +1,5 @@
+<img width="360px" alt="Soundify example banner" src="https://user-images.githubusercontent.com/51422045/221219632-d89c4d89-05ca-4927-8419-af81cfd38875.png" />
+
+# Soundify exapmle (next-ssr)
+
+// TODO

examples/node-express-auth/README.md

@@ -0,0 +1,5 @@
+<img width="360px" alt="Soundify example banner" src="https://user-images.githubusercontent.com/51422045/221220147-a45333a1-be36-44b1-b06e-e9d6153518c8.png" />
+
+# Soundify exapmle (node-express-auth)
+
+// TODO

examples/node-express-auth/src/main.ts

@@ -42,13 +42,13 @@ app.get("/callback", async (req, res) => {
 	}
 
 	try {
-		const keypairData = await AuthCode.getGrantData({
+		const grantData = await AuthCode.getGrantData({
 			code,
 			state,
 			...config,
 		});
 
-		res.status(200).json(keypairData);
+		res.status(200).json(grantData);
 	} catch (error) {
 		res.status(400).send(String(error));
 	}

examples/react-implicit-grant/README.md

@@ -0,0 +1,5 @@
+<img width="360" alt="Soundify example banner" src="https://user-images.githubusercontent.com/51422045/221219257-bac1fa98-3bb1-4497-8c96-08dd5e40370f.png">
+
+# Soundify exapmle (react-implicit-grant)
+
+// TODO

examples/react-vite/package.json → examples/react-implicit-grant/package.json

@@ -1,5 +1,5 @@
 {
-	"name": "@examples/react-vite",
+	"name": "@examples/react-implicit-grant",
 	"private": "true",
 	"type": "module",
 	"scripts": {

examples/react-vite/src/pages/callback.tsx → examples/react-implicit-grant/src/pages/callback.tsx

@@ -1,9 +1,8 @@
 import { ImplicitGrant } from "soundify-web-api/web";
-import { SPOTIFY_ACCESS_TOKEN } from "../spotify";
 
 export const Page = () => {
 	const { access_token } = ImplicitGrant.getGrantData(location.hash);
-	localStorage.setItem(SPOTIFY_ACCESS_TOKEN, access_token);
+	localStorage.setItem("SPOTIFY_ACCESS_TOKEN", access_token);
 
 	location.replace("/");
 	return <h1>Redirecting...</h1>;

examples/react-vite/src/pages/index.tsx → examples/react-implicit-grant/src/pages/index.tsx

@@ -2,13 +2,11 @@ import { useQuery } from "@tanstack/react-query";
 import {
 	getCurrentUserProfile,
 	ImplicitGrant,
-	PureAuthProvider,
 	SpotifyClient,
 } from "soundify-web-api/web";
-import { SPOTIFY_ACCESS_TOKEN } from "../spotify";
 
 const useSpotifyClient = () => {
-	const accessToken = localStorage.getItem(SPOTIFY_ACCESS_TOKEN);
+	const accessToken = localStorage.getItem("SPOTIFY_ACCESS_TOKEN");
 
 	if (!accessToken) {
 		location.replace(ImplicitGrant.getAuthURL({
@@ -19,7 +17,7 @@ const useSpotifyClient = () => {
 	}
 
 	return new SpotifyClient({
-		authProvider: new PureAuthProvider(accessToken!),
+		authProvider: accessToken!,
 	});
 };
 

examples/react-pkce-auth/.env.example

@@ -0,0 +1,2 @@
+VITE_SPOTIFY_CLIENT_ID=
+VITE_SPOTIFY_REDIRECT_URI=http://localhost:3000/callback

examples/react-pkce-auth/README.md

@@ -0,0 +1,12 @@
+<img width="360" alt="Soundify example banner" src="https://user-images.githubusercontent.com/51422045/221218925-6fcfa2d0-d7fe-4dd8-983a-c9f6efe1dc36.png">
+
+# Soundify exapmle (react-pkce-auth)
+
+This example shows how to use PKCE authentication in a single-page React application. We will also use the `react-router-dom`, `@tanstack/react-query` libraries to speed up our routine workflow.
+
+Don't forget to fill in the env variables in the `.env` file in the same way as
+in the `.env.example` file.
+
+After logging to your spotify you will see your top artists
+
+<img src="https://user-images.githubusercontent.com/51422045/221215586-13f60468-d1a6-4810-b33e-e12471d77c01.jpg">

examples/pkce-auth/package.json → examples/react-pkce-auth/package.json

@@ -1,5 +1,5 @@
 {
-	"name": "@examples/pkce-auth",
+	"name": "@examples/react-pkce-auth",
 	"private": "true",
 	"type": "module",
 	"scripts": {