methods/profile/index.js

import { manageError, cleanError } from '../../errorManager';
import { isVoid } from '../../validation';
import Method from '../Method';

const formModel = {
    editNicknameButton: 'edit_nickname',
    setUsernameButton: 'set_username',
    cancelEditButton: 'cancel_edit',
    editNicknameForm: 'edit_nickname_status_form',
    nicknameStatusForm: 'nickname_status_form',
    nicknameStatus: 'nickname_status',
    nicknameInput: 'name'
};

/**
 * @memberOf Useris
 * @function profile
 *
 * @description Validate and expose function for profile editing
 *
 * It must be used with the **newtonsmartstatusprofile** template.
 * CallbackSuccess must be called inside onSaveNickname to update the form,
 * passing the newNickname value provided by useris or your call.
 *
 * @param {Object} options Options object
 * @param {Object} [options.element=false] The div element where the html's tmpl will be injected
 * @param {String} [options.acccess_token=''] **Optionals** if true,
 * the tmpl calls will be called with the params access_token filled
 * @param {Boolean} [options.doNotLoad=false] **Optionals** if true,
 * this params will tell useris to not load the template (It doesn't make the apicalls)
 * @param {Object} callbackObject Manage the success and error callback
 * @param {function} [callbackObject.onSaveNickname='no-default']
 * Success callback (code managed by the app)
 * @param {function} [callbackObject.onError='no-default'] Error callback (code managed by the app)
 * @param {function} [callbackObject.onTemplateLoaded='no-default']
 * Callback executed when the template has been loaded.
 *
 * @example
 *  Useris.profile({
 *      element: document.getElementById('elementId'),
 *      access_token: 'abcdefgh1234567890'
 *  }, {
 *      onSaveNickname: function(userCredentials){
 *          console.log(userCredentials);
 *          updateUserProps(userCredentials);
 *      },
 *      onError: function(error){
 *          console.log('Error:', error);
 *          manageError(error);
 *      },
 *      onTemplateLoaded: function(tmplInfo){
 *          console.log('Template loaded', tmplInfo);
 *      }
 *  });
 *
 *  @returns {object}
 *  <pre>
 *      {
 *          newNickname: string,
 *          oldNickname: string,
 *          callbackSuccess: function(newNickname),
 *      }
 *  </pre>
 */

export default class Profile extends Method {
    init = (options) => {
        this.smartsectionObj = {
            subsection: 'newtonsmartstatusprofile',
            loadForm: options.element ? options.element : false,
            access_token: options.access_token ? options.access_token : '',
            doNotLoad: options.doNotLoad ? options.doNotLoad : false
        };
        this.initUserView();
    };

    attachEvents = () => {
        const editNicknameButton = this.UserViewInstance.getElement(formModel.editNicknameButton);
        const cancelEditButton = this.UserViewInstance.getElement(formModel.cancelEditButton);
        const setUsernameButton = this.UserViewInstance.getElement(formModel.setUsernameButton);
        const nicknameStatusForm = this.UserViewInstance.getElement(formModel.nicknameStatusForm);
        const editNicknameForm = this.UserViewInstance.getElement(formModel.editNicknameForm);
        const nicknameInput = this.UserViewInstance.getElement(formModel.nicknameInput);
        const nicknameStatus = this.UserViewInstance.getElement(formModel.nicknameStatus);

        let oldNickname = '';

        if (editNicknameButton) {
            this.UserViewInstance.attachEvent(editNicknameButton, {
                eventName: 'click',
                event: (e) => {
                    e.preventDefault();
                    cleanError();
                    if (editNicknameForm && nicknameStatusForm) {
                        oldNickname = nicknameInput.value;
                        editNicknameForm.style.display = 'block';
                        nicknameStatusForm.style.display = 'none';
                    }
                }
            });
        }

        if (cancelEditButton) {
            this.UserViewInstance.attachEvent(cancelEditButton, {
                eventName: 'click',
                event: (e) => {
                    e.preventDefault();
                    cleanError();
                    if (editNicknameForm && nicknameStatusForm) {
                        nicknameInput.value = oldNickname;
                        editNicknameForm.style.display = 'none';
                        nicknameStatusForm.style.display = 'block';
                    }
                }
            });
        }

        if (setUsernameButton) {
            this.UserViewInstance.attachEvent(setUsernameButton, {
                eventName: 'click',
                event: (e) => {
                    e.preventDefault();
                    cleanError();
                    const newNicknameTemp = nicknameInput.value;
                    if (isVoid(nicknameInput.value)) {
                        manageError('useris-username-error');
                        return;
                    }

                    this.callback('onSaveNickname', {
                        oldNickname,
                        newNickname: newNicknameTemp,
                        callbackSuccess: (newNickname) => {
                            nicknameStatus.innerText = newNickname;
                            editNicknameForm.style.display = 'none';
                            nicknameStatusForm.style.display = 'block';
                        }
                    });
                }
            });
        }
    }
}