Split ApplicationsIndex into smaller parts

src/components/dev/apps/ApplicationsIndex.js

@@ -6,7 +6,6 @@ import { FormattedMessage as Message } from 'react-intl';
 import { Helmet } from 'react-helmet';
 import { LinkButton } from 'components/ui/form';
 import { COLOR_GREEN, COLOR_BLUE } from 'components/ui';
-import { restoreScroll } from 'components/ui/scroll/scroll';
 import { ContactLink } from 'components/contact';
 
 import styles from './applicationsIndex.scss';
@@ -14,127 +13,23 @@ import messages from './ApplicationsIndex.intl.json';
 import cubeIcon from './icons/cube.svg';
 import loadingCubeIcon from './icons/loading-cube.svg';
 import toolsIcon from './icons/tools.svg';
-import ApplicationItem from './ApplicationItem';
+import ApplicationsList from './list';
 
 type Props = {
     clientId?: ?string,
     displayForGuest: bool,
     applications: Array<OauthAppResponse>,
     isLoading: bool,
-    deleteApp: (string) => Promise<any>,
-    resetApp: (string, bool) => Promise<any>,
+    deleteApp: string => Promise<any>,
+    resetApp: (string, bool) => Promise<any>
 };
 
-type State = {
-    expandedApp: ?string,
-};
-
-export default class ApplicationsIndex extends Component<Props, State> {
-    state = {
-        expandedApp: null,
-    };
-
-    appsRefs: {[key: string]: ?HTMLDivElement} = {};
-
-    componentDidUpdate(prevProps: Props) {
-        const { applications, isLoading, clientId } = this.props;
-
-        if (isLoading !== prevProps.isLoading && applications.length) {
-            if (clientId && applications.some((app) => app.clientId === clientId)) {
-                requestAnimationFrame(() => this.onTileClick(clientId));
-            }
-        }
-    }
-
+export default class ApplicationsIndex extends Component<Props> {
     render() {
-        const { displayForGuest, applications, isLoading, resetApp, deleteApp } = this.props;
-        const { expandedApp } = this.state;
-
-        let content: Node;
-
-        if (displayForGuest) {
-            content = (
-                <div className={styles.emptyState}>
-                    <img src={toolsIcon} className={styles.emptyStateIcon} />
-                    <div className={styles.emptyStateText}>
-                        <div>
-                            <Message {...messages.weDontKnowAnythingAboutYou}/>
-                        </div>
-                        <div>
-                            <Message {...messages.youMustAuthToBegin}/>
-                        </div>
-                    </div>
-
-                    <LinkButton
-                        to="/login"
-                        label={messages.authorization}
-                        color={COLOR_BLUE}
-                        className={styles.emptyStateActionButton}
-                    />
-                </div>
-            );
-        } else if (isLoading) {
-            content = (
-                <div className={styles.emptyState}>
-                    <img src={loadingCubeIcon} className={styles.loadingStateIcon} />
-                </div>
-            );
-        } else if (applications.length > 0) {
-            content = (
-                <div>
-                    <div className={styles.appsListTitleContainer}>
-                        <div className={styles.appsListTitle}>
-                            <Message {...messages.yourApplications} />
-                        </div>
-                        <LinkButton
-                            to="/dev/applications/new"
-                            label={messages.addNew}
-                            color={COLOR_GREEN}
-                            className={styles.appsListAddNewAppBtn}
-                        />
-                    </div>
-                    <div className={styles.appsListContainer}>
-                        {applications.map((app: OauthAppResponse) => (
-                            <div key={app.clientId} ref={(elem) => {this.appsRefs[app.clientId] = elem;}}>
-                                <ApplicationItem
-                                    application={app}
-                                    expand={app.clientId === expandedApp}
-                                    onTileClick={this.onTileClick}
-                                    onResetSubmit={resetApp}
-                                    onDeleteSubmit={deleteApp}
-                                />
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            );
-        } else {
-            content = (
-                <div className={styles.emptyState}>
-                    <img src={cubeIcon} className={styles.emptyStateIcon} />
-                    <div className={styles.emptyStateText}>
-                        <div>
-                            <Message {...messages.youDontHaveAnyApplication}/>
-                        </div>
-                        <div>
-                            <Message {...messages.shallWeStart}/>
-                        </div>
-                    </div>
-
-                    <LinkButton
-                        to="/dev/applications/new"
-                        label={messages.addNew}
-                        color={COLOR_GREEN}
-                        className={styles.emptyStateActionButton}
-                    />
-                </div>
-            );
-        }
-
         return (
             <div className={styles.container}>
                 <div className={styles.welcomeContainer}>
-                    <Message {...messages.accountsForDevelopers} >
+                    <Message {...messages.accountsForDevelopers}>
                         {(pageTitle: string) => (
                             <h2 className={styles.welcomeTitle}>
                                 <Helmet title={pageTitle} />
@@ -144,38 +39,120 @@ export default class ApplicationsIndex extends Component<Props, State> {
                     </Message>
                     <div className={styles.welcomeTitleDelimiter} />
                     <div className={styles.welcomeParagraph}>
-                        <Message {...messages.accountsAllowsYouYoUseOauth2} values={{
-                            ourDocumentation: (
-                                <a href="http://docs.ely.by/oauth.html" target="_blank">
-                                    <Message {...messages.ourDocumentation} />
-                                </a>
-                            ),
-                        }} />
+                        <Message
+                            {...messages.accountsAllowsYouYoUseOauth2}
+                            values={{
+                                ourDocumentation: (
+                                    <a
+                                        href="http://docs.ely.by/oauth.html"
+                                        target="_blank"
+                                    >
+                                        <Message
+                                            {...messages.ourDocumentation}
+                                        />
+                                    </a>
+                                )
+                            }}
+                        />
                     </div>
                     <div className={styles.welcomeParagraph}>
-                        <Message {...messages.ifYouHaveAnyTroubles} values={{
-                            feedback: (
-                                <ContactLink>
-                                    <Message {...messages.feedback} />
-                                </ContactLink>
-                            ),
-                        }} />
+                        <Message
+                            {...messages.ifYouHaveAnyTroubles}
+                            values={{
+                                feedback: (
+                                    <ContactLink>
+                                        <Message {...messages.feedback} />
+                                    </ContactLink>
+                                )
+                            }}
+                        />
                     </div>
                 </div>
 
-                {content}
+                {this.getContent()}
             </div>
         );
     }
 
-    onTileClick = (clientId: string) => {
-        const expandedApp = this.state.expandedApp === clientId ? null : clientId;
+    getContent() {
+        const {
+            displayForGuest,
+            applications,
+            isLoading,
+            resetApp,
+            deleteApp,
+            clientId
+        } = this.props;
 
-        this.setState({expandedApp}, () => {
-            if (expandedApp !== null) {
-                // TODO: @SleepWalker: мб у тебя есть идея, как это сделать более правильно и менее дёргано?
-                setTimeout(() => restoreScroll(this.appsRefs[clientId]), 150);
-            }
-        });
-    };
+        if (displayForGuest) {
+            return <Guest />;
+        } else if (isLoading) {
+            return <Loader />;
+        } else if (applications.length > 0) {
+            return (
+                <ApplicationsList
+                    applications={applications}
+                    resetApp={resetApp}
+                    deleteApp={deleteApp}
+                    clientId={clientId}
+                />
+            );
+        }
+
+        return <NoApps />;
+    }
+}
+
+function Loader() {
+    return (
+        <div className={styles.emptyState}>
+            <img src={loadingCubeIcon} className={styles.loadingStateIcon} />
+        </div>
+    );
+}
+
+function Guest() {
+    return (
+        <div className={styles.emptyState}>
+            <img src={toolsIcon} className={styles.emptyStateIcon} />
+            <div className={styles.emptyStateText}>
+                <div>
+                    <Message {...messages.weDontKnowAnythingAboutYou} />
+                </div>
+                <div>
+                    <Message {...messages.youMustAuthToBegin} />
+                </div>
+            </div>
+
+            <LinkButton
+                to="/login"
+                label={messages.authorization}
+                color={COLOR_BLUE}
+                className={styles.emptyStateActionButton}
+            />
+        </div>
+    );
+}
+
+function NoApps() {
+    return (
+        <div className={styles.emptyState}>
+            <img src={cubeIcon} className={styles.emptyStateIcon} />
+            <div className={styles.emptyStateText}>
+                <div>
+                    <Message {...messages.youDontHaveAnyApplication} />
+                </div>
+                <div>
+                    <Message {...messages.shallWeStart} />
+                </div>
+            </div>
+
+            <LinkButton
+                to="/dev/applications/new"
+                label={messages.addNew}
+                color={COLOR_GREEN}
+                className={styles.emptyStateActionButton}
+            />
+        </div>
+    );
 }

src/components/dev/apps/list/ApplicationItem.js

@@ -9,44 +9,162 @@ import { SKIN_LIGHT, COLOR_BLACK, COLOR_RED } from 'components/ui';
 import { Input, Button } from 'components/ui/form';
 import Collapse from 'components/ui/collapse';
 
-import styles from './applicationsIndex.scss';
-import messages from './ApplicationsIndex.intl.json';
+import styles from '../applicationsIndex.scss';
+import messages from '../ApplicationsIndex.intl.json';
 
 const ACTION_REVOKE_TOKENS = 'revoke-tokens';
 const ACTION_RESET_SECRET = 'reset-secret';
 const ACTION_DELETE = 'delete';
+const actionButtons = [
+    {
+        type: ACTION_REVOKE_TOKENS,
+        label: messages.revokeAllTokens
+    },
+    {
+        type: ACTION_RESET_SECRET,
+        label: messages.resetClientSecret
+    },
+    {
+        type: ACTION_DELETE,
+        label: messages.delete
+    }
+];
 
-export default class ApplicationItem extends Component<{
-    application: OauthAppResponse,
-    expand: bool,
-    onTileClick: (string) => void,
-    onResetSubmit: (string, bool) => Promise<*>,
-    onDeleteSubmit: (string) => Promise<*>,
-}, {
-    selectedAction: ?string,
-    isActionPerforming: bool,
-    detailsHeight: number,
-}> {
+export default class ApplicationItem extends Component<
+    {
+        application: OauthAppResponse,
+        expand: bool,
+        onTileClick: string => void,
+        onResetSubmit: (string, bool) => Promise<*>,
+        onDeleteSubmit: string => Promise<*>
+    },
+    {
+        selectedAction: ?string,
+        isActionPerforming: bool,
+        detailsHeight: number
+    }
+> {
     state = {
         selectedAction: null,
         isActionPerforming: false,
-        detailsHeight: 0,
+        detailsHeight: 0
     };
 
     render() {
         const { application: app, expand } = this.props;
-        const { selectedAction, isActionPerforming } = this.state;
+        const { selectedAction } = this.state;
 
-        let actionContent: Node;
+        return (
+            <div
+                className={classNames(styles.appItemContainer, {
+                    [styles.appExpanded]: expand
+                })}
+            >
+                <div className={styles.appItemTile} onClick={this.onTileToggle}>
+                    <div className={styles.appTileTitle}>
+                        <div className={styles.appName}>{app.name}</div>
+                        <div className={styles.appStats}>
+                            Client ID: {app.clientId}
+                            {typeof app.countUsers !== 'undefined' && (
+                                <span>
+                                    {' | '}
+                                    <Message
+                                        {...messages.countUsers}
+                                        values={{
+                                            count: app.countUsers
+                                        }}
+                                    />
+                                </span>
+                            )}
+                        </div>
+                    </div>
+                    <div className={styles.appItemToggle}>
+                        <div className={styles.appItemToggleIcon} />
+                    </div>
+                </div>
+
+                <Collapse isOpened={expand} onRest={this.onCollapseRest}>
+                    <div className={styles.appDetailsContainer}>
+                        <div className={styles.appDetailsInfoField}>
+                            <Link
+                                to={`/dev/applications/${app.clientId}`}
+                                className={styles.editAppLink}
+                            >
+                                <Message
+                                    {...messages.editDescription}
+                                    values={{
+                                        icon: (
+                                            <div
+                                                className={styles.pencilIcon}
+                                            />
+                                        )
+                                    }}
+                                />
+                            </Link>
+                            <Input
+                                label="Client ID:"
+                                skin={SKIN_LIGHT}
+                                disabled
+                                value={app.clientId}
+                                copy
+                            />
+                        </div>
+
+                        <div className={styles.appDetailsInfoField}>
+                            <Input
+                                label="Client Secret:"
+                                skin={SKIN_LIGHT}
+                                disabled
+                                value={app.clientSecret}
+                                copy
+                            />
+                        </div>
+
+                        <div className={styles.appDetailsDescription}>
+                            <Message
+                                {...messages.ifYouSuspectingThatSecretHasBeenCompromised}
+                            />
+                        </div>
+
+                        <div className={styles.appActionsButtons}>
+                            {actionButtons.map(({ type, label }) => (
+                                <Button
+                                    key={type}
+                                    label={label}
+                                    color={COLOR_BLACK}
+                                    className={styles.appActionButton}
+                                    disabled={
+                                        selectedAction
+                                        && selectedAction !== type
+                                    }
+                                    onClick={this.onActionButtonClick(type)}
+                                    small
+                                />
+                            ))}
+                        </div>
+
+                        {this.getActionContent()}
+                    </div>
+                </Collapse>
+            </div>
+        );
+    }
+
+    getActionContent() {
+        const { selectedAction, isActionPerforming } = this.state;
 
         switch (selectedAction) {
             case ACTION_REVOKE_TOKENS:
             case ACTION_RESET_SECRET:
-                actionContent = (
+                return (
                     <div>
                         <div className={styles.appActionDescription}>
-                            <Message {...messages.allRefreshTokensWillBecomeInvalid} />{' '}
-                            <Message {...messages.takeCareAccessTokensInvalidation} />
+                            <Message
+                                {...messages.allRefreshTokensWillBecomeInvalid}
+                            />{' '}
+                            <Message
+                                {...messages.takeCareAccessTokensInvalidation}
+                            />
                         </div>
                         <div className={styles.appActionsButtons}>
                             <Button
@@ -64,7 +182,10 @@ export default class ApplicationItem extends Component<{
                                 ) : (
                                     <div
                                         className={styles.continueActionLink}
-                                        onClick={this.onResetSubmit(selectedAction === ACTION_RESET_SECRET)}
+                                        onClick={this.onResetSubmit(
+                                            selectedAction
+                                                === ACTION_RESET_SECRET
+                                        )}
                                     >
                                         <Message {...messages.continue} />
                                     </div>
@@ -73,13 +194,17 @@ export default class ApplicationItem extends Component<{
                         </div>
                     </div>
                 );
-                break;
+
             case ACTION_DELETE:
-                actionContent = (
+                return (
                     <div>
                         <div className={styles.appActionDescription}>
-                            <Message {...messages.appAndAllTokenWillBeDeleted} />{' '}
-                            <Message {...messages.takeCareAccessTokensInvalidation} />
+                            <Message
+                                {...messages.appAndAllTokenWillBeDeleted}
+                            />{' '}
+                            <Message
+                                {...messages.takeCareAccessTokensInvalidation}
+                            />
                         </div>
                         <div className={styles.appActionsButtons}>
                             <Button
@@ -107,100 +232,10 @@ export default class ApplicationItem extends Component<{
                         </div>
                     </div>
                 );
-                break;
+
             default:
-                actionContent = null;
-                break;
+                return null;
         }
-
-        return (
-            <div className={classNames(styles.appItemContainer, {
-                [styles.appExpanded]: expand,
-            })}>
-                <div className={styles.appItemTile} onClick={this.onTileToggle}>
-                    <div className={styles.appTileTitle}>
-                        <div className={styles.appName}>
-                            {app.name}
-                        </div>
-                        <div className={styles.appStats}>
-                            Client ID: {app.clientId}
-                            {typeof app.countUsers !== 'undefined' && (
-                                <span>
-                                    {' | '}
-                                    <Message {...messages.countUsers} values={{
-                                        count: app.countUsers,
-                                    }} />
-                                </span>
-                            )}
-                        </div>
-                    </div>
-                    <div className={styles.appItemToggle}>
-                        <div className={styles.appItemToggleIcon} />
-                    </div>
-                </div>
-                <Collapse isOpened={expand} onRest={this.onCollapseRest}>
-                    <div className={styles.appDetailsContainer}>
-                        <div className={styles.appDetailsInfoField}>
-                            <Link to={`/dev/applications/${app.clientId}`} className={styles.editAppLink}>
-                                <Message {...messages.editDescription} values={{
-                                    icon: <div className={styles.pencilIcon} />,
-                                }} />
-                            </Link>
-                            <Input
-                                label="Client ID:"
-                                skin={SKIN_LIGHT}
-                                disabled
-                                value={app.clientId}
-                                copy
-                            />
-                        </div>
-
-                        <div className={styles.appDetailsInfoField}>
-                            <Input
-                                label="Client Secret:"
-                                skin={SKIN_LIGHT}
-                                disabled
-                                value={app.clientSecret}
-                                copy
-                            />
-                        </div>
-
-                        <div className={styles.appDetailsDescription}>
-                            <Message {...messages.ifYouSuspectingThatSecretHasBeenCompromised} />
-                        </div>
-
-                        <div className={styles.appActionsButtons}>
-                            <Button
-                                label={messages.revokeAllTokens}
-                                color={COLOR_BLACK}
-                                className={styles.appActionButton}
-                                disabled={selectedAction && selectedAction !== ACTION_REVOKE_TOKENS}
-                                onClick={this.onActionButtonClick(ACTION_REVOKE_TOKENS)}
-                                small
-                            />
-                            <Button
-                                label={messages.resetClientSecret}
-                                color={COLOR_BLACK}
-                                className={styles.appActionButton}
-                                disabled={selectedAction && selectedAction !== ACTION_RESET_SECRET}
-                                onClick={this.onActionButtonClick(ACTION_RESET_SECRET)}
-                                small
-                            />
-                            <Button
-                                label={messages.delete}
-                                color={COLOR_BLACK}
-                                className={styles.appActionButton}
-                                disabled={selectedAction && selectedAction !== ACTION_DELETE}
-                                onClick={this.onActionButtonClick(ACTION_DELETE)}
-                                small
-                            />
-                        </div>
-
-                        {actionContent}
-                    </div>
-                </Collapse>
-            </div>
-        );
     }
 
     onTileToggle = () => {
@@ -211,33 +246,33 @@ export default class ApplicationItem extends Component<{
     onCollapseRest = () => {
         if (!this.props.expand && this.state.selectedAction) {
             this.setState({
-                selectedAction: null,
+                selectedAction: null
             });
         }
     };
 
     onActionButtonClick = (type: ?string) => () => {
         this.setState({
-            selectedAction: type === this.state.selectedAction ? null : type,
+            selectedAction: type === this.state.selectedAction ? null : type
         });
     };
 
     onResetSubmit = (resetClientSecret: bool) => async () => {
         const { onResetSubmit, application } = this.props;
         this.setState({
-            isActionPerforming: true,
+            isActionPerforming: true
         });
         await onResetSubmit(application.clientId, resetClientSecret);
         this.setState({
             isActionPerforming: false,
-            selectedAction: null,
+            selectedAction: null
         });
     };
 
     onSubmitDelete = () => {
         const { onDeleteSubmit, application } = this.props;
         this.setState({
-            isActionPerforming: true,
+            isActionPerforming: true
         });
         onDeleteSubmit(application.clientId);
     };

src/components/dev/apps/list/ApplicationsList.js

@@ -0,0 +1,102 @@
+// @flow
+import type { OauthAppResponse } from 'services/api/oauth';
+import React from 'react';
+import { restoreScroll } from 'components/ui/scroll/scroll';
+import { FormattedMessage as Message } from 'react-intl';
+import { LinkButton } from 'components/ui/form';
+import { COLOR_GREEN } from 'components/ui';
+
+import messages from '../ApplicationsIndex.intl.json';
+import styles from '../applicationsIndex.scss';
+import ApplicationItem from './ApplicationItem';
+
+type Props = {
+    applications: Array<OauthAppResponse>,
+    deleteApp: string => Promise<any>,
+    resetApp: (string, bool) => Promise<any>,
+    clientId: ?string
+};
+
+type State = {
+    expandedApp: ?string
+};
+
+export default class ApplicationsList extends React.Component<Props, State> {
+    state = {
+        expandedApp: null
+    };
+
+    appsRefs: { [key: string]: ?HTMLDivElement } = {};
+
+    componentDidMount() {
+        this.checkForActiveApp();
+    }
+
+    componentDidUpdate() {
+        this.checkForActiveApp();
+    }
+
+    render() {
+        const { applications, resetApp, deleteApp } = this.props;
+        const { expandedApp } = this.state;
+
+        return (
+            <div>
+                <div className={styles.appsListTitleContainer}>
+                    <div className={styles.appsListTitle}>
+                        <Message {...messages.yourApplications} />
+                    </div>
+                    <LinkButton
+                        to="/dev/applications/new"
+                        label={messages.addNew}
+                        color={COLOR_GREEN}
+                        className={styles.appsListAddNewAppBtn}
+                    />
+                </div>
+                <div className={styles.appsListContainer}>
+                    {applications.map((app) => (
+                        <div
+                            key={app.clientId}
+                            ref={(elem) => {
+                                this.appsRefs[app.clientId] = elem;
+                            }}
+                        >
+                            <ApplicationItem
+                                application={app}
+                                expand={app.clientId === expandedApp}
+                                onTileClick={this.onTileClick}
+                                onResetSubmit={resetApp}
+                                onDeleteSubmit={deleteApp}
+                            />
+                        </div>
+                    ))}
+                </div>
+            </div>
+        );
+    }
+
+    checkForActiveApp() {
+        const { applications, clientId } = this.props;
+        const { expandedApp } = this.state;
+
+        if (
+            clientId
+            && expandedApp !== clientId
+            && applications.some((app) => app.clientId === clientId)
+        ) {
+            requestAnimationFrame(() => this.onTileClick(clientId));
+        }
+    }
+
+    onTileClick = (clientId: string) => {
+        const expandedApp
+            = this.state.expandedApp === clientId ? null : clientId;
+
+        this.setState({ expandedApp }, () => {
+            if (expandedApp !== null) {
+                // TODO: @SleepWalker: мб у тебя есть идея, как это сделать более правильно и менее дёргано?
+                setTimeout(() => restoreScroll(this.appsRefs[clientId]), 150);
+            }
+        });
+    };
+}

src/components/dev/apps/list/index.js

@@ -0,0 +1,3 @@
+// @flow
+
+export { default } from './ApplicationsList';