Open and close admin panel from parent component

src/components/adminpanel/adminpanel.jsx

@@ -1,73 +1,49 @@
-const bindAll = require('lodash.bindall');
 const classNames = require('classnames');
-const connect = require('react-redux').connect;
 const PropTypes = require('prop-types');
 const React = require('react');
 
 require('./adminpanel.scss');
 
-class AdminPanel extends React.Component {
-    constructor (props) {
-        super(props);
-        bindAll(this, [
-            'handleToggleVisibility'
-        ]);
-        this.state = {
-            showPanel: false
-        };
-    }
-    handleToggleVisibility (e) {
-        e.preventDefault();
-        this.setState({showPanel: !this.state.showPanel});
-    }
-    render () {
-        if (!this.props.isAdmin) return false;
-        return (
-            <div
-                className={classNames(
-                    'admin-panel', this.props.className, {
-                        hidden: !this.state.showPanel
-                    }
-                )}
+const AdminPanel = ({
+    className,
+    children,
+    isOpen,
+    onOpen,
+    onClose
+}) => (
+    <div className={classNames('admin-panel', className, {hidden: !isOpen})}>
+        {isOpen ? (
+            <React.Fragment>
+                <span
+                    className="toggle"
+                    onClick={onClose}
+                >
+                    x
+                </span>
+                <div className="admin-header">
+                    <h3>Admin Panel</h3>
+                </div>
+                <div className="admin-content">
+                    {children}
+                </div>
+            </React.Fragment>
+        ) : (
+            <span
+                className="toggle"
+                onClick={onOpen}
             >
-                {this.state.showPanel ? (
-                    <React.Fragment>
-                        <span
-                            className="toggle"
-                            onClick={this.handleToggleVisibility}
-                        >
-                            x
-                        </span>
-                        <div className="admin-header">
-                            <h3>Admin Panel</h3>
-                        </div>
-                        <div className="admin-content">
-                            {this.props.children}
-                        </div>
-                    </React.Fragment>
-                ) : (
-                    <span
-                        className="toggle"
-                        onClick={this.handleToggleVisibility}
-                    >
-                        &gt;
-                    </span>
-                )}
-            </div>
-        );
-    }
-}
+                &gt;
+            </span>
+        )}
+    </div>
+);
 
 AdminPanel.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
-    isAdmin: PropTypes.bool
+    isOpen: PropTypes.bool,
+    onClose: PropTypes.func,
+    onOpen: PropTypes.func
 };
 
-const mapStateToProps = state => ({
-    isAdmin: state.permissions.admin
-});
-
-const ConnectedAdminPanel = connect(mapStateToProps)(AdminPanel);
-
-module.exports = ConnectedAdminPanel;
+module.exports = AdminPanel;

src/views/preview/presentation.jsx

