feat: add playlist support

Author: kperwel

api.ts

@@ -0,0 +1,10 @@
+import { AudioFeature } from "./lib/AudioFeaturesResponse";
+import { Item } from "./lib/TracksByPlaylistResponse";
+
+export interface FeaturedItem extends Item {
+    features: AudioFeature;
+}
+
+export interface TracksByPlaylistWithFeaturesResponse {
+    items: FeaturedItem[];
+  }

hooks/useErrorsGuardedFetch.tsx

@@ -0,0 +1,16 @@
+import { redirect } from "next/dist/next-server/server/api-utils";
+import { useRouter } from "next/router";
+import useFetch from "./useFetch";
+
+function useErrorGuardedFetch<ResultData = unknown>(...args) {
+    const result = useFetch<ResultData>(...args);
+    const router = useRouter()
+
+    if (result.status === "error" && result.error.status === 401) {
+        router.push("/login");
+    }
+
+    return result;
+}
+
+export default useErrorGuardedFetch;

hooks/useFetch.ts

@@ -0,0 +1,79 @@
+import { useEffect, useReducer, useRef } from "react";
+import axios, { AxiosRequestConfig } from "axios";
+// State & hook output
+
+interface Error {
+    message: string,
+    status: number,
+}
+
+interface State<T> {
+  status: "init" | "fetching" | "error" | "fetched";
+  data?: T;
+  error?: Error;
+}
+interface Cache<T> {
+  [url: string]: T;
+}
+
+
+// discriminated union type
+type Action<T> =
+  | { type: "request" }
+  | { type: "success"; payload: T }
+  | { type: "failure"; payload: Error };
+function useFetch<T = unknown>(
+  url?: string,
+  options?: AxiosRequestConfig
+): State<T> {
+  const cache = useRef<Cache<T>>({});
+  const cancelRequest = useRef<boolean>(false);
+  const initialState: State<T> = {
+    status: "init",
+    error: undefined,
+    data: undefined,
+  };
+  // Keep state logic separated
+  const fetchReducer = (state: State<T>, action: Action<T>): State<T> => {
+    switch (action.type) {
+      case "request":
+        return { ...initialState, status: "fetching" };
+      case "success":
+        return { ...initialState, status: "fetched", data: action.payload };
+      case "failure":
+        return { ...initialState, status: "error", error: action.payload };
+      default:
+        return state;
+    }
+  };
+  const [state, dispatch] = useReducer(fetchReducer, initialState);
+  useEffect(() => {
+    if (!url) {
+      return;
+    }
+    const fetchData = async () => {
+      dispatch({ type: "request" });
+      if (cache.current[url]) {
+        dispatch({ type: "success", payload: cache.current[url] });
+      } else {
+        try {
+          const response = await axios(url, options);
+          cache.current[url] = response.data;
+          if (cancelRequest.current) return;
+          dispatch({ type: "success", payload: response.data });
+        } catch (error) {
+          if (cancelRequest.current) return;
+          console.log(error.response);
+          dispatch({ type: "failure", payload: { message: error.message, status: error.response.status }});
+        }
+      }
+    };
+    fetchData();
+    return () => {
+      cancelRequest.current = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url]);
+  return state;
+}
+export default useFetch;

lib/AudioFeaturesResponse.ts

@@ -0,0 +1,29 @@
+export interface AudioFeaturesResponse {
+  audio_features: AudioFeature[];
+}
+
+export interface NumericAudioFeatures {
+    danceability: number;
+    energy: number;
+    key: number;
+    loudness: number;
+    mode: number;
+    speechiness: number;
+    acousticness: number;
+    instrumentalness: number;
+    liveness: number;
+    valence: number;
+    tempo: number;
+    duration_ms: number;
+    time_signature: number;
+}
+
+export interface AudioFeature extends NumericAudioFeatures {
+  type: string;
+  id: string;
+  uri: string;
+  track_href: string;
+  analysis_url: string;
+}
+
+

lib/MeResponse.ts

@@ -0,0 +1,25 @@
+export interface MeResponse {
+    display_name:  string;
+    external_urls: ExternalUrls;
+    followers:     Followers;
+    href:          string;
+    id:            string;
+    images:        Image[];
+    type:          string;
+    uri:           string;
+}
+
+export interface ExternalUrls {
+    spotify: string;
+}
+
+export interface Followers {
+    href:  null;
+    total: number;
+}
+
+export interface Image {
+    height: null;
+    url:    string;
+    width:  null;
+}

lib/PlaylistsResponse.ts

@@ -0,0 +1,58 @@
+export interface PlaylistsResponse {
+    href:     string;
+    items:    Playlist[];
+    limit:    number;
+    next:     string;
+    offset:   number;
+    previous: null;
+    total:    number;
+}
+
+export interface Playlist {
+    collaborative: boolean;
+    description:   string;
+    external_urls: ExternalUrls;
+    href:          string;
+    id:            string;
+    images:        Image[];
+    name:          string;
+    owner:         Owner;
+    primary_color: null;
+    public:        boolean;
+    snapshot_id:   string;
+    tracks:        Tracks;
+    type:          ItemType;
+    uri:           string;
+}
+
+export interface ExternalUrls {
+    spotify: string;
+}
+
+export interface Image {
+    height: number | null;
+    url:    string;
+    width:  number | null;
+}
+
+export interface Owner {
+    display_name:  string;
+    external_urls: ExternalUrls;
+    href:          string;
+    id:            string;
+    type:          OwnerType;
+    uri:           string;
+}
+
+export enum OwnerType {
+    User = "user",
+}
+
+export interface Tracks {
+    href:  string;
+    total: number;
+}
+
+export enum ItemType {
+    Playlist = "playlist",
+}

lib/TracksByPlaylistResponse.ts

@@ -0,0 +1,23 @@
+export interface TracksByPlaylistResponse {
+  items: Item[];
+}
+
+export interface Item {
+  track: Track;
+}
+
+export interface Track {
+  album: Album;
+  id:    string;
+  name:  string;
+}
+
+export interface Album {
+  images: Image[];
+}
+
+export interface Image {
+  height: number;
+  url:    string;
+  width:  number;
+}