add sorting

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',
+]
+