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');

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
)(
  class 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>
      );
    }
  }
);