seahub/frontend/src/pages/wikis/wikis.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { seafileAPI } from '../../utils/seafile-api';
import { gettext, siteRoot, loginUrl } from '../../utils/constants';
import moment from 'moment';
import { Button } from 'reactstrap';
import Toast from '../../components/toast';
import MenuControl from '../../components/menu-control';
import WikiAdd from './wiki-add';
import WikiMenu from './wiki-menu';
import WikiRename from './wiki-rename';
import WikiDelete from './wiki-delete';
import WikiSelect from './wiki-select';
import WikiCreate from './wiki-create';


const itempropTypes = {
  wiki: PropTypes.object.isRequired,
  deleteWiki: PropTypes.func.isRequired,
};

class Item extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isShowWikiMenu: false,
      menuPosition: {top:'', left: ''},
      isItemFreezed: false,
      isShowDeleteDialog: false,
      isShowMenuControl: false,
      isRenameing: false,
      highlight: '',
      wiki: this.props.wiki,
    };
  }

  componentDidMount() {
    document.addEventListener('click', this.onHideWikiMenu);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.onHideWikiMenu);
  }

  onMenuToggle = (e) => {
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();

    if (this.state.isShowWikiMenu) {
      this.onHideWikiMenu();
    } else {
      this.onShowWikiMenu(e);
    }
  }

  onShowWikiMenu = (e) => {
    let left = e.clientX - 8*16;
    let top  = e.clientY + 12;
    let position = {top: top, left: left};
    this.setState({
      isShowWikiMenu: true,
      menuPosition: position,
      isItemFreezed: true,
    });
  }

  onHideWikiMenu = () => {
    this.setState({
      isShowWikiMenu: false,
      isItemFreezed: false,
    });
  }

  onMouseEnter = () => {
    if (!this.state.isItemFreezed) {
      this.setState({
        isShowMenuControl: true,
        highlight: 'tr-highlight',
      });
    }
  }

  onMouseLeave = () => {
    if (!this.state.isItemFreezed) {
      this.setState({
        isShowMenuControl: false,
        highlight: '',
      });
    }
  }

  onRenameToggle = () => {
    this.setState({
      isShowWikiMenu: false,
      isItemFreezed: true,
      isRenameing: true,
    });
  }

  onRenameConfirm = (newName) => {
    let wiki = this.state.wiki;

    if (newName === wiki.name) {
      this.onRenameCancel();
      return false;
    }
    if (!newName) {
      let errMessage = 'Name is required.';
      Toast.error(gettext(errMessage));
      return false;
    }
    if (newName.indexOf('/') > -1) {
      let errMessage = 'Name should not include ' + '\'/\'' + '.';
      Toast.error(gettext(errMessage));
      return false;
    }
    this.renameWiki(newName);
    this.onRenameCancel();
  }

  onRenameCancel = () => {
    this.setState({
      isRenameing: false,
      isItemFreezed: false,
    });
  }

  onDeleteToggle = () => {
    this.setState({
      isShowDeleteDialog: !this.state.isShowDeleteDialog,
    });
  }

  renameWiki = (newName) => {
    let wiki = this.state.wiki;
    seafileAPI.renameWiki(wiki.slug, newName).then((res) => {
      this.setState({wiki: res.data});
    }).catch((error) => {
      if(error.response) {
        let errorMsg = error.response.data.error_msg;
        Toast.error(errorMsg);
      }
    });
  }

  deleteWiki = () => {
    let wiki = this.props.wiki;
    this.props.deleteWiki(wiki);
    this.setState({
      isShowDeleteDialog: !this.state.isShowDeleteDialog,
    });
  }

  render() {
    let wiki = this.state.wiki;
    let userProfileURL = `${siteRoot}profile/${encodeURIComponent(wiki.owner)}/`;

    return (
      <tr className={this.state.highlight} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
        <td>
          {this.state.isRenameing ?
            <WikiRename wiki={wiki} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel}/> :
            <a href={wiki.link}>{gettext(wiki.name)}</a>
          }
        </td>
        <td><a href={userProfileURL} target='_blank'>{gettext(wiki.owner_nickname)}</a></td>
        <td>{moment(wiki.updated_at).fromNow()}</td>
        <td className="menu-toggle" onClick={this.onMenuToggle}>
          <MenuControl
            isShow={this.state.isShowMenuControl}
            onClick={this.onMenuToggle}
          />
          {this.state.isShowWikiMenu &&
            <WikiMenu
              menuPosition={this.state.menuPosition}
              onRenameToggle={this.onRenameToggle}
              onDeleteToggle={this.onDeleteToggle}
            />
          }
          {this.state.isShowDeleteDialog &&
            <WikiDelete
              toggleCancel={this.onDeleteToggle}
              handleSubmit={this.deleteWiki}
            />
          }
        </td>
      </tr>
    );
  }
}

Item.propTypes = itempropTypes;


const contentpropTypes = {
  data: PropTypes.object.isRequired,
  deleteWiki: PropTypes.func.isRequired,
};

class WikisContent extends Component {

