repertory-ui/src/containers/SkynetExport/SkynetExport.js

import React from 'react';
import './SkynetExport.css';
import CheckboxTree from 'react-checkbox-tree';
import {connect} from 'react-redux';
import IPCContainer from '../IPCContainer/IPCContainer';
import {notifyApplicationBusy} from '../../redux/actions/common_actions';
import {notifyError} from '../../redux/actions/error_actions';
import Box from '../../components/UI/Box/Box';
import {displaySkynetExport} from '../../redux/actions/skynet_actions';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {
  faCheckSquare, faChevronDown,
  faChevronRight, faFile, faFolder, faFolderOpen,
  faHSquare, faMinusSquare, faPlusSquare,
  faSquare, faSquareFull, faSquareRootAlt
} from '@fortawesome/free-solid-svg-icons';

const Constants = require('../../constants');

const mapStateToProps = state => {
  return {
    AppBusy: state.common.AppBusy,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    displaySkynetExport: display => dispatch(displaySkynetExport(display)),
    notifyApplicationBusy: busy => dispatch(notifyApplicationBusy(busy, true)),
    notifyError: msg => dispatch(notifyError(msg)),
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(class extends IPCContainer {
  state = {
    checked: [],
    expanded: [],
    nodes: [],
  }

  componentDidMount() {
    this.setRequestHandler(Constants.IPC_Grab_Skynet_Tree_Reply, this.onGrabSkynetTreeReply);
    this.setRequestHandler(Constants.IPC_Export_Skylinks_Reply, this.onExportSkylinksReply);
    this.sendRequest(Constants.IPC_Grab_Skynet_Tree, {Version: this.props.version});
  }

  componentWillUnmount() {
    super.componentWillUnmount();
  }

  createNodes = items => {
    /*
    {
      name: '',
      path: '',
      directory: true/false,
      children: [],
    }
     */
    const ret = [];
    for (const item of items) {
      const treeItem = {
        label: item.name,
        path: item.path,
        value: item.name === '/' ? 0 : JSON.stringify(item),
      };

      if (item.directory) {
        treeItem.children = this.createNodes(item.children);
      }

      ret.push(treeItem);
    }

    return ret;
  }

  onGrabSkynetTreeReply = (_, arg) => {
    if (arg.data.Success) {
      this.setState({
        checked: [],
        expanded: [0],
        nodes: this.createNodes(arg.data.Result),
      });
    } else {
      this.setState({
        checked: [],
        expanded: [],
        nodes: [],
      }, () => {
        this.props.notifyError(arg.data.Error);
      });
    }
  }

  onExportSkylinksReply = (_, arg) => {

  }

  render() {
    console.log(this.state.expanded);
    return this.props.AppBusy ? (<div/>) : (
      <Box dxDark dxStyle={{
        height: '90vh',
        padding: 'var(--default_spacing)',
        width: 'calc(100vw - (var(--default_spacing) * 4)'
      }}>
        <div
          style={{
            float: 'right',
            margin: 0,
            padding: 0,
            marginTop: '-4px',
            boxSizing: 'border-box',
            display: 'block'
          }}>
          <a href={'#'}
             onClick={() => this.props.displaySkynetExport(false)}
             style={{cursor: 'pointer'}}>X</a>
        </div>
        <h1 className={'SkynetExportHeading'}>{'Export Files'}</h1>
        <CheckboxTree checked={this.state.checked}
                      expanded={this.state.expanded}
                      icons={{
                        check: <FontAwesomeIcon icon={faCheckSquare}/>,
                        uncheck: <FontAwesomeIcon icon={faSquare}/>,
                        halfCheck: <FontAwesomeIcon icon={faHSquare}/>,
                        expandClose: <FontAwesomeIcon icon={faChevronRight}/>,
                        expandOpen: <FontAwesomeIcon icon={faChevronDown}/>,
                        expandAll: <FontAwesomeIcon icon={faPlusSquare}/>,
                        collapseAll: <FontAwesomeIcon icon={faMinusSquare}/>,
                        parentClose: <FontAwesomeIcon icon={faFolder}
                                                      color={'var(--heading_text_color)'}/>,
                        parentOpen: <FontAwesomeIcon icon={faFolderOpen}
                                                     color={'var(--heading_text_color)'}/>,
                        leaf: <FontAwesomeIcon icon={faFile} color={'var(--heading_text_color)'}/>
                      }}
                      nodes={this.state.nodes}
                      onCheck={checked => this.setState({checked})}
                      onExpand={expanded => this.setState({expanded})}/>
      </Box>
    );
  }
});