Boostnote/browser/main/modals/PreferencesModal/StorageItem.js

import PropTypes from 'prop-types'
import React from 'react'
import CSSModules from 'browser/lib/CSSModules'
import styles from './StorageItem.styl'
import consts from 'browser/lib/consts'
import dataApi from 'browser/main/lib/dataApi'
import { store } from 'browser/main/store'
import FolderList from './FolderList'
import i18n from 'browser/lib/i18n'

const { shell, remote } = require('electron')
const { dialog } = remote

class StorageItem extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      isLabelEditing: false
    }
  }

  handleNewFolderButtonClick(e) {
    const { storage } = this.props
    const input = {
      name: i18n.__('New Folder'),
      color: consts.FOLDER_COLORS[Math.floor(Math.random() * 7) % 7]
    }

    dataApi
      .createFolder(storage.key, input)
      .then(data => {
        store.dispatch({
          type: 'UPDATE_FOLDER',
          storage: data.storage
        })
      })
      .catch(err => {
        console.error(err)
      })
  }

  handleExternalButtonClick() {
    const { storage } = this.props
    shell.showItemInFolder(storage.path)
  }

  handleUnlinkButtonClick(e) {
    const index = dialog.showMessageBox(remote.getCurrentWindow(), {
      type: 'warning',
      message: i18n.__('Unlink Storage'),
      detail: i18n.__(
        'Unlinking removes this linked storage from Boostnote. No data is removed, please manually delete the folder from your hard drive if needed.'
      ),
      buttons: [i18n.__('Unlink'), i18n.__('Cancel')]
    })

    if (index === 0) {
      const { storage } = this.props
      dataApi
        .removeStorage(storage.key)
        .then(() => {
          store.dispatch({
            type: 'REMOVE_STORAGE',
            storageKey: storage.key
          })
        })
        .catch(err => {
          throw err
        })
    }
  }

  handleLabelClick(e) {
    const { storage } = this.props
    this.setState(
      {
        isLabelEditing: true,
        name: storage.name
      },
      () => {
        this.refs.label.focus()
      }
    )
  }
  handleLabelChange(e) {
    this.setState({
      name: this.refs.label.value
    })
  }

  handleLabelBlur(e) {
    const { storage } = this.props
    dataApi.renameStorage(storage.key, this.state.name).then(_storage => {
      store.dispatch({
        type: 'RENAME_STORAGE',
        storage: _storage
      })
      this.setState({
        isLabelEditing: false
      })
    })
  }

  render() {
    const { storage, hostBoundingBox } = this.props

    return (
      <div styleName='root' key={storage.key}>
        <div styleName='header'>
          {this.state.isLabelEditing ? (
            <div styleName='header-label--edit'>
              <input
                styleName='header-label-input'
                value={this.state.name}
                ref='label'
                onChange={e => this.handleLabelChange(e)}
                onBlur={e => this.handleLabelBlur(e)}
              />
            </div>
          ) : (
            <div
              styleName='header-label'
              onClick={e => this.handleLabelClick(e)}
            >
              <i className='fa fa-folder-open' />
              &nbsp;
              {storage.name}&nbsp;
              <span styleName='header-label-path'>({storage.path})</span>&nbsp;
              <i styleName='header-label-editButton' className='fa fa-pencil' />
            </div>
          )}
          <div styleName='header-control'>
            <button
              styleName='header-control-button'
              onClick={e => this.handleNewFolderButtonClick(e)}
            >
              <i className='fa fa-plus' />
              <span
                styleName='header-control-button-tooltip'
                style={{ left: -20 }}
              >
                {i18n.__('Add Folder')}
              </span>
            </button>
            <button
              styleName='header-control-button'
              onClick={e => this.handleExternalButtonClick(e)}
            >
              <i className='fa fa-external-link' />
              <span
                styleName='header-control-button-tooltip'
                style={{ left: -50 }}
              >
                {i18n.__('Open Storage folder')}
              </span>
            </button>
            <button
              styleName='header-control-button'
              onClick={e => this.handleUnlinkButtonClick(e)}
            >
              <i className='fa fa-unlink' />
              <span
                styleName='header-control-button-tooltip'
                style={{ left: -10 }}
              >
                {i18n.__('Unlink')}
              </span>
            </button>
          </div>
        </div>
        <FolderList storage={storage} hostBoundingBox={hostBoundingBox} />
      </div>
    )
  }
}

StorageItem.propTypes = {
  hostBoundingBox: PropTypes.shape({
    bottom: PropTypes.number,
    height: PropTypes.number,
    left: PropTypes.number,
    right: PropTypes.number,
    top: PropTypes.number,
    width: PropTypes.number
  }),
  storage: PropTypes.shape({
    key: PropTypes.string
  })
}

export default CSSModules(StorageItem, styles)