OpenDroneMap-WebODM/coreplugins/editshortlinks/public/SLControls.jsx

import React from 'react';
import PropTypes from 'prop-types';
import './SLControls.scss';
import ErrorMessage from 'webodm/components/ErrorMessage';
import { _, interpolate } from 'webodm/classes/gettext';
import $ from 'jquery';

export default class SLControls extends React.Component{
    static defaultProps = {
        sharePopup: null
    };

    static propTypes = {
        sharePopup: PropTypes.object.isRequired
    };

    constructor(props){
        super(props);

        this.state = {
            error: '',
            loading: false,
            useShortLink: false,
            shortId: '',
            editingShortId: false,
            showEditSuccess: false,
            savingShortId: false
        };
    }

    updateRelShareLink = (res, onSuccess = () => {}) => {
        if (res.shortId){
            const linksTarget = this.props.sharePopup.props.linksTarget;
    
            const {username, shortId} = res;
            const linksTargetChar = linksTarget === '3d' ? '3' : 'm';
    
            const relShareLink = `s${linksTargetChar}/${username}/${shortId}`;
            this.props.sharePopup.setState({relShareLink});
            this.setState({shortId});
            onSuccess();
        }else if (res.error){
            this.setState({error: res.error});
        }else this.setState({error: interpolate(_('Invalid response from server: %(error)s'), { error: JSON.stringify(res)})});
    }

    toggleShortLinks = (e) => {
        e.stopPropagation();
        if (!this.state.useShortLink && !this.state.loading){
            this.setState({loading: true});

            const task = this.props.sharePopup.props.task;
            
            $.ajax({
                type: 'POST',
                url: `/api/plugins/editshortlinks/task/${task.id}/shortlink`,
                contentType: 'application/json'
            }).done(res => {
                this.updateRelShareLink(res);
                this.setState({loading: false, useShortLink: !this.state.useShortLink});
            }).fail(error => {
                this.setState({error: interpolate(_('Invalid response from server: %(error)s'), { error }), loading: false});
            });
        }else{
            this.props.sharePopup.setState({relShareLink: this.props.sharePopup.getRelShareLink()});
            this.setState({useShortLink: !this.state.useShortLink});
        }
    }

    handleEdit = () => {
        this.setState({editingShortId: true});
        setTimeout(() => {
            this.editTextbox.focus();
        }, 0);
    }


    handleSave = () => {
        if (!this.state.savingShortId){
            this.setState({savingShortId: true});
            
            const task = this.props.sharePopup.props.task;

            $.ajax({
                type: 'POST',
                url: `/api/plugins/editshortlinks/task/${task.id}/edit`,
                contentType: 'application/json',
                data: JSON.stringify({
                    shortId: this.state.shortId
                }),
                dataType: 'json',
            }).done(res => {
                this.updateRelShareLink(res, () => {
                    this.setState({editingShortId: false, showEditSuccess: true});
                    setTimeout(() => {
                        this.setState({showEditSuccess: false});
                    }, 2000);
                });
            }).fail(error => {
                this.setState({error: interpolate(_('Invalid response from server: %(error)s'), { error }), loading: false});
            }).always(() => {
                this.setState({savingShortId: false});
            });
        }
    }

    handleEditShortId = e => {
        this.setState({shortId: e.target.value});
    }

    handleDelete = e => {
        if (window.confirm(_("Are you sure?"))){
            this.setState({loading: true});
            const task = this.props.sharePopup.props.task;

            $.ajax({
                type: 'POST',
                url: `/api/plugins/editshortlinks/task/${task.id}/delete`,
                contentType: 'application/json',
                dataType: 'json',
            }).done(res => {
                if (res.success){
                    this.setState({useShortLink: false, shortId: ""});
                    this.props.sharePopup.setState({relShareLink: this.props.sharePopup.getRelShareLink()});
                }else if (res.error){
                    this.setState({error: res.error});
                }else{
                    this.setState({error: interpolate(_('Invalid response from server: %(error)s'), { error: JSON.stringify(res) })});
                }
            }).fail(error => {
                this.setState({error: interpolate(_('Invalid response from server: %(error)s'), { error }), loading: false});
            }).always(() => {
                this.setState({loading: false});
            });
        }
    }

    handleShortIdKeyPress = e => {
        if (e.key === 'Enter'){
            this.handleSave();
        }
    }

    render(){
        const { loading, useShortLink, savingShortId,
                shortId, editingShortId, showEditSuccess } = this.state;

        const controls = [<label className="slcheckbox" >
            <input 
              type="checkbox"
              disabled={loading}
              checked={useShortLink}
              onChange={this.toggleShortLinks}
               /> {_("Short Link")}
          </label>];

        if (useShortLink){
            let editIcon = "fa-edit";
            if (showEditSuccess) editIcon = "fa-check";

            const editButton = (<button className="btn btn-secondary" type="button" 
                                        title={_("Edit")} 
                                        onClick={this.handleEdit}><i className={"fa " + editIcon}></i></button>);
            
            let saveIcon = "fa-save";
            if (savingShortId) saveIcon = "fa-circle-notch fa-spin";

            const saveButton = (<button className="btn btn-secondary" type="button"
                                        disabled={shortId.length === 0 || savingShortId}
                                        title={_("Save")} onClick={this.handleSave}><i className={"fa " + saveIcon}></i></button>);

            controls.push(<div className="input-group">
                    <input
                        className="form-control"
                        readOnly={!editingShortId}
                        value={shortId}
                        type="text"
                        placeholder={_("Suffix")}
                        disabled={loading}
                        onChange={this.handleEditShortId}
                        onKeyPress={this.handleShortIdKeyPress}
                        ref={(ref) => { this.editTextbox = ref; }}
                    ></input>
                    
                    <span className="input-group-btn">
                        {editingShortId ? saveButton : editButton}
                    </span>
                </div>);

            controls.push(<div>
                <a className="sldelete" onClick={this.handleDelete}><i className="fa fa-trash"></i> {_("Delete Short Link")}</a>
            </div>);
        }

        return (<div className="slcontrols">
            {controls}
            <ErrorMessage bind={[this, "error"]} />
        </div>);
    }
}