Merge pull request #38 from rande/update_gui

Update gui

.gitignore

@@ -6,4 +6,6 @@ gui/node_modules
 build
 assets/bindata.go
 vendor
-var/
+var/
+gui/.cache
+gui/dist

.travis.yml

@@ -9,7 +9,7 @@ cache:
 install:
     # from http://austinpray.com/ops/2015/09/20/change-travis-node-version.html
     - make install-backend
-    - rm -rf ~/.nvm && git clone https://github.com/creationix/nvm.git ~/.nvm && (cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`) && source ~/.nvm/nvm.sh && nvm install 4.4.5
+    - rm -rf ~/.nvm && git clone https://github.com/creationix/nvm.git ~/.nvm && (cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`) && source ~/.nvm/nvm.sh && nvm install 8.12.0
     - npm -g install yarn
     - make install-frontend
 

Makefile

@@ -1,7 +1,7 @@
 .PHONY: help format test install update build release assets
 
-GO_BINDATA_PREFIX = $(shell pwd)/gui/build
-GO_BINDATA_PATHS = $(shell pwd)/gui/build
+GO_BINDATA_PREFIX = $(shell pwd)/gui/dist
+GO_BINDATA_PATHS = $(shell pwd)/gui/dist
 GO_BINDATA_IGNORE = "(.*)\.(go|DS_Store)"
 GO_BINDATA_OUTPUT = $(shell pwd)/assets/bindata.go
 GO_BINDATA_PACKAGE = assets
@@ -15,13 +15,16 @@ SHA1=$(shell git rev-parse HEAD)
 help:     ## Display this help
 	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'
 
+
+format: format-frontend format-backend
+	echo "Done!"
+
 format-frontend:  ## Format code to respect CS
-	./gui/node_modules/.bin/eslint --fix -c ./gui/.eslintrc $(JS_FILES)
+	cd gui && yarn prettier --single-quote --trailing-comma es5 --write "src/**/*.js"
 
 format-backend:  ## Format code to respect CS
-	goimports -w $(GO_FILES)
+	`go env GOPATH`/bin/goimports -w $(GO_FILES)
 	gofmt -l -w -s $(GO_FILES)
-	go fix $(GO_PROJECTS_PATHS)
 	go vet $(GO_PROJECTS_PATHS)
 
 coverage-backend: ## run coverage tests
@@ -75,12 +78,12 @@ bin: assets                 ## Generate bin assets file
 	`go env GOPATH`/bin/go-bindata -o $(GO_BINDATA_OUTPUT) -prefix $(GO_BINDATA_PREFIX) -pkg $(GO_BINDATA_PACKAGE) -ignore $(GO_BINDATA_IGNORE) $(GO_BINDATA_PATHS)
 
 assets:  ## build assets
