1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
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'
const List = ({ session, setSession, showError, setEdit }) => {
const [list, setList] = useState()
const [loading, setLoading] = useState(true)
const fetchNotes = async () => {
setLoading(true)
try {
const response = await fetch('https://apps.pruss.it/api/notes', { 'Cookie': session.cookies } )
const data = await response.json()
setList(data)
} catch(e) {
showError('Error while fetching notes')
}
setLoading(false)
}
useEffect(() => {
setLoading(true)
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
session={session}
setSession={setSession}
showError={showError}
setEdit={setEdit}
/>
{
loading || list === undefined
? <Text style={styles.text}>Loading notes...</Text>
: (
<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}
/>
)
}
</>
)
}
const styles = StyleSheet.create({
text: {
color: 'white',
padding: 20,
},
menu: {
backgroundColor: 'lightgrey',
height: 55,
width: '100%',
flexDirection: 'row',
alignItems: 'flex-end',
justifyContent: 'space-between',
padding: 10,
},
menuText: {
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;
|
