WIP: Adds settings screen to change location code. Adds cancel button and flip camera button to Scan screen.

Former-commit-id: ab58b957c470ed0b8b8a4e42a3398fcc45c6b6b5

App.tsx

@@ -1,7 +1,16 @@
 import {BarCodeEvent, BarCodeScanner, PermissionResponse} from 'expo-barcode-scanner';
-import React, {useEffect, useState} from 'react';
-import {AppRegistry, SafeAreaView, Text, View} from 'react-native';
-import {Appbar, DarkTheme, DefaultTheme, Provider as PaperProvider, Surface} from 'react-native-paper';
+import React, {ReactElement, useEffect, useState} from 'react';
+import {AppRegistry, SafeAreaView, View} from 'react-native';
+import {
+  Appbar,
+  Button, DarkTheme,
+  DefaultTheme,
+  HelperText,
+  Provider as PaperProvider,
+  Snackbar, Subheading,
+  TextInput,
+  Title
+} from 'react-native-paper';
 import {expo as appExpo} from './app.json';
 import {CancelButton} from './components/Common';
 import {BarCodeDisplay, PrintButton, PrintingMessage} from './components/Print';
@@ -15,7 +24,7 @@ const theme = {
   colors: colors,
 }
 
-export default function Main () {
+export default function Main() {
   const [appState, setAppState] = useState<BarcodeScannerAppState>(BarcodeScannerAppState.INITIAL);
   const [barCodeData, setBarCodeData] = useState<string>('');
   const [date, setDate] = useState<Date>(new Date());
@@ -31,41 +40,108 @@ export default function Main () {
     });
   }, []);
 
+  const _doNothing = () => {};
   const _scan = () => setAppState(BarcodeScannerAppState.SCANNING);
   const _print = () => setAppState(BarcodeScannerAppState.PRINTING);
   const _home = () => setAppState(BarcodeScannerAppState.DEFAULT);
+  const _settings = () => setAppState(BarcodeScannerAppState.SETTINGS);
 
   const handleBarCodeScanned = (e: BarCodeEvent) => {
-    setBarCodeData(e.data);
-    setDate(new Date());
-    setAppState(BarcodeScannerAppState.SCANNED);
+    // Make sure the data is the right length.
+    const barCodeString = e.data;
+    const pattern = /^[\d]{14}$/;
+    if (pattern.test(barCodeString)) {
+      setBarCodeData(e.data);
+      setDate(new Date());
+      setAppState(BarcodeScannerAppState.SCANNED);
+    } else {
+      setAppState(BarcodeScannerAppState.ERROR);
+    }
   };
 
