feat: allow labs and apps to work online and offline

Apps and labs that are offline-ready will be downloaded and should
work offline.

closes #46

src/components/phase/PhaseApp.js

@@ -2,54 +2,68 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './PhaseApp.css';
 
-const PhaseApp = ({ uri }) => (
-  // state = {
-  //   data: null,
-  // };
-  //
-  // constructor(props) {
-  //   super(props);
-  //   this.retrieveData();
-  // }
-  //
-  // storeData = async (key, value) => {
-  //   try {
-  //     await AsyncStorage.setItem(key, value);
-  //   } catch (error) {
-  //     // Error saving data
-  //   }
-  // };
-  //
-  // retrieveData = async () => {
-  //   const { id } = this.props;
-  //   try {
-  //     const data = await AsyncStorage.getItem(id);
-  //     if (data !== null) {
-  //       this.setState({
-  //         data,
-  //       });
-  //     }
-  //   } catch (error) {
-  //     // Error retrieving data
-  //   }
-  // };
-  //
-  // sendData = () => {
-  //   const { data } = this.state;
-  //   this.webView.postMessage(data, '*');
-  // };
-  //
-  // receiveData = (data) => {
-  //   const { id } = this.props;
-  //   this.storeData(id, data);
-  // };
-  <div className="AppDiv">
-    <iframe title={uri} className="App" sandbox="allow-scripts" src={uri} />
-  </div>
-);
+const PhaseApp = ({ url, asset, name }) => {
+  let uri = url;
+  if (asset) {
+    uri = `file://${asset}`;
+  }
+  return (
+    // state = {
+    //   data: null,
+    // };
+    //
+    // constructor(props) {
+    //   super(props);
+    //   this.retrieveData();
+    // }
+    //
+    // storeData = async (key, value) => {
+    //   try {
+    //     await AsyncStorage.setItem(key, value);
+    //   } catch (error) {
+    //     // Error saving data
+    //   }
+    // };
+    //
+    // retrieveData = async () => {
+    //   const { id } = this.props;
+    //   try {
+    //     const data = await AsyncStorage.getItem(id);
+    //     if (data !== null) {
+    //       this.setState({
+    //         data,
+    //       });
+    //     }
+    //   } catch (error) {
+    //     // Error retrieving data
+    //   }
+    // };
+    //
+    // sendData = () => {
+    //   const { data } = this.state;
+    //   this.webView.postMessage(data, '*');
+    // };
+    //
+    // receiveData = (data) => {
+    //   const { id } = this.props;
+    //   this.storeData(id, data);
+    // };
+    <div className="AppDiv">
+      <iframe title={name} className="App" sandbox="allow-scripts" src={uri} />
+    </div>
+  );
+};
 
 PhaseApp.propTypes = {
-  uri: PropTypes.string.isRequired,
+  url: PropTypes.string,
+  asset: PropTypes.string,
+  name: PropTypes.string,
+};
+
+PhaseApp.defaultProps = {
+  url: null,
+  asset: null,
+  name: 'Image',
 };
 
 export default PhaseApp;

src/components/phase/PhaseItems.js

@@ -34,13 +34,13 @@ const renderResource = item => {
 };
 
 const renderPhaseItem = item => {
-  const { id, category, asset } = item;
+  const { id, category, asset, url, name } = item;
   switch (category) {
     case RESOURCE:
       return renderResource(item);
 
     case APPLICATION:
-      return <PhaseApp key={id} id={id} uri={`file://${asset}`} />;
+      return <PhaseApp key={id} id={id} url={url} asset={asset} name={name} />;
 
     default:
       return <div key={id} id={id} />;