From 774113edda1b9219001ef4adab3f4e19c46bcecc Mon Sep 17 00:00:00 2001 From: piotrruss Date: Sat, 21 May 2022 18:42:30 +0100 Subject: refactor --- components/Edit.jsx | 60 ++++-------------------- components/List.jsx | 71 ++++------------------------ components/Login.jsx | 19 ++++---- components/Main.jsx | 26 +++++++++++ components/Menu.jsx | 100 ++++++++++++++++++---------------------- components/RemoveNoteButton.jsx | 31 +++++++++++++ components/index.js | 3 +- 7 files changed, 129 insertions(+), 181 deletions(-) create mode 100644 components/Main.jsx create mode 100644 components/RemoveNoteButton.jsx (limited to 'components') 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} /> { 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 ( - - - deleteItem(note)}> - Delete - - - - ); - }; - return ( <> { 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)} /> 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)} > Login 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 + ? ( + + ) : ( + + ) +} + +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 }) => ( + + { + saveNote + ? ( + <> + setEdit(null)} + > + Back + + + Save + + + ) : ( + <> + setEdit({})} + > + New Note + + + Sort + + handleLogout({ session, setSession, showError })} + > + {session.email} + + + ) } - } - - return ( - - { - saveNote - ? ( - <> - setEdit(null)} - > - Back - - - Save - - - ) : ( - <> - setEdit({})} - > - New Note - - - Sort - - confirmLogout({ logout, email: session.email })} - > - {session.email} - - - ) - } - - ) -} + +) 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 }) => ( + + + + Delete + + + +); + +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 } -- cgit v1.2.3