(1) Use absolute imports

(2) Allow queue tracks to be played when touched
(3) Store refresh dates as numbers

src/screens/Albums/components/Album.tsx

@@ -51,7 +51,7 @@ const Album: React.FC = () => {
 
     // Retrieve album tracks on load
     useEffect(() => {
-        if (!album?.lastRefreshed || differenceInDays(album.lastRefreshed, new Date()) > ALBUM_CACHE_AMOUNT_OF_DAYS) {
+        if (!album?.lastRefreshed || differenceInDays(album?.lastRefreshed, new Date()) > ALBUM_CACHE_AMOUNT_OF_DAYS) {
             refresh();
         }
     }, []);

src/screens/Player/components/Queue.tsx

@@ -3,6 +3,8 @@ import useQueue from 'utility/useQueue';
 import { View, Text } from 'react-native';
 import styled, { css } from 'styled-components/native';
 import useCurrentTrack from 'utility/useCurrentTrack';
+import TouchableHandler from 'components/TouchableHandler';
+import usePlayTrack from 'utility/usePlayTrack';
 
 const QueueItem = styled.View<{ active?: boolean, alreadyPlayed?: boolean }>`
     padding: 10px;
@@ -24,16 +26,19 @@ const QueueItem = styled.View<{ active?: boolean, alreadyPlayed?: boolean }>`
 export default function Queue() {
     const queue = useQueue();
     const currentTrack = useCurrentTrack();
-    const currentIndex = queue?.findIndex(d => d.id === currentTrack?.id);
+    const currentIndex = queue.findIndex(d => d.id === currentTrack?.id);
+    const playTrack = usePlayTrack();
 
     return (
         <View>
             <Text style={{ marginTop: 20, marginBottom: 20 }}>Queue</Text>
-            {queue?.map((track, i) => (
-                <QueueItem active={currentTrack?.id === track.id} key={i} alreadyPlayed={i < currentIndex}>
-                    <Text style={{marginBottom: 2}}>{track.title}</Text>
-                    <Text style={{ opacity: 0.5 }}>{track.artist}</Text>
-                </QueueItem>
+            {queue.map((track, i) => (
+                <TouchableHandler id={track.id} onPress={playTrack} key={track.id}>
+                    <QueueItem active={currentTrack?.id === track.id} key={i} alreadyPlayed={i < currentIndex}>
+                        <Text style={{marginBottom: 2}}>{track.title}</Text>
+                        <Text style={{ opacity: 0.5 }}>{track.artist}</Text>
+                    </QueueItem>
+                </TouchableHandler>
             ))}
         </View>
     );

src/store/music/index.ts

@@ -13,7 +13,7 @@ export interface State {
         entities: Dictionary<AlbumTrack>;
         ids: EntityId[];
     },
-    lastRefreshed?: Date,
+    lastRefreshed?: number,
 }
 
 const initialState: State = {
@@ -35,7 +35,7 @@ const music = createSlice({
         builder.addCase(fetchAllAlbums.fulfilled, (state, { payload }) => {
             albumAdapter.setAll(state.albums, payload);
             state.albums.isLoading = false;
-            state.lastRefreshed = new Date();
+            state.lastRefreshed = new Date().getTime();
         });
         builder.addCase(fetchAllAlbums.pending, (state) => { state.albums.isLoading = true; });
         builder.addCase(fetchAllAlbums.rejected, (state) => { state.albums.isLoading = false; });
@@ -46,7 +46,7 @@ const music = createSlice({
             const album = state.albums.entities[payload[0].AlbumId];
             if (album) {
                 album.Tracks = payload.map(d => d.Id);
-                album.lastRefreshed = new Date();
+                album.lastRefreshed = new Date().getTime();
             }
             state.tracks.isLoading = false;
         });

src/store/music/types.ts

@@ -41,7 +41,7 @@ export interface Album {
     BackdropImageTags: any[];
     LocationType: string;
     Tracks?: string[];
-    lastRefreshed?: Date;
+    lastRefreshed?: number;
 }
 
 export interface AlbumTrack {

src/utility/useQueue.ts

@@ -4,9 +4,9 @@ import TrackPlayer, { usePlaybackState, Track } from 'react-native-track-player'
 /**
  * This hook retrieves the current playing track from TrackPlayer
  */
-export default function useQueue(): Track[] | undefined {
+export default function useQueue(): Track[] {
     const state = usePlaybackState();
-    const [queue, setQueue] = useState<Track[]>();
+    const [queue, setQueue] = useState<Track[]>([]);
 
     useEffect(() => {
         TrackPlayer.getQueue().then(setQueue);