Merge pull request #241 from lanchana/RN-513

Add recently selected currency list
bitpay · Jul 19, 2022 · 6006a7a · 6006a7a
2 parents b370bb4 + 5c0528c
commit 6006a7a
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 10 deletions.
diff --git a/src/navigation/tabs/settings/general/screens/AltCurrencySettings.tsx b/src/navigation/tabs/settings/general/screens/AltCurrencySettings.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import styled from 'styled-components/native';
 import {RootState} from '../../../../../store';
 import debounce from 'lodash.debounce';
@@ -14,13 +14,19 @@ import {
   NoResultsImgContainer,
   NoResultsDescription,
 } from '../../../../../components/styled/Containers';
-import {FlatList, InteractionManager, Keyboard} from 'react-native';
+import {
+  FlatList,
+  InteractionManager,
+  Keyboard,
+  SectionList,
+  View,
+} from 'react-native';
 import {BaseText} from '../../../../../components/styled/Text';
 import {setDefaultAltCurrency} from '../../../../../store/app/app.actions';
 import {useAppDispatch, useAppSelector} from '../../../../../utils/hooks';
 
 import {useNavigation} from '@react-navigation/native';
-import {LightBlack, White} from '../../../../../styles/colors';
+import {Black, LightBlack, White} from '../../../../../styles/colors';
 import GhostSvg from '../../../../../../assets/img/ghost-cheeky.svg';
 import SearchSvg from '../../../../../../assets/img/search.svg';
 import {FormatKeyBalances} from '../../../../../store/wallet/effects/status/status';
@@ -70,6 +76,17 @@ const HideableView = styled.View<HideableViewProps>`
   display: ${({show}) => (show ? 'flex' : 'none')};
 `;
 
+const ListHeader = styled(BaseText)`
+  color: ${({theme}) => (theme.dark ? White : Black)};
+  font-size: 18px;
+  text-align: left;
+  margin-bottom: 16px;
+  margin-top: 0px;
+  flex-grow: 1;
+  font-weight: 500;
+  padding: 0 15px;
+`;
+
 const AltCurrencySettings = () => {
   const {t} = useTranslation();
   const dispatch = useAppDispatch();
@@ -80,11 +97,41 @@ const AltCurrencySettings = () => {
   const selectedAltCurrency = useAppSelector(
     ({APP}: RootState) => APP.defaultAltCurrency,
   );
+  const recentDefaultAltCurrency = useAppSelector(
+    ({APP}) => APP.recentDefaultAltCurrency,
+  );
 
-  const altCurrencyList = alternativeCurrencies.filter(
-    altCurrency => selectedAltCurrency.isoCode !== altCurrency.isoCode,
-  ) as Array<AltCurrenciesRowProps>;
-  altCurrencyList.unshift(selectedAltCurrency);
+  const altCurrencyList = useMemo(() => {
+    let currenciesList = [];
+    if (recentDefaultAltCurrency.length) {
+      currenciesList = alternativeCurrencies.filter(
+        currency =>
+          !recentDefaultAltCurrency.find(
+            ({isoCode}) => currency.isoCode === isoCode,
+          ),
+      );
+    } else {
+      currenciesList = alternativeCurrencies.filter(
+        altCurrency => selectedAltCurrency.isoCode !== altCurrency.isoCode,
+      ) as Array<AltCurrenciesRowProps>;
+      currenciesList.unshift(selectedAltCurrency);
+    }
+
+    const list = [
+      {
+        title: 'Currencies',
+        data: currenciesList,
+      },
+    ];
+
+    if (recentDefaultAltCurrency.length) {
+      list.unshift({
+        title: 'Recently Selected',
+        data: recentDefaultAltCurrency,
+      });
+    }
+    return list;
+  }, [recentDefaultAltCurrency, alternativeCurrencies]);
 
   const [searchVal, setSearchVal] = useState('');
   const [searchResults, setSearchResults] = useState(
@@ -93,7 +140,7 @@ const AltCurrencySettings = () => {
 
   const updateSearchResults = debounce((text: string) => {
     setSearchVal(text);
-    const results = altCurrencyList.filter(
+    const results = alternativeCurrencies.filter(
       altCurrency =>
         altCurrency.name.toLowerCase().includes(text.toLocaleLowerCase()) ||
         altCurrency.isoCode.toLowerCase().includes(text.toLocaleLowerCase()),
@@ -176,13 +223,19 @@ const AltCurrencySettings = () => {
           </NoResultsContainer>
         )}
       </HideableView>
+
       <HideableView show={!searchVal}>
         <SearchResults>
-          <FlatList
+          <SectionList
             contentContainerStyle={{paddingBottom: 150, marginTop: 5}}
-            data={altCurrencyList}
+            sections={altCurrencyList}
             renderItem={renderItem}
             keyExtractor={keyExtractor}
+            stickySectionHeadersEnabled={false}
+            renderSectionHeader={({section: {title}}) => (
+              <ListHeader>{title}</ListHeader>
+            )}
+            renderSectionFooter={() => <View style={{marginBottom: 30}} />}
           />
         </SearchResults>
       </HideableView>

diff --git a/src/store/app/app.reducer.ts b/src/store/app/app.reducer.ts
@@ -16,6 +16,7 @@ import {
   HomeCarouselLayoutType,
 } from './app.models';
 import {AppActionType, AppActionTypes} from './app.types';
+import uniqBy from 'lodash.uniqby';
 
 export const appReduxPersistBlackList: Array<keyof AppState> = [
   'appIsLoading',
@@ -78,6 +79,7 @@ export interface AppState {
   settingsListConfig: SettingsListType[];
   altCurrencyList: Array<AltCurrenciesRowProps>;
   defaultAltCurrency: AltCurrenciesRowProps;
+  recentDefaultAltCurrency: Array<AltCurrenciesRowProps>;
   migrationComplete: boolean;
   keyMigrationFailure: boolean;
   showKeyMigrationFailureModal: boolean;
@@ -136,6 +138,7 @@ const initialState: AppState = {
   settingsListConfig: [],
   altCurrencyList: [],
   defaultAltCurrency: {isoCode: 'USD', name: 'US Dollar'},
+  recentDefaultAltCurrency: [],
   migrationComplete: false,
   keyMigrationFailure: false,
   showKeyMigrationFailureModal: false,
@@ -436,9 +439,16 @@ export const appReducer = (
       };
 
     case AppActionTypes.SET_DEFAULT_ALT_CURRENCY:
+      let recentDefaultAltCurrency = [...state.recentDefaultAltCurrency];
+      recentDefaultAltCurrency.unshift(action.defaultAltCurrency);
+      recentDefaultAltCurrency = uniqBy(
+        recentDefaultAltCurrency,
+        'isoCode',
+      ).slice(0, 3);
       return {
         ...state,
         defaultAltCurrency: action.defaultAltCurrency,
+        recentDefaultAltCurrency,
       };
 
     case AppActionTypes.SET_MIGRATION_COMPLETE: