Port to Redux and add settings

src/store/music/actions.ts

@@ -0,0 +1,32 @@
+import { createAsyncThunk, createEntityAdapter } from '@reduxjs/toolkit';
+import { Album, AlbumTrack } from './types';
+import { AsyncThunkAPI } from '..';
+import { retrieveAlbums, retrieveAlbumTracks } from '../../utility/JellyfinApi';
+
+export const albumAdapter = createEntityAdapter<Album>({
+    selectId: album => album.Id,
+    sortComparer: (a, b) => a.Name.localeCompare(b.Name),
+});
+
+export const fetchAllAlbums = createAsyncThunk<Album[], undefined, AsyncThunkAPI>(
+    '/albums/all',
+    async (empty, thunkAPI) => {
+        console.log('RETRIEVING ALBUMS');
+        const credentials = thunkAPI.getState().settings.jellyfin;
+        return retrieveAlbums(credentials) as Promise<Album[]>;
+    }
+);
+
+export const trackAdapter = createEntityAdapter<AlbumTrack>({
+    selectId: track => track.Id,
+    sortComparer: (a, b) => a.IndexNumber - b.IndexNumber,
+});
+
+export const fetchTracksByAlbum = createAsyncThunk<AlbumTrack[], string, AsyncThunkAPI>(
+    '/tracks/byAlbum',
+    async (ItemId, thunkAPI) => {
+        console.log('RETRIEVING ALBUMS');
+        const credentials = thunkAPI.getState().settings.jellyfin;
+        return retrieveAlbumTracks(ItemId, credentials) as Promise<AlbumTrack[]>;
+    }
+);

src/store/music/index.ts

@@ -0,0 +1,41 @@
+import { fetchAllAlbums, albumAdapter, fetchTracksByAlbum, trackAdapter } from './actions';
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+    albums: {
+        ...albumAdapter.getInitialState(),
+        isLoading: false,
+    },
+    tracks: {
+        ...trackAdapter.getInitialState(),
+        isLoading: false,
+    },
+};
+
+const music = createSlice({
+    name: 'music',
+    initialState,
+    reducers: {},
+    extraReducers: builder => {
+        builder.addCase(fetchAllAlbums.fulfilled, (state, { payload }) => {
+            albumAdapter.setAll(state.albums, payload);
+            state.albums.isLoading = false;
+        });
+        builder.addCase(fetchAllAlbums.pending, (state) => { state.albums.isLoading = true; });
+        builder.addCase(fetchAllAlbums.rejected, (state) => { state.albums.isLoading = false; });
+        builder.addCase(fetchTracksByAlbum.fulfilled, (state, { payload }) => {
+            trackAdapter.setAll(state.tracks, payload);
+
+            // Also store all the track ids in the album
+            const album = state.albums.entities[payload[0].AlbumId];
+            if (album) {
+                album.Tracks = payload.map(d => d.Id);
+            }
+            state.tracks.isLoading = false;
+        });
+        builder.addCase(fetchTracksByAlbum.pending, (state) => { state.tracks.isLoading = true; });
+        builder.addCase(fetchTracksByAlbum.rejected, (state) => { state.tracks.isLoading = false; });
+    }
+});
+
+export default music;

src/store/music/types.ts

@@ -0,0 +1,75 @@
+import { Dictionary } from 'lodash';
+
+export interface UserData {
+    PlaybackPositionTicks: number;
+    PlayCount: number;
+    IsFavorite: boolean;
+    Played: boolean;
+    Key: string;
+}
+
+export interface ArtistItem {
+    Name: string;
+    Id: string;
+}
+
+export interface AlbumArtist {
+    Name: string;
+    Id: string;
+}
+
+export interface ImageTags {
+    Primary: string;
+}
+
+export interface Album {
+    Name: string;
+    ServerId: string;
+    Id: string;
+    SortName: string;
+    RunTimeTicks: number;
+    ProductionYear: number;
+    IsFolder: boolean;
+    Type: string;
+    UserData: UserData;
+    PrimaryImageAspectRatio: number;
+    Artists: string[];
+    ArtistItems: ArtistItem[];
+    AlbumArtist: string;
+    AlbumArtists: AlbumArtist[];
+    ImageTags: ImageTags;
+    BackdropImageTags: any[];
+    LocationType: string;
+    Tracks?: string[];
+}
+
+export interface AlbumTrack {
+    Name: string;
+    ServerId: string;
+    Id: string;
+    RunTimeTicks: number;
+    ProductionYear: number;
+    IndexNumber: number;
+    IsFolder: boolean;
+    Type: string;
+    UserData: UserData;
+    Artists: string[];
+    ArtistItems: ArtistItem[];
+    Album: string;
+    AlbumId: string;
+    AlbumPrimaryImageTag: string;
+    AlbumArtist: string;
+    AlbumArtists: AlbumArtist[];
+    ImageTags: ImageTags;
+    BackdropImageTags: any[];
+    LocationType: string;
+    MediaType: string;
+}
+
+export interface State {
+    albums: {
+        ids: string[];
+        entities: Dictionary<Album>;
+        isLoading: boolean;
+    }
+}