From 1173480fd93a56fa60333c01ffc70b67db82826a Mon Sep 17 00:00:00 2001
From: piotrruss <mail@pruss.it>
Date: Sun, 22 May 2022 18:11:30 +0100
Subject: added loader

---
 App.jsx               |  3 ++-
 components/Edit.jsx   |  8 +++---
 components/List.jsx   |  7 ++---
 components/Loader.jsx | 20 ++++++++++++++
 components/Login.jsx  | 74 ++++++++++++++++++++++++++++-----------------------
 components/Main.jsx   |  3 ++-
 components/index.js   |  6 -----
 eas.json              |  6 ++++-
 utils/helpers.jsx     |  4 ++-
 9 files changed, 80 insertions(+), 51 deletions(-)
 create mode 100644 components/Loader.jsx
 delete mode 100644 components/index.js

diff --git a/App.jsx b/App.jsx
index 2d40b0e..4dfd6f6 100644
--- a/App.jsx
+++ b/App.jsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import Main from './components/Main'
 import Login from './components/Login'
+import Loader from './components/Loader'
 
 export default function App() {
   const [session, setSession] = useState()
@@ -24,7 +25,7 @@ export default function App() {
     <SafeAreaView style={styles.container}>
       {error
         ? <Text style={styles.error}>{error}</Text>
-        : <Text>Loading...</Text>}
+        : <Loader />}
     </SafeAreaView>
   )
 
diff --git a/components/Edit.jsx b/components/Edit.jsx
index b15b7fc..7d7f57f 100644
--- a/components/Edit.jsx
+++ b/components/Edit.jsx
@@ -1,7 +1,8 @@
-import { StyleSheet, Text, TextInput , View } from 'react-native'
+import { StyleSheet, TextInput , View } from 'react-native'
 import { useState, useEffect } from 'react'
 import { handleGetNote, handleCreateNote, handleEditNote } from '../utils/helpers'
 import Menu from './Menu'
+import Loader from './Loader'
 
 const Edit = ({ edit: note, setEdit, session, setSession, showError }) => {
   const [saving, setSaving] = useState()
@@ -39,7 +40,7 @@ const Edit = ({ edit: note, setEdit, session, setSession, showError }) => {
         />
         {
           content === undefined || saving
-            ? <Text style={styles.text}>{saving ? 'Saving...' : 'Loading content...'}</Text>
+            ? <Loader style={{paddingTop: 10}} text={saving ? 'Saving...' : 'Loading content...'} />
             : (
               <TextInput
                 placeholder="Content"
@@ -76,9 +77,6 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     paddingVertical: 10,
   },
-  text: {
-    color: 'white',
-  }
 });
 
 export default Edit
diff --git a/components/List.jsx b/components/List.jsx
index 3e4e11c..07551ab 100644
--- a/components/List.jsx
+++ b/components/List.jsx
@@ -2,10 +2,11 @@ import { StyleSheet, Text } from 'react-native'
 import SwipeableFlatList from 'react-native-swipeable-list'
 import { useState, useEffect } from 'react'
 import { getList } from '../utils/api'
+import { handleRemove } from "../utils/helpers";
 import Note from './Note'
 import Menu from './Menu'
 import RemoveNoteButton from './RemoveNoteButton'
-import { handleRemove } from "../utils/helpers";
+import Loader from './Loader'
 
 const List = ({ session, setSession, showError, setEdit }) => {
   const [list, setList] = useState()
@@ -50,7 +51,7 @@ const List = ({ session, setSession, showError, setEdit }) => {
       />
       {
         loading || list === undefined
-          ? <Text style={styles.text}>Loading notes...</Text>
+          ? <Loader style={{ padding: 15 }} text="Loading notes..." />
           : (
             <SwipeableFlatList
               data={list.sort(sortFn)}
@@ -74,7 +75,7 @@ const List = ({ session, setSession, showError, setEdit }) => {
 const styles = StyleSheet.create({
   text: {
     color: 'white',
-    padding: 20,
+    padding: 15,
   },
 });
 
diff --git a/components/Loader.jsx b/components/Loader.jsx
new file mode 100644
index 0000000..1804502
--- /dev/null
+++ b/components/Loader.jsx
@@ -0,0 +1,20 @@
+import { Text } from 'react-native'
+import { useState, useEffect } from "react"
+
+const Loader = ({ style = {}, text = 'Loading...' }) => {
+  const [nr, setNr] = useState(0)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      nr < text.length
+        ? setNr(nr+1)
+        : clearTimeout(timer)
+    }, 50);
+
+    return () => clearTimeout(timer);
+  });
+
+  return <Text style={{ color: 'grey', ...style }}>{text.substring(0, nr)}</Text>
+}
+
+export default Loader
diff --git a/components/Login.jsx b/components/Login.jsx
index db4b15b..1a6ef92 100644
--- a/components/Login.jsx
+++ b/components/Login.jsx
@@ -1,47 +1,55 @@
 import { StyleSheet, Text, TextInput, Pressable, View } from 'react-native'
 import { useState } from 'react'
 import { handleLogin } from '../utils/helpers'
+import Loader from './Loader'
 
 const Login = ({ setSession, showError }) => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const disabled = (e, p) => !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e) || p.length < 6;
+  const [loading, setLoading ] = useState(false)
 
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>Login to Notes</Text>
-      <Text style={styles.text}>Account can be created through apps.pruss.it website</Text>
-      <TextInput
-        style={styles.input}
-        autoComplete="email"
-        placeholder="Email"
-        placeholderTextColor="#BBB"
-        keyboardType="email-address"
-        returnKeyType="next"
-        autoComplete="email"
-        textContentType="emailAddress"
-        value={email}
-        onChange={e => setEmail(e.nativeEvent.text.toLowerCase())}
-      />
-      <TextInput
-        style={styles.input}
-        autoComplete="password"
-        placeholder="Password"
-        placeholderTextColor="#BBB"
-        returnKeyType="next"
-        autoComplete="password-new"
-        secureTextEntry={true}
-        textContentType="newPassword"
-        value={password}
-        onChange={e => setPassword(e.nativeEvent.text)}
-      />
-      <Pressable
-        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>
+      {loading
+        ? <Loader style={{ width: 100 }} text="Signing in..." />
+        : (
+          <>
+          <Text style={styles.title}>Login to Notes</Text>
+          <Text style={styles.text}>Account can be created through apps.pruss.it website</Text>
+          <TextInput
+            style={styles.input}
+            autoComplete="email"
+            placeholder="Email"
+            placeholderTextColor="#BBB"
+            keyboardType="email-address"
+            returnKeyType="next"
+            autoComplete="email"
+            textContentType="emailAddress"
+            value={email}
+            onChange={e => setEmail(e.nativeEvent.text.toLowerCase())}
+          />
+          <TextInput
+            style={styles.input}
+            autoComplete="password"
+            placeholder="Password"
+            placeholderTextColor="#BBB"
+            returnKeyType="next"
+            autoComplete="password-new"
+            secureTextEntry={true}
+            textContentType="newPassword"
+            value={password}
+            onChange={e => setPassword(e.nativeEvent.text)}
+          />
+          <Pressable
+            onPress={() => handleLogin({ email, password, setSession, setLoading, showError })}
+            style={{...styles.button, opacity: disabled(email, password) ? .3 : 1}}
+            disabled={disabled(email, password)}
+          >
+            <Text style={styles.buttonText}>Login</Text>
+          </Pressable>
+        </>
+      )}
     </View>
   );
 };
