Allow for retring individual tracks

src/screens/modals/TrackPopupMenu.tsx

@@ -9,11 +9,13 @@ import { t } from '@localisation';
 import PlayIcon from 'assets/play.svg';
 import DownloadIcon from 'assets/cloud-down-arrow.svg';
 import QueueAppendIcon from 'assets/queue-append.svg';
+import TrashIcon from 'assets/trash.svg';
 import Text from 'components/Text';
 import { WrappableButton, WrappableButtonRow } from 'components/WrappableButtonRow';
 import { useDispatch } from 'react-redux';
-import { downloadTrack } from 'store/downloads/actions';
+import { downloadTrack, removeDownloadedTrack } from 'store/downloads/actions';
 import usePlayTracks from 'utility/usePlayTracks';
+import { selectIsDownloaded } from 'store/downloads/selectors';
 
 type Route = RouteProp<ModalStackParams, 'TrackPopupMenu'>;
 
@@ -24,30 +26,46 @@ const Container = styled.View`
 `;
 
 function TrackPopupMenu() {
-    // Retrieve helpers
+    // Retrieve trackId from route
     const { params: { trackId } } = useRoute<Route>();
+
+    // Retrieve helpers
     const navigation = useNavigation();
     const dispatch = useDispatch();
-    const track = useTypedSelector((state) => state.music.tracks.entities[trackId]);
     const playTracks = usePlayTracks();
 
+    // Retrieve data from store
+    const track = useTypedSelector((state) => state.music.tracks.entities[trackId]);
+    const isDownloaded = useTypedSelector(selectIsDownloaded(trackId));
+
     // Set callback to close the modal
     const closeModal = useCallback(() => {
         navigation.dispatch(StackActions.popToTop());    
     }, [navigation]);
 
+    // Callback for adding the track to the queue as the next song
     const handlePlayNext = useCallback(() => {
         playTracks([trackId], { method: 'add-after-currently-playing', play: false });
         closeModal();
     }, [playTracks, closeModal, trackId]);
+
+    // Callback for adding the track to the end of the queue
     const handleAddToQueue = useCallback(() => {
         playTracks([trackId], { method: 'add-to-end', play: false });
         closeModal();
     }, [playTracks, closeModal, trackId]);
+
+    // Callback for downloading the track
     const handleDownload = useCallback(() => {
         dispatch(downloadTrack(trackId));
         closeModal();
-    }, [trackId, dispatch]);
+    }, [trackId, dispatch, closeModal]);
+
+    // Callback for removing the downloaded track
+    const handleDelete = useCallback(() => {
+        dispatch(removeDownloadedTrack(trackId));
+        closeModal();
+    }, [trackId, dispatch, closeModal]);
 
     return (
         <Modal fullSize={false}>
@@ -57,7 +75,11 @@ function TrackPopupMenu() {
                 <WrappableButtonRow>
                     <WrappableButton title={t('play-next')} icon={PlayIcon} onPress={handlePlayNext} />
                     <WrappableButton title={t('add-to-queue')} icon={QueueAppendIcon} onPress={handleAddToQueue} />
-                    <WrappableButton title={t('download-track')} icon={DownloadIcon} onPress={handleDownload} />
+                    {isDownloaded ? (
+                        <WrappableButton title={t('delete-track')} icon={TrashIcon} onPress={handleDelete} />
+                    ) : (
+                        <WrappableButton title={t('download-track')} icon={DownloadIcon} onPress={handleDownload} />
+                    )}
                 </WrappableButtonRow>
             </Container>
         </Modal>