Adrienne / Added search functionality for list of blocked advertisers (…

…#6005) * Added search functionality * Refactored code changes * Refactored code changes * Renamed BlockedAdvertisersList to BlockUserList * Fixed issues with block advertiser list table height * Fixed issue with search box not loading * Fixed an issue where the profile header is not fully width * Reduced margin bottom height for tabs and stats height due to flex
deriv-com · Aug 5, 2022 · bf02178 · bf02178
1 parent 753ac40
commit bf02178
Show file tree

Hide file tree

Showing 10 changed files with 173 additions and 35 deletions.
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
-import { InfiniteDataList, Loading, Table } from '@deriv/components';
+import { InfiniteDataList, Loading, Table, Text } from '@deriv/components';
+import { localize } from 'Components/i18next';
 import { isMobile } from '@deriv/shared';
 import { useStores } from 'Stores';
 import BlockUserRow from './block-user-row.jsx';
@@ -13,6 +14,7 @@ const BlockUserTable = () => {
     React.useEffect(() => {
         my_profile_store.setBlockedAdvertisersList([]);
         my_profile_store.getBlockedAdvertisersList();
+        my_profile_store.setSearchTerm('');
 
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -25,6 +27,14 @@ const BlockUserTable = () => {
         return <TableError message={general_store.block_unblock_user_error} />;
     }
 
+    if (my_profile_store.search_term && my_profile_store.rendered_blocked_advertisers_list.length === 0) {
+        return (
+            <Text align='center' className='block-user__text' line_height='m' size='s' weight='normal'>
+                {localize('There are no matching name.')}
+            </Text>
+        );
+    }
+
     if (my_profile_store.blocked_advertisers_list.length) {
         return (
             <React.Fragment>
@@ -33,7 +43,7 @@ const BlockUserTable = () => {
                         <InfiniteDataList
                             data_list_className='block-user__data-list'
                             has_more_items_to_load={false}
-                            items={my_profile_store.blocked_advertisers_list}
+                            items={my_profile_store.rendered_blocked_advertisers_list}
                             keyMapperFn={item => item.id}
                             loadMoreRowsFn={() => {}}
                             rowRenderer={props => <BlockUserRow {...props} />}

diff --git a/packages/p2p/src/components/my-profile/block-user/block-user.jsx b/packages/p2p/src/components/my-profile/block-user/block-user.jsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { useStores } from 'Stores';
+import { DesktopWrapper, MobileFullPageModal, MobileWrapper } from '@deriv/components';
+import BlockUserModal from 'Components/block-user/block-user-modal';
+import BlockUserTable from 'Components/my-profile/block-user/block-user-table/block-user-table';
+import SearchBox from 'Components/search-box';
+import { my_profile_tabs } from 'Constants/my-profile-tabs';
+import debounce from 'lodash.debounce';
+import { localize } from 'Components/i18next';
+
+const BlockUserList = observer(() => {
+    const { my_profile_store } = useStores();
+
+    const loadBlockedAdvertisers = debounce(search => {
+        my_profile_store.setSearchTerm(search.trim());
+        my_profile_store.loadMoreBlockedAdvertisers();
+    }, 200);
+
+    const onSearch = search => {
+        // Ensures that blocked advertisers list is not reloaded if search term entered is the same
+        if (my_profile_store.search_term !== search.trim()) {
+            my_profile_store.setIsLoading(true);
+            loadBlockedAdvertisers(search);
+        }
+    };
+
+    const onClear = () => {
+        my_profile_store.setSearchTerm('');
+        my_profile_store.setSearchResults([]);
+    };
+
+    return (
+        <div className='block-user__list'>
+            {my_profile_store.blocked_advertisers_list.length > 0 && (
+                <SearchBox onClear={onClear} onSearch={onSearch} placeholder={localize('Search')} />
+            )}
+            <BlockUserTable />
+        </div>
+    );
+});
+
+const BlockUser = () => {
+    const { general_store, my_profile_store } = useStores();
+
+    return (
+        <React.Fragment>
+            <BlockUserModal
+                advertiser_name={my_profile_store.selected_blocked_user.name}
+                is_advertiser_blocked
+                is_block_user_modal_open={general_store.is_block_user_modal_open}
+                onCancel={() => general_store.setIsBlockUserModalOpen(false)}
+                onSubmit={my_profile_store.onSubmit}
+            />
+            <DesktopWrapper>
+                <BlockUserList />
+            </DesktopWrapper>
+            <MobileWrapper>
+                <MobileFullPageModal
+                    body_className='block-user__modal'
+                    height_offset='80px'
+                    is_flex
+                    is_modal_open
+                    page_header_className='buy-sell__modal-header'
+                    page_header_text={localize('Blocked advertisers')}
+                    pageHeaderReturnFn={() => my_profile_store.setActiveTab(my_profile_tabs.MY_STATS)}
+                >
+                    <BlockUserList />
+                </MobileFullPageModal>
+            </MobileWrapper>
+        </React.Fragment>
+    );
+};
+
+export default observer(BlockUser);
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user.scss b/packages/p2p/src/components/my-profile/block-user/block-user.scss
@@ -11,6 +11,17 @@
         }
     }
 
+    &__list {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        height: 100%;
+
+        & .search-box {
+            margin: 0rem 0.8rem 2.4rem;
+        }
+    }
+
     &__modal {
         @include mobile {
             display: flex;
@@ -19,14 +30,18 @@
             height: 100%;
             overflow-x: hidden;
             width: 100vw;
+
+            .search-box {
+                margin: 1rem auto;
+                width: 91%;
+            }
         }
     }
 
     &__table {
         display: flex;
         flex: 1;
         flex-direction: column;
-        height: 30rem;
 
         @include mobile {
             height: 100%;
@@ -48,6 +63,12 @@
         }
     }
 
+    &__text {
+        display: inline-block;
+        padding-top: 3rem;
+        width: 100%;
+    }
+
     &__row {
         display: grid;
         padding: 1.6rem;

diff --git a/packages/p2p/src/components/my-profile/block-user/index.js b/packages/p2p/src/components/my-profile/block-user/index.js
@@ -0,0 +1,3 @@
+import BlockUser from './block-user';
+
+export default BlockUser;
diff --git a/packages/p2p/src/components/my-profile/my-profile-content.jsx b/packages/p2p/src/components/my-profile/my-profile-content.jsx
@@ -7,11 +7,10 @@ import { useStores } from 'Stores';
 import MyProfileForm from './my-profile-form';
 import MyProfileStats from './my-profile-stats';
 import PaymentMethods from './payment-methods';
-import BlockUserModal from 'Components/block-user/block-user-modal';
-import BlockUserTable from 'Components/my-profile/block-user/block-user-table/block-user-table';
+import BlockUser from './block-user';
 
 const MyProfileContent = () => {
-    const { general_store, my_profile_store } = useStores();
+    const { my_profile_store } = useStores();
     const formik_ref = React.useRef();
 
     if (my_profile_store.active_tab === my_profile_tabs.AD_TEMPLATE) {
@@ -49,33 +48,7 @@ const MyProfileContent = () => {
             </React.Fragment>
         );
     } else if (my_profile_store.active_tab === my_profile_tabs.BLOCKED_ADVERTISERS) {
-        return (
-            <React.Fragment>
-                <BlockUserModal
-                    advertiser_name={my_profile_store.selected_blocked_user.name}
-                    is_advertiser_blocked
-                    is_block_user_modal_open={general_store.is_block_user_modal_open}
-                    onCancel={() => general_store.setIsBlockUserModalOpen(false)}
-                    onSubmit={my_profile_store.onSubmit}
-                />
-                <DesktopWrapper>
-                    <BlockUserTable />
-                </DesktopWrapper>
-                <MobileWrapper>
-                    <MobileFullPageModal
-                        body_className='block-user__modal'
-                        height_offset='80px'
-                        is_flex
-                        is_modal_open
-                        page_header_className='buy-sell__modal-header'
-                        page_header_text={localize('Blocked advertisers')}
-                        pageHeaderReturnFn={() => my_profile_store.setActiveTab(my_profile_tabs.MY_STATS)}
-                    >
-                        <BlockUserTable />
-                    </MobileFullPageModal>
-                </MobileWrapper>
-            </React.Fragment>
-        );
+        return <BlockUser />;
     }
     return <MyProfileStats />;
 };

diff --git a/...components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.scss b/...components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.scss
@@ -1,9 +1,13 @@
 .my-profile-stats-table {
     border-bottom: none;
     grid-template-columns: repeat(4, 1fr);
-    margin: 2.4rem 0;
+    margin: 1.4rem 0;
     overflow: auto;
 
+    &.dc-table__row {
+        height: unset;
+    }
+
     &__cell {
         align-items: flex-start;
         border-right: 1px solid var(--general-section-2);

diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.scss b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.scss
@@ -1,5 +1,9 @@
 .my-profile-stats {
     &-separator {
         margin: 1.6rem 0;
+
+        @include mobile {
+            margin: 1.6rem -1.6rem;
+        }
     }
 }
diff --git a/packages/p2p/src/components/my-profile/my-profile.jsx b/packages/p2p/src/components/my-profile/my-profile.jsx
@@ -30,7 +30,7 @@ const MyProfile = () => {
     return (
         <AutoSizer>
             {({ height, width }) => (
-                <div className='my-profile' height={height} style={{ width }}>
+                <div className='my-profile' style={{ height, width }}>
                     <div className='my-profile__content'>
                         <MyProfileDetailsContainer />
                         <DesktopWrapper>

diff --git a/packages/p2p/src/components/my-profile/my-profile.scss b/packages/p2p/src/components/my-profile/my-profile.scss
@@ -1,10 +1,25 @@
 .my-profile {
+    display: flex;
+
+    @include mobile {
+        display: block;
+    }
+
     &__content {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+
+        & .p2p-toggle-container {
+            margin-bottom: 3.4rem;
+        }
+
         @include tablet-up {
             max-width: 100%;
             min-width: 672px;
         }
         @include mobile {
+            display: block;
             padding: 1.6rem;
             width: 100vw;
 

diff --git a/packages/p2p/src/stores/my-profile-store.js b/packages/p2p/src/stores/my-profile-store.js
@@ -135,6 +135,23 @@ export default class MyProfileStore extends BaseStore {
         return list;
     }
 
+    /**
+     * Evaluates a new blocked_advertiser_list based on if the user has searched a blocked advertiser
+     * By default it returns the blocked_advertisers_list when there are no searches
+     *
+     * @returns {Array} Either the entire blocked advertisers list or filtered advertisers list by search term
+     */
+    @computed
+    get rendered_blocked_advertisers_list() {
+        if (this.search_term) {
+            if (this.search_results.length) {
+                return this.search_results;
+            }
+            return [];
+        }
+        return this.blocked_advertisers_list;
+    }
+
     @action.bound
     createPaymentMethod(values, { setSubmitting }) {
         setSubmitting(true);
@@ -353,6 +370,22 @@ export default class MyProfileStore extends BaseStore {
         this.setShouldShowAddPaymentMethodForm(false);
     }
 
+    /**
+     * This function loads more blocked advertisers as necessary if the user is searching for a blocked advertiser
+     * It updates the search_results based on the searched advertiser
+     */
+    @action.bound
+    loadMoreBlockedAdvertisers() {
+        if (this.search_term) {
+            const search_results = this.blocked_advertisers_list.filter(blocked_advertiser =>
+                blocked_advertiser.name.toLowerCase().includes(this.search_term.toLowerCase().trim())
+            );
+
+            this.setSearchResults(search_results);
+        }
+        this.setIsLoading(false);
+    }
+
     @action.bound
     onClickDelete() {
         requestWS({