diff options
| -rw-r--r-- | components/List.jsx | 14 | ||||
| -rw-r--r-- | components/Menu.jsx | 93 | ||||
| -rw-r--r-- | helpers.jsx | 9 |
3 files changed, 71 insertions, 45 deletions
diff --git a/components/List.jsx b/components/List.jsx index b280d4a..8003187 100644 --- a/components/List.jsx +++ b/components/List.jsx @@ -10,6 +10,16 @@ import { handleRemove } from "../helpers"; const List = ({ session, setSession, showError, setEdit }) => { const [list, setList] = useState() const [loading, setLoading] = useState(true) + const [sort, setSort] = useState(0) + + const sortFn = (a, b) => { + const d = sort % 2 ? -1 : 1 + switch (sort) { + case 0: case 1: return d * (new Date(b.updated_at) - new Date(a.updated_at)) + case 2: case 3: return d * (new Date(b.created_at) - new Date(a.created_at)) + case 4: case 5: return d * a.title.toLowerCase().localeCompare(b.title.toLowerCase()) + } + } const fetchNotes = async () => { setLoading(true) @@ -35,13 +45,15 @@ const List = ({ session, setSession, showError, setEdit }) => { setSession={setSession} showError={showError} setEdit={setEdit} + sort={sort} + setSort={setSort} /> { 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))} + data={list.sort(sortFn)} renderItem={({item}) => <Note note={item} setEdit={setEdit} />} keyExtractor={item => item._id} ListEmptyComponent={<Text style={styles.text}>You don't have any notes</Text>} diff --git a/components/Menu.jsx b/components/Menu.jsx index 519fe94..f380c62 100644 --- a/components/Menu.jsx +++ b/components/Menu.jsx @@ -1,49 +1,54 @@ import { StyleSheet, Text, View } from 'react-native'; -import { handleLogout } from '../helpers' +import { handleLogout, SORT } from '../helpers' -const Menu = ({ session, setSession, setEdit, showError, saveNote }) => ( - <View style={styles.menu}> - { - saveNote - ? ( - <> - <Text - style={styles.menuText} - onPress={() => setEdit(null)} - > - Back - </Text> - <Text - style={styles.menuText} - onPress={saveNote} - > - Save - </Text> - </> - ) : ( - <> - <Text - style={styles.menuText} - onPress={() => setEdit({})} - > - New Note - </Text> - <Text - style={styles.menuText} - > - Sort - </Text> - <Text - style={styles.menuText} - onPress={() => handleLogout({ session, setSession, showError })} - > - {session.email} - </Text> - </> - ) - } - </View> -) +const Menu = ({ session, setSession, setEdit, showError, saveNote, sort, setSort }) => { + const changeSort = () => sort < SORT.length-1 ? setSort(sort+1) : setSort(0) + + return ( + <View style={styles.menu}> + { + saveNote + ? ( + <> + <Text + style={styles.menuText} + onPress={() => setEdit(null)} + > + Back + </Text> + <Text + style={styles.menuText} + onPress={saveNote} + > + Save + </Text> + </> + ) : ( + <> + <Text + style={styles.menuText} + onPress={() => setEdit({})} + > + New Note + </Text> + <Text + style={styles.menuText} + onPress={changeSort} + > + {SORT[sort]} + </Text> + <Text + style={styles.menuText} + onPress={() => handleLogout({ session, setSession, showError })} + > + {session.email} + </Text> + </> + ) + } + </View> + ) +} const styles = StyleSheet.create({ menu: { diff --git a/helpers.jsx b/helpers.jsx index 427158d..9e130dc 100644 --- a/helpers.jsx +++ b/helpers.jsx @@ -112,4 +112,13 @@ export const handleRemove = ({ note, session, fetchNotes, setLoading, showError ); }; +export const SORT = [ + '▼ Updated', + '▲ Updated', + '▼ Created', + '▲ Created', + '▼ Title', + '▲ Title', +] + |