-	rm -rf gui/build/*
-	cd gui && NODE_ENV=production node_modules/.bin/webpack --config webpack-production.config.js --progress --colors
+	rm -rf gui/dist/*
+	cd gui && yarn parcel build src/static/index.html --no-source-maps
 
 watch:  ## build assets
 	rm -rf gui/build/*
-	cd gui && node_modules/.bin/webpack-dev-server --config webpack-dev-server.config.js --progress --inline --colors
+	cd gui && yarn parcel watch src/static/index.html
 
 build: bin ## build binaries
 	GOOS=darwin GOARCH=amd64 go build -ldflags "-X main.RefLog=$(SHA1) -X main.Version=$(TRAVIS_TAG) -s -w" -o build/darwin-amd64-pkgmirror cli/main.go

assets/assets_app.go

@@ -13,7 +13,7 @@ import (
 )
 
 // required by go-bindata
-var rootDir = "./gui/build"
+var rootDir = "./gui/dist"
 
 func ConfigureApp(config *pkgmirror.Config, l *goapp.Lifecycle) {
 	l.Prepare(func(app *goapp.App) error {

glide.yaml

@@ -23,7 +23,7 @@ import:
   subpackages:
   - core/vault
 - package: goji.io
-  version: ^1.0.0
+  version: ^1.1.0
   subpackages:
   - pat
   - pattern

gui/.prettierrc

@@ -0,0 +1,4 @@
+trailingComma: "es5"
+tabWidth: 4
+semi: false
+singleQuote: true

gui/package.json

@@ -8,14 +8,15 @@
   },
   "private": true,
   "dependencies": {
+    "material-ui": "0.16.0",
+    "prettier": "^1.14.3",
     "react": "15.3.2",
     "react-dom": "15.3.2",
     "react-markdown": "2.4.2",
     "react-redux": "4.4.5",
     "react-router": "2.8.1",
     "react-router-redux": "4.0.6",
     "react-tap-event-plugin": "1.0.0",
-    "material-ui": "0.16.0",
     "redux": "3.6.0"
   },
   "devDependencies": {
@@ -25,19 +26,10 @@
     "babel-preset-es2015": "6.16.0",
     "babel-preset-react": "6.16.0",
     "babel-preset-stage-0": "6.16.0",
-    "eslint": "3.7.1",
-    "eslint-config-airbnb": "12.0.0",
-    "eslint-plugin-import": "1.16.0",
-    "eslint-plugin-jsx-a11y": "2.2.3",
-    "eslint-plugin-react": "6.4.1",
-    "html-webpack-plugin": "2.22.0",
     "json-loader": "0.5.4",
+    "parcel-bundler": "^1.10.1",
     "react-hot-loader": "1.3.0",
     "react-transmit": "3.2.0",
-    "transfer-webpack-plugin": "0.1.4",
-    "webpack": "1.13.2",
-    "webpack-dev-server": "1.16.2",
-    "whatwg-fetch": "1.0.0",
-    "write-file-webpack-plugin": "3.3.0"
+    "whatwg-fetch": "1.0.0"
   }
 }

gui/src/Main.js

@@ -3,70 +3,73 @@
 // Use of this source code is governed by an MIT-style
 // license that can be found in the LICENSE file.
 
-import React from 'react';
-import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
-import AppBar from 'material-ui/AppBar';
-import Drawer from 'material-ui/Drawer';
-import { SMALL } from 'material-ui/utils/withWidth';
-import { connect } from 'react-redux';
-import { Router, Route, IndexRoute } from 'react-router';
-import { push } from 'react-router-redux';
+import React from 'react'
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
+import AppBar from 'material-ui/AppBar'
+import Drawer from 'material-ui/Drawer'
+import { SMALL } from 'material-ui/utils/withWidth'
+import { connect } from 'react-redux'
+import { Router, Route, IndexRoute } from 'react-router'
+import { push } from 'react-router-redux'
 
-import { MirrorList, MenuList, CardMirror } from './redux/containers';
-import { toggleDrawer, hideDrawer } from './redux/apps/guiApp';
-import About from './components/About';
+import { MirrorList, MenuList, CardMirror } from './redux/containers'
+import { toggleDrawer, hideDrawer } from './redux/apps/guiApp'
+import About from './components/About'
 
-const Container = props => (
-    <div>{props.children}</div>
-);
+const Container = props => <div>{props.children}</div>
 
 Container.propTypes = {
     children: React.PropTypes.any,
-};
+}
 
-const Main = (props) => {
-    let DrawerOpen = false;
-    let marginLeft = 0;
+const Main = props => {
+    let DrawerOpen = false
+    let marginLeft = 0
     if (props.width === SMALL && props.DrawerOpen) {
-        DrawerOpen = true;
+        DrawerOpen = true
     }
 
     if (props.width !== SMALL) {
-        DrawerOpen = true;
-        marginLeft = 300;
+        DrawerOpen = true
+        marginLeft = 300
     }
 
-    return (<MuiThemeProvider muiTheme={props.Theme}>
-        <div>
-            <AppBar
-                title={props.Title}
-                iconClassNameRight="muidocs-icon-navigation-expand-more"
-                onLeftIconButtonTouchTap={props.toggleDrawer}
-                showMenuIconButton={props.width === SMALL}
-            />
-
-            <Drawer open={DrawerOpen} docked width={300}>
+    return (
+        <MuiThemeProvider muiTheme={props.Theme}>
+            <div>
                 <AppBar
                     title={props.Title}
+                    iconClassNameRight="muidocs-icon-navigation-expand-more"
                     onLeftIconButtonTouchTap={props.toggleDrawer}
                     showMenuIconButton={props.width === SMALL}
                 />
 
-                <MenuList />
-            </Drawer>
+                <Drawer open={DrawerOpen} docked width={300}>
+                    <AppBar
+                        title={props.Title}
+                        onLeftIconButtonTouchTap={props.toggleDrawer}
+                        showMenuIconButton={props.width === SMALL}
+                    />
+
+                    <MenuList />
+                </Drawer>
 
-            <div className="foobar" style={{ marginLeft: `${marginLeft}px` }}>
-                <Router history={props.history} >
-                    <Route path="/" component={Container}>
-                        <IndexRoute component={MirrorList} />
-                        <Route path="mirror/:id" component={CardMirror} />
-                        <Route path="about" component={About} />
-                    </Route>
-                </Router>
+                <div
+                    className="foobar"
+                    style={{ marginLeft: `${marginLeft}px` }}
+                >
+                    <Router history={props.history}>
+                        <Route path="/" component={Container}>
+                            <IndexRoute component={MirrorList} />
+                            <Route path="mirror/:id" component={CardMirror} />
+                            <Route path="about" component={About} />
+                        </Route>
+                    </Router>
+                </div>
             </div>
-        </div>
-    </MuiThemeProvider>);
-};
+        </MuiThemeProvider>
+    )
+}
 
 Main.propTypes = {
     Theme: React.PropTypes.object,
@@ -75,14 +78,17 @@ Main.propTypes = {
     toggleDrawer: React.PropTypes.func,
     history: React.PropTypes.object,
     width: React.PropTypes.number.isRequired,
-};
+}
 
-const mapStateToProps = state => ({ ...state.guiApp });
+const mapStateToProps = state => ({ ...state.guiApp })
 
 const mapDispatchToProps = dispatch => ({
     toggleDrawer: () => {
-        dispatch(toggleDrawer());
+        dispatch(toggleDrawer())
     },
-});
+})
 
-export default connect(mapStateToProps, mapDispatchToProps)(Main);
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(Main)