[#30] Update playlist

subadapcocuk · Nov 11, 2021 · b8b7e5c · b8b7e5c
1 parent fc61536
commit b8b7e5c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/src/components/song.js b/src/components/song.js
@@ -16,11 +16,12 @@ export const Song = ({ song, openUrl }) => (
 export const SongItem = ({
   song,
   selected,
-  toggle,
+  onLeftOpen,
+  onRightOpen,
   image = true,
-  play = false,
+  onPress = false,
 }) => (
-  <SwipeableRow onLeftOpen={() => toggle(song.no)} onPress={play}>
+  <SwipeableRow {...{ onLeftOpen, onRightOpen, onPress }}>
     <View style={songStyle(selected)}>
       {image && (
         <Image style={styles.playlistImage} source={{ uri: song.image }} />

diff --git a/src/screens/playlist.js b/src/screens/playlist.js
@@ -1,10 +1,11 @@
 import React, { useState } from "react";
-import { FlatList, View } from "react-native";
+import { Alert, FlatList } from "react-native";
 import Player from "../components/player";
 import { SongItem, SongDetail } from "../components/song";
 import { deviceWidth } from "../helpers/styles";
 import { getSongs } from "../api/data";
 import { AnimatedTabView, Tabs, TabViewItem } from "../components/tabs";
+import { ScrollView } from "react-native-gesture-handler";
 
 export const Playlist = ({ navigation }) => {
   const [playlist, setPlaylist] = useState([]);
@@ -26,11 +27,13 @@ export const Playlist = ({ navigation }) => {
     navigation.navigate("Page", { url });
   };
 
-  const toggleSong = (no) => {
+  const toggleSong = ({ name, no }) => {
     if (playlist.find((n) => n === no)) {
       removeSong(no);
+      Alert.alert(`${name} listeden kaldırıldı`);
     } else {
       addSong(no);
+      Alert.alert(`${name} listeye eklendi`);
     }
   };
 
@@ -50,21 +53,22 @@ export const Playlist = ({ navigation }) => {
   const song = songs.filter((s) => s.no === playlist[currentIndex])[0];
 
   const PlaylistDetail = () => (
-    <View style={{ width: deviceWidth }}>
+    <>
       <SongDetail {...{ song, openUrl }} />
       <FlatList
         keyExtractor={(item) => item}
+        style={{ width: deviceWidth }}
         data={playlist}
         renderItem={({ item, index }) => (
           <SongItem
             song={songs.filter((s) => item === s.no)[0]}
             selected={item === song.no}
-            toggle={toggleSong}
-            play={() => setCurrentIndex(index)}
+            onRightOpen={() => toggleSong(song)}
+            onPress={() => setCurrentIndex(index)}
           />
         )}
       />
-    </View>
+    </>
   );
 
   const Songlist = () => (
@@ -76,7 +80,7 @@ export const Playlist = ({ navigation }) => {
         <SongItem
           song={item}
           selected={playlist.find((no) => no === item.no) !== undefined}
-          toggle={toggleSong}
+          onLeftOpen={() => toggleSong(item)}
         />
       )}
     />