From 9d4b7d4eb1226e144bdf169dcc7064c83a3ed0cd Mon Sep 17 00:00:00 2001
From: co2-git <francoisrvespa@gmail.com>
Date: Sun, 15 Apr 2018 12:58:48 +0100
Subject: [PATCH] Fix #18

---
 .flowconfig                             |  1 +
 app/components/App/App.js               | 16 +++--
 app/components/App/App2.js              | 77 -------------------------
 app/components/ReactNative/Info.js      | 19 +++---
 app/components/ReactNative/Info.js.flow | 23 ++++++++
 5 files changed, 47 insertions(+), 89 deletions(-)
 delete mode 100644 app/components/App/App2.js
 create mode 100644 app/components/ReactNative/Info.js.flow

diff --git a/.flowconfig b/.flowconfig
index 6858a13..25e46b0 100644
--- a/.flowconfig
+++ b/.flowconfig
@@ -21,6 +21,7 @@
 ./app/components/Layout/Open.js.flow
 ./app/components/Layout/Page.js.flow
 ./app/components/Layout/Router.js.flow
+./app/components/ReactNative/Info.js.flow
 ./app/components/Terminal/Console.js.flow
 
 [options]
diff --git a/app/components/App/App.js b/app/components/App/App.js
index 4953351..ac5fffb 100644
--- a/app/components/App/App.js
+++ b/app/components/App/App.js
@@ -1,15 +1,23 @@
 // @flow
 import React from 'react';
+import SwipeableViews from 'react-swipeable-views';
 
 import AppBar from './AppBar';
-import Page from '../Layout/Page';
 import AppBottomBar from './AppBottomBar';
+import Info from '../ReactNative/Info';
+import Page from '../Layout/Page';
 
 const App = ({app}: $AppProps) => (
   <Page style={{display: 'flex', flexDirection: 'column'}}>
-    <AppBar app={app} />
-    <div style={{flexGrow: 2}}>
-
+    <div style={{flexShrink: 0}}>
+      <AppBar app={app} />
+    </div>
+    <div style={{flexGrow: 2, overflow: 'auto'}}>
+      <SwipeableViews>
+        <div>
+          <Info app={app} />
+        </div>
+      </SwipeableViews>
     </div>
     <AppBottomBar app={app} />
   </Page>
diff --git a/app/components/App/App2.js b/app/components/App/App2.js
deleted file mode 100644
index c039fca..0000000
--- a/app/components/App/App2.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import {Column, Row} from 'reactors-flex';
-import {Dimensions, Text, View} from 'reactors';
-import AppBar from 'material-ui/AppBar';
-import DropDownIcon from 'material-ui/svg-icons/navigation/arrow-drop-down';
-import Icon from 'reactors-icons';
-import IconButton from 'material-ui/IconButton';
-import IconMenu from 'material-ui/IconMenu';
-import MenuItem from 'material-ui/MenuItem';
-import NavigationBack from 'material-ui/svg-icons/navigation/arrow-back';
-import path from 'path';
-import RaisedButton from 'material-ui/RaisedButton';
-import React from 'react';
-import Router from 'reactors-router';
-import Packager from '../Packager/Home';
-import ReactNative from '../ReactNative/Home';
-import Android from '../Android/Home';
-import IOS from '../IOS/Home';
-import Expo from '../Expo/Home';
-import NativeModules from '../NativeModules/Home';
-
-import Commands from './Commands';
-import Init from '../Command/Init';
-
-const App = ({app}) => (
-  <section>
-    <AppBar
-      title={path.basename(app.path)}
-      iconElementLeft={(
-        <IconButton>
-          <NavigationBack />
-        </IconButton>
-      )}
-      onLeftIconButtonClick={() => Router.get('main').go('index')}
-      iconElementRight={(
-        <IconMenu
-          iconButtonElement={(
-            <IconButton><DropDownIcon /></IconButton>
-          )}
-          onItemClick={(event, child) => Router.get(app.path).go(child.props.primaryText)}
-        >
-          <MenuItem primaryText="Packager" />
-          <MenuItem primaryText="React Native" />
-          <MenuItem primaryText="Android" />
-          <MenuItem primaryText="iOS" />
-          <MenuItem primaryText="Expo" />
-          <MenuItem primaryText="Native modules" />
-        </IconMenu>
-      )}
-    />
-    <Router
-      name={app.path}
-      width={Dimensions.get('window').width}
-      height={Dimensions.get('window').height - 80}
-    >
-      <Router.Route name="Packager">
-        <Packager app={app} />
-      </Router.Route>
-      <Router.Route name="React Native">
-        <ReactNative app={app} />
-      </Router.Route>
-      <Router.Route name="Android">
-        <Android app={app} />
-      </Router.Route>
-      <Router.Route name="iOS">
-        <IOS app={app} />
-      </Router.Route>
-      <Router.Route name="Expo">
-        <Expo app={app} />
-      </Router.Route>
-      <Router.Route name="Native modules">
-        <NativeModules app={app} />
-      </Router.Route>
-    </Router>
-  </section>
-);
-
-export default App;
diff --git a/app/components/ReactNative/Info.js b/app/components/ReactNative/Info.js
index 23cf45f..ea50ead 100644
--- a/app/components/ReactNative/Info.js
+++ b/app/components/ReactNative/Info.js
@@ -1,15 +1,15 @@
-import React, {PureComponent} from 'react';
+// @flow
 import {Card, CardHeader, CardText} from 'material-ui/Card';
-import map from 'lodash/map';
+import {connect} from 'react-redux';
+import CircularProgress from 'material-ui/CircularProgress';
 import keys from 'lodash/keys';
+import map from 'lodash/map';
+import React, {PureComponent} from 'react';
 import TextField from 'material-ui/TextField';
-import {connect} from 'react-redux';
-import get from 'lodash/get';
 
-import exec from '../../lib/exec';
 import {getInfo} from '../../redux/actions/infoActions';
 
-class Info extends PureComponent {
+class Info extends PureComponent<$InfoProps> {
   componentDidMount = () => {
     getInfo(this.props.app);
   };
@@ -33,6 +33,9 @@ class Info extends PureComponent {
               />
             </div>
           ))}
+          {!this.props.info && (
+            <CircularProgress />
+          )}
         </CardText>
       </Card>
       <Card>
@@ -46,10 +49,10 @@ class Info extends PureComponent {
           {Boolean(this.props.info) && map(keys(this.props.info.packages), key => (
             <div key={key}>
               <TextField
-                disabled
-                hintText={this.props.info.packages[key].wanted}
                 defaultValue={this.props.info.packages[key].installed}
+                disabled
                 floatingLabelText={`${key} (wanted: ${this.props.info.packages[key].wanted})`}
+                hintText={this.props.info.packages[key].wanted}
               />
             </div>
           ))}
diff --git a/app/components/ReactNative/Info.js.flow b/app/components/ReactNative/Info.js.flow
new file mode 100644
index 0000000..00c1580
--- /dev/null
+++ b/app/components/ReactNative/Info.js.flow
@@ -0,0 +1,23 @@
+// @flow
+
+declare type $InfoOwnProps = {|
+  +app: $App,
+|};
+
+declare type $InfoConnectProps = {|
+  +info: {|
+    +environment: {|
+      [key: string]: string,
+    |},
+    +packages: {|
+      [package: string]: {|
+        +installed: string,
+        +wanted: string,
+      |},
+    |},
+  |},
+|};
+
+declare type $InfoProps =
+  & $InfoOwnProps
+  & InfoConnectProps;