/* @flow */
import { connect } from 'react-redux';

import React, { PureComponent } from 'react';

import type { Auth, Dispatch, GlobalState, Orientation, User, PresenceState } from '../types';
import { getAuth, getSession, getAccountDetailsUserFromEmail, getPresence } from '../selectors';
import { Screen } from '../common';
import AccountDetails from './AccountDetails';
import { connectPreserveOnBackOption } from '../utils/redux';

type Props = {
  auth: Auth,
  user: User,
  orientation: Orientation,
  dispatch: Dispatch,
  presence: PresenceState,
};

class AccountDetailsScreen extends PureComponent<Props> {
  props: Props;

  render() {
    const { auth, dispatch, orientation, user, presence } = this.props;
    const title = {
      text: '{_}',
      values: {
        // This causes the name not to get translated.
        _: user.full_name || ' ',
      },
    };

    return (
      <Screen title={title}>
        <AccountDetails
          auth={auth}
          dispatch={dispatch}
          user={user}
          presence={presence[user.email]}
          orientation={orientation}
        />
      </Screen>
    );
  }
}

export default connect(
  (state: GlobalState, props: Object) => ({
    auth: getAuth(state),
    user: getAccountDetailsUserFromEmail(props.navigation.state.params.email)(state),
    orientation: getSession(state).orientation,
    presence: getPresence(state),
  }),
  null,
  null,
  connectPreserveOnBackOption,
)(AccountDetailsScreen);

/* @flow */
import { connect } from 'react-redux';

import React, { PureComponent } from 'react';

import type { Auth, Dispatch, GlobalState, Orientation, User, PresenceState } from '../types';
import { getAuth, getSession, getAccountDetailsUserFromEmail, getPresence } from '../selectors';
import { Screen } from '../common';
import AccountDetails from './AccountDetails';

type Props = {
  auth: Auth,
  user: User,
  orientation: Orientation,
  dispatch: Dispatch,
  presence: PresenceState,
};

class AccountDetailsScreen extends PureComponent<Props> {
  props: Props;

  render() {
    const { auth, dispatch, orientation, user, presence } = this.props;
    const title = {
      text: '{_}',
      values: {
        // This causes the name not to get translated.
        _: user.full_name || ' ',
      },
    };

    return (
      <Screen title={title}>
        <AccountDetails
          auth={auth}
          dispatch={dispatch}
          user={user}
          presence={presence[user.email]}
          orientation={orientation}
        />
      </Screen>
    );
  }
}

export default connect((state: GlobalState, props: Object) => ({
  auth: getAuth(state),
  user: getAccountDetailsUserFromEmail(props.navigation.state.params.email)(state),
  orientation: getSession(state).orientation,
  presence: getPresence(state),
}))(AccountDetailsScreen);

Drop "onBack" hack which prevented renders.
accountScreen: Drop "onBack" hack which prevented renders.

Much like the previous commit; see also the jsdoc on
`connectPreserveOnBackOption` for details on what motivated this hack
and how it's broken.

Unlike the previous commit, we don't know of a specific user-visible
bug this use of the hack is causing right now.  But, as in the
previous commit, it doesn't do anything helpful here; this is another
place where we fixed the underlying problem the right way in #2746.

To confirm there isn't anything for the hack to help with here:

(Best is to test on slow old phones, you will able to spot any extra
re-render/side effect).

Or put a console.log inside `render` and check how many times it is
called. Thus all calls of re-render are required, or some calls can be
ignored. Pay attension when screen pops out it should not re-render.
