Port to Redux and add settings

src/store/index.ts

@@ -0,0 +1,34 @@
+import { configureStore, getDefaultMiddleware, combineReducers } from '@reduxjs/toolkit';
+import { useSelector, TypedUseSelectorHook } from 'react-redux';
+import AsyncStorage from '@react-native-community/async-storage';
+import { persistStore, persistReducer } from 'redux-persist';
+import logger from 'redux-logger';
+
+const persistConfig = {
+    key: 'root',
+    storage: AsyncStorage,
+};
+
+import settings from './settings';
+import music from './music';
+
+const reducers = combineReducers({
+    settings,
+    music: music.reducer,
+});
+
+const persistedReducer = persistReducer(persistConfig, reducers);
+
+const store = configureStore({
+    reducer: persistedReducer,
+    middleware: getDefaultMiddleware({ serializableCheck: false }).concat(logger, ),
+});
+
+export type AppState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+export type AsyncThunkAPI = { state: AppState, dispatch: AppDispatch };
+export const useTypedSelector: TypedUseSelectorHook<AppState> = useSelector;
+
+export const persistedStore = persistStore(store);
+
+export default store;

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;
+    }
+}

src/store/settings/actions.ts

@@ -0,0 +1,4 @@
+import { createAction } from '@reduxjs/toolkit';
+
+export const setJellyfinCredentials = createAction<{ access_token: string, user_id: string, uri: string, deviced_id: string; }>('SET_JELLYFIN_CREDENTIALS');
+export const setBitrate = createAction<number>('SET_BITRATE');

src/store/settings/index.ts

@@ -0,0 +1,29 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { setBitrate, setJellyfinCredentials } from './actions';
+
+interface State {
+    jellyfin?: {
+        uri: string;
+        user_id: string;
+        access_token: string;
+        device_id: string;
+    }
+    bitrate: number;
+}
+
+const initialState: State = {
+    bitrate: 140000000
+};
+
+const settings = createReducer(initialState, {
+    [setJellyfinCredentials.type]: (state, action) => ({
+        ...state,
+        jellyfin: action.payload,
+    }),
+    [setBitrate.type]: (state, action) => ({
+        ...state,
+        bitrate: action.payload,
+    }),
+});
+
+export default settings;