Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(files): Remove use of localstorage. #217

Merged
merged 1 commit into from
Jan 24, 2016
Merged

fix(files): Remove use of localstorage. #217

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 42 additions & 50 deletions app/scripts/pages/files.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,15 @@ import {LinkContainer} from 'react-router-bootstrap'
import debug from 'debug'

import FileList from '../views/filelist'
import LocalStorage from '../utils/localStorage'
import i18n from '../utils/i18n.js'

const log = debug('pages:files')

export
default class Files extends React.Component {
state = {
files: LocalStorage.get('files') || [],
pinned: [],
local: [],
files: [],
dragging: false
};

Expand All @@ -33,36 +31,53 @@ default class Files extends React.Component {
clearInterval(this.pollInterval)
}

getFiles = () => {
getFiles () {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isn't there a missing = and => here, even if just for consistency

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, the important part is that these are two different sorts of methods, if you declare them like this:

getFiles () {
}

it's a regular method. If you declare it like this:

getFiles = () => {
}

it means that in addition it is bound i.e. getFiles = getFiles.bind(this) where this is the instance of the class.

As this method is not used passed somewhere there is no need to bind it.

this.props.ipfs.pin.list((err, pinned) => {
if (err || !pinned) return this.error(err)
this.setState({
pinned: Object.keys(pinned.Keys).sort()
})
})

this.props.ipfs.pin.list('recursive', (err, pinned) => {
if (err || !pinned) return this.error(err)
this.setState({
local: Object.keys(pinned.Keys).sort()
files: Object.keys(pinned.Keys).sort()
})
})
};
}

addFile (event) {
_onAddFile = event => {
event.preventDefault()
this.refs.fileSelect.click()
}
};

onDrop (event) {
_onDragOver = event => {
event.stopPropagation()
event.preventDefault()
this.setState({
dragging: true
})
};

_onDragLeave = event => {
event.stopPropagation()
event.preventDefault()
this.setState({
dragging: false
})
this.onFileChange.bind(this, event)
}
};

_onDrop = event => {
event.stopPropagation()
event.preventDefault()
this.setState({
dragging: false
})
this._onFileChange(event)
};

onFileChange (event) {
_onFileChange = event => {
const files = event.target.files || event.dataTransfer.files
if (!files || !files[0]) return
var file = files[0]
Expand All @@ -73,19 +88,8 @@ default class Files extends React.Component {
if (err || !res) return this.error(err)
res = res[0]

const metadata = {
id: res.Hash,
name: res.Name || file.name,
type: file.type,
size: file.size
}

let nextFiles = (this.state.files || [])
nextFiles.unshift(metadata)
LocalStorage.set('files', nextFiles)
this.setState({
files: nextFiles,
confirm: metadata.name
confirm: res.Name || file.name
})

setTimeout(() => this.setState({
Expand All @@ -106,7 +110,9 @@ default class Files extends React.Component {
// TODO: use array buffers instead of base64 strings
reader.readAsDataURL(file)
}
}

this.getFiles()
};

error (err) {
console.error(err)
Expand All @@ -116,11 +122,9 @@ default class Files extends React.Component {
_renderTitle = () => {
switch (this.props.location.pathname) {
case '/files':
return this._renderAdder()
return <h3>{i18n.t('All Local Files')}</h3>
case '/files/pinned':
return <h3>{i18n.t('Pinned Files')}</h3>
case '/files/all':
return <h3>{i18n.t('All Local Files')}</h3>
default:
return ''
}
Expand All @@ -131,9 +135,9 @@ default class Files extends React.Component {
<div className='file-add-container'>
<div
className={'file-add-target ' + (this.state.dragging ? 'hover' : null)}
onDragOver={() => this.setState({dragging: true})}
onDragLeave={() => this.setState({dragging: false})}
onDrop={this.onDrop.bind(this)}
onDragOver={this._onDragOver}
onDragLeave={this._onDragLeave}
onDrop={this._onDrop}
>
</div>
<div className={'file-add-container-inner ' + (this.state.dragging ? 'hover' : '')}></div>
Expand All @@ -147,10 +151,10 @@ default class Files extends React.Component {
<p>
<button
className={'btn btn-second add-file ' + (this.state.dragging ? 'hover' : null)}
onClick={this.addFile.bind(this)}
onClick={this._onAddFile}
onDragOver={() => this.setState({dragging: true})}
onDragLeave={() => this.setState({dragging: false})}
onDrop={this.onDrop.bind(this)}
onDrop={this._onDrop}
>
{i18n.t('Select files...')}
</button>
Expand All @@ -171,7 +175,7 @@ default class Files extends React.Component {
ref='fileSelect'
className='file-select'
style={{display: 'none'}}
onChange={this.onFileChange.bind(this)}
onChange={this._onFileChange}
/>
</div>
)
Expand All @@ -184,6 +188,7 @@ default class Files extends React.Component {
<Panel bsStyle={'default'}>
<FileList
files={this.state.files}
namesHidden
ipfs={this.props.ipfs}
gateway={this.props.gateway}
/>
Expand All @@ -200,17 +205,6 @@ default class Files extends React.Component {
/>
</Panel>
)
case '/files/all':
return (
<Panel bsStyle={'default'}>
<FileList
files={this.state.local}
namesHidden
ipfs={this.props.ipfs}
gateway={this.props.gateway}
/>
</Panel>
)
default:
return ''
}
Expand All @@ -220,15 +214,13 @@ default class Files extends React.Component {
return (
<Row>
<Col sm={10} smOffset={1}>
{this._renderAdder()}
<Nav bsStyle='tabs'>
<LinkContainer to='/files'>
<NavItem>{i18n.t('Files')}</NavItem>
<NavItem>{i18n.t('All Files')}</NavItem>
</LinkContainer>
<LinkContainer to='/files/pinned'>
<NavItem>{i18n.t('Pinned')}</NavItem>
</LinkContainer>
<LinkContainer to='/files/all'>
<NavItem>{i18n.t('All')}</NavItem>
<NavItem>{i18n.t('Pinned Files')}</NavItem>
</LinkContainer>
</Nav>
<div className={this.state.selected}>
Expand Down
1 change: 0 additions & 1 deletion app/scripts/routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ default (
<Route path='connections' component={ConnectionsPage} />
<Route path='files' component={FilesPage} />
<Route path='files/pinned' component={FilesPage} />
<Route path='files/all' component={FilesPage} />
<Route path='objects(/:path)' component={ObjectsPage} />
<Route path='bitswap' component={BitswapPage} />
<Route path='routing' component={RoutingPage} />
Expand Down
44 changes: 0 additions & 44 deletions app/scripts/utils/localStorage.js
View file
Open in desktop

This file was deleted.