feat: added back button

displaynone · Apr 26, 2023 · 5368b16 · 5368b16
1 parent 60dca77
commit 5368b16
Show file tree

Hide file tree

Showing 6 changed files with 191 additions and 126 deletions.
diff --git a/app/qr/index.tsx b/app/qr/index.tsx
@@ -4,12 +4,13 @@ import { useRouter } from 'expo-router';
 import React, { FC, useEffect, useState } from 'react';
 import { Dimensions, StyleSheet, View } from 'react-native';
 import { parseOtpUri } from '../../src/util/parseOtpUri';
-import { Trans } from '@lingui/macro';
+import { Trans, t } from '@lingui/macro';
 import colors from '../../src/constants/colors';
 import { Button, MD3Theme, useTheme } from 'react-native-paper';
 import Text from '../../src/ui/Text';
 import { ScanQRIcon } from '../../src/icons/ScanQR';
 import Container from '../../src/ui/Container';
+import Section from '../../src/components/Section';
 
 const CAMERA_WIDTH = Dimensions.get('screen').width - 2 * 20;
 
@@ -51,56 +52,46 @@ const QRScanner: FC = () => {
   }
 
   return (
-    <Container>
-      <View style={styles.container}>
-        <Text size="headlineSmall" variant={['bold', 'primary']}>
-          <Trans>Add a new site</Trans>
-        </Text>
-        <Text size="bodyLarge" variant={'secondary'} numberOfLines={2}>
-          <Trans>
-            Scan your website's 2FA QR code using your device's camera
-          </Trans>
-        </Text>
-        {showCamera && (
-          <>
-            <View style={styles.cameraContainer}>
-              <Camera
-                onBarCodeScanned={handleBarCodeScanned}
-                style={styles.camera}
-                ratio="1:1"
-              />
-            </View>
-            <Text size="bodyMedium" variant={'secondary'} numberOfLines={2}>
-              <Trans>
-                The QR code can be easily recognized by simply pointing your
-                device's camera at it
-              </Trans>
-            </Text>
-          </>
-        )}
-        {!showCamera && (
-          <>
-            <ScanQRIcon
-              width={Dimensions.get('screen').width - 48}
-              height={Dimensions.get('screen').width - 48}
+    <Section title={t`Add a new site`} showBack>
+      <Text size="bodyLarge" variant={'secondary'} numberOfLines={2}>
+        <Trans>
+          Scan your website's 2FA QR code using your device's camera
+        </Trans>
+      </Text>
+      {showCamera && (
+        <>
+          <View style={styles.cameraContainer}>
+            <Camera
+              onBarCodeScanned={handleBarCodeScanned}
+              style={styles.camera}
+              ratio="1:1"
             />
-            <Button mode="contained" onPress={() => setShowCamera(true)}>
-              <Trans>Scan QR code</Trans>
-            </Button>
-          </>
-        )}
-      </View>
-    </Container>
+          </View>
+          <Text size="bodyMedium" variant={'secondary'} numberOfLines={2}>
+            <Trans>
+              The QR code can be easily recognized by simply pointing your
+              device's camera at it
+            </Trans>
+          </Text>
+        </>
+      )}
+      {!showCamera && (
+        <>
+          <ScanQRIcon
+            width={Dimensions.get('screen').width - 48}
+            height={Dimensions.get('screen').width - 48}
+          />
+          <Button mode="contained" onPress={() => setShowCamera(true)}>
+            <Trans>Scan QR code</Trans>
+          </Button>
+        </>
+      )}
+    </Section>
   );
 };
 
 const getStyles = (theme: MD3Theme) =>
   StyleSheet.create({
-    container: {
-      flex: 1,
-      padding: 0,
-      margin: 0,
-    },
     camera: {
       width: '100%',
       aspectRatio: 1,

diff --git a/app/settings/export.tsx b/app/settings/export.tsx
@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/macro';
+import { Trans, t } from '@lingui/macro';
 import * as FileSystem from 'expo-file-system';
 import * as Sharing from 'expo-sharing';
 import React, { FC } from 'react';
@@ -10,6 +10,7 @@ import { useDB } from '../../src/providers/DatabaseProvider';
 import Container from '../../src/ui/Container';
 import Text from '../../src/ui/Text';
 import { format } from 'date-fns';
+import Section from '../../src/components/Section';
 
 const SettingsExport: FC = () => {
   const { listSites } = useDB();
@@ -52,39 +53,29 @@ const SettingsExport: FC = () => {
   };
 
   return (
-    <Container>
-      <View style={styles.container}>
-        <Text size="headlineSmall" variant={['bold', 'primary']}>
-          <Trans>Backup your data</Trans>
-        </Text>
-        <Text size="bodyLarge" variant={'secondary'} numberOfLines={3}>
-          <Trans>
-            To ensure that you don't lose your saved data, you can download a
-            file of the sites and restore them at a later time
-          </Trans>
-        </Text>
+    <Section title={t`Backup your data`} showBack>
+      <Text size="bodyLarge" variant={'secondary'} numberOfLines={3}>
+        <Trans>
+          To ensure that you don't lose your saved data, you can download a file
+          of the sites and restore them at a later time
+        </Trans>
+      </Text>
 
-        <ExportIcon
-          width={Dimensions.get('screen').width - 48}
-          height={Dimensions.get('screen').width - 48}
-        />
-        <View style={styles.buttonContainer}>
-          <Button mode="contained" onPress={() => downloadStringAsFile()}>
-            <Trans>Generate file</Trans>
-          </Button>
-        </View>
+      <ExportIcon
+        width={Dimensions.get('screen').width - 48}
+        height={Dimensions.get('screen').width - 48}
+      />
+      <View style={styles.buttonContainer}>
+        <Button mode="contained" onPress={() => downloadStringAsFile()}>
+          <Trans>Generate file</Trans>
+        </Button>
       </View>
-    </Container>
+    </Section>
   );
 };
 
 const getStyles = (theme: MD3Theme) =>
   StyleSheet.create({
-    container: {
-      flex: 1,
-      padding: 0,
-      margin: 0,
-    },
     buttonContainer: {
       marginTop: 24,
     },

diff --git a/app/settings/import.tsx b/app/settings/import.tsx
@@ -1,4 +1,4 @@
-import { Plural, Trans } from '@lingui/macro';
+import { Plural, Trans, t } from '@lingui/macro';
 import * as FileSystem from 'expo-file-system';
 import * as Sharing from 'expo-sharing';
 import React, { FC, useState } from 'react';
@@ -11,6 +11,7 @@ import Container from '../../src/ui/Container';
 import Text from '../../src/ui/Text';
 import * as DocumentPicker from 'expo-document-picker';
 import { OtpRecord } from '../../src/types';
+import Section from '../../src/components/Section';
 
 const SettingsImport: FC = () => {
   const { newSite } = useDB();
@@ -54,64 +55,54 @@ const SettingsImport: FC = () => {
   };
 
   return (
-    <Container>
-      <View style={styles.container}>
-        <Text size="headlineSmall" variant={['bold', 'primary']}>
-          <Trans>Restore sites</Trans>
-        </Text>
-        <Text size="bodyLarge" variant={'secondary'} numberOfLines={5}>
-          <Trans>
-            If you want to restore your saved sites from a backup, you can load
-            the file stored on your device. It's important to note that the
-            existing sites will remain unchanged and won't be replaced
-          </Trans>
-        </Text>
+    <Section title={t`Restore sites`} showBack>
+      <Text size="bodyLarge" variant={'secondary'} numberOfLines={5}>
+        <Trans>
+          If you want to restore your saved sites from a backup, you can load
+          the file stored on your device. It's important to note that the
+          existing sites will remain unchanged and won't be replaced
+        </Trans>
+      </Text>
 
-        <ImportIcon
-          width={Dimensions.get('screen').width - 48}
-          height={Dimensions.get('screen').width - 48}
-        />
-        {processing && (
-          <View style={styles.buttonContainer}>
-            <Text size="labelLarge" variant={['bold', 'primary', 'marginless']}>
-              {sitesProcessed !== numberOfSites && <Trans>Processing</Trans>}
-              {sitesProcessed === numberOfSites && <Trans>Completed</Trans>}
-            </Text>
-            <View style={styles.processContainer}>
-              <ProgressBar progress={0} />
-            </View>
-            <Text>
-              <Plural
-                value={sitesProcessed}
-                one={<Trans>Processed 1 site of {numberOfSites}</Trans>}
-                other={<Trans>Processed # sites of {numberOfSites}</Trans>}
-              />
-            </Text>
+      <ImportIcon
+        width={Dimensions.get('screen').width - 48}
+        height={Dimensions.get('screen').width - 48}
+      />
+      {processing && (
+        <View style={styles.buttonContainer}>
+          <Text size="labelLarge" variant={['bold', 'primary', 'marginless']}>
+            {sitesProcessed !== numberOfSites && <Trans>Processing</Trans>}
+            {sitesProcessed === numberOfSites && <Trans>Completed</Trans>}
+          </Text>
+          <View style={styles.processContainer}>
+            <ProgressBar progress={0} />
           </View>
-        )}
-        {!processing && (
-          <View style={styles.buttonContainer}>
-            <Button
-              mode="contained"
-              onPress={() => loadBackupFile()}
-              disabled={processing}
-            >
-              <Trans>Load backup sites</Trans>
-            </Button>
-          </View>
-        )}
-      </View>
-    </Container>
+          <Text>
+            <Plural
+              value={sitesProcessed}
+              one={<Trans>Processed 1 site of {numberOfSites}</Trans>}
+              other={<Trans>Processed # sites of {numberOfSites}</Trans>}
+            />
+          </Text>
+        </View>
+      )}
+      {!processing && (
+        <View style={styles.buttonContainer}>
+          <Button
+            mode="contained"
+            onPress={() => loadBackupFile()}
+            disabled={processing}
+          >
+            <Trans>Load backup sites</Trans>
+          </Button>
+        </View>
+      )}
+    </Section>
   );
 };
 
 const getStyles = (theme: MD3Theme) =>
   StyleSheet.create({
-    container: {
-      flex: 1,
-      padding: 0,
-      margin: 0,
-    },
     buttonContainer: {
       marginTop: 24,
     },

diff --git a/src/components/Section.tsx b/src/components/Section.tsx
@@ -0,0 +1,64 @@
+import { Trans } from '@lingui/macro';
+import { FC, ReactNode } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Container from '../ui/Container';
+import Text from '../ui/Text';
+import IconButton from '../ui/IconButton';
+import { BackIcon } from '../icons/BackIcon';
+import { useNavigation } from 'expo-router';
+
+type SectionProps = {
+  title: string;
+  children: ReactNode;
+  showBack?: boolean;
+};
+
+const Section: FC<SectionProps> = ({ children, title, showBack }) => {
+  const { goBack } = useNavigation();
+  return (
+    <Container>
+      <View style={styles.container}>
+        <View style={styles.head}>
+          <View>
+            {showBack && (
+              <IconButton
+                onPress={() => {
+                  goBack();
+                }}
+                style={styles.button}
+              >
+                <BackIcon width={24} />
+              </IconButton>
+            )}
+          </View>
+          <Text size="headlineSmall" variant={['bold', 'primary']}>
+            <Trans>{title}</Trans>
+          </Text>
+        </View>
+        <View style={styles.wrapper}>{children}</View>
+      </View>
+    </Container>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 0,
+    margin: 0,
+  },
+  button: {
+    paddingRight: 16,
+    width: 36,
+    minWidth: 20,
+  },
+  head: {
+    flexDirection: 'row',
+    alignContent: 'center',
+  },
+  wrapper: {
+    flexGrow: 1,
+  },
+});
+
+export default Section;
diff --git a/src/icons/BackIcon.tsx b/src/icons/BackIcon.tsx
@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import Svg, { Path } from 'react-native-svg';
+import colors from '../constants/colors';
+import { ComponentWithColor, ComponentWithSize } from '../types';
+
+export const BackIcon: FC<ComponentWithSize & ComponentWithColor> = ({
+  width = 48,
+  height = 48,
+  color = colors.dark,
+}) => {
+  return (
+    <Svg viewBox="0 0 24 24" width={width} height={height}>
+      <Path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+        stroke={color}
+        strokeWidth={2}
+      />
+    </Svg>
+  );
+};