From 55a48cf56c3eff5179f29a2c6ff88ad1af8f158c Mon Sep 17 00:00:00 2001 From: co2-git Date: Sat, 14 Apr 2018 20:00:28 +0100 Subject: [PATCH 1/7] Bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 95e8228..83a9a8a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ReactNative", - "version": "0.1.2", + "version": "0.1.3", "scripts": { "start": "electron main.js", "babel": "babel --out-dir dist/ app/", From 349cdb59b5c8b5eefa891672bdd12f74e98fafce Mon Sep 17 00:00:00 2001 From: co2-git Date: Sat, 14 Apr 2018 20:07:35 +0100 Subject: [PATCH 2/7] Fix #4 Add Expo --- app/components/Layout/Open.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/app/components/Layout/Open.js b/app/components/Layout/Open.js index 326732b..3ad4341 100644 --- a/app/components/Layout/Open.js +++ b/app/components/Layout/Open.js @@ -41,7 +41,13 @@ class Open extends PureComponent { {this.state.showTerminal && ( { From 0d1358b6c9d6c42e446d88c7208b8c2b1775f458 Mon Sep 17 00:00:00 2001 From: co2-git Date: Sat, 14 Apr 2018 22:54:34 +0100 Subject: [PATCH 3/7] #4 Fix flow --- .flowconfig | 12 ++- app/App.js | 4 +- app/components/Home2.js | 117 ------------------------ app/components/Layout/AppCard.js | 10 +- app/components/Layout/AppCard.js.flow | 13 +++ app/components/Layout/Apps.js | 54 ----------- app/components/Layout/DrawerMenu.js | 1 + app/components/Layout/Header.js | 23 +++++ app/components/Layout/Header.js.flow | 8 ++ app/components/Layout/Home.js | 65 +++++++++++++ app/components/Layout/Home.js.flow | 18 ++++ app/components/Layout/Index.js | 11 --- app/components/Layout/Init.flow.js | 11 --- app/components/Layout/Init.js | 9 +- app/components/Layout/Init.js.flow | 16 ++++ app/components/Layout/Layout.js | 49 ++++++++++ app/components/Layout/Layout.js.flow | 13 +++ app/components/Layout/Open.js | 20 ++-- app/components/Layout/Open.js.flow | 11 +++ app/components/Layout/Page.js | 7 ++ app/components/Layout/Router.flow.js | 21 ----- app/components/Layout/Router.js | 113 ++--------------------- app/components/Layout/Router.js.flow | 12 +++ app/components/PackagerStatus.js | 24 ----- app/components/Terminal/Console.js | 22 +---- app/components/Terminal/Console.js.flow | 21 +++++ app/index.js | 1 - app/styles/main.js | 6 ++ app/styles/mixins.js | 4 - flow/{app.flow.js => app.js.flow} | 9 ++ package.json | 1 + yarn.lock | 37 +++++++- 32 files changed, 345 insertions(+), 398 deletions(-) delete mode 100644 app/components/Home2.js create mode 100644 app/components/Layout/AppCard.js.flow delete mode 100644 app/components/Layout/Apps.js create mode 100644 app/components/Layout/Header.js create mode 100644 app/components/Layout/Header.js.flow create mode 100644 app/components/Layout/Home.js create mode 100644 app/components/Layout/Home.js.flow delete mode 100644 app/components/Layout/Index.js delete mode 100644 app/components/Layout/Init.flow.js create mode 100644 app/components/Layout/Init.js.flow create mode 100644 app/components/Layout/Layout.js create mode 100644 app/components/Layout/Layout.js.flow create mode 100644 app/components/Layout/Open.js.flow create mode 100644 app/components/Layout/Page.js delete mode 100644 app/components/Layout/Router.flow.js create mode 100644 app/components/Layout/Router.js.flow delete mode 100644 app/components/PackagerStatus.js create mode 100644 app/components/Terminal/Console.js.flow create mode 100644 app/styles/main.js delete mode 100644 app/styles/mixins.js rename flow/{app.flow.js => app.js.flow} (54%) diff --git a/.flowconfig b/.flowconfig index e655991..9654dee 100644 --- a/.flowconfig +++ b/.flowconfig @@ -10,7 +10,15 @@ [include] [libs] -/flow/*.flow.js +./flow/app.js.flow +./app/components/Layout/AppCard.js.flow +./app/components/Layout/Header.js.flow +./app/components/Layout/Home.js.flow +./app/components/Layout/Init.js.flow +./app/components/Layout/Layout.js.flow +./app/components/Layout/Open.js.flow +./app/components/Layout/Router.js.flow +./app/components/Terminal/Console.js.flow [options] emoji=true @@ -36,7 +44,5 @@ suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(\\)? *\\(site=[a-z,_]* suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError -unsafe.enable_getters_and_setters=true - [version] ^0.69.0 diff --git a/app/App.js b/app/App.js index 8f74d92..e1b9643 100644 --- a/app/App.js +++ b/app/App.js @@ -5,7 +5,7 @@ import {Provider} from 'react-redux'; import React from 'react'; import {persistStore} from 'redux-persist'; -import Router from './components/Layout/Router'; +import Layout from './components/Layout/Layout'; import store from './redux/store'; const Loading = () => ( @@ -15,7 +15,7 @@ const Loading = () => ( const App = () => ( } persistor={persistStore(store)}> - + ); diff --git a/app/components/Home2.js b/app/components/Home2.js deleted file mode 100644 index ee8c53c..0000000 --- a/app/components/Home2.js +++ /dev/null @@ -1,117 +0,0 @@ -import React from 'react'; -import {Dimensions, Image, Text, View} from 'reactors'; -import * as Flex from 'reactors-flex'; -import Router from 'reactors-router'; -import path from 'path'; -import {connect} from 'react-redux'; -import Icon from 'reactors-icons'; - -import Start from './Start'; -import Bundle from './Bundle'; -import Unbundle from './Unbundle'; -// import Icon from '../../assets/react-native-icon.png'; -// import Folder from '../../assets/folder.png'; -import Info from '../../package.json'; -import * as mainActions from '../redux/actions/mainActions'; -import PackagerStatus from './PackagerStatus'; - -const commands = [ - {name: 'bundle', active: true}, - {name: 'eject'}, - {name: 'help'}, - {name: 'info'}, - {name: 'install'}, - {name: 'link'}, - {name: 'log-android'}, - {name: 'log-ios'}, - {name: 'new-library'}, - {name: 'run-android'}, - {name: 'run-ios'}, - {name: 'start', active: true}, - {name: 'unbundle'}, - {name: 'uninstall'}, - {name: 'upgrade'}, -]; - -const printAppName = (dir) => { - const [name, base] = dir.split(/\//).reverse(); - return ( - - {base}/ - {name} - - ); -} - -const getPackageVersion = (name) => { - // const pkg = require(path.join(process.cwd(), 'package.json')); - // return pkg.dependencies[name]; -}; - -const Home = props => ( - - - - - - - - v{Info.version} - - - - {printAppName(props.main.dir)} - mainActions.changeDirRequest()} - style={{padding: 5, cursor: 'pointer'}} - /> - - - - react-native v{getPackageVersion('react-native')} react v{getPackageVersion('react')} - - - Update - - - - - - - - - - - - - - - - - - - - - - -); - -const selector = state => { - console.log({state}); - return {main: state.main}; -}; - -export default connect(selector)(Home); diff --git a/app/components/Layout/AppCard.js b/app/components/Layout/AppCard.js index 75b11f3..29b8b17 100644 --- a/app/components/Layout/AppCard.js +++ b/app/components/Layout/AppCard.js @@ -8,15 +8,7 @@ import CloseIcon from 'material-ui/svg-icons/navigation/close'; import Animated from '../Base/Animated'; import {closeApp} from '../../redux/actions/appsActions'; -type $AppCardOwnProps = { - app: $App, -}; - -type $AppCardProps = - & $AppCardOwnProps - ; - -class AppCard extends PureComponent<$AppCardProps> { +class AppCard extends PureComponent<$AppCardProps, $AppCardState> { state = {expanded: false}; render = () => ( diff --git a/app/components/Layout/AppCard.js.flow b/app/components/Layout/AppCard.js.flow new file mode 100644 index 0000000..0b2dedb --- /dev/null +++ b/app/components/Layout/AppCard.js.flow @@ -0,0 +1,13 @@ +// @flow + +declare type $AppCardOwnProps = {| + +app: $App, +|}; + +declare type $AppCardProps = + & $AppCardOwnProps + ; + +declare type $AppCardState = {| + expanded: boolean, +|}; diff --git a/app/components/Layout/Apps.js b/app/components/Layout/Apps.js deleted file mode 100644 index d7f4d6c..0000000 --- a/app/components/Layout/Apps.js +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; -import {Card, CardHeader, CardActions} from 'material-ui/Card'; -import {connect} from 'react-redux'; -import map from 'lodash/map'; -import Router from 'reactors-router'; -import {Dimensions} from 'reactors'; -import Snackbar from 'material-ui/Snackbar'; -import get from 'lodash/get'; - -import Open from '../Card/Open'; -import AppCard from '../Card/AppCard'; -import App from '../App/App'; -import {clearError} from '../../redux/actions/errorsActions'; - -const Apps = ({apps, error}) => ( - -
- - -
- - {map(apps, app => ( - - ))} -
- - {map(apps, app => ( - - - - ))} - - -
- -); - -const selector = state => ({ - selectedApp: state.selected.app, - apps: state.apps, - error: state.error, -}); - -export default connect(selector)(Apps); diff --git a/app/components/Layout/DrawerMenu.js b/app/components/Layout/DrawerMenu.js index e49a564..cc7b4f0 100644 --- a/app/components/Layout/DrawerMenu.js +++ b/app/components/Layout/DrawerMenu.js @@ -1,3 +1,4 @@ +// @flow import React from 'react'; import MenuItem from 'material-ui/MenuItem'; import CodeIcon from 'material-ui/svg-icons/action/code'; diff --git a/app/components/Layout/Header.js b/app/components/Layout/Header.js new file mode 100644 index 0000000..292ee49 --- /dev/null +++ b/app/components/Layout/Header.js @@ -0,0 +1,23 @@ +// @flow +import React from 'react'; +import AppBar from 'material-ui/AppBar'; +import IconButton from 'material-ui/IconButton'; +import MenuIcon from 'material-ui/svg-icons/navigation/menu'; + +const Header = ({onToggle}: $HeaderOwnProps) => ( +
+ + + + )} + onLeftIconButtonClick={onToggle} + title="React Native" + style={{backgroundColor: 'transparent'}} + titleStyle={{color: '#444'}} + /> +
+); + +export default Header; diff --git a/app/components/Layout/Header.js.flow b/app/components/Layout/Header.js.flow new file mode 100644 index 0000000..66783f4 --- /dev/null +++ b/app/components/Layout/Header.js.flow @@ -0,0 +1,8 @@ +// @flow + +declare type $HeaderOwnProps = {| + +onToggle: () => void, +|}; + +declare type $HeaderProps = + & $HeaderOwnProps; diff --git a/app/components/Layout/Home.js b/app/components/Layout/Home.js new file mode 100644 index 0000000..9f02225 --- /dev/null +++ b/app/components/Layout/Home.js @@ -0,0 +1,65 @@ +// @flow +import React, {PureComponent} from 'react'; +import TextField from 'material-ui/TextField'; +import map from 'lodash/map'; +import filter from 'lodash/filter'; +import path from 'path'; +import {connect} from 'react-redux'; + +import Header from './Header'; +import Page from './Page'; +import Open from './Open'; +import AppCard from './AppCard'; + +class Home extends PureComponent<$HomeProps, $HomeState> { + static getDerivedStateFromProps(nextProps, prevState) { + if (nextProps.apps !== prevState.apps) { + return {apps: nextProps.apps}; + } + return null; + } + state = { + apps: this.props.apps, + search: '', + }; + render = () => ( + +
+
+ + {this.props.apps.length > 0 && ( +
+ +
+ )} + {map(this.state.apps, app => ( + + ))} +
+ + ); + onChangeSearch = (event) => { + const search = event.target.value; + if (!search) { + this.setState({search, apps: this.props.apps}); + } else { + const regex = new RegExp(search, 'i'); + this.setState({ + search, + apps: filter(this.props.apps, app => regex.test(path.basename(app.path))), + }); + } + }; +} + +const selector = (state: $State): $HomeConnectProps => ({ + apps: state.apps, +}); + +export default connect(selector)(Home); diff --git a/app/components/Layout/Home.js.flow b/app/components/Layout/Home.js.flow new file mode 100644 index 0000000..ac8ce17 --- /dev/null +++ b/app/components/Layout/Home.js.flow @@ -0,0 +1,18 @@ +// @flow + +declare type $HomeConnectProps = {| + +apps: $App[], +|}; + +declare type $HomeOwnProps = {| + +onToggleDrawer: () => void, +|}; + +declare type $HomeProps = + & $HomeConnectProps + & $HomeOwnProps; + +declare type $HomeState = {| + apps: $App[], + search: string, +|}; diff --git a/app/components/Layout/Index.js b/app/components/Layout/Index.js deleted file mode 100644 index 45afb36..0000000 --- a/app/components/Layout/Index.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -import Open from './Open'; - -const Index = () => ( -
- -
-); - -export default Index; diff --git a/app/components/Layout/Init.flow.js b/app/components/Layout/Init.flow.js deleted file mode 100644 index aad044c..0000000 --- a/app/components/Layout/Init.flow.js +++ /dev/null @@ -1,11 +0,0 @@ -// @flow - -export type $InitProps = {}; - -export type $InitState = { - base: string, - baseError: string, - expo: boolean, - name: string, - nameError: string, -}; diff --git a/app/components/Layout/Init.js b/app/components/Layout/Init.js index 4e80acf..ce3d16f 100644 --- a/app/components/Layout/Init.js +++ b/app/components/Layout/Init.js @@ -56,7 +56,7 @@ class Init extends PureComponent<$InitProps, $InitState> { ); - onChangeBase = event => this.setState({ + onChangeBase = (event: SyntheticInputEvent) => this.setState({ base: event.target.value, baseError: !event.target.value ? 'Please choose a base directory' : '', }); @@ -65,8 +65,11 @@ class Init extends PureComponent<$InitProps, $InitState> { .then((base = '') => this.setState({base, baseError: ''})) .catch(raiseError); }; - onToggle = (event, isInputChecked) => this.setState({expo: isInputChecked}); - onChangeName = event => this.setState({ + onToggle = ( + event: SyntheticInputEvent, + isInputChecked: boolean + ) => this.setState({expo: isInputChecked}); + onChangeName = (event: SyntheticInputEvent) => this.setState({ name: event.target.value, nameError: !event.target.value ? 'Please enter a name' : '', }); diff --git a/app/components/Layout/Init.js.flow b/app/components/Layout/Init.js.flow new file mode 100644 index 0000000..0bfa9d5 --- /dev/null +++ b/app/components/Layout/Init.js.flow @@ -0,0 +1,16 @@ +// @flow + +declare type $InitOwnProps = {| + +onCreate: (props: $Create) => void, +|}; + +declare type $InitProps = + & $InitOwnProps; + +declare type $InitState = { + base: string, + baseError: string, + expo: boolean, + name: string, + nameError: string, +}; diff --git a/app/components/Layout/Layout.js b/app/components/Layout/Layout.js new file mode 100644 index 0000000..27eba85 --- /dev/null +++ b/app/components/Layout/Layout.js @@ -0,0 +1,49 @@ +// @flow +import {connect} from 'react-redux'; +import CloseIcon from 'material-ui/svg-icons/navigation/close'; +import Drawer from 'material-ui/Drawer'; +import get from 'lodash/get'; +import IconButton from 'material-ui/IconButton'; +import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; +import React, {PureComponent} from 'react'; +import Snackbar from 'material-ui/Snackbar'; + +import {clearError} from '../../redux/actions/errorsActions'; +import DrawerMenu from './DrawerMenu'; +import Router from './Router'; + +class Layout extends PureComponent<$LayoutProps, $LayoutState> { + state = { + showDrawer: false, + }; + render = () => ( + +
+ + + +
+ + + + +
+ + + +
+ + ); + onToggleDrawer = () => this.setState({showDrawer: !this.state.showDrawer}); +} + +const selector = (state: $State): $LayoutConnectProps => ({ + error: state.error, +}); + +export default connect(selector)(Layout); diff --git a/app/components/Layout/Layout.js.flow b/app/components/Layout/Layout.js.flow new file mode 100644 index 0000000..4b6de9b --- /dev/null +++ b/app/components/Layout/Layout.js.flow @@ -0,0 +1,13 @@ +// @flow + +declare type $LayoutConnectProps = {| + +error: ?Error, +|}; + +declare type $LayoutProps = + & $LayoutConnectProps + ; // eslint-disable-line semi-style + +declare type $LayoutState = {| + showDrawer: boolean, +|}; diff --git a/app/components/Layout/Open.js b/app/components/Layout/Open.js index 3ad4341..ac860ce 100644 --- a/app/components/Layout/Open.js +++ b/app/components/Layout/Open.js @@ -1,3 +1,4 @@ +// @flow import {Card, CardHeader, CardActions} from 'material-ui/Card'; import Popover from 'material-ui/Popover'; import RaisedButton from 'material-ui/RaisedButton'; @@ -9,8 +10,9 @@ import Init from './Init'; import Terminal from '../Terminal/Console'; import Animated from '../Base/Animated'; -class Open extends PureComponent { +class Open extends PureComponent<$OpenProps, $OpenState> { state = { + anchorEl: null, create: null, expand: false, open: false, @@ -39,7 +41,7 @@ class Open extends PureComponent { /> - {this.state.showTerminal && ( + {this.state.showTerminal && this.state.create && ( { + (data: string, ps: $Emitter) => { if (/Directory.+already exists.+Continue\?/i.test(data)) { ps.emit('write', 'yes\n'); } @@ -59,10 +61,10 @@ class Open extends PureComponent { onDone={() => { setTimeout(() => { this.setState({showTerminal: false}, () => { - appsActions.openApp(path.join( - this.state.create.base, - this.state.create.name, - )); + const {create} = this.state; + if (create) { + appsActions.openApp(path.join(create.base, create.name)); + } }); }); }} @@ -81,7 +83,7 @@ class Open extends PureComponent { ); - handleClick = (event) => { + handleClick = (event: SyntheticEvent) => { // This prevents ghost click. event.preventDefault(); @@ -95,7 +97,7 @@ class Open extends PureComponent { open: false, }); }; - onCreate = (options) => { + onCreate = (options: $Create) => { this.setState({ create: options, expand: true, diff --git a/app/components/Layout/Open.js.flow b/app/components/Layout/Open.js.flow new file mode 100644 index 0000000..e0d0ebf --- /dev/null +++ b/app/components/Layout/Open.js.flow @@ -0,0 +1,11 @@ +// @flow + +declare type $OpenProps = {}; + +declare type $OpenState = {| + anchorEl: ?HTMLElement, + create: ?$Create, + expand: boolean, + open: boolean, + showTerminal: boolean, +|}; diff --git a/app/components/Layout/Page.js b/app/components/Layout/Page.js new file mode 100644 index 0000000..9fc66a9 --- /dev/null +++ b/app/components/Layout/Page.js @@ -0,0 +1,7 @@ +import React from 'react'; + +import {pageStyle} from '../../styles/main'; + +const Page = props =>
; + +export default Page; diff --git a/app/components/Layout/Router.flow.js b/app/components/Layout/Router.flow.js deleted file mode 100644 index 2a2a65a..0000000 --- a/app/components/Layout/Router.flow.js +++ /dev/null @@ -1,21 +0,0 @@ -// @flow - -type $RouterOwnProps = {}; - -type $RouterConnectProps = { - apps: $App[], - error: ?Error, -}; - -// eslint-disable-next-line no-unused-vars -type $RouterProps = - & $RouterOwnProps - & $RouterConnectProps - ; - -// eslint-disable-next-line no-unused-vars -type $RoouterState = { - apps: $App[], - open: boolean, - search: string, -}; diff --git a/app/components/Layout/Router.js b/app/components/Layout/Router.js index 583b825..0572804 100644 --- a/app/components/Layout/Router.js +++ b/app/components/Layout/Router.js @@ -1,115 +1,18 @@ // @flow -import {connect} from 'react-redux'; -import AppBar from 'material-ui/AppBar'; -import CloseIcon from 'material-ui/svg-icons/navigation/close'; -import Drawer from 'material-ui/Drawer'; -import filter from 'lodash/filter'; -import get from 'lodash/get'; -import IconButton from 'material-ui/IconButton'; -import map from 'lodash/map'; -import MenuIcon from 'material-ui/svg-icons/navigation/menu'; -import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; -import path from 'path'; import React, {PureComponent} from 'react'; -import Snackbar from 'material-ui/Snackbar'; -import TextField from 'material-ui/TextField'; +import SwipeableViews from 'react-swipeable-views'; -import {clearError} from '../../redux/actions/errorsActions'; -import AppCard from './AppCard'; -import DrawerMenu from './DrawerMenu'; -import Index from './Index'; -import merge from '../../styles/mixins/merge'; -import styles from './Router.styles'; +import Home from './Home'; -class Router extends PureComponent<$RouterProps, $RoouterState> { - static getDerivedStateFromProps(nextProps, prevState) { - if (nextProps.apps !== prevState.apps) { - return {apps: nextProps.apps}; - } - return null; - } +class Router extends PureComponent<$RouterProps, $RouterState> { state = { - apps: this.props.apps, - open: false, - search: '', + index: 0, }; render = () => ( - -
-
-
-
- - - - )} - onLeftIconButtonClick={this.handleToggle} - title="React Native" - style={{backgroundColor: 'transparent'}} - titleStyle={{color: '#444'}} - /> -
- - {this.props.apps.length > 0 && ( -
- -
- )} - {map(this.state.apps, app => ( - - ))} -
-
-
Page B
-
-
- -
- - - - -
- - -
- + + + ); - handleToggle = () => this.setState({open: !this.state.open}); - onChangeSearch = (event) => { - const search = event.target.value; - if (!search) { - this.setState({search, apps: this.props.apps}); - } else { - const regex = new RegExp(search, 'i'); - this.setState({ - search, - apps: filter(this.props.apps, app => regex.test(path.basename(app.path))), - }); - } - }; } -const selector = (state: $State): $RouterConnectProps => ({ - apps: state.apps, - error: state.error, -}); - -export default connect(selector)(Router); +export default Router; diff --git a/app/components/Layout/Router.js.flow b/app/components/Layout/Router.js.flow new file mode 100644 index 0000000..80d5efd --- /dev/null +++ b/app/components/Layout/Router.js.flow @@ -0,0 +1,12 @@ +// @flow + +declare type $RouterOwnProps = {| + +onToggleDrawer: () => void, +|}; + +declare type $RouterProps = + & $RouterOwnProps; + +declare type $RouterState = {| + index: number, +|}; diff --git a/app/components/PackagerStatus.js b/app/components/PackagerStatus.js deleted file mode 100644 index d3f2fe1..0000000 --- a/app/components/PackagerStatus.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import {Text, View} from 'reactors'; -import * as Flex from 'reactors-flex'; -import {connect} from 'react-redux'; -import Button from 'reactors-button'; - -import * as metroActions from '../redux/actions/metroActions'; - -const PackagerStatus = props => ( - - {props.metroStatus.state === 'started' && ( - - Packager started on port {props.metroOptions.port} - - - )} - -); - -const selector = state => { - return {metroStatus: state.metroStatus, metroOptions: state.metroOptions}; -}; - -export default connect(selector)(PackagerStatus); diff --git a/app/components/Terminal/Console.js b/app/components/Terminal/Console.js index 251f8a4..bb07951 100644 --- a/app/components/Terminal/Console.js +++ b/app/components/Terminal/Console.js @@ -9,30 +9,13 @@ import TermIcon from 'material-ui/svg-icons/action/code'; import stripAnsi from 'strip-ansi'; import DoneIcon from 'material-ui/svg-icons/action/done'; import ErrorIcon from 'material-ui/svg-icons/alert/error'; -import {green800, redA700, red500} from 'material-ui/styles/colors'; +import {green800, redA700} from 'material-ui/styles/colors'; import exec from '../../lib/exec'; import Row from '../FlexBox/Row'; -import Text from '../Base/Text'; - -type $InputHandler = (message: string, ps: EventEmitter) => void; - -type $TerminalProps = { - command: string, - cwd: string, - inputHandlers: $InputHandler[], -}; - -type $TerminalState = { - code: ?number, - done: boolean, - error: ?Error, - output: string[], - pid: ?number, -}; class Terminal extends PureComponent<$TerminalProps, $TerminalState> { - ps: EventEmitter; + ps: $Emitter; state: $TerminalState = { code: null, done: false, @@ -50,7 +33,6 @@ class Terminal extends PureComponent<$TerminalProps, $TerminalState> { } })); this.ps.on('error', (error) => { - console.log(error.stack); this.setState({error}); }); this.ps.on('done', () => this.setState({done: true, code: 0}, () => { diff --git a/app/components/Terminal/Console.js.flow b/app/components/Terminal/Console.js.flow new file mode 100644 index 0000000..3019310 --- /dev/null +++ b/app/components/Terminal/Console.js.flow @@ -0,0 +1,21 @@ +// @flow + +type $InputHandler = (message: string, event: Event) => void; + +declare type $TerminalOwnProps = {| + +command: string, + +cwd?: string, + +inputHandlers?: $InputHandler[], + +onDone?: () => void, +|}; + +declare type $TerminalProps = + & $TerminalOwnProps; + +declare type $TerminalState = {| + code: ?number, + done: boolean, + error: ?Error, + output: string[], + pid: ?number, +|}; diff --git a/app/index.js b/app/index.js index 1e9ead8..3d1b0ed 100644 --- a/app/index.js +++ b/app/index.js @@ -1,4 +1,3 @@ -// @flow import React from 'react'; import ReactDOM from 'react-dom'; import fixPath from 'fix-path'; diff --git a/app/styles/main.js b/app/styles/main.js new file mode 100644 index 0000000..02f8076 --- /dev/null +++ b/app/styles/main.js @@ -0,0 +1,6 @@ +export const pageStyle = { + boxSizing: 'border-box', + height: '100vh', + overflow: 'auto', + width: '100vw', +}; diff --git a/app/styles/mixins.js b/app/styles/mixins.js deleted file mode 100644 index 21716a2..0000000 --- a/app/styles/mixins.js +++ /dev/null @@ -1,4 +0,0 @@ -export const primaryButton = () => ({ - fontSize: 16, - padding: 6, -}); diff --git a/flow/app.flow.js b/flow/app.js.flow similarity index 54% rename from flow/app.flow.js rename to flow/app.js.flow index 532ea75..5644a1c 100644 --- a/flow/app.flow.js +++ b/flow/app.js.flow @@ -1,9 +1,18 @@ // @flow +import EventEmitter from 'events'; import * as reducers from '../app/redux/reducers'; +declare type $Emitter = EventEmitter; + // eslint-disable-next-line no-undef declare type $App = { path: string, }; declare type $State = $Keys; + +declare type $Create = {| + name: string, + base: string, + expo: boolean, +|}; diff --git a/package.json b/package.json index 83a9a8a..69368df 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "react": "^16.3.1", "react-dom": "^16.3.1", "react-redux": "^5.0.7", + "react-swipeable-views": "^0.12.13", "redux": "^3.7.2", "redux-persist": "^5.9.1", "strip-ansi": "^4.0.0" diff --git a/yarn.lock b/yarn.lock index 865496c..3ec138a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1454,7 +1454,7 @@ doctrine@^2.0.2, doctrine@^2.1.0: dependencies: esutils "^2.0.2" -dom-helpers@^3.2.0: +dom-helpers@^3.2.0, dom-helpers@^3.2.1: version "3.3.1" resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6" @@ -1767,7 +1767,7 @@ fast-levenshtein@~2.0.4: version "2.0.6" resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" -fbjs@^0.8.1, fbjs@^0.8.16: +fbjs@^0.8.1, fbjs@^0.8.16, fbjs@^0.8.4: version "0.8.16" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" dependencies: @@ -2497,7 +2497,7 @@ jsx-ast-utils@^2.0.0, jsx-ast-utils@^2.0.1: dependencies: array-includes "^3.0.3" -keycode@^2.1.8: +keycode@^2.1.7, keycode@^2.1.8: version "2.2.0" resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04" @@ -3027,7 +3027,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.5.6, prop-types@^15.5.7: +prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7: version "15.6.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca" dependencies: @@ -3100,6 +3100,35 @@ react-redux@^5.0.7: loose-envify "^1.1.0" prop-types "^15.6.0" +react-swipeable-views-core@^0.12.11: + version "0.12.11" + resolved "https://registry.yarnpkg.com/react-swipeable-views-core/-/react-swipeable-views-core-0.12.11.tgz#3cf2b4daffbb36f9d69bd19bf5b2d5370b6b2c1b" + dependencies: + babel-runtime "^6.23.0" + warning "^3.0.0" + +react-swipeable-views-utils@^0.12.13: + version "0.12.13" + resolved "https://registry.yarnpkg.com/react-swipeable-views-utils/-/react-swipeable-views-utils-0.12.13.tgz#fe102524180bf568f746e844c8d74b9cd3e7e0b8" + dependencies: + babel-runtime "^6.23.0" + fbjs "^0.8.4" + keycode "^2.1.7" + prop-types "^15.6.0" + react-event-listener "^0.5.1" + react-swipeable-views-core "^0.12.11" + +react-swipeable-views@^0.12.13: + version "0.12.13" + resolved "https://registry.yarnpkg.com/react-swipeable-views/-/react-swipeable-views-0.12.13.tgz#247442dbe14922efe5ad6fe0297599c817600bf9" + dependencies: + babel-runtime "^6.23.0" + dom-helpers "^3.2.1" + prop-types "^15.5.4" + react-swipeable-views-core "^0.12.11" + react-swipeable-views-utils "^0.12.13" + warning "^3.0.0" + react-test-renderer@16.2.0: version "16.2.0" resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.2.0.tgz#bddf259a6b8fcd8555f012afc8eacc238872a211" From 149b8cb3e6f714ea56874dd085da848aa61fd589 Mon Sep 17 00:00:00 2001 From: co2-git Date: Sat, 14 Apr 2018 23:23:06 +0100 Subject: [PATCH 4/7] Fix #5 --- .flowconfig | 2 + app/components/App/App.js | 78 +++--------------------- app/components/App/App.js.flow | 8 +++ app/components/App/App2.js | 77 +++++++++++++++++++++++ app/components/App/AppBar.js | 40 ++++++++++++ app/components/App/AppBar.js.flow | 8 +++ app/components/App/AppName.js | 15 ----- app/components/App/AppTabLink.js | 34 ----------- app/components/App/AppsBar.js | 50 --------------- app/components/App/Commands.js | 65 -------------------- app/components/Layout/AppCard.js | 3 +- app/components/Layout/AppCard.js.flow | 1 + app/components/Layout/Home.js | 4 +- app/components/Layout/Router.js | 20 ++++-- app/components/Layout/Router.js.flow | 12 ++-- app/redux/actions/routerActions.js | 8 +++ app/redux/reducers.js | 1 + app/redux/reducers/routerIndexReducer.js | 12 ++++ app/redux/types.js | 6 ++ 19 files changed, 195 insertions(+), 249 deletions(-) create mode 100644 app/components/App/App.js.flow create mode 100644 app/components/App/App2.js create mode 100644 app/components/App/AppBar.js create mode 100644 app/components/App/AppBar.js.flow delete mode 100644 app/components/App/AppName.js delete mode 100644 app/components/App/AppTabLink.js delete mode 100644 app/components/App/AppsBar.js delete mode 100644 app/components/App/Commands.js create mode 100644 app/redux/actions/routerActions.js create mode 100644 app/redux/reducers/routerIndexReducer.js diff --git a/.flowconfig b/.flowconfig index 9654dee..ba0a549 100644 --- a/.flowconfig +++ b/.flowconfig @@ -11,6 +11,8 @@ [libs] ./flow/app.js.flow +./app/components/App/App.js.flow +./app/components/App/AppBar.js.flow ./app/components/Layout/AppCard.js.flow ./app/components/Layout/Header.js.flow ./app/components/Layout/Home.js.flow diff --git a/app/components/App/App.js b/app/components/App/App.js index c039fca..bf68518 100644 --- a/app/components/App/App.js +++ b/app/components/App/App.js @@ -1,77 +1,13 @@ -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'; +// @flow 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'; +import AppBar from './AppBar'; +import Page from '../Layout/Page'; -const App = ({app}) => ( -
- - - - )} - onLeftIconButtonClick={() => Router.get('main').go('index')} - iconElementRight={( - - )} - onItemClick={(event, child) => Router.get(app.path).go(child.props.primaryText)} - > - - - - - - - - )} - /> - - - - - - - - - - - - - - - - - - - - -
+const App = ({app}: $AppProps) => ( + + + ); export default App; diff --git a/app/components/App/App.js.flow b/app/components/App/App.js.flow new file mode 100644 index 0000000..9376855 --- /dev/null +++ b/app/components/App/App.js.flow @@ -0,0 +1,8 @@ +// @flow + +declare type $AppOwnProps = {| + +app: $App, +|}; + +declare type $AppProps = + & $AppOwnProps; diff --git a/app/components/App/App2.js b/app/components/App/App2.js new file mode 100644 index 0000000..c039fca --- /dev/null +++ b/app/components/App/App2.js @@ -0,0 +1,77 @@ +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}) => ( +
+ + + + )} + onLeftIconButtonClick={() => Router.get('main').go('index')} + iconElementRight={( + + )} + onItemClick={(event, child) => Router.get(app.path).go(child.props.primaryText)} + > + + + + + + + + )} + /> + + + + + + + + + + + + + + + + + + + + +
+); + +export default App; diff --git a/app/components/App/AppBar.js b/app/components/App/AppBar.js new file mode 100644 index 0000000..3f8ab9a --- /dev/null +++ b/app/components/App/AppBar.js @@ -0,0 +1,40 @@ +// @flow +import DropDownIcon from 'material-ui/svg-icons/navigation/arrow-drop-down'; +import IconButton from 'material-ui/IconButton'; +import IconMenu from 'material-ui/IconMenu'; +import MaterialUIAppBar from 'material-ui/AppBar'; +import MenuItem from 'material-ui/MenuItem'; +import NavigationBack from 'material-ui/svg-icons/navigation/arrow-back'; +import path from 'path'; +import React from 'react'; + +import {switchRoute} from '../../redux/actions/routerActions'; + +const AppBar = ({app}: $AppBarProps) => ( + + + + )} + onLeftIconButtonClick={() => switchRoute(0)} + iconElementRight={( + + )} + onItemClick={(event, child) => console.log(child.props.primaryText)} + > + + + + + + + + )} + /> +); + +export default AppBar; diff --git a/app/components/App/AppBar.js.flow b/app/components/App/AppBar.js.flow new file mode 100644 index 0000000..1260e8a --- /dev/null +++ b/app/components/App/AppBar.js.flow @@ -0,0 +1,8 @@ +// @flow + +declare type $AppBarOwnProps = {| + +app: $App, +|}; + +declare type $AppBarProps = + & $AppBarOwnProps; diff --git a/app/components/App/AppName.js b/app/components/App/AppName.js deleted file mode 100644 index cd2e90e..0000000 --- a/app/components/App/AppName.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import {Column, Row} from 'reactors-flex'; -import {Text} from 'reactors'; - -const AppName = ({app}) => { - const [name, base] = app.path.split(/\//).reverse(); - return ( - - {base}/ - {name} - - ); -}; - -export default AppName; diff --git a/app/components/App/AppTabLink.js b/app/components/App/AppTabLink.js deleted file mode 100644 index 9c0a3bc..0000000 --- a/app/components/App/AppTabLink.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import {Text} from 'reactors'; -import {Column, Row} from 'reactors-flex'; -import Icon from 'reactors-icons'; -import path from 'path'; -import Router from 'reactors-router'; - -import * as appsActions from '../../redux/actions/appsActions'; - -const AppTabLink = ({app, selected}) => ( - - Router.get('Main').go(app.path)} - > - {path.basename(app.path)} - - appsActions.closeApp(app)} /> - -); - -export default AppTabLink; - -const styles = { - container: { - border: '1px solid #555', - borderBottomWidth: 0, - padding: 6, - borderTopLeftRadius: 4, - borderTopRightRadius: 4, - }, - selected: { - backgroundColor: 'white', - }, -}; diff --git a/app/components/App/AppsBar.js b/app/components/App/AppsBar.js deleted file mode 100644 index 32027b9..0000000 --- a/app/components/App/AppsBar.js +++ /dev/null @@ -1,50 +0,0 @@ -import React, {PureComponent} from 'react'; -import {Column, Row} from 'reactors-flex'; -import {Text, View} from 'reactors'; -import Icon from 'reactors-icons'; -import {connect} from 'react-redux'; -import map from 'lodash/map'; -import path from 'path'; -import Router from 'reactors-router'; -import Divider from 'material-ui/Divider'; - -import * as appsActions from '../../redux/actions/appsActions'; -import AppTabLink from './AppTabLink'; - -const AppsBar = ({apps, selectedApp}) => ( - - - - appsActions.openApp(null, path => Router.get('Main').go(path))} - style={{padding: 5, cursor: 'pointer', fontSize: 16}} - /> - - {map(apps, app => ( - - ))} - - - -); - -const selector = state => ({ - selectedApp: state.selected.app, - apps: state.apps, -}); - -export default connect(selector)(AppsBar); - -const styles = { - container: { - alignItems: 'center', - }, - tabPlus: { - border: '1px solid #555', - borderBottomWidth: 0, - padding: 6, - borderTopLeftRadius: 4, - borderTopRightRadius: 4, - }, -}; diff --git a/app/components/App/Commands.js b/app/components/App/Commands.js deleted file mode 100644 index 61f7e1a..0000000 --- a/app/components/App/Commands.js +++ /dev/null @@ -1,65 +0,0 @@ -import {Column, Row} from 'reactors-flex'; -import {Dimensions, Text} from 'reactors'; -import DropDownMenu from 'material-ui/DropDownMenu'; -import find from 'lodash/find'; -import findIndex from 'lodash/findIndex'; -import MenuItem from 'material-ui/MenuItem'; -import React, {PureComponent} from 'react'; -import Router from 'reactors-router'; - -import Start from '../Command/Start'; - -const commands = [ - {name: 'bundle'}, - {name: 'eject'}, - {name: 'help'}, - {name: 'info'}, - {name: 'install'}, - {name: 'link'}, - {name: 'log-android'}, - {name: 'log-ios'}, - {name: 'new-library'}, - {name: 'run-android'}, - {name: 'run-ios'}, - {name: 'start', active: true}, - {name: 'unbundle'}, - {name: 'uninstall'}, - {name: 'upgrade'}, -]; - -class Commands extends PureComponent { - state = { - commandIndex: findIndex(commands, 'active'), - command: find(commands, 'active'), - }; - render = () => ( -
- Router.get('Main')} - > - {commands.map((command, index) => ( - - ))} - - - {commands.map(command => ( - - {command.name === 'start' && } - - ))} - -
- ); -} - -export default Commands; diff --git a/app/components/Layout/AppCard.js b/app/components/Layout/AppCard.js index 29b8b17..7b1d0a5 100644 --- a/app/components/Layout/AppCard.js +++ b/app/components/Layout/AppCard.js @@ -7,6 +7,7 @@ import CloseIcon from 'material-ui/svg-icons/navigation/close'; import Animated from '../Base/Animated'; import {closeApp} from '../../redux/actions/appsActions'; +import {switchRoute} from '../../redux/actions/routerActions'; class AppCard extends PureComponent<$AppCardProps, $AppCardState> { state = {expanded: false}; @@ -14,7 +15,7 @@ class AppCard extends PureComponent<$AppCardProps, $AppCardState> { console.log('hello')} + onExpandChange={() => switchRoute(this.props.index + 1)} style={{marginBottom: 12}} > { />
)} - {map(this.state.apps, app => ( - + {map(this.state.apps, (app, index) => ( + ))} diff --git a/app/components/Layout/Router.js b/app/components/Layout/Router.js index 0572804..ef05f3b 100644 --- a/app/components/Layout/Router.js +++ b/app/components/Layout/Router.js @@ -1,18 +1,26 @@ // @flow import React, {PureComponent} from 'react'; import SwipeableViews from 'react-swipeable-views'; +import {connect} from 'react-redux'; +import map from 'lodash/map'; +import App from '../App/App'; import Home from './Home'; -class Router extends PureComponent<$RouterProps, $RouterState> { - state = { - index: 0, - }; +class Router extends PureComponent<$RouterProps> { render = () => ( - + + {map(this.props.apps, app => ( + + ))} ); } -export default Router; +const selector = (state: $State): $RouterConnectProps => ({ + apps: state.apps, + index: state.routerIndex, +}); + +export default connect(selector)(Router); diff --git a/app/components/Layout/Router.js.flow b/app/components/Layout/Router.js.flow index 80d5efd..5bc0ba7 100644 --- a/app/components/Layout/Router.js.flow +++ b/app/components/Layout/Router.js.flow @@ -1,12 +1,14 @@ // @flow +declare type $RouterConnectProps = {| + +apps: $App[], + +index: number, +|}; + declare type $RouterOwnProps = {| +onToggleDrawer: () => void, |}; declare type $RouterProps = - & $RouterOwnProps; - -declare type $RouterState = {| - index: number, -|}; + & $RouterOwnProps + & $RouterConnectProps; diff --git a/app/redux/actions/routerActions.js b/app/redux/actions/routerActions.js new file mode 100644 index 0000000..4c8eb1d --- /dev/null +++ b/app/redux/actions/routerActions.js @@ -0,0 +1,8 @@ +import * as types from '../types'; +import store from '../store'; + +// eslint-disable-next-line import/prefer-default-export +export const switchRoute = index => store.dispatch({ + type: types.SWITCH_ROUTE, + payload: {index}, +}); diff --git a/app/redux/reducers.js b/app/redux/reducers.js index 26658ed..29789ac 100644 --- a/app/redux/reducers.js +++ b/app/redux/reducers.js @@ -9,3 +9,4 @@ export {default as metroOptions} from './reducers/metroOptionsReducer'; export {default as metroOutput} from './reducers/metroOutputReducer'; export {default as metroStatus} from './reducers/metroStatusReducer'; export {default as selected} from './reducers/selectedReducer'; +export {default as routerIndex} from './reducers/routerIndexReducer'; diff --git a/app/redux/reducers/routerIndexReducer.js b/app/redux/reducers/routerIndexReducer.js new file mode 100644 index 0000000..611e05a --- /dev/null +++ b/app/redux/reducers/routerIndexReducer.js @@ -0,0 +1,12 @@ +import * as types from '../types'; + +const initialState = 0; + +const reducer = (state = initialState, action) => { + if (action.type === types.SWITCH_ROUTE) { + return action.payload.index; + } + return state; +}; + +export default reducer; diff --git a/app/redux/types.js b/app/redux/types.js index d54f660..b0b1040 100644 --- a/app/redux/types.js +++ b/app/redux/types.js @@ -1,6 +1,12 @@ +// @flow + +// ERROR export const ERROR = 'RNRX/ERROR'; export const CLEAR_ERROR = 'RNRX/ERROR/CLEAR'; +// ROUTER +export const SWITCH_ROUTE = 'RNRX/ROUTER/SWITCH'; + // APPS export const OPEN_APP = 'RNRX/APPS/OPEN'; export const SELECT_APP = 'RNRX/APPS/SELECT'; From b1721ae638ffbf74245d6938e56644956890eac7 Mon Sep 17 00:00:00 2001 From: co2-git Date: Sat, 14 Apr 2018 23:52:58 +0100 Subject: [PATCH 5/7] Fix #6 --- app/components/Layout/AppCard.js | 6 ++++++ app/components/Layout/Home.js | 12 ++++++------ app/components/Terminal/Console.js | 8 +++++++- 3 files changed, 19 insertions(+), 7 deletions(-) diff --git a/app/components/Layout/AppCard.js b/app/components/Layout/AppCard.js index 7b1d0a5..82e7c81 100644 --- a/app/components/Layout/AppCard.js +++ b/app/components/Layout/AppCard.js @@ -4,6 +4,7 @@ import {Card, CardHeader, CardActions} from 'material-ui/Card'; import path from 'path'; import RaisedButton from 'material-ui/RaisedButton'; import CloseIcon from 'material-ui/svg-icons/navigation/close'; +import ViewIcon from 'material-ui/svg-icons/action/visibility'; import Animated from '../Base/Animated'; import {closeApp} from '../../redux/actions/appsActions'; @@ -25,6 +26,11 @@ class AppCard extends PureComponent<$AppCardProps, $AppCardState> { showExpandableButton={false} /> + } + onClick={() => switchRoute(this.props.index + 1)} + /> } diff --git a/app/components/Layout/Home.js b/app/components/Layout/Home.js index ba67470..91e98df 100644 --- a/app/components/Layout/Home.js +++ b/app/components/Layout/Home.js @@ -1,15 +1,15 @@ // @flow -import React, {PureComponent} from 'react'; -import TextField from 'material-ui/TextField'; -import map from 'lodash/map'; +import {connect} from 'react-redux'; import filter from 'lodash/filter'; +import map from 'lodash/map'; import path from 'path'; -import {connect} from 'react-redux'; +import React, {PureComponent} from 'react'; +import TextField from 'material-ui/TextField'; +import AppCard from './AppCard'; import Header from './Header'; -import Page from './Page'; import Open from './Open'; -import AppCard from './AppCard'; +import Page from './Page'; class Home extends PureComponent<$HomeProps, $HomeState> { static getDerivedStateFromProps(nextProps, prevState) { diff --git a/app/components/Terminal/Console.js b/app/components/Terminal/Console.js index bb07951..bb0b8bb 100644 --- a/app/components/Terminal/Console.js +++ b/app/components/Terminal/Console.js @@ -46,6 +46,12 @@ class Terminal extends PureComponent<$TerminalProps, $TerminalState> { code, })); }; + componentDidUpdate = () => { + const terminal = document.getElementById('terminal'); + if (terminal) { + terminal.scrollTop = terminal.scrollHeight; + } + }; render = () => ( { {this.props.cwd} -
+
{map(this.state.output, (output, index) => { const lines = stripAnsi(output.message).split('\n'); return ( From 26e4655cad2414a69f51818df18b8dbbe8288f3a Mon Sep 17 00:00:00 2001 From: co2-git Date: Sun, 15 Apr 2018 00:13:18 +0100 Subject: [PATCH 6/7] Fix #3 --- app/index.js | 15 +++++++++++++++ config.json | 5 +++++ package.json | 1 + yarn.lock | 4 ++++ 4 files changed, 25 insertions(+) create mode 100644 config.json diff --git a/app/index.js b/app/index.js index 3d1b0ed..01fe97c 100644 --- a/app/index.js +++ b/app/index.js @@ -1,11 +1,26 @@ import React from 'react'; import ReactDOM from 'react-dom'; import fixPath from 'fix-path'; +// eslint-disable-next-line import/no-unresolved, import/extensions +import {app, autoUpdater} from 'electron'; +import isDev from 'electron-is-dev'; import App from './App'; +import config from '../config.json'; fixPath(); const root = document.getElementById('root'); ReactDOM.render(, root); + +if (!isDev) { + const server = config.now.url; + const feed = `${server}/update/${process.platform}/${app.getVersion()}`; + + autoUpdater.setFeedURL(feed); + + setInterval(() => { + autoUpdater.checkForUpdates(); + }, 1000 * 60 * 60 * 24); +} diff --git a/config.json b/config.json new file mode 100644 index 0000000..ea49d4b --- /dev/null +++ b/config.json @@ -0,0 +1,5 @@ +{ + "now": { + "url": "https://reactnative-zrkchnlzzk.now.sh" + } +} diff --git a/package.json b/package.json index 69368df..7a521cf 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "dependencies": { "babel-polyfill": "^6.26.0", "chokidar": "^2.0.3", + "electron-is-dev": "^0.3.0", "fix-path": "^2.1.0", "lodash": "^4.17.5", "material-ui": "^0.20.0", diff --git a/yarn.lock b/yarn.lock index 3ec138a..ff3dca8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1464,6 +1464,10 @@ ecc-jsbn@~0.1.1: dependencies: jsbn "~0.1.0" +electron-is-dev@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/electron-is-dev/-/electron-is-dev-0.3.0.tgz#14e6fda5c68e9e4ecbeff9ccf037cbd7c05c5afe" + electron-to-chromium@^1.3.30: version "1.3.31" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.31.tgz#00d832cba9fe2358652b0c48a8816c8e3a037e9f" From 74fe89c070cb41e592feecef8c55df658fe04538 Mon Sep 17 00:00:00 2001 From: co2-git Date: Sun, 15 Apr 2018 00:16:35 +0100 Subject: [PATCH 7/7] Fix #3 --- app/index.js | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/app/index.js b/app/index.js index 01fe97c..021be70 100644 --- a/app/index.js +++ b/app/index.js @@ -2,11 +2,12 @@ import React from 'react'; import ReactDOM from 'react-dom'; import fixPath from 'fix-path'; // eslint-disable-next-line import/no-unresolved, import/extensions -import {app, autoUpdater} from 'electron'; +import {app, autoUpdater, dialog} from 'electron'; import isDev from 'electron-is-dev'; import App from './App'; import config from '../config.json'; +import {raiseError} from './redux/actions/errorsActions'; fixPath(); @@ -23,4 +24,22 @@ if (!isDev) { setInterval(() => { autoUpdater.checkForUpdates(); }, 1000 * 60 * 60 * 24); + + autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName) => { + const dialogOpts = { + type: 'info', + buttons: ['Restart', 'Later'], + title: 'Application Update', + message: process.platform === 'win32' ? releaseNotes : releaseName, + detail: 'A new version has been downloaded. Restart the application to apply the updates.', + }; + + dialog.showMessageBox(dialogOpts, (response) => { + if (response === 0) autoUpdater.quitAndInstall(); + }); + }); + + autoUpdater.on('error', (message) => { + raiseError(new Error(message)); + }); }