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

import React from 'react';
import './PinnedManager.css';
import Box from '../../components/UI/Box/Box';
import Button from '../../components/UI/Button/Button';
import CheckBox from '../../components/UI/CheckBox/CheckBox';
import IPCContainer from '../IPCContainer/IPCContainer';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { connect } from 'react-redux';
import { displayPinnedManager } from '../../redux/actions/pinned_manager_actions';
import { faFolder } from '@fortawesome/free-solid-svg-icons';
import { notifyApplicationBusy } from '../../redux/actions/common_actions';
import { notifyError, notifyInfo } from '../../redux/actions/error_actions';

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

class PinnedManager extends IPCContainer {
  state = {
    active_directory: '/',
    items: [],
    previous: [],
  };

  componentDidMount() {
    this.setRequestHandler(Constants.IPC_Get_Directory_Items_Reply, this.onGetDirectoryItemsReply);
    this.grabDirectoryItems();
  }

  componentWillUnmount() {
    super.componentWillUnmount();
  }

  grabDirectoryItems = () => {
    this.sendRequest(Constants.IPC_Get_Directory_Items, {
      Provider: this.props.DisplayConfiguration,
      Remote: this.props.DisplayRemoteConfiguration,
      S3: this.props.DisplayS3Configuration,
      Version: this.props.version,
      Path: this.state.active_directory,
    });
  };

  onGetDirectoryItemsReply = (_, { data }) => {
    if (data.Success) {
      const items = data.Items.filter(
        (i) =>
          i.path !== '.' && (this.state.active_directory !== '/' || i.path.substr(0, 1) !== '.')
      ).map((i) => {
        return {
          ...i,
          name: i.path === '..' ? i.path : i.path.substr(i.path.lastIndexOf('/') + 1),
          meta: {
            ...i.meta,
            pinned: i.meta.pinned === '1',
          },
        };
      });
      this.setState({
        items,
      });
    } else {
      this.props.notifyError(data.Error, () => {
        this.props.displayPinnedManager(false);
      });
    }
  };

  createDirectory = (name, path, idx, total, item_idx) => {
    const style = {};
    if (item_idx + 1 !== total) {
      style.marginBottom = '4px';
    }
    return (
      <div key={'dir_' + idx} style={{ ...style }}>
        <Button
          buttonStyles={{ textAlign: 'left' }}
          clicked={() => {
            const previous = [...this.state.previous];
            if (path === '..') {
              path = previous.pop();
            } else {
              previous.push(this.state.active_directory);
            }
            this.setState(
              {
                items: [],
                active_directory: path,
                previous,
              },
              () => {
                this.grabDirectoryItems();
              }
            );
          }}>
          <FontAwesomeIcon
            icon={faFolder}
            fixedWidth
            color={'var(--heading_text_color)'}
            style={{ padding: 0, margin: 0 }}
          />
          &nbsp;{name}
        </Button>
      </div>
    );
  };

  createFile = (name, path, pinned, idx, total, item_idx) => {
    const style = { textAlign: 'left' };
    if (item_idx + 1 !== total) {
      style.marginBottom = '2px';
    }
    return (
      <div key={'file_' + idx} style={{ ...style }}>
        <CheckBox
          checked={pinned}
          changed={() => {
            const items = JSON.parse(JSON.stringify(this.state.items));
            const pinned = (items[item_idx].meta.pinned = !items[item_idx].meta.pinned);
            this.setState(
              {
                items,
              },
              () => {
                this.sendSyncRequest(Constants.IPC_Set_Pinned, {
                  Provider: this.props.DisplayConfiguration,
                  Remote: this.props.DisplayRemoteConfiguration,
                  S3: this.props.DisplayS3Configuration,
                  Version: this.props.version,
                  Path: path,
                  Pinned: pinned,
                });
              }
            );
          }}
          label={name}
        />
      </div>
    );
  };

  render() {
    let idx = 0;
    return (
      <Box
        dxDark
        dxStyle={{
          height: 'calc(100vh - (var(--default_spacing) * 4)',
          padding: 'var(--default_spacing)',
          width: 'calc(100vw - (var(--default_spacing) * 4)',
        }}>
        <div className={'PinnedManager'}>
          <div className={'PinnedManagerHeading'}>
            <div className={'PinnedManagerClose'}>
              <a
                href={'#'}
                onClick={() => this.props.displayPinnedManager(false)}
                style={{ cursor: 'pointer', flex: '0' }}>
                X
              </a>
            </div>
            <h1 style={{ width: '100%', textAlign: 'center' }}>{'Pinned File Manager'}</h1>
            <div className={'PinnedManagerActiveDirectory'}>
              <b>&nbsp;{this.state.active_directory}</b>
            </div>
          </div>
          <div className={'PinnedManagerItemsOwner'}>
            <div className={'PinnedManagerItems'}>
              {this.state.items.map((i, k) => {
                return i.directory
                  ? this.createDirectory(i.name, i.path, idx++, this.state.items.length, k)
                  : this.createFile(
                      i.name,
                      i.path,
                      i.meta.pinned,
                      idx++,
                      this.state.items.length,
                      k
                    );
              })}
            </div>
          </div>
        </div>
      </Box>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    DisplayConfiguration: state.mounts.DisplayConfiguration,
    DisplayRemoteConfiguration: state.mounts.DisplayRemoteConfiguration,
    DisplayS3Configuration: state.mounts.DisplayS3Configuration,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    displayPinnedManager: (display) => dispatch(displayPinnedManager(display)),
    notifyApplicationBusy: (busy) => dispatch(notifyApplicationBusy(busy, true)),
    notifyError: (msg, cb) => dispatch(notifyError(msg, false, cb)),
    notifyInfo: (title, msg) => dispatch(notifyInfo(title, msg)),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(PinnedManager);