[No QA] Cleanup unnecessary usages of compose()

STYLE.md

@@ -648,7 +648,25 @@ From React's documentation -
 >Props and composition give you all the flexibility you need to customize a component’s look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions.
 >If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it.
 
-Use *[Higher order components](https://reactjs.org/docs/higher-order-components.html)* if you find a use case where you need inheritance.
+Use an HOC a.k.a. *[Higher order component](https://reactjs.org/docs/higher-order-components.html)* if you find a use case where you need inheritance.
+
+If several HOC need to be combined there is a `compose()` utility. But we should not use this utility when there is only one HOC.
+
+```javascript
+// Bad
+export default compose(
+    withLocalize,
+)(MyComponent);
+
+// Good
+export default compose(
+    withLocalize,
+    withWindowDimensions,
+)(MyComponent);
+
+// Good
+export default withLocalize(MyComponent)
+```
 
 **Note:** If you find that none of these approaches work for you, please ask an Expensify engineer for guidance via Slack or GitHub.
 

src/components/HeaderWithCloseButton.js

@@ -7,7 +7,6 @@ import styles from '../styles/styles';
 import Header from './Header';
 import Icon from './Icon';
 import {Close, Download, BackArrow} from './Icon/Expensicons';
-import compose from '../libs/compose';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import Tooltip from './Tooltip';
 import InboxCallButton from './InboxCallButton';
@@ -123,4 +122,4 @@ HeaderWithCloseButton.propTypes = propTypes;
 HeaderWithCloseButton.defaultProps = defaultProps;
 HeaderWithCloseButton.displayName = 'HeaderWithCloseButton';
 
-export default compose(withLocalize)(HeaderWithCloseButton);
+export default withLocalize(HeaderWithCloseButton);

src/components/ImageView/index.js

@@ -6,7 +6,6 @@ import {
 import styles, {getZoomCursorStyle, getZoomSizingStyle} from '../../styles/styles';
 import canUseTouchScreen from '../../libs/canUseTouchscreen';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
-import compose from '../../libs/compose';
 
 const propTypes = {
     /** URL to full-sized image */
@@ -223,6 +222,4 @@ class ImageView extends PureComponent {
 }
 
 ImageView.propTypes = propTypes;
-export default compose(
-    withWindowDimensions,
-)(ImageView);
+export default withWindowDimensions(ImageView);

src/components/InboxCallButton.js

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import compose from '../libs/compose';
 import Navigation from '../libs/Navigation/Navigation';
 import ROUTES from '../ROUTES';
 import Tooltip from './Tooltip';
@@ -39,4 +38,4 @@ const InboxCallButton = props => (
 InboxCallButton.propTypes = propTypes;
 InboxCallButton.defaultProps = defaultProps;
 InboxCallButton.displayName = 'InboxCallButton';
-export default compose(withLocalize)(InboxCallButton);
+export default withLocalize(InboxCallButton);

src/pages/LogInWithShortLivedTokenPage.js

@@ -3,7 +3,6 @@ import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import ROUTES from '../ROUTES';
-import compose from '../libs/compose';
 import ONYXKEYS from '../ONYXKEYS';
 import {signInWithShortLivedToken} from '../libs/actions/Session';
 import FullScreenLoadingIndicator from '../components/FullscreenLoadingIndicator';
@@ -98,13 +97,11 @@ class LogInWithShortLivedTokenPage extends Component {
 LogInWithShortLivedTokenPage.propTypes = propTypes;
 LogInWithShortLivedTokenPage.defaultProps = defaultProps;
 
-export default compose(
-    withOnyx({
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
-    }),
-)(LogInWithShortLivedTokenPage);
+export default withOnyx({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+    betas: {
+        key: ONYXKEYS.BETAS,
+    },
+})(LogInWithShortLivedTokenPage);

src/pages/settings/Payments/AddDebitCardPage.js

@@ -1,5 +1,4 @@
 import React, {Component} from 'react';
-import {withOnyx} from 'react-native-onyx';
 import {
     View,
     ScrollView,
@@ -13,7 +12,6 @@ import StatePicker from '../../../components/StatePicker';
 import Text from '../../../components/Text';
 import TextLink from '../../../components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import compose from '../../../libs/compose';
 import {addBillingCard} from '../../../libs/actions/PaymentMethods';
 import Button from '../../../components/Button';
 import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
@@ -241,8 +239,4 @@ DebitCardPage.propTypes = propTypes;
 DebitCardPage.defaultProps = defaultProps;
 DebitCardPage.displayName = 'DebitCardPage';
 
-export default compose(
-    withLocalize,
-    withOnyx({
-    }),
-)(DebitCardPage);
+export default withLocalize(DebitCardPage);