1 files changed, 67 insertions, 2 deletions
diff --git a/components/List.jsx b/components/List.jsx
index ae578d9..02a93a1 100644
--- a/components/List.jsx
+++ b/components/List.jsx
@@ -1,4 +1,5 @@
-import { StyleSheet, FlatList, Text } from 'react-native'
+import { StyleSheet, Text, View, Pressable, Alert } from 'react-native'
+import SwipeableFlatList from 'react-native-swipeable-list'
 import { useState, useEffect } from 'react'
 import Note from './Note'
 import Menu from './Menu'
@@ -24,6 +25,51 @@ const List = ({ session, setSession, showError, setEdit }) => {
     fetchNotes()
   }, [])
 
+  const deleteNote = async (note) => {
+    setLoading(true)
+    try {
+      await fetch(`https://apps.pruss.it/api/notes/${note._id}`, {
+        method: 'DELETE', headers: { 'Cookie': session.cookies },
+      })
+      fetchNotes()
+    } catch(e) {
+      showError('Error while removing note')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const deleteItem = note => {
+    Alert.alert(
+      'Are you sure?',
+      `Note "${note.title}" will be permanently removed`,
+      [
+        {
+          text: 'Remove',
+          onPress: () => deleteNote(note),
+          style: 'destructive',
+        },
+        {
+          text: 'Cancel',
+          onPress: () => {},
+          style: 'cancel',
+        },
+      ],
+    );
+  };
+
+  const removeBtn = (note) => {
+    return (
+      <View style={styles.buttonsContainer}>
+        <View style={styles.button}>
+          <Pressable onPress={() => deleteItem(note)}>
+            <Text style={styles.buttonText}>Delete</Text>
+          </Pressable>
+        </View>
+      </View>
+    );
+  };
+
   return (
     <>
       <Menu
@@ -36,12 +82,16 @@ const List = ({ session, setSession, showError, setEdit }) => {
         loading || list === undefined
           ? <Text style={styles.text}>Loading notes...</Text>
           : (
-            <FlatList
+            <SwipeableFlatList
               data={list.sort((a,b) => new Date(b.updated_at) - new Date(a.updated_at))}
               renderItem={({item}) => <Note note={item} setEdit={setEdit} />}
+              keyExtractor={item => item._id}
               ListEmptyComponent={<Text style={styles.text}>You don't have any notes</Text>}
               onRefresh={fetchNotes}
               refreshing={loading}
+              maxSwipeDistance={80}
+              renderQuickActions={({item}) => removeBtn(item)}
+              bounceFirstRowOnMount={false}
             />
           )
       }
@@ -67,6 +117,21 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     paddingHorizontal: 10,
   },
+  button: {
+    width: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'red',
+  },
+  buttonText: {
+    fontWeight: 'bold',
+    color: 'white',
+  },
+  buttonsContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
 });
 
 export default List;