@@ -47,6 +47,7 @@ const onKeyPress = e => {
 const PreviewPresentation = ({
     addToStudioOpen,
     adminModalOpen,
+    adminPanelOpen,
     assetHost,
     backpackHost,
     canAddToStudio,
@@ -77,11 +78,13 @@ const PreviewPresentation = ({
     onAddComment,
     onAddToStudioClicked,
     onAddToStudioClosed,
+    onCloseAdminPanel,
     onCopyProjectLink,
     onDeleteComment,
     onFavoriteClicked,
     onLoadMore,
     onLoveClicked,
+    onOpenAdminPanel,
     onRemix,
     onReportClicked,
     onReportClose,
@@ -164,8 +167,12 @@ const PreviewPresentation = ({
         <div className="preview">
             <AdminPanel
                 className={classNames('project-admin-panel', {
-                    'modal-open': adminModalOpen
+                    'admin-panel-open': adminPanelOpen,
+                    'modal-open': adminModalOpen,
                 })}
+                isOpen={adminPanelOpen}
+                onClose={onCloseAdminPanel}
+                onOpen={onOpenAdminPanel}
             >
                 <iframe
                     className={classNames('admin-iframe', {
@@ -545,6 +552,7 @@ const PreviewPresentation = ({
 PreviewPresentation.propTypes = {
     addToStudioOpen: PropTypes.bool,
     adminModalOpen: PropTypes.bool,
+    adminPanelOpen: PropTypes.bool,
     assetHost: PropTypes.string,
     backpackHost: PropTypes.string,
     canAddToStudio: PropTypes.bool,
@@ -578,11 +586,13 @@ PreviewPresentation.propTypes = {
     onAddComment: PropTypes.func,
     onAddToStudioClicked: PropTypes.func,
     onAddToStudioClosed: PropTypes.func,
+    onCloseAdminPanel: PropTypes.func,
     onCopyProjectLink: PropTypes.func,
     onDeleteComment: PropTypes.func,
     onFavoriteClicked: PropTypes.func,
     onLoadMore: PropTypes.func,
     onLoveClicked: PropTypes.func,
+    onOpenAdminPanel: PropTypes.func,
     onRemix: PropTypes.func,
     onReportClicked: PropTypes.func.isRequired,
     onReportClose: PropTypes.func.isRequired,

src/views/preview/project-view.jsx

@@ -47,6 +47,8 @@ class Preview extends React.Component {
             'handleLoveToggle',
             'handleMessage',
             'handlePopState',
+            'handleCloseAdminPanel',
+            'handleOpenAdminPanel',
             'handleReportClick',
             'handleReportClose',
             'handleReportComment',
@@ -263,6 +265,12 @@ class Preview extends React.Component {
     handleDeleteComment (id, topLevelCommentId) {
         this.props.handleDeleteComment(this.state.projectId, id, topLevelCommentId, this.props.user.token);
     }
+    handleCloseAdminPanel () {
+        this.setState({adminPanelOpen: false});
+    }
+    handleOpenAdminPanel () {
+        this.setState({adminPanelOpen: true});
+    }
     handleMessage (messageEvent) {
         if (messageEvent.data === 'showDialog') {
             this.setState({
@@ -482,6 +490,7 @@ class Preview extends React.Component {
                     <PreviewPresentation
                         addToStudioOpen={this.state.addToStudioOpen}
                         adminModalOpen={this.state.adminModalOpen}
+                        adminPanelOpen={this.state.adminPanelOpen}
                         assetHost={this.props.assetHost}
                         backpackHost={this.props.backpackHost}
                         canAddToStudio={this.props.canAddToStudio}
@@ -524,11 +533,13 @@ class Preview extends React.Component {
                         onAddComment={this.handleAddComment}
                         onAddToStudioClicked={this.handleAddToStudioClick}
                         onAddToStudioClosed={this.handleAddToStudioClose}
+                        onCloseAdminPanel={this.handleCloseAdminPanel}
                         onCopyProjectLink={this.handleCopyProjectLink}
                         onDeleteComment={this.handleDeleteComment}
                         onFavoriteClicked={this.handleFavoriteToggle}
                         onLoadMore={this.handleLoadMore}
                         onLoveClicked={this.handleLoveToggle}
+                        onOpenAdminPanel={this.handleOpenAdminPanel}
                         onRemix={this.handleRemix}
                         onReportClicked={this.handleReportClick}
                         onReportClose={this.handleReportClose}

src/views/splash/presentation.jsx

@@ -530,7 +530,12 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
                     {featured}
 
                     {this.props.isAdmin && (
-                        <AdminPanel className="splash-admin-panel">
+                        <AdminPanel
+                            className="splash-admin-panel"
+                            isOpen={this.props.adminPanelOpen}
+                            onClose={this.props.onCloseAdminPanel}
+                            onOpen={this.props.onOpenAdminPanel}
+                        >
                             <dl>
                                 <dt>Tools</dt>
                                 <dd>
@@ -597,6 +602,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
 
 SplashPresentation.propTypes = {
     activity: PropTypes.arrayOf(PropTypes.object),
+    adminPanelOpen: PropTypes.bool,
     emailConfirmationModalOpen: PropTypes.bool.isRequired,
     featuredGlobal: PropTypes.shape({
         community_featured_projects: PropTypes.array,
@@ -614,6 +620,8 @@ SplashPresentation.propTypes = {
     news: PropTypes.arrayOf(PropTypes.object),
     onDismiss: PropTypes.func.isRequired,
     onHideEmailConfirmationModal: PropTypes.func.isRequired,
+    onCloseAdminPanel: PropTypes.func.isRequired,
+    onOpenAdminPanel: PropTypes.func.isRequired,
     onRefreshHomepageCache: PropTypes.func.isRequired,
     onShowEmailConfirmationModal: PropTypes.func.isRequired,
     projectCount: PropTypes.number,

src/views/splash/splash.jsx

@@ -22,11 +22,14 @@ class Splash extends React.Component {
             'getHomepageRefreshStatus',
             'handleShowEmailConfirmationModal',
             'handleHideEmailConfirmationModal',
+            'handleCloseAdminPanel',
+            'handleOpenAdminPanel',
             'handleDismiss',
             'shouldShowWelcome',
             'shouldShowEmailConfirmation'
         ]);
         this.state = {
+            adminPanelOpen: false,
             projectCount: 30000000, // gets the shared project count
             news: [], // gets news posts from the scratch Tumblr
             emailConfirmationModalOpen: false, // flag that determines whether to show banner to request email conf.
@@ -118,6 +121,12 @@ class Splash extends React.Component {
         }
         return status;
     }
+    handleCloseAdminPanel () {
+        this.setState({adminPanelOpen: false});
+    }
+    handleOpenAdminPanel () {
+        this.setState({adminPanelOpen: true});
+    }
     handleShowEmailConfirmationModal () {
         this.setState({emailConfirmationModalOpen: true});
     }
@@ -156,6 +165,7 @@ class Splash extends React.Component {
         return (
             <SplashPresentation
                 activity={this.props.activity}
+                adminPanelOpen={this.state.adminPanelOpen}
                 emailConfirmationModalOpen={this.state.emailConfirmationModalOpen}
                 featuredGlobal={this.props.featured}
                 inStudiosFollowing={this.props.studios}
@@ -170,8 +180,10 @@ class Splash extends React.Component {
                 shouldShowEmailConfirmation={showEmailConfirmation}
                 shouldShowWelcome={showWelcome}
                 user={this.props.user}
+                onCloseAdminPanel={this.handleCloseAdminPanel}
                 onDismiss={this.handleDismiss}
                 onHideEmailConfirmationModal={this.handleHideEmailConfirmationModal}
+                onOpenAdminPanel={this.handleOpenAdminPanel}
                 onRefreshHomepageCache={this.handleRefreshHomepageCache}
                 onShowEmailConfirmationModal={this.handleShowEmailConfirmationModal}
             />