application/components/admin/connect.js

import React, {Component} from 'react';
import Immutable from 'immutable';

import {List, ListItem} from 'material-ui/List';
import Subheader from 'material-ui/Subheader';
import Divider from 'material-ui/Divider';

import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import IconButton from 'material-ui/IconButton';
import TextField from 'material-ui/TextField';

import {Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle} from 'material-ui/Toolbar';

import {connect} from 'react-redux';
import Config from '../../config';
import ExpandingCard from './../expanding-card';

import {
    snackbarShowMessage
} from './../../redux/actions/snackbar-actions';

import {Row, Col} from './../flexbox';

class ConnectCard extends Component {
    constructor(props) {
        super(props);

        this.state = {
            expanded: false,
        };
    }

    handleToggle(expanded) {
        if (this.props.onToggle) {
            this.props.onToggle('connect', expanded);
        }

        if (expanded && !this.state.hasLoaded) {
            const {dispatch} = this.props;
            // dispatch(usersMaybeFetch())
            //     .then(() => dispatch(aclsMaybeFetch()))
            //     .then(() => this.setState({hasLoaded: true}));
        }
    }

    render() {
        return (
            <ExpandingCard
                onToggle={this.handleToggle.bind(this)}
                title="CEOConnect"
                subtitle="Connections for Adobe Creative Cloud applications"
                expanded={this.props.openCard === 'connect'}
                >
                {
                    Config.get('ccl')
                    ? (
                        <Row>
                            <Col xs={8} offsetXs={2} middle='xs' className='align-center'>
                                There are <strong>two methods</strong> for managing plugins:
                            </Col>
                            <Col xs={4} offsetXs={2}>
                                <h3>Recommended Method: Adobe Addon Store</h3>
                                <p>
                                    CEOConnect plugins can be downloaded from <a href="https://creative.adobe.com/addons/producers/454467" target="_blank">Adobe Addons</a>. The Adobe Addons website will keep all your plugins up-to-date automatically.
                                    <br />
                                    This requires unique Adobe IDs for each of your workstations.
                                </p>
                                <a href="https://creative.adobe.com/addons/producers/454467" target="_blank">
                                    <RaisedButton
                                        label="Go to Adobe Addons"
                                        secondary={true}
                                        />
                                </a>
                            </Col>
                            <Col xs={4} offsetXs={1}>
                                <h3>Advanced Method: Manual Install</h3>
                                <p>If you do not have unique Adobe IDs for each workstation, or you must manage each plugin install manually, you can download the <a href="http://static.getsnworks.com/ceo/connect/" target="_blank">plugins directly</a>.</p>
                                <a href="http://static.getsnworks.com/ceo/connect/" target="_blank">
                                <RaisedButton
                                    label="Go to direct download"
                                    secondary={true}
                                    />
                                </a>
                            </Col>
                       </Row>
                    )
                    : (
                        <p><strong>Your account does not include CEOConnect.</strong></p>
                    )
                }
            </ExpandingCard>
        );
    }
}

export default ConnectCard;