-  function ErrorMessage(props: ElementProps) {
-    return <Text>Something went wrong.</Text>;
+  function ErrorMessage(props: ElementProps): ReactElement {
+    return <View style={styles.fullScreen}>
+      <View style={styles.container}>
+        <ScanButton onClicked={_scan}/>
+      </View>
+      <Snackbar
+        visible={appState === BarcodeScannerAppState.ERROR}
+        onDismiss={_doNothing}
+        style={styles.error}
+      >Something went wrong. Try again.</Snackbar>
+    </View>
   }
 
-  function LoadingMessage(props: ElementProps) {
-    return <Text>Loading...</Text>;
+  function LoadingMessage(props: ElementProps): ReactElement {
+    return <Snackbar
+      visible={appState === BarcodeScannerAppState.INITIAL}
+      onDismiss={_doNothing}
+    >Loading...</Snackbar>;
   }
 
-  function SuccessMessage(props: ElementProps) {
-    return <Text>Your barcode label has printed successfully.</Text>;
+  function SuccessMessage(props: ElementProps): ReactElement {
+    return <Title>Your barcode label has printed successfully.</Title>;
   }
 
-  function ActionButtons(props: ElementProps) {
-    return <View style={styles.container}>
+  function ActionButtons(props: ElementProps): ReactElement {
+    return <View>
       <PrintButton onClicked={_print}/>
       <CancelButton onClicked={_home}/>
     </View>
   }
 
-  function App(props: StateProps) {
+  function SettingsModal(props: ElementProps): ReactElement {
+    const [inputStr, setInputStr] = useState<string>(locationStr);
+    const pattern = /^[\d]{4}$/;
+    const hasErrors = () => {
+      return !pattern.test(inputStr);
+    };
+
+    return <View style={styles.settings}>
+      <Title style={styles.headingInverse}>Settings</Title>
+      <View style={{marginBottom: 10}}>
+        <Subheading style={{color: DefaultTheme.colors.text, marginBottom: 60}}>
+          Please do NOT change this unless you know what you are doing. Entering an incorrect location number may prevent patients from getting accurate info about their test results.
+        </Subheading>
+        <TextInput
+          label="Location #"
+          value={inputStr}
+          onChangeText={inputStr => setInputStr(inputStr)}
+          mode="outlined"
+          theme={DefaultTheme}
+        />
+        <HelperText type="error" visible={hasErrors()}>
+          Location number must be exactly 4 digits. No other characters are allowed.
+        </HelperText>
+        <Button
+          icon="save"
+          mode="contained"
+          color={colors.primary}
+          style={{marginBottom: 10}}
+          disabled={hasErrors()}
+          onPress={() => {
+            setLocationStr(inputStr);
+            _home();
+          }}
+        >Save</Button>
+        <Button
+          icon="cancel"
+          mode="outlined"
+          color={colors.primary}
+          onPress={_home}
+        >Cancel</Button>
+      </View>
+    </View>
+  }
+
+  function App(props: StateProps): ReactElement {
     switch (props.appState) {
       case BarcodeScannerAppState.INITIAL:
         return <LoadingMessage/>;
       case BarcodeScannerAppState.DEFAULT:
-        return <ScanButton onClicked={_scan}/>;
+        return <View style={styles.container}>
+          <ScanButton onClicked={_scan}/>
+        </View>;
       case BarcodeScannerAppState.PRINTED:
         return <SuccessMessage/>;
       case BarcodeScannerAppState.PRINTING:
@@ -77,10 +153,15 @@ export default function Main () {
       case BarcodeScannerAppState.SCANNED:
         return <View style={styles.container}>
           <BarCodeDisplay id={barCodeData} date={date} location={locationStr}/>
-          <ActionButtons></ActionButtons>
+          <ActionButtons/>
         </View>;
       case BarcodeScannerAppState.SCANNING:
-        return <Scanner onScanned={handleBarCodeScanned}/>;
+        return <Scanner
+          onScanned={handleBarCodeScanned}
+          onCancel={_home}
+        />;
+      case BarcodeScannerAppState.SETTINGS:
+        return <SettingsModal/>;
       default:
         return <ErrorMessage/>;
     }
@@ -88,13 +169,12 @@ export default function Main () {
 
   return (
     <PaperProvider theme={theme}>
-      <Appbar.Header>
-        <Appbar.Content title={appExpo.name} />
-        <Appbar.Action icon="home" onPress={_home} />
-        <Appbar.Action icon="camera" onPress={_scan} />
-        <Appbar.Action icon="printer" onPress={_print} />
+      <Appbar.Header dark={true}>
+        <Appbar.Content title={`${appExpo.description} #${locationStr}`}/>
+        <Appbar.Action icon="home" onPress={_home}/>
+        <Appbar.Action icon="settings" onPress={_settings}/>
       </Appbar.Header>
-      <SafeAreaView style={styles.surface}>
+      <SafeAreaView style={styles.safeAreaView}>
         <App appState={appState}/>
       </SafeAreaView>
     </PaperProvider>

android/java_pid85993.hprof.REMOVED.git-id

@@ -0,0 +1 @@
+740298381f187a32302d19c6c1c7e8d8f06f3ed5

app.json

@@ -1,5 +1,6 @@
 {
   "expo": {
+    "description": "UVA Testing Kiosk",
     "name": "uva-covid19-testing-kiosk",
     "slug": "uva-covid19-testing-kiosk",
     "version": "1.0.0",

components/Common.tsx

@@ -5,7 +5,7 @@ import {colors, styles} from './Styles';
 
 export const CancelButton = (props: ButtonProps): ReactElement => {
   return <Button
-    icon="camera"
+    icon="cancel"
     color={colors.text}
     onPress={props.onClicked}
     style={styles.btnLg}

components/Print.tsx

@@ -2,7 +2,7 @@ import React, {ReactElement, useEffect, useState} from 'react';
 import {Text, View} from 'react-native';
 // @ts-ignore
 import Barcode from 'react-native-barcode-builder';
-import {Button} from 'react-native-paper';
+import {Button, Title} from 'react-native-paper';
 import {BarCodeProps, ButtonProps, PrintingProps} from '../models/ElementProps';
 import {colors, styles} from './Styles';
 import AsyncStorage from '@react-native-community/async-storage';
@@ -146,7 +146,7 @@ export const PrintingMessage = (props: PrintingProps): ReactElement => {
       <BarCodeDisplay id={props.id} date={props.date} location={props.location} />
     </View>
     <View style={styles.container}>
-      <Text style={styles.heading}>{statusStr}</Text>
+      <Title style={styles.heading}>{statusStr}</Title>
       <RetryButton />
       <Button
         icon="cancel"

components/Scan.tsx

@@ -1,14 +1,56 @@
 import {BarCodeScanner} from 'expo-barcode-scanner';
-import React, {ReactElement} from 'react';
+import React, {ReactElement, useState} from 'react';
+import {View, Text} from 'react-native';
 import {Button} from 'react-native-paper';
 import {ButtonProps, ScannerProps} from '../models/ElementProps';
 import {colors, styles} from './Styles';
 
+declare type CameraType = number | 'front' | 'back' | undefined;
+
 export const Scanner = (props: ScannerProps): ReactElement => {
-  return <BarCodeScanner
-    onBarCodeScanned={props.onScanned}
-    style={styles.fullScreen}
-  />;
+  const [componentKey, setComponentKey] = useState<number>(0);
+  const [cameraType, setCameraType] = useState<CameraType>('back');
+
+  const _toggleCameraType = () => {
+    setCameraType(cameraType === 'front' ? 'back' : 'front');
+    setComponentKey(componentKey + 1);
+  }
+
+  const ScanCamera = (): ReactElement => {
+    return <View style={styles.container}>
+      <View style={styles.container}>
+        <BarCodeScanner
+          type={cameraType}
+          onBarCodeScanned={props.onScanned}
+          style={styles.fullScreen}
+        />
+      </View>
+      <View style={styles.centerMiddle}>
+        <View style={styles.captureBox} />
+      </View>
+      <Text style={styles.subtitle}>
+        Hold your ID card up, with the barcode facing the camera. Keep the card in the green box.
+      </Text>
+      <View style={styles.centerMiddle}>
+        <Button
+          mode="contained"
+          color={colors.primary}
+          icon="camera-switch"
+          onPress={_toggleCameraType}
+          style={{marginVertical: 10}}
+        >Switch Camera</Button>
+        <Button
+          mode="text"
+          color={colors.primary}
+          icon="cancel"
+          onPress={props.onCancel}
+          style={styles.btnWhite}
+        >Cancel</Button>
+      </View>
+    </View>;
+  }
+
+  return <ScanCamera key={componentKey} />;
 };
 
 export const ScanButton = (props: ButtonProps): ReactElement => {

components/Styles.tsx

@@ -1,5 +1,5 @@
 import {StyleSheet} from 'react-native';
-import {DarkTheme} from 'react-native-paper';
+import {DefaultTheme, DarkTheme} from 'react-native-paper';
 
 
 export const colors = {
@@ -10,30 +10,97 @@ export const colors = {
   notification: '#E57200',
 };
 
-export const styles = StyleSheet.create({
+const _common = StyleSheet.create({
   container: {
+    ...StyleSheet.absoluteFillObject,
     flex: 1,
-    backgroundColor: colors.primary,
     alignItems: 'stretch',
     flexDirection: 'column',
     justifyContent: 'center',
-    paddingVertical: 40,
+    padding: 40,
+  },
+  dark: {
+    backgroundColor: colors.primary,
+    color: DarkTheme.colors.text,
+  },
+  light: {
+    backgroundColor: DefaultTheme.colors.background,
+    color: DefaultTheme.colors.text,
   },
   heading: {
-    color: colors.onBackground,
     fontSize: 40,
     padding: 40,
     textAlign: 'center',
   },
+});
+
+export const styles = StyleSheet.create({
+  captureBox: {
+    borderStyle: 'solid',
+    borderColor: 'green',
+    borderWidth: 10,
+    height: 213,
+    width: 338,
+    borderRadius: 20,
+ },
+  centerMiddle: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  container: {
+    ..._common.container,
+    ..._common.dark,
+  },
+  containerDark: {
+    ..._common.container,
+    ..._common.dark,
+  },
+  containerLight: {
+    ..._common.container,
+    ..._common.light,
+  },
+  containerNoPadding: {
+    ..._common.container,
+    padding: 0,
+  },
+  error: {
+    backgroundColor: colors.error,
+    color: colors.onBackground,
+    fontSize: 20,
+  },
+  subtitle: {
+    color: colors.onBackground,
+    fontSize: 20,
+    padding: 20,
+    textAlign: 'center',
+  },
+  heading: {
+    ..._common.heading,
+    color: colors.onBackground,
+  },
+  headingInverse: {
+    ..._common.heading,
+    color: DefaultTheme.colors.text,
+  },
   btnLg: {
     fontSize: 20,
     padding: 4,
     margin: 4,
   },
+  btnWhite: {
+    color: DefaultTheme.colors.text,
+    backgroundColor: DefaultTheme.colors.background
+  },
   button: {
     color: colors.text,
   },
-  fullScreen: StyleSheet.absoluteFillObject,
+  fullScreen: {
+    ...StyleSheet.absoluteFillObject,
+    flex: 1,
+    alignItems: 'stretch',
+    flexDirection: 'column',
+    justifyContent: 'center',
+  },
   label: {
     fontSize: 16,
   },
@@ -66,5 +133,23 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: colors.primary,
-  }
+  },
+  safeAreaView: {
+    flex: 1
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  settings: {
+    flex: 1,
+    alignItems: 'stretch',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    padding: 80,
+    backgroundColor: DefaultTheme.colors.background,
+    color: DefaultTheme.colors.text,
+  },
 });

models/BarcodeScannerAppState.tsx

@@ -6,4 +6,5 @@ export enum BarcodeScannerAppState {
   PRINTING = 'PRINTING',
   PRINTED = 'PRINTED',
   ERROR = 'ERROR',
+  SETTINGS = 'SETTINGS',
 }

models/ElementProps.tsx

@@ -21,6 +21,7 @@ export interface ButtonProps extends ElementProps {
 
 export interface ScannerProps extends ElementProps {
   onScanned: BarCodeScannedCallback;
+  onCancel: () => void;
 }
 
 export interface PrintingProps extends BarCodeProps {

package.json

@@ -6,41 +6,42 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@react-native-community/async-storage": "^1.12.0",
+    "@react-native-community/netinfo": "^5.9.6",
     "expo": "~38.0.8",
+    "expo-barcode-scanner": "~8.2.1",
+    "expo-print": "~9.0.1",
     "expo-splash-screen": "^0.5.0",
     "expo-status-bar": "^1.0.2",
     "expo-updates": "~0.2.10",
+    "jsbarcode": "^3.11.0",
     "react": "~16.11.0",
     "react-dom": "~16.11.0",
     "react-native": "~0.62.2",
-    "react-native-gesture-handler": "~1.6.1",
-    "react-native-reanimated": "~1.9.0",
-    "react-native-screens": "~2.9.0",
-    "react-native-unimodules": "~0.10.1",
-    "react-native-web": "~0.11.7",
-    "@react-native-community/async-storage": "^1.12.0",
-    "@react-native-community/netinfo": "^5.9.6",
-    "expo-barcode-scanner": "~8.2.1",
-    "expo-print": "~9.0.1",
-    "jsbarcode": "^3.11.0",
     "react-native-barcode-builder": "github:cdesch/react-native-barcode-builder#master",
     "react-native-canvas": "^0.1.37",
+    "react-native-easy-grid": "^0.2.2",
+    "react-native-gesture-handler": "~1.6.1",
     "react-native-html-to-pdf": "^0.8.0",
     "react-native-paper": "^4.1.0",
     "react-native-print": "^0.6.0",
+    "react-native-reanimated": "~1.9.0",
+    "react-native-screens": "~2.9.0",
     "react-native-share": "^3.7.0",
     "react-native-svg": "^12.1.0",
     "react-native-svg-transformer": "^0.14.3",
+    "react-native-unimodules": "~0.10.1",
     "react-native-vector-icons": "^7.0.0",
+    "react-native-web": "~0.11.7",
     "react-native-webview": "^10.8.3"
   },
   "devDependencies": {
     "@babel/core": "^7.8.6",
+    "@types/react": "~16.9.41",
+    "@types/react-native": "^0.62.18",
     "babel-jest": "~25.2.6",
     "jest": "~25.2.6",
     "react-test-renderer": "~16.11.0",
-    "@types/react": "~16.9.41",
-    "@types/react-native": "^0.62.18",
     "typescript": "~3.9.5"
   },
   "private": true,

yarn.lock

@@ -3846,6 +3846,16 @@ expo-barcode-scanner@~8.2.1:
     lodash "^4.6.0"
     prop-types "^15.6.0"
 
+expo-camera@~8.3.1:
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/expo-camera/-/expo-camera-8.3.1.tgz#e17c080c4aafd71f66495c2b6dfc53dcd31b0368"
+  integrity sha512-weFanDVsJKAbm5g90zWIUD4zVrXKoQq7g2BTg4zy4p24YsGfXKYRH4ja0YRgr3Ci/abGaaRNZjsPMJiNskR+tA==
+  dependencies:
+    fbjs "1.0.0"
+    invariant "2.2.4"
+    lodash "^4.6.0"
+    prop-types "^15.6.0"
+
 expo-constants@~9.1.1:
   version "9.1.1"
   resolved "https://registry.yarnpkg.com/expo-constants/-/expo-constants-9.1.1.tgz#bca141ee3d4550e308798128f66c6d9c6a206ca1"
@@ -6971,6 +6981,13 @@ react-native-canvas@^0.1.37:
   dependencies:
     ctx-polyfill "^1.1.4"
 
+react-native-easy-grid@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/react-native-easy-grid/-/react-native-easy-grid-0.2.2.tgz#f0be33620be1ebe2d2295918eb58b0a27e8272ab"
+  integrity sha512-MlYrNIldnEMKn6TVatQN1P64GoVlwGIuz+8ncdfJ0Wq/xtzUkQwlil8Uksyp7MhKfENE09MQnGNcba6Mx3oSAA==
+  dependencies:
+    lodash "^4.17.15"
+
 react-native-gesture-handler@~1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.6.1.tgz#678e2dce250ed66e93af409759be22cd6375dd17"