Remove HOCs (#1596)

* Hookify Currency and Language sections; remove unused params from settings redux

* Remove withAccountSettings hoc

* Fix incorrect reading of open savings and open balances reducers

* Consolidate redux settings only used for Recycler asset list

* Remove withEditOptions hoc

* Remove withCoinRecentlyPinned hoc

* Remove withOpenBalances hoc

* Remove withAppState hoc

* Move selectors to helpers directory

src/App.js

@@ -47,7 +47,6 @@ import {
   runWalletBackupStatusChecks,
 } from './handlers/walletReadyEvents';
 import RainbowContextWrapper from './helpers/RainbowContext';
-import { withAccountSettings, withAppState } from './hoc';
 import { registerTokenRefreshListener, saveFCMToken } from './model/firebase';
 import * as keychain from './model/keychain';
 import { loadAddress } from './model/wallet';
@@ -308,9 +307,7 @@ class App extends Component {
 
 const AppWithRedux = compose(
   withProps({ store }),
-  withAccountSettings,
-  withAppState,
-  connect(null, {
+  connect(({ appState: { walletReady } }) => ({ walletReady }), {
     requestsForTopic,
   })
 )(App);

src/components/asset-list/RecyclerAssetList.js

@@ -3,22 +3,13 @@ import PropTypes from 'prop-types';
 import React, { Component, Fragment } from 'react';
 import { LayoutAnimation, RefreshControl, View } from 'react-native';
 import { connect } from 'react-redux';
-import { compose } from 'recompact';
 import {
   BaseItemAnimator,
   DataProvider,
   LayoutProvider,
   RecyclerListView,
 } from 'recyclerlistview';
 import StickyContainer from 'recyclerlistview/dist/reactnative/core/StickyContainer';
-import {
-  withAccountSettings,
-  withCoinListEdited,
-  withOpenBalances,
-  withOpenFamilyTabs,
-  withOpenInvestmentCards,
-  withOpenSavings,
-} from '../../hoc';
 import {
   deviceUtils,
   isNewValueForPath,
@@ -832,15 +823,19 @@ class RecyclerAssetList extends Component {
   }
 }
 
-export default compose(
-  withCoinListEdited,
-  withOpenFamilyTabs,
-  withOpenInvestmentCards,
-  withOpenBalances,
-  withOpenSavings,
-  withAccountSettings,
-  connect(({ openSmallBalances, openSavings }) => ({
+export default connect(
+  ({
+    editOptions: { isCoinListEdited },
+    openSavings,
+    openSmallBalances,
+    openStateSettings: { openFamilyTabs, openInvestmentCards },
+    settings: { nativeCurrency },
+  }) => ({
+    isCoinListEdited,
+    nativeCurrency,
+    openFamilyTabs,
+    openInvestmentCards,
     openSavings,
     openSmallBalances,
-  }))
+  })
 )(RecyclerAssetList);

src/components/coin-row/BalanceCoinRow.js

@@ -2,13 +2,8 @@ import { get } from 'lodash';
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import Animated from 'react-native-reanimated';
 import { View } from 'react-primitives';
-import { compose } from 'recompact';
+import { connect } from 'react-redux';
 import styled from 'styled-components/primitives';
-import {
-  withCoinRecentlyPinned,
-  withEditOptions,
-  withOpenBalances,
-} from '../../hoc';
 import { useCoinListEditedValue } from '../../hooks/useCoinListEdited';
 import { ButtonPressAnimation } from '../animations';
 import { initialChartExpandedStateSheetHeight } from '../expanded-state/ChartExpandedState';
@@ -20,6 +15,10 @@ import CoinName from './CoinName';
 import CoinRow from './CoinRow';
 import { buildAssetUniqueIdentifier } from '@rainbow-me/helpers/assets';
 import { useCoinListEdited } from '@rainbow-me/hooks';
+import {
+  pushSelectedCoin,
+  removeSelectedCoin,
+} from '@rainbow-me/redux/editOptions';
 import { colors } from '@rainbow-me/styles';
 import { isNewValueForObjectPaths, isNewValueForPath } from '@rainbow-me/utils';
 
@@ -214,8 +213,13 @@ const arePropsEqual = (prev, next) => {
 
 const MemoizedBalanceCoinRow = React.memo(BalanceCoinRow, arePropsEqual);
 
-export default compose(
-  withOpenBalances,
-  withEditOptions,
-  withCoinRecentlyPinned
+export default connect(
+  ({ editOptions: { recentlyPinnedCount }, openSmallBalances }) => ({
+    openSmallBalances,
+    recentlyPinnedCount,
+  }),
+  {
+    pushSelectedCoin,
+    removeSelectedCoin,
+  }
 )(MemoizedBalanceCoinRow);

src/components/settings-menu/CurrencySection.js

@@ -1,12 +1,10 @@
 import analytics from '@segment/analytics-react-native';
 import { isNil } from 'lodash';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { compose, onlyUpdateForKeys, withHandlers } from 'recompact';
-import { withAccountSettings } from '../../hoc';
+import React, { useCallback } from 'react';
 import { CoinIcon } from '../coin-icon';
 import { RadioList, RadioListItem } from '../radio-list';
 import { Emoji } from '../text';
+import { useAccountSettings } from '@rainbow-me/hooks';
 import { supportedNativeCurrencies } from '@rainbow-me/references';
 
 const currencyListItems = Object.values(supportedNativeCurrencies).map(
@@ -34,35 +32,27 @@ const CurrencyListItem = ({ currency, emojiName, label, ...item }) => (
   />
 );
 
-CurrencyListItem.propTypes = {
-  currency: PropTypes.string,
-  emojiName: PropTypes.string,
-  label: PropTypes.string,
-};
-
-const CurrencySection = ({ nativeCurrency, onSelectCurrency }) => (
-  <RadioList
-    extraData={nativeCurrency}
-    items={currencyListItems}
-    marginTop={7}
-    onChange={onSelectCurrency}
-    renderItem={CurrencyListItem}
-    value={nativeCurrency}
-  />
-);
+const CurrencySection = () => {
+  const { nativeCurrency, settingsChangeNativeCurrency } = useAccountSettings();
 
-CurrencySection.propTypes = {
-  nativeCurrency: PropTypes.oneOf(Object.keys(supportedNativeCurrencies)),
-  onSelectCurrency: PropTypes.func.isRequired,
-};
-
-export default compose(
-  withAccountSettings,
-  withHandlers({
-    onSelectCurrency: ({ settingsChangeNativeCurrency }) => currency => {
+  const onSelectCurrency = useCallback(
+    currency => {
       settingsChangeNativeCurrency(currency);
       analytics.track('Changed native currency', { currency });
     },
-  }),
-  onlyUpdateForKeys(['nativeCurrency'])
-)(CurrencySection);
+    [settingsChangeNativeCurrency]
+  );
+
+  return (
+    <RadioList
+      extraData={nativeCurrency}
+      items={currencyListItems}
+      marginTop={7}
+      onChange={onSelectCurrency}
+      renderItem={CurrencyListItem}
+      value={nativeCurrency}
+    />
+  );
+};
+
+export default CurrencySection;

src/components/settings-menu/LanguageSection.js

@@ -1,11 +1,9 @@
 import analytics from '@segment/analytics-react-native';
 import { get, keys, pickBy } from 'lodash';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { compose, onlyUpdateForKeys, withHandlers } from 'recompact';
-import { withAccountSettings } from '../../hoc';
+import React, { useCallback } from 'react';
 import { resources, supportedLanguages } from '../../languages';
 import { RadioList, RadioListItem } from '../radio-list';
+import { useAccountSettings } from '@rainbow-me/hooks';
 
 // Only show languages that have 'wallet' translations available.
 const hasWalletTranslations = language => get(language, 'translation.wallet');
@@ -24,29 +22,27 @@ const renderLanguageListItem = ({ code, language, ...item }) => (
   <RadioListItem {...item} label={language} value={code} />
 );
 
-const LanguageSection = ({ language, onSelectLanguage }) => (
-  <RadioList
-    extraData={language}
-    items={languageListItems}
-    marginTop={7}
-    onChange={onSelectLanguage}
-    renderItem={renderLanguageListItem}
-    value={language}
-  />
-);
-
-LanguageSection.propTypes = {
-  language: PropTypes.string,
-  onSelectLanguage: PropTypes.func.isRequired,
-};
+const LanguageSection = () => {
+  const { language, settingsChangeLanguage } = useAccountSettings();
 
-export default compose(
-  withAccountSettings,
-  withHandlers({
-    onSelectLanguage: ({ settingsChangeLanguage }) => language => {
+  const onSelectLanguage = useCallback(
+    language => {
       settingsChangeLanguage(language);
       analytics.track('Changed language', { language });
     },
-  }),
-  onlyUpdateForKeys(['language'])
-)(LanguageSection);
+    [settingsChangeLanguage]
+  );
+
+  return (
+    <RadioList
+      extraData={language}
+      items={languageListItems}
+      marginTop={7}
+      onChange={onSelectLanguage}
+      renderItem={renderLanguageListItem}
+      value={language}
+    />
+  );
+};
+
+export default LanguageSection;