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

import PropTypes from 'prop-types'
import React from 'react'
import CSSModules from 'browser/lib/CSSModules'
import styles from './StoragesTab.styl'
import dataApi from 'browser/main/lib/dataApi'
import attachmentManagement from 'browser/main/lib/dataApi/attachmentManagement'
import StorageItem from './StorageItem'
import i18n from 'browser/lib/i18n'
import { humanFileSize } from 'browser/lib/utils'
import fs from 'fs'

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

function browseFolder () {
  const dialog = remote.dialog

  const defaultPath = remote.app.getPath('home')
  return new Promise((resolve, reject) => {
    dialog.showOpenDialog({
      title: i18n.__('Select Directory'),
      defaultPath,
      properties: ['openDirectory', 'createDirectory']
    }, function (targetPaths) {
      if (targetPaths == null) return resolve('')
      resolve(targetPaths[0])
    })
  })
}

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

    this.state = {
      page: 'LIST',
      newStorage: {
        name: 'Unnamed',
        type: 'FILESYSTEM',
        path: ''
      },
      attachments: []
    }
    this.loadAttachmentStorage()
  }

  loadAttachmentStorage () {
    const promises = []
    this.props.data.noteMap.map(note => {
      const promise = attachmentManagement.getAttachmentsPathAndStatus(
        note.content,
        note.storage,
        note.key
      )
      if (promise) promises.push(promise)
    })

    Promise.all(promises)
      .then(data => {
        const result = data.reduce((acc, curr) => acc.concat(curr), [])
        this.setState({attachments: result})
      })
      .catch(console.error)
  }

  handleAddStorageButton (e) {
    this.setState({
      page: 'ADD_STORAGE',
      newStorage: {
        name: 'Unnamed',
        type: 'FILESYSTEM',
        path: ''
      }
    }, () => {
      this.refs.addStorageName.select()
    })
  }

  handleLinkClick (e) {
    shell.openExternal(e.currentTarget.href)
    e.preventDefault()
  }

  handleRemoveUnusedAttachments (attachments) {
    attachmentManagement.removeAttachmentsByPaths(attachments)
      .then(() => this.loadAttachmentStorage())
      .catch(console.error)
  }

  renderList () {
    const { data, boundingBox } = this.props
    const { attachments } = this.state

    const unusedAttachments = attachments.filter(attachment => !attachment.isInUse)
    const inUseAttachments = attachments.filter(attachment => attachment.isInUse)

    const totalUnusedAttachments = unusedAttachments.length
    const totalInuseAttachments = inUseAttachments.length
    const totalAttachments = totalUnusedAttachments + totalInuseAttachments

    const totalUnusedAttachmentsSize = unusedAttachments
      .reduce((acc, curr) => {
        const stats = fs.statSync(curr.path)
        const fileSizeInBytes = stats.size
        return acc + fileSizeInBytes
      }, 0)
    const totalInuseAttachmentsSize = inUseAttachments
      .reduce((acc, curr) => {
        const stats = fs.statSync(curr.path)
        const fileSizeInBytes = stats.size
        return acc + fileSizeInBytes
      }, 0)
    const totalAttachmentsSize = totalUnusedAttachmentsSize + totalInuseAttachmentsSize

    const unusedAttachmentPaths = unusedAttachments
      .reduce((acc, curr) => acc.concat(curr.path), [])

    if (!boundingBox) { return null }
    const storageList = data.storageMap.map((storage) => {
      return <StorageItem
        key={storage.key}
        storage={storage}
        hostBoundingBox={boundingBox}
      />
    })
    return (
      <div styleName='list'>
        <div styleName='header'>{i18n.__('Storage Locations')}</div>
        {storageList.length > 0
          ? storageList
          : <div styleName='list-empty'>{i18n.__('No storage found.')}</div>
        }
        <div styleName='list-control'>
          <button styleName='list-control-addStorageButton'
            onClick={(e) => this.handleAddStorageButton(e)}
          >
            <i className='fa fa-plus' /> {i18n.__('Add Storage Location')}
          </button>
        </div>
        <div styleName='header'>{i18n.__('Attachment storage')}</div>
        <p styleName='list-attachment-label'>
          Unused attachments size: {humanFileSize(totalUnusedAttachmentsSize)} ({totalUnusedAttachments} items)
        </p>
        <p styleName='list-attachment-label'>
          In use attachments size: {humanFileSize(totalInuseAttachmentsSize)} ({totalInuseAttachments} items)
        </p>
        <p styleName='list-attachment-label'>
          Total attachments size: {humanFileSize(totalAttachmentsSize)} ({totalAttachments} items)
        </p>
        <button styleName='list-attachement-clear-button'
          onClick={() => this.handleRemoveUnusedAttachments(unusedAttachmentPaths)}>
          {i18n.__('Clear unused attachments')}
        </button>
      </div>
    )
  }

  handleAddStorageBrowseButtonClick (e) {
    browseFolder()
      .then((targetPath) => {
        if (targetPath.length > 0) {
          const { newStorage } = this.state
          newStorage.path = targetPath
          this.setState({
            newStorage
          })
        }
      })
      .catch((err) => {
        console.error('BrowseFAILED')
        console.error(err)
      })
  }

  handleAddStorageChange (e) {
    const { newStorage } = this.state
    newStorage.name = this.refs.addStorageName.value
    newStorage.path = this.refs.addStoragePath.value
    this.setState({
      newStorage
    })
  }

  handleAddStorageCreateButton (e) {
    dataApi
      .addStorage({
        name: this.state.newStorage.name,
        path: this.state.newStorage.path
      })
      .then((data) => {
        const { dispatch } = this.props
        dispatch({
          type: 'ADD_STORAGE',
          storage: data.storage,
          notes: data.notes
        })
        this.setState({
          page: 'LIST'
        })
      })
  }

  handleAddStorageCancelButton (e) {
    this.setState({
      page: 'LIST'
    })
  }

  renderAddStorage () {
    return (
      <div styleName='addStorage'>

        <div styleName='addStorage-header'>{i18n.__('Add Storage')}</div>

        <div styleName='addStorage-body'>

          <div styleName='addStorage-body-section'>
            <div styleName='addStorage-body-section-label'>
              {i18n.__('Name')}
            </div>
            <div styleName='addStorage-body-section-name'>
              <input styleName='addStorage-body-section-name-input'
                ref='addStorageName'
                value={this.state.newStorage.name}
                onChange={(e) => this.handleAddStorageChange(e)}
              />
            </div>
          </div>

          <div styleName='addStorage-body-section'>
            <div styleName='addStorage-body-section-label'>{i18n.__('Type')}</div>
            <div styleName='addStorage-body-section-type'>
              <select styleName='addStorage-body-section-type-select'
                value={this.state.newStorage.type}
                readOnly
              >
                <option value='FILESYSTEM'>{i18n.__('File System')}</option>
              </select>
              <div styleName='addStorage-body-section-type-description'>
                {i18n.__('Setting up 3rd-party cloud storage integration:')}{' '}
                <a href='https://github.com/BoostIO/Boostnote/wiki/Cloud-Syncing-and-Backup'
                  onClick={(e) => this.handleLinkClick(e)}
                >{i18n.__('Cloud-Syncing-and-Backup')}</a>
              </div>
            </div>
          </div>

          <div styleName='addStorage-body-section'>
            <div styleName='addStorage-body-section-label'>{i18n.__('Location')}
            </div>
            <div styleName='addStorage-body-section-path'>
              <input styleName='addStorage-body-section-path-input'
                ref='addStoragePath'
                placeholder={i18n.__('Select Folder')}
                value={this.state.newStorage.path}
                onChange={(e) => this.handleAddStorageChange(e)}
              />
              <button styleName='addStorage-body-section-path-button'
                onClick={(e) => this.handleAddStorageBrowseButtonClick(e)}
              >
                ...
              </button>
            </div>
          </div>

          <div styleName='addStorage-body-control'>
            <button styleName='addStorage-body-control-createButton'
              onClick={(e) => this.handleAddStorageCreateButton(e)}
            >{i18n.__('Add')}</button>
            <button styleName='addStorage-body-control-cancelButton'
              onClick={(e) => this.handleAddStorageCancelButton(e)}
            >{i18n.__('Cancel')}</button>
          </div>

        </div>

      </div>
    )
  }

  renderContent () {
    switch (this.state.page) {
      case 'ADD_STORAGE':
      case 'ADD_FOLDER':
        return this.renderAddStorage()
      case 'LIST':
      default:
        return this.renderList()
    }
  }

  render () {
    return (
      <div styleName='root'>
        {this.renderContent()}
      </div>
    )
  }
}

StoragesTab.propTypes = {
  boundingBox: PropTypes.shape({
    bottom: PropTypes.number,
    height: PropTypes.number,
    left: PropTypes.number,
    right: PropTypes.number,
    top: PropTypes.number,
    width: PropTypes.number
  }),
  dispatch: PropTypes.func
}

export default CSSModules(StoragesTab, styles)