remote/view.js

gistfile1.txt

import PropTypes from 'prop-types';
import React from 'react';
import FacebookLogin from '../../components/facebook_login';
import DraftDetail from '../drafts/detail';
import DraftList from '../drafts/list';
import Toast from '../../components/toast';
import Loader from '../../components/loader';
import PubHubLoader from '../../components/pubhub-loader';
import Icons from '../../components/icons';
import cn from 'classnames';
import { get } from 'lodash';

const AuthWrap = (props) => {
    if (props.hasAuthWrap) {
        return (
            <FacebookLogin { ...props }
                onFacebookAccess={props.onFacebookPermissions}
                appId={window.GLOBAL.fbAppId}
                scope="public_profile,publish_pages,manage_pages"
                autoLoad={true}
                status={true}
                cookie={true}
                xfbml={true}>
                {props.children}
            </FacebookLogin>
        );
    } else {
        return (
            <span style={{ width: '100%' }}>
                {props.children}
            </span>
        );
    }
};

AuthWrap.propTypes = {
    onFacebookLogin: PropTypes.func.isRequired,
    onFacebookAccounts: PropTypes.func.isRequired,
    onFacebookPermissions: PropTypes.func.isRequired,
    onFacebookLogout: PropTypes.func.isRequired,
    onDraftFacebookAccounts: PropTypes.func,
    onChannelFacebookAccounts: PropTypes.func,
    children: PropTypes.array,
    platform: PropTypes.string,
};

const Remote = (props) => {
    const {
        isPlatformSelect,
        isDraftDetailVisible,
        hasReadWritePermissions,
        hasAutoLogin,
        hasFacebookAccounts,
        hasInstagramAccounts,
        draft,
        onFacebookLogin,
        onFacebookLogout,
        onFacebookAccounts,
        onFacebookPermissions,
        onDraftFacebookAccounts,
        onChannelFacebookAccounts,
        onSetType,
        onOpenAuth,
        notification,
        onClearToast,
        authentication,
        selectedDraftId,
        hasSidebar,
        isUserChannelsLoading,
        needsAuthentication,
        permissionsRevoked,
        isInstagramValid,
        isFilesizeValid,
        isFileTypeValid,
        isValidDomain,
        } = props;
    const hasAuthWrap = ['facebook', 'instagram'].includes(get(draft, 'platform'));
    const { authResponse, accounts } = authentication.facebook.loaded;
    const isFacebookAuthLoading = (authentication.facebook.authResponse.accessToken === null && hasAutoLogin);
    const isFacebookAccountsLoading = !!authResponse && !accounts;
    const isInstagramDetail = (get(draft, 'platform') === 'instagram') && !isPlatformSelect;
    const isLoading = (isFacebookAuthLoading || isFacebookAccountsLoading || isUserChannelsLoading);
    const hasLoader = isLoading && !isInstagramDetail;
    const detailClasses = cn('col', 'xs-full-height', 'fill-white', {
        'xs-col--63 xs-border-left-lighter': hasSidebar,
        'xs-col--12': !hasSidebar,
    });
    const remoteClasses = cn('remote-view', { 'has-toast': notification.type });
    const facebookLogoutClass = cn({ 'span--logout': hasAuthWrap });
    const facebookLoginClass = cn('xs-text-center', { 'span--login': hasAuthWrap });
    const publishInstagramClass = cn('button button--icon button--black button--secondary button--small',
        { 'button--disabled': !isInstagramValid }
    );
    const publishInstagramHandler = (isInstagramValid) ? () => onSetType('instagram', 'image', 'image') : () => {};
    return (
        <div className={remoteClasses}>
            {notification.type && (notification.type !== 'createPublishJob') &&
            <Toast
                message={notification.message}
                loader={notification.loader}
                status={notification.status}
                link={notification.link}
                onClear={onClearToast}
                modifiers={notification.modifiers}
            />
            }
            <div className="xs-flex xs-flex-justify-center">
                {hasReadWritePermissions && !isPlatformSelect &&
                <AuthWrap { ...props } hasAuthWrap={hasAuthWrap}>
                    <span className={facebookLogoutClass}>
                        <div className="col xs-col-12 xs-full-height">
                            {hasSidebar &&
                            <div className="col xs-col--37 xs-full-height fill-gray-lighter">
                                <DraftList
                                    isRemote={true}
                                    needsAuthentication={needsAuthentication}
                                    selectedDraftId={selectedDraftId}
                                    referenceCode={''} />
                            </div>
                            }
                            <div className={detailClasses}>
                                {isDraftDetailVisible &&
                                <DraftDetail
                                    isRemote={true}
                                    draft={draft}
                                    accountRevoked={false}
                                    needsAuthentication={needsAuthentication}
                                    permissionsRevoked={permissionsRevoked}
                                    hasReadWritePermissions={hasReadWritePermissions}
                                    selectedDraftId={selectedDraftId}
                                    referenceCode={''}/>
                                }
                                {(!isDraftDetailVisible) &&
                                <div className="loader-start remote-start">
                                    <div className="loader-start__body">
                                        <PubHubLoader />
                                        <h2 className="loader-start__copy">
                                            No drafts selected.
                                        </h2>
                                    </div>
                                </div>
                                }
                            </div>
                        </div>
                    </span>
                    {hasAuthWrap &&
                    <span className={facebookLoginClass}>
                        <i className="icon icon-pubhub icon-header icon-header--lg xs-pt5 xs-mt3 xs-pb5"></i>
                        {!hasLoader &&
                        <div className="xs-pt5 xs-mt5">
                            <h2 className="xs-pb1">Link to your Facebook</h2>
                            <h2 className="xs-pb5">Account in order to Publish</h2>
                            <button className="button button--black button--secondary button--small button--icon">
                                Login to Facebook
                            </button>
                        </div>
                        }
                        {hasLoader &&
                        <Loader/>
                        }
                    </span>
                    }
                </AuthWrap>
                }
                {isPlatformSelect &&
                <span className="xs-text-center">
                    <i className="icon icon-pubhub icon-header icon-header--lg xs-pt5 xs-mt3 xs-pb5"></i>
                    <h2 className="xs-pb1">Choose a platform to publish</h2>
                    <div className="clearfix xs-m4 xs-p4"/>
                    <div className="xs-mt5">
                        {hasFacebookAccounts && !hasLoader &&
                        <button onClick={() => onSetType('facebook', 'image', 'photo')}
                            className="button button--icon button--black button--secondary button--small">
                            <Icons type="facebook"/>
                            Publish to Facebook
                        </button>
                        }
                        {!hasFacebookAccounts && !hasLoader &&
                        <FacebookLogin
                            onFacebookLogin={onFacebookLogin}
                            onFacebookAccounts={onFacebookAccounts}
                            onFacebookAccess={onFacebookPermissions}
                            onFacebookLogout={onFacebookLogout}
                            onDraftFacebookAccounts={onDraftFacebookAccounts}
                            onChannelFacebookAccounts={onChannelFacebookAccounts}
                            appId={window.GLOBAL.fbAppId}
                            scope="public_profile,publish_pages,manage_pages"
                            autoLoad={true}
                            status={true}
                            cookie={true}
                            xfbml={true}>
                            <button id="facebook-button"
                                className="button button--icon button--black button--secondary button--small">
                                <Icons type="facebook"/>
                                Login to Facebook
                            </button>
                            <div id="facebook-popover" className="popover-top popover-top--gray xs-mb2 xs-text-left">
                                <span>
                                    <Icons type="circle-information"/>
                                    You don't have access to any Facebook accounts.
                                    You will be redirected to a new window where you can add your accounts.
                                </span>
                            </div>
                        </FacebookLogin>
                        }
                        <div className="clearfix xs-m1"/>
                        {hasInstagramAccounts && !hasLoader &&
                        <span>
                            <button id="instagram-button" onClick={publishInstagramHandler} className={publishInstagramClass}>
                                <Icons type="instagram"/>
                                Publish to Instagram
                            </button>
                            {!isInstagramValid &&
                            <div id="instagram-popover-error" className="popover-bottom popover-bottom--gray xs-mb2 xs-mt2 xs-text-left">
                                {!isFilesizeValid &&
                                <span>
                                    <Icons type="circle-information"/>
                                    This photo is over the accepted file size for Instagram.
                                    The maximum file size is 8MB.
                                </span>
                                }
                                {(!isFileTypeValid || !isValidDomain) &&
                                <span>
                                    <Icons type="circle-information"/>
                                    This photo file type is not supported for Instagram.
                                    The accepted file types include JPEG and PNGs
                                    hosted on img.buzzfeed.com.
                                </span>
                                }
                            </div>
                            }
                        </span>
                        }
                        {!hasInstagramAccounts && !hasLoader &&
                        <span>
                            <button onClick={() => onOpenAuth('instagram', 'image', 'image')} id="instagram-button"
                                className="button button--icon button--black button--secondary button--small">
                                <Icons type="instagram"/>
                                Login to Instagram
                            </button>
                            <div id="instagram-popover" className="popover-bottom popover-bottom--gray xs-mb2 xs-mt2 xs-text-left">
                                <span>
                                    <Icons type="circle-information"/>
                                    You don't have access to any Instagram accounts.
                                    You will be redirected to a new page where you can add your accounts.
                                </span>
                            </div>
                        </span>
                        }
                        {hasLoader &&
                        <FacebookLogin
                            onFacebookLogin={onFacebookLogin}
                            onFacebookAccounts={onFacebookAccounts}
                            onFacebookAccess={onFacebookPermissions}
                            onFacebookLogout={onFacebookLogout}
                            onDraftFacebookAccounts={onDraftFacebookAccounts}
                            onChannelFacebookAccounts={onChannelFacebookAccounts}
                            appId={window.GLOBAL.fbAppId}
                            scope="public_profile,publish_pages,manage_pages"
                            autoLoad={true}
                            status={true}
                            cookie={true}
                            xfbml={true}>
                            <Loader/>
                        </FacebookLogin>
                        }
                    </div>
                </span>
                }
                {!hasReadWritePermissions && !isPlatformSelect &&
                <span className="xs-text-center">
                    <i className="icon icon-pubhub icon-header icon-header--lg xs-pt5 xs-mt3 xs-pb5"></i>
                    <div className="xs-pt5 xs-mt5">
                        <h3 className="xs-pb1">
                            You do not have permissions to publish to facebook.
                        </h3>
                        <h3 className="xs-pb5">
                            Reach out to
                            &nbsp;<a href="slack://channel?team=T024F48D5&id=C1AJXKEKX">#pubhub-help</a> on slack.
                        </h3>
                    </div>
                </span>
                }
            </div>
        </div>
    );
};

