LiveBundleUI.js

import React, {Component} from 'react';
import {
  AppRegistry,
  BackHandler,
  Image,
  Platform,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {RNCamera} from 'react-native-camera';
import livebundle from './LiveBundle';

const ErrorScreen = ({errorMessage}) => (
  <View style={styles.subContainer}>
    <Image
      resizeMode="contain"
      style={styles.logo}
      source={require('./assets/logo.png')}
    />
    <Text style={styles.error}>{errorMessage}</Text>
  </View>
);

const LoadingScreen = () => (
  <View style={styles.subContainer}>
    <Image
      resizeMode="contain"
      style={styles.logo}
      source={require('./assets/logo.png')}
    />
    <Text style={styles.bottomText}>Loading Package</Text>
  </View>
);

const BundleFlavorSelectionScreen = ({platformBundles, onBundleSelected}) => (
  <View style={styles.subContainer}>
    <Image
      resizeMode="contain"
      style={styles.logo}
      source={require('./assets/logo.png')}
    />
    <Text style={styles.text}>Select bundle flavor to install</Text>
    <TouchableOpacity
      style={styles.button}
      onPress={() => {
        onBundleSelected(platformBundles.find(b => b.dev).id);
      }}>
      <Text style={styles.buttonText}>Dev</Text>
    </TouchableOpacity>
    <TouchableOpacity
      style={styles.button}
      onPress={() => {
        onBundleSelected(platformBundles.find(b => !b.dev).id);
      }}>
      <Text style={styles.buttonText}>Prod</Text>
    </TouchableOpacity>
  </View>
);

const QRCodeScannerScreen = ({onQrCodeRead}) => (
  <RNCamera
    captureAudio={false}
    style={styles.preview}
    type={RNCamera.Constants.Type.back}
    flashMode={RNCamera.Constants.FlashMode.off}
    androidCameraPermissionOptions={{
      title: 'Permission to use camera',
      message: 'We need your permission to use your camera',
      buttonPositive: 'Ok',
      buttonNegative: 'Cancel',
    }}
    onBarCodeRead={({data}) => {
      if (data.startsWith('s:')) {
        onQrCodeRead({sessionId: data.replace('s:', '')});
      } else {
        onQrCodeRead({packageId: data});
      }
    }}
  />
);

const MainScreen = ({
  bundleId,
  packageId,
  isBundleInstalled,
  isSessionStarted,
  onScanInitiated,
}) => (
  <View style={styles.subContainer}>
    <Image
      resizeMode="contain"
      style={styles.logo}
      source={require('./assets/logo.png')}
    />
    <TouchableOpacity
      style={styles.button}
      onPress={() => {
        onScanInitiated();
      }}>
      <Text style={styles.buttonText}>Scan</Text>
    </TouchableOpacity>
    {(isBundleInstalled || isSessionStarted) && (
      <TouchableOpacity
        style={styles.button}
        onPress={() => {
          livebundle.reset();
          BackHandler.exitApp();
        }}>
        <Text style={styles.buttonText}>Reset</Text>
      </TouchableOpacity>
    )}
    {isBundleInstalled && (
      <Text style={styles.bottomText}>{`packageId: ${packageId}`}</Text>
    )}
    {isBundleInstalled && (
      <Text style={styles.bottomText2}>{`bundleId: ${bundleId}`}</Text>
    )}
    {isSessionStarted && (
      <Text style={styles.bottomText2}>{'Connected to live session'}</Text>
    )}
  </View>
);

export class LiveBundleUI extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = {
      bundleId: undefined,
      isDownloadCompleted: false,
      isScanInitiated: false,
      packageId: props?.packageId,
      packageMetadata: undefined,
      sessionId: props?.sessionId,
      error: undefined,
    };
  }

  render() {
    const {
      bundleId,
      isDownloadCompleted,
      isScanInitiated,
      packageId,
      packageMetadata,
      sessionId,
      error,
    } = this.state;
    let screen;
    if (error) {
      screen = <ErrorScreen errorMessage={error.message} />;
    } else if (isDownloadCompleted) {
      // If we have a bundle ready to be installed, install
      // it and exist the menu
      BackHandler.exitApp();
      livebundle.installBundle().catch(error => {
        this.setState({error});
      });
    } else if (sessionId) {
      // If we have a session id just launch the live session
      BackHandler.exitApp();
      livebundle.launchLiveSession(sessionId).catch(error => {
        this.setState({error});
      });
    } else if (packageId && !packageMetadata && !bundleId) {
      // If we have a packageId but no bundleId yet then we need
      // to retrieve the package metadata to look at what bundles
      // the package contains
      screen = <LoadingScreen />;
      livebundle
        .getPackageMetadata(packageId)
        .then(packageMetadata => {
          this.setState({packageMetadata});
        })
        .catch(error => this.setState({error}));
    } else if (packageId && packageMetadata && !bundleId) {
      // If we have the package metadata, we need to check if there
      // is one or more bundle(s) in the package
      const platformBundles = packageMetadata.bundles.filter(
        b => b.platform === Platform.OS,
      );
      if (platformBundles.length === 0) {
        this.setState({
          error: new Error(
            `No bundle for ${Platform.OS} platform in package ${packageId}`,
          ),
        });
      } else if (platformBundles.length === 1) {
        // Only one bundle in package for this platform.
        // Immediately proceed to download.
        this.setState({bundleId: platformBundles[0].id});
      } else {
        // More than one bundle in package for this platform.
        // Ask user to choose bundle flavor -for now-.
        screen = (
          <BundleFlavorSelectionScreen
            platformBundles={platformBundles}
            onBundleSelected={bundleId => this.setState({bundleId})}
          />
        );
      }
    } else if (packageId && bundleId) {
      // If we have a packageId and a bundleId then we can download
      // the bundle from the storage
      livebundle
        .downloadBundle(packageId, bundleId)
        .then(() => {
          this.setState({
            isDownloadCompleted: true,
          });
        })
        .catch(error => this.setState({error}));
    } else if (isScanInitiated) {
      // If the scanning has been triggered, show the scanner
      screen = (
        <QRCodeScannerScreen
          onQrCodeRead={({packageId, sessionId}) =>
            this.setState({isScanInitiated: false, packageId, sessionId})
          }
        />
      );
    } else {
      // LiveBundle main screen
      const {IS_BUNDLE_INSTALLED, IS_SESSION_STARTED, PACKAGE_ID, BUNDLE_ID} =
        livebundle;
      screen = (
        <MainScreen
          bundleId={BUNDLE_ID}
          packageId={PACKAGE_ID}
          isBundleInstalled={IS_BUNDLE_INSTALLED}
          isSessionStarted={IS_SESSION_STARTED}
          onScanInitiated={() => this.setState({isScanInitiated: true})}
        />
      );
    }

    return <View style={styles.container}>{screen}</View>;
  }
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#4188D6',
    borderColor: '#1960ae',
    borderRadius: 3,
    borderWidth: 0.3,
    alignItems: 'center',
    margin: 5,
    width: 165,
    padding: 6,
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 18,
  },
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'white',
  },
  logo: {
    height: 120,
    marginBottom: 50,
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  subContainer: {
    justifyContent: 'center',
    flex: 1,
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
    marginBottom: 20,
  },
  bottomText: {
    fontSize: 14,
    marginTop: 20,
  },
  bottomText2: {
    fontSize: 14,
    marginTop: 1,
  },
  error: {
    fontSize: 15,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('LiveBundleUI', () => LiveBundleUI);