diff --git a/src/app/js/containers/app.js b/src/app/js/containers/app.js
index 5c83e8c92..b7b24f3a7 100644
--- a/src/app/js/containers/app.js
+++ b/src/app/js/containers/app.js
@@ -1,9 +1,10 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import ReduxToastr, {toastr} from 'react-redux-toastr'
import {DragDropContext} from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
-import {Link} from 'react-router'
+import {Link, withRouter} from 'react-router-dom'
import i18n from '../utils/i18n.js'
import {parse} from '../utils/path'
import {errors} from '../actions'
@@ -22,6 +23,10 @@ class App extends Component {
}
}
+ goToHashOrPath = () => {
+ this.context.router.history.push(`/objects${parse(this.refs.dagPath.value).urlify()}`)
+ }
+
render () {
const {children} = this.props
@@ -49,10 +54,10 @@ class App extends Component {
@@ -118,6 +123,6 @@ function mapStateToProps (state) {
}
}
-export default DragDropContext(HTML5Backend)(connect(mapStateToProps, {
+export default withRouter(DragDropContext(HTML5Backend)(connect(mapStateToProps, {
resetErrorMessage: errors.resetErrorMessage
-})(App))
+})(App)))
diff --git a/src/app/js/containers/files-explorer.js b/src/app/js/containers/files-explorer.js
index b6b3d6997..c8c9741d2 100644
--- a/src/app/js/containers/files-explorer.js
+++ b/src/app/js/containers/files-explorer.js
@@ -1,18 +1,111 @@
-import React, {PropTypes, Component} from 'react'
-import {Row, Col} from 'react-bootstrap'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
import {connect} from 'react-redux'
-import {join} from 'path'
+import {join, dirname, basename} from 'path'
import {includes} from 'lodash-es'
import {toastr} from 'react-redux-toastr'
-
-import {files, router} from '../actions'
+import {withRouter} from 'react-router'
+import {pages, files} from '../actions'
import Tree from './../components/files/tree'
import ActionBar from './../components/files/action-bar'
import Breadcrumbs from './../components/files/breadcrumbs'
class FilesExplorer extends Component {
- _onRowClick = (file, shiftKey) => {
+ componentWillMount () {
+ this.props.load()
+ }
+
+ componentDidMount () {
+ const path = this.props.match.params[0]
+ const {setRoot} = this.props
+
+ if (path) {
+ setRoot(join('/', path))
+ } else {
+ setRoot('/')
+ }
+
+ document.addEventListener('keydown', this._onKeyDown)
+ }
+
+ componentWillReceiveProps (nextProps) {
+ const locationChanged = nextProps.location !== this.props.location
+ const {setRoot} = this.props
+
+ if (locationChanged) {
+ setRoot(join('/', nextProps.match.params[0]))
+ }
+ }
+
+ componentWillUnmount () {
+ document.removeEventListener('keydown', this._onKeyDown)
+ this.props.leave()
+ }
+
+ _onKeyDown = (event) => {
+ const {deselectAll} = this.props
+
+ switch (event.which) {
+ case 27:
+ // Escape
+ event.preventDefault()
+ deselectAll()
+ break
+ case 46:
+ // Delete
+ event.preventDefault()
+ this._onRemoveDir()
+ break
+ case 113:
+ // F2
+ event.preventDefault()
+ this._onMoveDir()
+ break
+ }
+ }
+
+ selectRangeFromCurrent = (toFile) => {
+ const {
+ selected,
+ list
+ } = this.props
+
+ const selectedName = basename(selected[0])
+
+ let first = 0
+ let last = list.indexOf(toFile)
+
+ let i = list.findIndex((el, index) => {
+ return el.Name === selectedName
+ })
+
+ if (last > i) {
+ first = i + 1
+ } else {
+ first = last
+ last = i - 1
+ }
+
+ this.selectAllBetween(first, last)
+ }
+
+ selectAllBetween = (first, last) => {
+ const {
+ root,
+ list,
+ select
+ } = this.props
+
+ list.filter((el, index) => {
+ return index >= first && index <= last
+ }).forEach(el => {
+ const filePath = join(root, el.Name)
+ select(filePath)
+ })
+ }
+
+ _onRowClick = (file, shiftKey, ctrlKey) => {
const {
root,
selected,
@@ -20,13 +113,16 @@ class FilesExplorer extends Component {
deselect,
deselectAll
} = this.props
+
const filePath = join(root, file.Name)
const currentlySelected = includes(selected, filePath)
if (currentlySelected) {
deselect(filePath)
- } else if (shiftKey && !currentlySelected) {
+ } else if (ctrlKey && !currentlySelected) {
select(filePath)
+ } else if (shiftKey && !currentlySelected && selected.length === 1) {
+ this.selectRangeFromCurrent(file)
} else {
deselectAll()
select(filePath)
@@ -54,18 +150,14 @@ class FilesExplorer extends Component {
}
_onRowDoubleClick = (file, shiftKey) => {
- const {root, deselectAll, setRoot, push} = this.props
+ const {root, deselectAll, history} = this.props
const filePath = join(root, file.Name)
deselectAll()
+
if (file.Type === 'directory') {
- setRoot(filePath)
+ history.push(join('/files/explorer', filePath))
} else {
- push({
- pathname: '/files/preview',
- query: {
- name: filePath
- }
- })
+ history.push(join('/files/preview', filePath))
}
}
@@ -93,45 +185,49 @@ class FilesExplorer extends Component {
})
}
+ _onMoveDir = () => {
+ const {selected, moveDir} = this.props
+ const count = selected.length
+
+ if (count !== 1) {
+ return
+ }
+
+ const oldName = selected[0]
+ // TODO: prettier prompt
+ const newName = join(dirname(oldName), window.prompt('Insert the name name:'))
+ moveDir(oldName, newName)
+ }
+
render () {
- const {list, root, setRoot, tmpDir, selected} = this.props
+ const {list, root, tmpDir, selected, history} = this.props
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
)
}
@@ -145,6 +241,10 @@ FilesExplorer.propTypes = {
root: PropTypes.string.isRequired,
name: PropTypes.string
}),
+ location: PropTypes.object.isRequired,
+ match: PropTypes.shape({
+ params: PropTypes.object.isRequired
+ }),
selected: PropTypes.array.isRequired,
// actions
setRoot: PropTypes.func.isRequired,
@@ -152,30 +252,36 @@ FilesExplorer.propTypes = {
setTmpDirName: PropTypes.func.isRequired,
createDir: PropTypes.func.isRequired,
removeDir: PropTypes.func.isRequired,
+ moveDir: PropTypes.func.isRequired,
rmTmpDir: PropTypes.func.isRequired,
select: PropTypes.func.isRequired,
deselect: PropTypes.func.isRequired,
deselectAll: PropTypes.func.isRequired,
createFiles: PropTypes.func.isRequired,
- push: PropTypes.func.isRequired
+ history: PropTypes.object.isRequired,
+ load: PropTypes.func.isRequired,
+ leave: PropTypes.func.isRequired
}
-function mapStateToProps (state) {
+function mapStateToProps (state, ownProps) {
const {files} = state
- return files
+ return {
+ ...files
+ }
}
-export default connect(mapStateToProps, {
+export default withRouter(connect(mapStateToProps, {
setRoot: files.filesSetRoot,
createTmpDir: files.filesCreateTmpDir,
setTmpDirName: files.filesSetTmpDirName,
createDir: files.filesCreateDir,
removeDir: files.filesRemoveDir,
+ moveDir: files.filesMoveDir,
rmTmpDir: files.filesRmTmpDir,
select: files.filesSelect,
deselect: files.filesDeselect,
deselectAll: files.filesDeselectAll,
createFiles: files.filesCreateFiles,
- push: router.push
-})(FilesExplorer)
+ ...pages.files
+})(FilesExplorer))
diff --git a/src/app/js/containers/files-preview.js b/src/app/js/containers/files-preview.js
index 095b5de30..d697d244e 100644
--- a/src/app/js/containers/files-preview.js
+++ b/src/app/js/containers/files-preview.js
@@ -1,11 +1,12 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
import {connect} from 'react-redux'
+import {join} from 'path'
import multiaddr from 'multiaddr'
-import {pages, router, preview} from '../actions'
-import Icon from '../views/icon'
+import {pages, preview} from '../actions'
import Preview from '../components/preview'
-import shouldPureComponentUpdate from '../utils/pure'
+import Breadcrumbs from './../components/files/breadcrumbs'
function getGatewayUrl (config) {
if (!config.Addresses) {
@@ -29,16 +30,6 @@ function getGatewayUrl (config) {
}
class FilesPreview extends Component {
- _onClose = (event) => {
- event.preventDefault()
-
- this.props.goBack()
- }
-
- shouldComponentUpdate () {
- shouldPureComponentUpdate()
- }
-
componentWillMount () {
this.props.load()
}
@@ -48,19 +39,17 @@ class FilesPreview extends Component {
}
render () {
- const {name, read} = this.props
+ const {name, read, history} = this.props
const content = this.props.preview ? this.props.preview.content : null
const stats = this.props.preview ? this.props.preview.stats : {}
const gatewayUrl = getGatewayUrl(this.props.config)
return (
-
-
+
+
-
- {this.props.children}
+
+
+
+
+
)
}
}
-Files.propTypes = {
- load: PropTypes.func.isRequired,
- leave: PropTypes.func.isRequired,
- children: PropTypes.node
-}
-
-export default connect(null, {...pages.files})(Files)
+export default Files
diff --git a/src/app/js/containers/root.js b/src/app/js/containers/root.js
index d248ff569..ba9f15931 100644
--- a/src/app/js/containers/root.js
+++ b/src/app/js/containers/root.js
@@ -1,6 +1,7 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
import {Provider} from 'react-redux'
-import {Router} from 'react-router'
+import {ConnectedRouter} from 'react-router-redux'
window.React = React
@@ -10,11 +11,9 @@ class Root extends Component {
return (
-
-
- {routes}
-
-
+
+ {routes}
+
)
}
diff --git a/src/app/js/include/globe.js b/src/app/js/include/globe.js
index b9bb2073d..db702f67b 100644
--- a/src/app/js/include/globe.js
+++ b/src/app/js/include/globe.js
@@ -118,7 +118,7 @@ export default function (container, opts) {
shader = Shaders['earth']
uniforms = THREE.UniformsUtils.clone(shader.uniforms)
- uniforms['texture'].value = THREE.ImageUtils.loadTexture(imgDir + 'world.jpg')
+ uniforms['texture'].value = new THREE.TextureLoader().load(imgDir + 'world.jpg')
material = new THREE.ShaderMaterial({
uniforms: uniforms,
diff --git a/src/app/js/index.js b/src/app/js/index.js
index 5fd66e129..da0dd1489 100644
--- a/src/app/js/index.js
+++ b/src/app/js/index.js
@@ -1,9 +1,9 @@
-import 'babel-polyfill'
+import '@babel/polyfill'
import React from 'react'
import {render} from 'react-dom'
-import {hashHistory} from 'react-router'
-import {syncHistoryWithStore} from 'react-router-redux'
+
+import createHistory from 'history/createHashHistory'
import routes from './routes'
import Root from './containers/root'
@@ -11,7 +11,7 @@ import configureStore from './store/configure-store'
import '../css/app.less'
const store = configureStore()
-const history = syncHistoryWithStore(hashHistory, store)
+const history = createHistory()
window.requestAnimationFrame(() => {
render(
diff --git a/src/app/js/pages/config.js b/src/app/js/pages/config.js
index a09dc6efb..95cb0adce 100644
--- a/src/app/js/pages/config.js
+++ b/src/app/js/pages/config.js
@@ -6,7 +6,7 @@ import {withIpfs} from '../components/ipfs'
class Config extends Component {
constructor (props) {
- super(constructor)
+ super(props)
this.state = { config: null }
}
diff --git a/src/app/js/pages/logs.js b/src/app/js/pages/logs.js
index 7d233c15d..d0f4244a7 100644
--- a/src/app/js/pages/logs.js
+++ b/src/app/js/pages/logs.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
import ReactDOM from 'react-dom'
import i18n from '../utils/i18n.js'
import { Row, Col } from 'react-bootstrap'
diff --git a/src/app/js/pages/objects.js b/src/app/js/pages/objects.js
index 7afd81559..e50ddef75 100644
--- a/src/app/js/pages/objects.js
+++ b/src/app/js/pages/objects.js
@@ -1,22 +1,23 @@
import React from 'react'
import PropTypes from 'prop-types'
import ObjectView from '../views/object'
-import {parse} from '../utils/path.js'
-import i18n from '../utils/i18n.js'
+import {parse} from '../utils/path'
+import {join} from 'path'
+import i18n from '../utils/i18n'
import {Row, Col, Button} from 'react-bootstrap'
import {withIpfs} from '../components/ipfs'
class Objects extends React.Component {
constructor (props) {
super(props)
- const {params, ipfs} = props
- this.state = this._getStateFromRoute(params, ipfs)
+ const {match, ipfs} = props
+ this.state = this._getStateFromRoute(match.params, ipfs)
}
_getStateFromRoute = (params, ipfs) => {
let state = {}
- if (params.path) {
- const path = parse(params.path)
+ if (params[0]) {
+ const path = parse(join('/', params[0]))
state.path = path
this._getObject(ipfs, state.path)
state.pathInput = path.toString()
@@ -26,8 +27,8 @@ class Objects extends React.Component {
}
_updateState = () => {
- const {params, ipfs} = this.props
- this.setState(this._getStateFromRoute(params, ipfs))
+ const {match, ipfs} = this.props
+ this.setState(this._getStateFromRoute(match.params, ipfs))
};
_getObject = (ipfs, path) => {
@@ -49,17 +50,16 @@ class Objects extends React.Component {
if (event.which && event.which !== 13) {
return
}
- const params = this.props.params
+ const params = this.props.match.params
params.path = parse(this.state.pathInput).urlify()
- const route = ['/objects']
+ let route = '/objects'
if (params.path) {
- route.push(params.path)
+ route += params.path
}
- const r = route.join('/')
- if ('#' + r !== window.location.hash) {
- this.context.router.push(r)
+ if ('#' + route !== window.location.hash) {
+ this.context.router.history.push(route)
}
}
@@ -96,7 +96,7 @@ class Objects extends React.Component {
- {i18n.t('Enter hash or path')}
+ {i18n.t('Enter a hash')}
this.setState({pathInput: event.target.value.trim()})}
onKeyPress={this._update}
value={this.state.pathInput}
- placeholder={i18n.t('Enter hash or path: /ipfs/QmBpath...')} />
+ placeholder={i18n.t('Enter a hash: QmS4ustL54u...')} />