From 95a008d8af39d783167877fe0a8439a4b6a93de1 Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Sun, 2 Jan 2022 17:46:50 +0100
Subject: [PATCH] Add buttons for deleting downloaded tracks from playlist or
 album

---
 src/components/Button.tsx                     |  7 ++++-
 src/localisation/lang/en/locale.json          |  2 ++
 src/localisation/types.ts                     |  3 +-
 src/screens/Music/stacks/Album.tsx            |  3 +-
 src/screens/Music/stacks/Playlist.tsx         |  3 +-
 .../Music/stacks/components/TrackListView.tsx | 29 ++++++++++++++++---
 src/store/downloads/selectors.ts              | 13 +++++++++
 7 files changed, 52 insertions(+), 8 deletions(-)
 create mode 100644 src/store/downloads/selectors.ts

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index bf7b762..d39af06 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -20,6 +20,10 @@ const BaseButton = styled.Pressable`
     align-items: center;
     justify-content: center;
     flex-grow: 1;
+
+    ${(props) => props.disabled && css`
+        opacity: 0.25;
+    `}
 `;
 
 const ButtonText = styled.Text<{ active?: boolean }>`
@@ -32,7 +36,7 @@ const ButtonText = styled.Text<{ active?: boolean }>`
 `;
 
 const Button = React.forwardRef<View, ButtonProps>(function Button(props, ref) {
-    const { icon: Icon, title, ...rest } = props;
+    const { icon: Icon, title, disabled, ...rest } = props;
     const defaultStyles = useDefaultStyles();
     const [isPressed, setPressed] = useState(false);
     const handlePressIn = useCallback(() => setPressed(true), []);
@@ -41,6 +45,7 @@ const Button = React.forwardRef<View, ButtonProps>(function Button(props, ref) {
     return (
         <BaseButton
             {...rest}
+            disabled={disabled}
             ref={ref}
             onPressIn={handlePressIn}
             onPressOut={handlePressOut}
diff --git a/src/localisation/lang/en/locale.json b/src/localisation/lang/en/locale.json
index b48406c..1e5bb70 100644
--- a/src/localisation/lang/en/locale.json
+++ b/src/localisation/lang/en/locale.json
@@ -51,5 +51,7 @@
     "download-playlist": "Download Playlist",
     "no-downloads": "You have not yet downloaded any tracks",
     "delete-all-tracks": "Delete All Tracks",
+    "delete-album": "Delete Album",
+    "delete-playlist": "Delete Playlist",
     "total-download-size": "Total Download Size"
 }
\ No newline at end of file
diff --git a/src/localisation/types.ts b/src/localisation/types.ts
index b62563c..c0d929e 100644
--- a/src/localisation/types.ts
+++ b/src/localisation/types.ts
@@ -48,6 +48,7 @@ export type LocaleKeys = 'play-next'
 | 'download-track'
 | 'download-album'
 | 'download-playlist'
-| 'delete-all-tracks'
+| 'delete-album'
+| 'delete-playlist'
 | 'total-download-size'
 | 'no-downloads'
\ No newline at end of file
diff --git a/src/screens/Music/stacks/Album.tsx b/src/screens/Music/stacks/Album.tsx
index 04c46b2..b306671 100644
--- a/src/screens/Music/stacks/Album.tsx
+++ b/src/screens/Music/stacks/Album.tsx
@@ -37,7 +37,8 @@ const Album: React.FC = () => {
             refresh={refresh}
             playButtonText={t('play-album')}
             shuffleButtonText={t('shuffle-album')}
-            downloadText={t('download-album')}
+            downloadButtonText={t('download-album')}
+            deleteButtonText={t('delete-album')}
         />
     );
 };
diff --git a/src/screens/Music/stacks/Playlist.tsx b/src/screens/Music/stacks/Playlist.tsx
index 4a39945..b2a0807 100644
--- a/src/screens/Music/stacks/Playlist.tsx
+++ b/src/screens/Music/stacks/Playlist.tsx
@@ -37,7 +37,8 @@ const Playlist: React.FC = () => {
             listNumberingStyle='index'
             playButtonText={t('play-playlist')}
             shuffleButtonText={t('shuffle-playlist')}
-            downloadText={t('download-playlist')}
+            downloadButtonText={t('download-playlist')} 
+            deleteButtonText={t('delete-playlist')}
         />
     );
 };
diff --git a/src/screens/Music/stacks/components/TrackListView.tsx b/src/screens/Music/stacks/components/TrackListView.tsx
index d3b29b5..066ff29 100644
--- a/src/screens/Music/stacks/components/TrackListView.tsx
+++ b/src/screens/Music/stacks/components/TrackListView.tsx
@@ -19,8 +19,10 @@ import { MusicNavigationProp } from 'screens/Music/types';
 import DownloadIcon from 'components/DownloadIcon';
 import Button from 'components/Button';
 import CloudDownArrow from 'assets/cloud-down-arrow.svg';
+import Trash from 'assets/trash.svg';
 import { useDispatch } from 'react-redux';
-import { downloadTrack } from 'store/downloads/actions';
+import { downloadTrack, removeDownloadedTrack } from 'store/downloads/actions';
+import { selectDownloadedTracks } from 'store/downloads/selectors';
 
 const Screen = Dimensions.get('screen');
 
@@ -68,7 +70,8 @@ interface TrackListViewProps {
     refresh: () => void;
     playButtonText: string;
     shuffleButtonText: string;
-    downloadText: string;
+    downloadButtonText: string;
+    deleteButtonText: string;
     listNumberingStyle?: 'album' | 'index';
 }
 
@@ -80,7 +83,8 @@ const TrackListView: React.FC<TrackListViewProps> = ({
     refresh,
     playButtonText,
     shuffleButtonText,
-    downloadText,
+    downloadButtonText,
+    deleteButtonText,
     listNumberingStyle = 'album',
 }) => {
     const defaultStyles = useDefaultStyles();
@@ -88,6 +92,7 @@ const TrackListView: React.FC<TrackListViewProps> = ({
     // Retrieve state
     const tracks = useTypedSelector((state) => state.music.tracks.entities);
     const isLoading = useTypedSelector((state) => state.music.tracks.isLoading);
+    const downloadedTracks = useTypedSelector(selectDownloadedTracks(trackIds));
 
     // Retrieve helpers
     const getImage = useGetImage();
@@ -110,6 +115,9 @@ const TrackListView: React.FC<TrackListViewProps> = ({
     const downloadAllTracks = useCallback(() => {
         trackIds.forEach((trackId) => dispatch(downloadTrack(trackId)));
     }, [dispatch, trackIds]);
+    const deleteAllTracks = useCallback(() => {
+        downloadedTracks.forEach((trackId) => dispatch(removeDownloadedTrack(trackId)));
+    }, [dispatch, downloadedTracks]);
 
     return (
         <ScrollView
@@ -162,7 +170,20 @@ const TrackListView: React.FC<TrackListViewProps> = ({
                         </TrackContainer>
                     </TouchableHandler>
                 )}
-                <Button icon={CloudDownArrow} title={downloadText} style={{ marginTop: 12 }} onPress={downloadAllTracks} />
+                <WrappableButtonRow style={{ marginTop: 24 }}>
+                    <WrappableButton
+                        icon={CloudDownArrow}
+                        title={downloadButtonText}
+                        onPress={downloadAllTracks}
+                        disabled={downloadedTracks.length === trackIds.length}
+                    />
+                    <WrappableButton
+                        icon={Trash}
+                        title={deleteButtonText}
+                        onPress={deleteAllTracks}
+                        disabled={downloadedTracks.length === 0}
+                    />
+                </WrappableButtonRow>
             </View>
         </ScrollView>
     );
diff --git a/src/store/downloads/selectors.ts b/src/store/downloads/selectors.ts
new file mode 100644
index 0000000..cb77823
--- /dev/null
+++ b/src/store/downloads/selectors.ts
@@ -0,0 +1,13 @@
+import { createSelector, EntityId } from '@reduxjs/toolkit';
+import { intersection } from 'lodash';
+import { AppState } from 'store';
+
+export const selectDownloadedTracks = (trackIds: EntityId[]) => (
+    createSelector(
+        (state: AppState) => state.downloads,
+        ({ entities, ids }) => {
+            return intersection(trackIds, ids)
+                .filter((id) => entities[id]?.isComplete);
+        }
+    )
+);