3 files changed, 70 insertions, 8 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;
diff --git a/components/Menu.jsx b/components/Menu.jsx
index bc883e4..f6de610 100644
--- a/components/Menu.jsx
+++ b/components/Menu.jsx
@@ -55,7 +55,7 @@ const Menu = ({ session, setSession, setEdit, showError, saveNote }) => {
 const styles = StyleSheet.create({
   menu: {
     backgroundColor: 'lightgrey',
-    height: 55,
+    height: 60,
     width: '100%',
     flexDirection: 'row',
     alignItems: 'flex-end',
@@ -64,7 +64,7 @@ const styles = StyleSheet.create({
   },
   menuText: {
     fontWeight: 'bold',
-    paddingHorizontal: 10,
+    paddingHorizontal: 15,
   },
 });
 
diff --git a/components/Note.jsx b/components/Note.jsx
index d13e786..cc5b119 100644
--- a/components/Note.jsx
+++ b/components/Note.jsx
@@ -20,10 +20,7 @@ const styles = StyleSheet.create({
     textAlign: 'left',
     padding: 15,
     width: '100%',
-    borderColor: '#222',
-    borderStyle: 'solid',
-    borderTopWidth: 1,
-    borderBottomWidth: 1,
+    backgroundColor: 'black',
   },
   title: {
     color: 'white',