Merge pull request #4 from jeanbaptisteassouad/setup-docker-npm

Setup docker npm

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["env", "react", "flow"]
+}

.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+Makefile
+README.md
+Dockerfile
+.gitignore
+LICENSE
+.git

.flowconfig

@@ -0,0 +1,13 @@
+[include]
+
+[ignore]
+
+[libs]
+
+[lints]
+all=error
+
+[options]
+module.name_mapper='^\(.*\)$' -> '<PROJECT_ROOT>/src/\1'
+
+[version]

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules/
+npm-debug.log

Dockerfile

@@ -0,0 +1,34 @@
+FROM node:9.7.1 as dev
+
+RUN apt-get update && apt-get -y install \
+  inotify-tools=3.14-1+b1 \
+  rsync=3.1.1-3+deb8u1
+
+WORKDIR /usr/src/app
+
+COPY package*.json ./
+RUN npm install
+
+COPY . .
+
+# # Old dev build
+# RUN npm run-script buildDev
+
+# WORKDIR ./dist
+# CMD ["python", "-m", "SimpleHTTPServer", "8000"]
+
+
+CMD ["./startupDev.bash"]
+
+
+
+
+FROM dev as prod
+
+WORKDIR /usr/src/app
+RUN npm run-script buildProd
+
+CMD ["bash"]
+
+
+# FROM node:9.7.1-alpine

Makefile

@@ -0,0 +1,33 @@
+image_name = cheap-exp
+pwd = $(shell pwd)
+
+all: prod
+	sudo docker run \
+		--network=host \
+		-it \
+		$(image_name)
+
+devServer: dev
+	sudo docker run \
+		--network=host \
+		--mount type=bind,source=$(pwd),target=/mnt,readonly \
+		-it \
+		$(image_name)
+
+dev: clean
+	sudo docker build \
+		--network=host \
+		--target=dev \
+		--tag=$(image_name) \
+		.
+
+prod: clean
+	sudo docker build \
+		--network=host \
+		--tag=$(image_name) \
+		.
+
+clean:
+	sudo docker container prune -f
+	sudo docker image prune -f
+	sudo docker volume prune -f

package.json

@@ -0,0 +1,47 @@
+{
+  "name": "cheapExp",
+  "version": "1.0.0",
+  "description": "Explorer plus plus for archive",
+  "main": "index.js",
+  "scripts": {
+    "flow": "flow",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "buildDev": "webpack --progress --mode development",
+    "buildProd": "webpack --progress --mode production",
+    "devServer": "webpack-dev-server --mode development",
+    "watchBuildDev": "webpack --watch --progress --mode development",
+    "start": ""
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jeanbaptisteassouad/cheapExp.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/jeanbaptisteassouad/cheapExp/issues"
+  },
+  "homepage": "https://github.com/jeanbaptisteassouad/cheapExp#readme",
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.3",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-flow": "^6.23.0",
+    "flow-webpack-plugin": "^1.2.0",
+    "flow-bin": "^0.66.0",
+    "copy-webpack-plugin": "^4.5.1",
+    "webpack-dev-server": "^3.1.1",
+    "webpack-cli": "^2.0.4",
+    "webpack": "^4.1.0"
+  },
+  "dependencies": {
+    "d3": "^4.13.0",
+    "immutable": "^4.0.0-rc.9",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-redux": "^5.0.6",
+    "redux": "^3.7.2",
+    "file-saver": "^1.3.3"
+  }
+}

src/app.js

@@ -0,0 +1,38 @@
+// @flow
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+
+import rootReducer from 'reducers/root-reducer'
+
+import MainSpace from 'components/main-space'
+
+
+window.onload = function () {
+  let root_div = document.createElement('div')
+  root_div.setAttribute('id','root')
+
+  if (document.body !== null) {
+    document.body.append(root_div)
+  }
+
+  let store = createStore(rootReducer)
+
+  ReactDOM.render(
+    <Provider store={store}>
+      <div className="mdl-grid">
+        <div className="mdl-cell mdl-cell--12-col">
+          This app is only compatible with Chrome or Firefox
+        </div>
+        <div className="mdl-cell mdl-cell--12-col">
+          <MainSpace />
+        </div>
+      </div>
+    </Provider>,
+    root_div
+  )
+
+}
+

src/components/export-button.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import { connect } from 'react-redux'
+
+import { Set } from 'immutable'
+
+import { selectDatabase } from 'reducers/root-reducer'
+import FileSaver from 'file-saver'
+
+const Presentational = props => {
+  return (
+    <button type="button" onClick={()=>exportCsv(props.csv)}>Export to csv</button>
+  )
+}
+
+function exportCsv(csv) {
+  var blob = new Blob([csv], {type: "text/plain;charset=utf-8"})
+  let root_folders = Set(
+      csv.split('\n')
+      .map(s=>s.match(/^.*?\//))
+      .filter(e=>e!==null)
+      .map(e=>e[0].replace('/',''))
+    )
+    .toArray()
+    .join('_')
+  FileSaver.saveAs(blob, 'icicle_'+root_folders+'.csv')
+}
+
+const mapStateToProps = state => {
+  let database = selectDatabase(state)
+  return {
+    csv: database.toCsv()
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {}
+}
+
+
+const Container = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Presentational)
+
+export default Container

src/components/folder-dropzone.js

@@ -0,0 +1,85 @@
+import React from 'react'
+import { connect } from 'react-redux'
+
+import * as Folder from 'folder'
+import { create, fromCsv } from 'reducers/database'
+import { startToLoadFiles, finishedToLoadFiles } from 'reducers/app-state'
+
+class Presentational extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.style_dropzone = {
+      height: '20em',
+      border: '0.2em dashed #868686',
+      borderRadius: '1em',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+
+    this.style_placeholder = {
+      fontFamily: '\'Quicksand\', sans-serif',
+      fontSize: '3em'
+    }
+
+    this.placeholder = 'Drop files or csv here !'
+
+
+    this.handleDrop = this.handleDrop.bind(this)
+  }
+
+  handleDragover (e) {
+    e.preventDefault()
+  }
+
+  handleDrop (e) {
+    Folder.asyncHandleDrop(e,this.props.create,this.props.fromCsv)
+          .then(this.props.finishedToLoadFiles)
+    this.props.startToLoadFiles()
+  }
+
+  render() {
+    return (
+      <div
+        onDragOver={this.handleDragover}
+        onDrop={this.handleDrop}
+        style={this.style_dropzone}
+      >
+        <div style={this.style_placeholder}>
+          {this.placeholder}
+        </div>
+      </div>
+    )
+  }
+}
+
+
+const mapStateToProps = state => {
+  return {}
+}
+ 
+const mapDispatchToProps = dispatch => {
+  return {
+    create: a => {
+      dispatch(create(a))
+    },
+    fromCsv: a => {
+      dispatch(fromCsv(a))
+    },
+    startToLoadFiles: () => {
+      dispatch(startToLoadFiles())
+    },
+    finishedToLoadFiles: () => {
+      dispatch(finishedToLoadFiles())
+    }
+  }
+}
+
+
+const Container = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Presentational)
+
+export default Container