Rupato/fix: added content search for different languages (#10026)

* fix: added content search for different languages * fix: for clearing search values * fix: for sonar cloud * fix: trigger empty * fix: for sonarcloud * fix: trigger-circle-ci
deriv-com · Oct 10, 2023 · 3fea55f · 3fea55f
1 parent 6a8e46c
commit 3fea55f
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 29 deletions.
diff --git a/packages/bot-web-ui/src/components/dashboard/tutorial-tab/guide-content.tsx b/packages/bot-web-ui/src/components/dashboard/tutorial-tab/guide-content.tsx
@@ -8,8 +8,18 @@ import { DBOT_TABS } from 'Constants/bot-contents';
 import { removeKeyValue } from 'Utils/settings';
 import { useDBotStore } from 'Stores/useDBotStore';
 
+type TGuideList = {
+    content?: string;
+    id: number;
+    src?: string;
+    subtype?: string;
+    type: string;
+    url?: string;
+    imageclass?: string;
+};
+
 type TGuideContent = {
-    guide_list: [];
+    guide_list: TGuideList[];
 };
 
 const GuideContent = observer(({ guide_list }: TGuideContent) => {
@@ -25,6 +35,7 @@ const GuideContent = observer(({ guide_list }: TGuideContent) => {
         setActiveTour,
         setShowMobileTourDialog,
     } = dashboard;
+    const is_mobile = isMobile();
 
     const triggerTour = (type: string) => {
         if (type === 'OnBoard') {
@@ -39,7 +50,6 @@ const GuideContent = observer(({ guide_list }: TGuideContent) => {
             if (is_mobile) setShowMobileTourDialog(true);
         }
     };
-    const is_mobile = isMobile();
 
     return React.useMemo(
         () => (

diff --git a/packages/bot-web-ui/src/components/dashboard/tutorial-tab/sidebar.tsx b/packages/bot-web-ui/src/components/dashboard/tutorial-tab/sidebar.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import classNames from 'classnames';
-import debounce from 'lodash.debounce';
 import { DesktopWrapper, Icon, MobileWrapper, SelectNative, Tabs } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { observer } from '@deriv/stores';
@@ -10,50 +9,77 @@ import FAQContent from './faq-content';
 import GuideContent from './guide-content';
 import { faq_content, guide_content, user_guide_content } from './tutorial-content';
 
+type TFilteredList = {
+    content?: string;
+    id: number;
+    src?: string;
+    subtype?: string;
+    type: string;
+    url?: string;
+    imageclass?: string;
+};
+
+type TSelectedTab = {
+    label: string;
+    content: string | React.ReactNode;
+};
+
+const initialSelectedTab: TSelectedTab = {
+    label: '',
+    content: '',
+};
+
 const Sidebar = observer(() => {
     const { dashboard } = useDBotStore();
     const { active_tab_tutorials, active_tab, faq_search_value, setActiveTabTutorial, setFAQSearchValue } = dashboard;
     const guide_tab_content = [...user_guide_content, ...guide_content];
-    const [search_filtered_list, setsearchFilteredList] = React.useState(guide_tab_content);
-    const [search_faq_list, setsearchFAQList] = React.useState(faq_content);
-    const search_input = React.useRef<HTMLInputElement | null>(null);
+    const [search_filtered_list, setsearchFilteredList] = React.useState<TFilteredList[]>([...guide_tab_content]);
+    const [search_faq_list, setsearchFAQList] = React.useState([...faq_content]);
+    const [selected_tab, setSelectedTab] = React.useState<TSelectedTab>(initialSelectedTab);
     const menu_items = [
         {
             label: localize('Guide'),
-            content: <GuideContent guide_list={search_filtered_list} />,
+            content: <GuideContent guide_list={[...search_filtered_list]} />,
         },
         {
             label: localize('FAQ'),
-            content: <FAQContent faq_list={search_faq_list} hide_header={isMobile()} />,
+            content: <FAQContent faq_list={[...search_faq_list]} hide_header={isMobile()} />,
         },
     ];
-    const selected_tab = menu_items?.[active_tab_tutorials] || {};
 
     React.useEffect(() => {
-        if (search_input?.current?.value) {
-            search_input.current.value = '';
-            setsearchFAQList([]);
-        }
-
-        setsearchFilteredList(guide_tab_content);
-        setsearchFAQList(faq_content);
+        setFAQSearchValue('');
+        setSelectedTab(menu_items?.[active_tab_tutorials] || {});
+        setsearchFilteredList([...guide_tab_content]);
+        setsearchFAQList([...faq_content]);
     }, [active_tab_tutorials, active_tab]);
 
+    const removeHTMLTagsFromString = (param = '') => {
+        return param.replace(/<.*?>/g, '');
+    };
+
     React.useEffect(() => {
-        const content_list = active_tab_tutorials === 0 ? guide_tab_content : faq_content;
-        const filtered_list = content_list.filter(data => {
-            return content_list === guide_tab_content
-                ? data.content.toLowerCase().includes(faq_search_value)
-                : data.title.toLowerCase().includes(faq_search_value);
-        });
-        return active_tab_tutorials === 0 ? setsearchFilteredList(filtered_list) : setsearchFAQList(filtered_list);
-    }, [faq_search_value]);
+        const is_faq = active_tab_tutorials === 1;
+        const search = faq_search_value?.toLowerCase();
+
+        if (is_faq) {
+            const filtered_list = faq_content?.filter(({ title, description = [] }) => {
+                const match = description?.map(item => (item.type === 'text' ? item.content : '')).join(' ');
+                const title_has_match = removeHTMLTagsFromString(title)?.toLowerCase()?.includes(search);
+                const description_has_match = removeHTMLTagsFromString(match)?.toLowerCase()?.includes(search);
+                return title_has_match || description_has_match;
+            });
+            setsearchFAQList(filtered_list);
+        } else {
+            const filtered_list = guide_tab_content?.filter(({ content = '' }) =>
+                content?.toLowerCase()?.includes(search)
+            );
+            setsearchFilteredList(filtered_list);
+        }
+    }, [faq_search_value, active_tab_tutorials]);
 
     const onSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const value = event.target.value;
-        debounce(() => {
-            setFAQSearchValue(value);
-        }, 700)();
+        setFAQSearchValue(event.target.value);
     };
 
     const onChangeHandle = React.useCallback(
@@ -71,11 +97,11 @@ const Sidebar = observer(() => {
                         <Icon data-testid='id-test-search' width='1.6rem' height='1.6rem' icon={'IcSearch'} />
                         <input
                             data-testid='id-test-search'
-                            ref={search_input}
                             type='text'
                             placeholder={localize('Search')}
                             className='dc-tabs__wrapper__group__search-input'
                             onChange={onSearch}
+                            value={faq_search_value}
                         />
                     </div>
                     <Tabs

diff --git a/...shboard/tutorial-tab/tutorial-content.tsx → ...ashboard/tutorial-tab/tutorial-content.ts b/...shboard/tutorial-tab/tutorial-content.tsx → ...ashboard/tutorial-tab/tutorial-content.ts