accounts-frontend/packages/app/pages/dev/ApplicationsListPage.tsx

import React from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { connect } from 'react-redux';
import {
  fetchAvailableApps,
  resetApp,
  deleteApp,
} from 'app/components/dev/apps/actions';
import ApplicationsIndex from 'app/components/dev/apps/ApplicationsIndex';
import { User } from 'app/components/user';
import { OauthAppResponse } from 'app/services/api/oauth';
import { RootState } from 'app/reducers';

interface Props extends RouteComponentProps {
  user: User;
  apps: OauthAppResponse[];
  fetchAvailableApps: () => Promise<void>;
  deleteApp: (clientId: string) => Promise<void>;
  resetApp: (clientId: string, resetClientSecret: boolean) => Promise<void>;
}

type State = {
  isLoading: boolean;
  forceUpdate: boolean;
};

class ApplicationsListPage extends React.Component<Props, State> {
  state = {
    isLoading: false,
    forceUpdate: false,
  };

  componentDidMount() {
    !this.props.user.isGuest && this.loadApplicationsList();
  }

  componentDidUpdate({ user }: Props) {
    if (this.props.user !== user) {
      // eslint-disable-next-line react/no-did-update-set-state
      this.setState({ forceUpdate: true });
      this.loadApplicationsList();
    }
  }

  render() {
    const { user, apps, resetApp, deleteApp, location } = this.props;
    const { isLoading, forceUpdate } = this.state;
    const clientId = location.hash.substr(1) || null;

    return (
      <ApplicationsIndex
        displayForGuest={user.isGuest}
        applications={forceUpdate ? [] : apps}
        isLoading={isLoading}
        deleteApp={deleteApp}
        resetApp={resetApp}
        clientId={clientId}
        resetClientId={this.resetClientId}
      />
    );
  }

  loadApplicationsList = async () => {
    this.setState({ isLoading: true });
    await this.props.fetchAvailableApps();
    this.setState({
      isLoading: false,
      forceUpdate: false,
    });
  };

  resetClientId = () => {
    const { history, location } = this.props;

    if (location.hash) {
      history.push({ ...location, hash: '' });
    }
  };
}

export default connect(
  (state: RootState) => ({
    user: state.user,
    apps: state.apps.available,
  }),
  {
    fetchAvailableApps,
    resetApp,
    deleteApp,
  },
)(ApplicationsListPage);