diff --git a/components/Main.jsx b/components/Main.jsx
index 3f48c3e..1885791 100644
--- a/components/Main.jsx
+++ b/components/Main.jsx
@@ -1,5 +1,6 @@
-import { List, Edit } from '.'
 import { useState } from 'react'
+import List from './List'
+import Edit from './Edit'
 
 const Main = ({ session, setSession, showError }) => {
   const [edit, setEdit] = useState(null)
diff --git a/components/index.js b/components/index.js
deleted file mode 100644
index 7323846..0000000
--- a/components/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Edit from './Edit'
-import List from './List'
-import Menu from './Menu'
-import Note from './Note'
-
-export { Edit, List, Menu, Note }
diff --git a/eas.json b/eas.json
index f4721ac..837a2aa 100644
--- a/eas.json
+++ b/eas.json
@@ -13,7 +13,11 @@
     "preview3": {
       "developmentClient": true
     },
-    "production": {}
+    "production": {
+      "android": {
+        "buildType": "apk"
+      }
+    }
   },
   "cli": {
     "version": ">= 0.52.0"
diff --git a/utils/helpers.jsx b/utils/helpers.jsx
index 9e130dc..62d740c 100644
--- a/utils/helpers.jsx
+++ b/utils/helpers.jsx
@@ -2,7 +2,8 @@ import AsyncStorage from '@react-native-async-storage/async-storage'
 import { Alert } from 'react-native';
 import { login, getNote, editNote, createNote, removeNote } from './api'
 
-export const handleLogin = async ({ email, password, setSession, showError }) => {
+export const handleLogin = async ({ email, password, setSession, setLoading, showError }) => {
+  setLoading(true)
   try {
     const response = await login({ email, password })
     const cookies = response.headers?.map?.['set-cookie']
@@ -12,6 +13,7 @@ export const handleLogin = async ({ email, password, setSession, showError }) =>
       setSession({ ...data, cookies })
     }
   } catch(e) {
+    setLoading(false)
     showError('Error while logging in')
   }
 }
-- 
cgit v1.2.3