Remote.propTypes = {
    isPlatformSelect: PropTypes.bool,
    isDraftDetailVisible: PropTypes.bool,
    hasReadWritePermissions: PropTypes.bool,
    hasFacebookAccounts: PropTypes.bool,
    hasInstagramAccounts: PropTypes.bool,
    needsAuthentication: PropTypes.bool,
    permissionsRevoked: PropTypes.bool,
    accountRevoked: PropTypes.bool,
    authenticationLoaded: PropTypes.object,
    hasAutoLogin: PropTypes.bool,
    hasReadWritePermissions: PropTypes.bool,
    draft: PropTypes.object,
    channels: PropTypes.array,
    authentication: PropTypes.object,
    onFacebookLogin: PropTypes.func.isRequired,
    onFacebookLogout: PropTypes.func.isRequired,
    onFacebookAccounts: PropTypes.func.isRequired,
    onFacebookPermissions: PropTypes.func.isRequired,
    onDraftFacebookAccounts: PropTypes.func,
    onChannelFacebookAccounts: PropTypes.func,
    onSetType: PropTypes.func,
    onOpenAuth: PropTypes.func,
    notification: PropTypes.object,
    onClearToast: PropTypes.func.isRequired,
    selectedDraftId: PropTypes.number,
    hasSidebar: PropTypes.bool,
    isUserChannelsLoading: PropTypes.bool,
    isInstagramValid: PropTypes.bool.isRequired,
    isFilesizeValid: PropTypes.bool.isRequired,
    isFileTypeValid: PropTypes.bool.isRequired,
    isValidDomain: PropTypes.bool.isRequired,
};

export default Remote;