remove notes

6 files changed, 84 insertions, 16 deletions

diff --git a/App.js b/App.js
index 1163cbe..c74c19c 100644
--- a/App.js
+++ b/App.js
@@ -1,5 +1,5 @@
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, View, Text } from 'react-native';
+import { StyleSheet, SafeAreaView, Text } from 'react-native';
 import { useState, useEffect } from 'react';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { Login, List, Edit } from './components'
@@ -39,19 +39,19 @@ export default function App() {
   }, []);
 
   if (error) return (
-    <View style={styles.container}>
+    <SafeAreaView style={styles.container}>
       <Text style={styles.error}>{error}</Text>
-    </View>
+    </SafeAreaView>
   )
 
   if (session === undefined) return (
-    <View style={styles.container}>
+    <SafeAreaView style={styles.container}>
       <Text>Loading...</Text>
-    </View>
+    </SafeAreaView>
   );
 
   return (
-    <View style={styles.container}>
+    <SafeAreaView style={styles.container}>
       {
         session === null
           ? <Login login={login} />
@@ -73,7 +73,7 @@ export default function App() {
             )
       }
       <StatusBar style="auto" />
-    </View>
+    </SafeAreaView>
   );
 };
 
@@ -81,7 +81,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#000',
-    height: '100%',
+    // height: '100%',
   },
   error: {
     color: 'red',
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',
diff --git a/package.json b/package.json
index 8fc0ac1..d3c3862 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-native": "0.68.2",
+    "react-native-swipeable-list": "^0.1.2",
     "react-native-web": "0.17.7"
   },
   "devDependencies": {
diff --git a/yarn.lock b/yarn.lock
index 824f645..6da801e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5350,6 +5350,11 @@ react-native-gradle-plugin@^0.0.6:
   resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.6.tgz#b61a9234ad2f61430937911003cddd7e15c72b45"
   integrity sha512-eIlgtsmDp1jLC24dRn43hB3kEcZVqx6DUQbR0N1ABXGnMEafm9I3V3dUUeD1vh+Dy5WqijSoEwLNUPLgu5zDMg==
 
+react-native-swipeable-list@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/react-native-swipeable-list/-/react-native-swipeable-list-0.1.2.tgz#829b89fb08e978c47383395d315f102be855e7da"
+  integrity sha512-FDeFLByUep3m3xuwS/ZkktxL7Xzg90XnKoo+KLTF04jiddyVZQMnXTHG8O4pyiEtg/swcBlT6XUktV+/KTVNXQ==
+
 react-native-web@0.17.7:
   version "0.17.7"
   resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.17.7.tgz#038899dbc94467a0ca0be214b88a30e0c117b176"