  render() {
    let {loading, errorMsg, wikis} = this.props.data;

    if (loading) {
      return <span className="loading-icon loading-tip"></span>;
    } else if (errorMsg) {
      return <p className="error text-center">{errorMsg}</p>;
    } else {
      return (
        <table>
          <thead>
            <tr>
              <th width="50%">{gettext('Name')}</th>
              <th width="20%">{gettext('Owner')}</th>
              <th width="20%">{gettext('Last Update')}</th>
              <th width="10%">{/* operation */}</th>
            </tr>
          </thead>
          <tbody>
            {wikis.map((wiki, index) => {
              return(<Item key={index} wiki={wiki} deleteWiki={this.props.deleteWiki} />);
            })}
          </tbody>
        </table>
      );
    }
  }
}

WikisContent.propTypes = contentpropTypes;


class Wikis extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      errorMsg: '',
      wikis: [],
      isShowWikiAdd: false,
      addPosition: {top:'', left: ''},
      isShowSelectDialog: false,
      isShowCreateDialog: false,
    };
  }

  componentDidMount() {
    document.addEventListener('click', this.onHideWikiAdd);
    this.getWikis();
  }

  componentWillReceiveProps() {
    this.getWikis();
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.onHideWikiAdd);
  }

  getWikis = () => {
    seafileAPI.listWikis().then(res => {
      this.setState({
        loading: false,
        wikis: res.data.data,
      });
    }).catch((error) => {
      if (error.response) {
        if (error.response.status == 403) {
          this.setState({
            loading: false,
            errorMsg: gettext('Permission denied')
          });
          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
        } else {
          this.setState({
            loading: false,
            errorMsg: gettext('Error')
          });
        }
      } else {
        this.setState({
          loading: false,
          errorMsg: gettext('Please check the network.')
        });
      }
    });
  }

  onAddMenuToggle = (e) => {
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();

    if (this.state.isShowWikiAdd) {
      this.onHideWikiAdd();
    } else {
      this.onShowWikiAdd(e);
    }
  }

  onShowWikiAdd = (e) => {
    let left = e.clientX - 10*20;
    let top  = e.clientY + 12;
    let position = {top: top, left: left};
    this.setState({
      isShowWikiAdd: true,
      addPosition: position,
    });
  }

  onHideWikiAdd = () => {
    this.setState({
      isShowWikiAdd: false,
    });
  }

  onSelectToggle = () => {
    this.setState({
      isShowSelectDialog: !this.state.isShowSelectDialog,
    });
  }

  onCreateToggle = () => {
    this.setState({
      isShowCreateDialog: !this.state.isShowCreateDialog,
    });
  }

  addWiki = (isExist, name, repoID) => {
    seafileAPI.addWiki(isExist, name, repoID).then((res) => {
      this.state.wikis.push(res.data);
      this.setState({
        wikis: this.state.wikis
      });
    }).catch((error) => {
      if(error.response) {
        let errorMsg = error.response.data.error_msg;
        Toast.error(errorMsg);
      }
    });
  }

  deleteWiki = (wiki) => {
    seafileAPI.deleteWiki(wiki.slug).then(() => {
      this.setState({
        wikis: this.state.wikis.filter(item => {
          return item.name !== wiki.name
        })
      });
    }).catch((error) => {
      if(error.response) {
        let errorMsg = error.response.data.error_msg;
        Toast.error(errorMsg);
      }
    });
  }

  render() {
    return (
      <div className="main-panel-center">
        <div className="cur-view-container" id="wikis">
          <div className="cur-view-path">
            <h3 className="sf-heading">{gettext('Wikis')}</h3>
            <div style={{float:'right'}}>
              <Button className="fa fa-plus-square" onClick={this.onAddMenuToggle}>
                {gettext('Add Wiki')}
              </Button>
            </div>
            {this.state.isShowWikiAdd &&
              <WikiAdd 
                isShowWikiAdd={this.state.isShowWikiAdd}
                addPosition={this.state.addPosition}
                onSelectToggle={this.onSelectToggle}
                onCreateToggle={this.onCreateToggle}
              />
            }
            {this.state.isShowCreateDialog &&
              <WikiCreate
                toggleCancel={this.onCreateToggle}
                addWiki={this.addWiki}
              />
            }
            {this.state.isShowSelectDialog &&
              <WikiSelect
                toggleCancel={this.onSelectToggle}
                addWiki={this.addWiki}
              />
            }
          </div>
          <div className="cur-view-content">
            {(this.state.loading || this.state.wikis.length !== 0) &&
              <WikisContent
                data={this.state}
                deleteWiki={this.deleteWiki}
              />
            }
            {(!this.state.loading && this.state.wikis.length === 0) &&
              <div className="message empty-tip">
                <h2>{gettext('You do not have any Wiki.')}</h2>
                <p>{gettext('Seafile Wiki enables you to organize your knowledge in a simple way. The contents of wiki is stored in a normal library with pre-defined file/folder structure. This enables you to edit your wiki in your desktop and then sync back to the server.')}</p>
              </div>
            }
          </div>
        </div>
      </div>
    );
  }
}

export default Wikis;