refactor

7 files changed, 129 insertions, 181 deletions

diff --git a/components/Edit.jsx b/components/Edit.jsx
index 3ca7b32..7818637 100644
--- a/components/Edit.jsx
+++ b/components/Edit.jsx
@@ -1,62 +1,20 @@
 import { StyleSheet, Text, TextInput , View } from 'react-native';
 import { useState, useEffect } from 'react'
+import { handleGetNote, handleCreateNote, handleEditNote } from '../helpers';
 import Menu from './Menu'
 
-const Edit = ({ edit, setEdit, session, setSession, showError }) => {
+const Edit = ({ edit: note, setEdit, session, setSession, showError }) => {
   const [saving, setSaving] = useState()
-  const [title, setTitle] = useState(edit ? edit.title : '')
+  const [title, setTitle] = useState(note ? note.title : '')
   const [content, setContent] = useState()
 
-  const fetchNote = async () => {
-    try {
-      const response = await fetch(`https://apps.pruss.it/api/notes/${edit.noteId}`, {
-        method: 'GET', headers: { 'Cookie': session.cookies },
-      })
-      const { content } = await response.json()
-      setContent(content)
-    } catch(e) {
-      showError('Error while fetching note')
-      setEdit(null)
-    }
-  }
-
-  const saveNote = async () => {
-    try {
-      setSaving(true)
-      await fetch(`https://apps.pruss.it/api/notes/${edit._id}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'plain/text; charset=utf-8', 'Cookie': session.cookies },
-        body: JSON.stringify({ title, noteId: edit.noteId, content })
-      })
-      setSaving(false)
-      setEdit(null)
-    } catch(e) {
-      showError('Error while saving note')
-      setSaving(false)
-      setEdit(null)
-    }
-  }
-
-  createNote = async () => {
-    try {
-      setSaving(true)
-      await fetch(`https://apps.pruss.it/api/notes`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'plain/text; charset=utf-8', 'Cookie': session.cookies },
-        body: JSON.stringify({ title, content })
-      })
-      setSaving(false)
-      setEdit(null)
-    } catch(e) {
-      showError('Error while saving note')
-      setSaving(false)
-      setEdit(null)
-    }
-  }
+  const saveNote = () => note._id
+    ? handleEditNote({ note, title, content, setSaving, setEdit, session, showError })
+    : handleCreateNote({ title, content, setSaving, setEdit, session, showError })
 
   useEffect(() => {
-    if (edit?._id) {
-      fetchNote()
+    if (note?._id) {
+      handleGetNote({ note, setContent, setEdit, session, showError })
     } else {
       setContent('')
     }
@@ -69,7 +27,7 @@ const Edit = ({ edit, setEdit, session, setSession, showError }) => {
         setSession={setSession}
         showError={showError}
         setEdit={setEdit}
-        saveNote={edit._id ? saveNote : createNote}
+        saveNote={saveNote}
       />
       <View style={styles.container}>
         <TextInput
diff --git a/components/List.jsx b/components/List.jsx
index b7bdc07..b280d4a 100644
--- a/components/List.jsx
+++ b/components/List.jsx
@@ -1,8 +1,11 @@
-import { StyleSheet, Text, View, Pressable, Alert } from 'react-native'
+import { StyleSheet, Text } from 'react-native'
 import SwipeableFlatList from 'react-native-swipeable-list'
 import { useState, useEffect } from 'react'
+import { getList } from '../api'
 import Note from './Note'
 import Menu from './Menu'
+import RemoveNoteButton from './RemoveNoteButton'
+import { handleRemove } from "../helpers";
 
 const List = ({ session, setSession, showError, setEdit }) => {
   const [list, setList] = useState()
@@ -11,7 +14,7 @@ const List = ({ session, setSession, showError, setEdit }) => {
   const fetchNotes = async () => {
     setLoading(true)
     try {
-      const response = await fetch('https://apps.pruss.it/api/notes', { 'Cookie': session.cookies } )
+      const response = await getList({ session })
       const data = await response.json()
       setList(data)
     } catch(e) {
@@ -25,51 +28,6 @@ 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
@@ -90,8 +48,10 @@ const List = ({ session, setSession, showError, setEdit }) => {
               onRefresh={fetchNotes}
               refreshing={loading}
               maxSwipeDistance={80}
-              renderQuickActions={({item}) => removeBtn(item)}
               bounceFirstRowOnMount={false}
+              renderQuickActions={({item}) => RemoveNoteButton({
+                removeNote: () => handleRemove({ note: item, session, fetchNotes, setLoading, showError })
+              })}
             />
           )
       }
@@ -104,21 +64,6 @@ const styles = StyleSheet.create({
     color: 'white',
     padding: 20,
   },
-  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/Login.jsx b/components/Login.jsx
index 4c6ffb0..8b42913 100644
--- a/components/Login.jsx
+++ b/components/Login.jsx
@@ -1,9 +1,10 @@
-import { StyleSheet, Text, TextInput, Pressable, View } from 'react-native';
-import { useState } from 'react';
+import { StyleSheet, Text, TextInput, Pressable, View } from 'react-native'
+import { useState } from 'react'
+import { handleLogin } from '../helpers'
 
-const Login = ({ login }) => {
+const Login = ({ setSession, showError }) => {
   const [email, setEmail] = useState('');
-  const [pass, setPass] = useState('');
+  const [password, setPassword] = useState('');
   const disabled = (e, p) => !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e) || p.length < 6;
 
   return (
@@ -31,13 +32,13 @@ const Login = ({ login }) => {
         autoComplete="password-new"
         secureTextEntry={true}
         textContentType="newPassword"
-        value={pass}
-        onChange={e => setPass(e.nativeEvent.text)}
+        value={password}
+        onChange={e => setPassword(e.nativeEvent.text)}
       />
       <Pressable
-        onPress={() => login(email, pass)}
-        style={{...styles.button, opacity: disabled(email, pass) ? .3 : 1}}
-        disabled={disabled(email, pass)}
+        onPress={() => handleLogin({ email, password, setSession, showError })}
+        style={{...styles.button, opacity: disabled(email, password) ? .3 : 1}}
+        disabled={disabled(email, password)}
       >
         <Text style={styles.buttonText}>Login</Text>
       </Pressable>
diff --git a/components/Main.jsx b/components/Main.jsx
new file mode 100644
index 0000000..3f48c3e
--- /dev/null
+++ b/components/Main.jsx
@@ -0,0 +1,26 @@
+import { List, Edit } from '.'
+import { useState } from 'react'
+
+const Main = ({ session, setSession, showError }) => {
+  const [edit, setEdit] = useState(null)
+
+  return edit
+    ? (
+      <Edit
+        edit={edit}
+        setEdit={setEdit}
+        session={session}
+        setSession={setSession}
+        showError={showError}
+      />
+    ) : (
+      <List
+        session={session}
+        setSession={setSession}
+        showError={showError}
+        setEdit={setEdit}
+      />
+    )
+}
+
+export default Main
diff --git a/components/Menu.jsx b/components/Menu.jsx
index fb82f34..519fe94 100644
--- a/components/Menu.jsx
+++ b/components/Menu.jsx
@@ -1,61 +1,49 @@
-import { StyleSheet, Text, View, Alert } from 'react-native';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { confirmLogout } from '../helpers'
+import { StyleSheet, Text, View } from 'react-native';
+import { handleLogout } from '../helpers'
 
-const Menu = ({ session, setSession, setEdit, showError, saveNote }) => {
-  const logout = async () => {
-    try {
-      await AsyncStorage.clear();
-      setSession(null)
-    } catch(e) {
-      showError('Error while logging out')
+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>
+          </>
+        )
     }
-  }
-
-  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}
-              >
-                Sort
-              </Text>
-              <Text
-                style={styles.menuText}
-                onPress={() => confirmLogout({ logout, email: session.email })}
-              >
-                {session.email}
-              </Text>
-            </>
-          )
-      }
-    </View>
-  )
-}
+  </View>
+)
 
 const styles = StyleSheet.create({
   menu: {
diff --git a/components/RemoveNoteButton.jsx b/components/RemoveNoteButton.jsx
new file mode 100644
index 0000000..d88d6b0
--- /dev/null
+++ b/components/RemoveNoteButton.jsx
@@ -0,0 +1,31 @@
+import { StyleSheet, Text, View, Pressable } from 'react-native'
+
+const RemoveNoteButton = ({ removeNote }) => (
+  <View style={styles.buttonsContainer}>
+    <View style={styles.button}>
+      <Pressable onPress={removeNote}>
+        <Text style={styles.buttonText}>Delete</Text>
+      </Pressable>
+    </View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  button: {
+    width: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'red',
+  },
+  buttonText: {
+    fontWeight: 'bold',
+    color: 'white',
+  },
+  buttonsContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+});
+
+export default RemoveNoteButton;
diff --git a/components/index.js b/components/index.js
index 0f227df..7323846 100644
--- a/components/index.js
+++ b/components/index.js
@@ -1,7 +1,6 @@
 import Edit from './Edit'
 import List from './List'
-import Login from './Login'
 import Menu from './Menu'
 import Note from './Note'
 
-export { Edit, List, Login, Menu, Note }
+export { Edit, List, Menu, Note }