Merge pull request #22 from displaynone:swipe-to-delete

feat: swipe to delete

app/(home)/_layout.tsx

@@ -2,8 +2,8 @@ import React, { FC } from 'react';
 
 import { Slot } from 'expo-router';
 import AddSite from '../../src/components/AddSite';
-import Container from '../../src/ui/Container';
 import TopBar from '../../src/components/TopBar';
+import Container from '../../src/ui/Container';
 
 const HomeLayout: FC = () => {
   return (

app/(home)/index.tsx

@@ -1,19 +1,14 @@
 import React, { FC, useEffect, useState } from 'react';
 
-import { Trans, t } from '@lingui/macro';
-import { ActivityIndicator, FlatList, StyleSheet, View } from 'react-native';
-import { TextInput } from 'react-native-paper';
-import SiteInfo from '../../src/components/SiteInfo';
-import colors from '../../src/constants/colors';
+import { ActivityIndicator } from 'react-native';
+import SitesList from '../../src/components/SitesList';
 import Site from '../../src/models/Site';
 import { useDB } from '../../src/providers/DatabaseProvider';
-import Text from '../../src/ui/Text';
 import Progress from '../../src/ui/Progress';
 
 const Home: FC = () => {
   const { listSites } = useDB();
   const [sites, setSites] = useState<Site[]>([]);
-  const [search, setSearch] = useState<string>();
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -26,68 +21,18 @@ const Home: FC = () => {
     }
   }, [listSites, sites.length]);
 
-  const regEx = new RegExp(search || '', 'i');
-  const filteredSites = !search
-    ? sites
-    : sites.filter(
-        site => site.label.match(regEx) || site.issuer?.match(regEx),
-      );
+  const deleteSite = (site: Site) => {
+    setSites(sites.filter(s => site.label !== s.label));
+  };
 
   if (loading) return <ActivityIndicator />;
 
-  if (!sites.length) {
-    return (
-      <Text>
-        <Trans>No sites have been added yet</Trans>
-      </Text>
-    );
-  }
-
   return (
     <>
       <Progress />
-      <View style={styles.inputWrapper}>
-        <TextInput
-          value={search}
-          onChangeText={setSearch}
-          right={<TextInput.Icon icon="magnify" />}
-          placeholder={t`Search...`}
-          mode="outlined"
-          theme={{
-            colors: {
-              background: colors.white,
-            },
-          }}
-          outlineColor={colors.medium}
-          placeholderTextColor={colors.medium}
-        />
-      </View>
-      {!!sites.length && !filteredSites.length && (
-        <Text>
-          <Trans>No results matching your search</Trans>
-        </Text>
-      )}
-      <FlatList
-        style={styles.scrollView}
-        data={filteredSites}
-        renderItem={site => <SiteInfo site={site.item} />}
-      />
+      <SitesList sites={sites} deleteSite={deleteSite} />
     </>
   );
 };
 
-const styles = StyleSheet.create({
-  inputWrapper: {
-    marginBottom: 32,
-  },
-  icon: {
-    width: 24,
-    height: 24,
-    position: 'absolute',
-  },
-  scrollView: {
-    marginBottom: 32,
-  },
-});
-
 export default Home;

app/qr/info.tsx

@@ -20,6 +20,7 @@ const QRInfo: FC = () => {
   const { push } = useRouter();
   const { newSite } = useDB();
   const [site, setSite] = useState<Site>();
+  const [token, setToken] = useState('');
 
   const period = site?.period || DEFAULT_TOTP_PERIOD;
 
@@ -31,12 +32,12 @@ const QRInfo: FC = () => {
     return <ActivityIndicator />;
   }
 
-  const token = generateTOTP({
+  generateTOTP({
     algorithm: getAlgorithm(site.algorithm),
     digits: site.digits,
     period,
     secret: site.secret,
-  });
+  }).then(t => setToken(t));
 
   return (
     <Container variant={['fullscreen', 'filled']}>

package.json

@@ -32,6 +32,7 @@
     "expo-barcode-scanner": "~12.3.2",
     "expo-build-properties": "~0.5.1",
     "expo-camera": "~13.2.1",
+    "expo-clipboard": "~4.1.2",
     "expo-constants": "~14.2.1",
     "expo-font": "~11.1.1",
     "expo-linking": "~4.0.1",
@@ -55,7 +56,9 @@
     "react-native-vector-icons": "^9.2.0",
     "react-native-web": "~0.18.11",
     "totp-generator": "^0.0.14",
-    "expo-clipboard": "~4.1.2"
+    "@shopify/flash-list": "1.4.0",
+    "expo-task-manager": "~11.1.1",
+    "expo-background-fetch": "~11.1.1"
   },
   "jest": {
     "preset": "jest-expo",

src/components/Page.tsx

@@ -14,7 +14,6 @@ import DatabaseProvider from '../providers/DatabaseProvider';
 import { FingerprintAuthProvider } from '../providers/FingerprintAuthProvider';
 import LocalizationProvider from '../providers/LocalizationProvider';
 import { ComponentWithChildren } from '../types';
-import Container from '../ui/Container';
 
 import * as SplashScreen from 'expo-splash-screen';
 import NotificationProvider from '../providers/NotificationProvider';