From 9e1ad80539183f6d8d6017df87c8ef2d3f9fb7f3 Mon Sep 17 00:00:00 2001 From: rupato-deriv Date: Tue, 12 Sep 2023 12:33:03 +0800 Subject: [PATCH 1/6] fix: added content search for different languages --- .../dashboard/tutorial-tab/sidebar.tsx | 27 ++++++++++++------- ...torial-content.tsx => tutorial-content.ts} | 0 2 files changed, 18 insertions(+), 9 deletions(-) rename packages/bot-web-ui/src/components/dashboard/tutorial-tab/{tutorial-content.tsx => tutorial-content.ts} (100%) 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 index 8e293ef1c166..eff7ff3a1b5d 100644 --- a/packages/bot-web-ui/src/components/dashboard/tutorial-tab/sidebar.tsx +++ b/packages/bot-web-ui/src/components/dashboard/tutorial-tab/sidebar.tsx @@ -34,20 +34,29 @@ const Sidebar = observer(() => { search_input.current.value = ''; setsearchFAQList([]); } - setsearchFilteredList(guide_tab_content); setsearchFAQList(faq_content); }, [active_tab_tutorials, active_tab]); 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 = title?.toLowerCase()?.includes(search); + const description_has_match = 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) => { const value = event.target.value; diff --git a/packages/bot-web-ui/src/components/dashboard/tutorial-tab/tutorial-content.tsx b/packages/bot-web-ui/src/components/dashboard/tutorial-tab/tutorial-content.ts similarity index 100% rename from packages/bot-web-ui/src/components/dashboard/tutorial-tab/tutorial-content.tsx rename to packages/bot-web-ui/src/components/dashboard/tutorial-tab/tutorial-content.ts From 2503198f1256065f7fd44a8985be7e809c9d8e4c Mon Sep 17 00:00:00 2001 From: rupato-deriv Date: Mon, 18 Sep 2023 17:52:16 +0800 Subject: [PATCH 2/6] fix: for clearing search values --- .../dashboard/tutorial-tab/guide-content.tsx | 14 ++++- .../dashboard/tutorial-tab/sidebar.tsx | 59 ++++++++++++------- 2 files changed, 51 insertions(+), 22 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 index 7f5486abc4d0..0613c33db97a 100644 --- 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 @@ -9,8 +9,18 @@ import { useDBotStore } from 'Stores/useDBotStore'; import { removeKeyValue } from '../../../utils/settings'; import { tour_type } from '../joyride-config'; +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) => { @@ -27,6 +37,7 @@ const GuideContent = observer(({ guide_list }: TGuideContent) => { setTourDialogVisibility, showVideoDialog, } = dashboard; + const is_mobile = isMobile(); const triggerTour = (type: string) => { const storage = JSON.parse(localStorage?.dbot_settings); @@ -57,7 +68,6 @@ const GuideContent = observer(({ guide_list }: TGuideContent) => { setActiveTab(DBOT_TABS.BOT_BUILDER); } }; - 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 index eff7ff3a1b5d..7e76aa1cfcc9 100644 --- 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,32 +9,49 @@ 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(null); + const [search_filtered_list, setsearchFilteredList] = React.useState([...guide_tab_content]); + const [search_faq_list, setsearchFAQList] = React.useState([...faq_content]); + const [selected_tab, setSelectedTab] = React.useState(initialSelectedTab); const menu_items = [ { label: localize('Guide'), - content: , + content: , }, { label: localize('FAQ'), - content: , + content: , }, ]; - 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]); React.useEffect(() => { @@ -45,8 +61,14 @@ const Sidebar = observer(() => { 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 = title?.toLowerCase()?.includes(search); - const description_has_match = match?.toLowerCase()?.includes(search); + const title_has_match = title + ?.replace(/<[^>]*>/g, '') + ?.toLowerCase() + ?.includes(search); + const description_has_match = match + ?.replace(/<[^>]*>/g, '') + ?.toLowerCase() + ?.includes(search); return title_has_match || description_has_match; }); setsearchFAQList(filtered_list); @@ -59,10 +81,7 @@ const Sidebar = observer(() => { }, [faq_search_value, active_tab_tutorials]); const onSearch = (event: React.ChangeEvent) => { - const value = event.target.value; - debounce(() => { - setFAQSearchValue(value); - }, 700)(); + setFAQSearchValue(event.target.value); }; const onChangeHandle = React.useCallback( @@ -80,11 +99,11 @@ const Sidebar = observer(() => { Date: Mon, 18 Sep 2023 18:09:49 +0800 Subject: [PATCH 3/6] fix: for sonar cloud --- .../components/dashboard/tutorial-tab/sidebar.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) 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 index 7e76aa1cfcc9..3a1e9c29bee7 100644 --- a/packages/bot-web-ui/src/components/dashboard/tutorial-tab/sidebar.tsx +++ b/packages/bot-web-ui/src/components/dashboard/tutorial-tab/sidebar.tsx @@ -54,6 +54,10 @@ const Sidebar = observer(() => { setsearchFAQList([...faq_content]); }, [active_tab_tutorials, active_tab]); + const removeHTMLTagsFromString = (param = '') => { + return param.replace(/<[^>]*>/g, ''); + }; + React.useEffect(() => { const is_faq = active_tab_tutorials === 1; const search = faq_search_value?.toLowerCase(); @@ -61,14 +65,8 @@ const Sidebar = observer(() => { 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 = title - ?.replace(/<[^>]*>/g, '') - ?.toLowerCase() - ?.includes(search); - const description_has_match = match - ?.replace(/<[^>]*>/g, '') - ?.toLowerCase() - ?.includes(search); + 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); From 2812d05cea69b3b634f865f94c2eb1c11f07ca36 Mon Sep 17 00:00:00 2001 From: rupato-deriv Date: Mon, 18 Sep 2023 18:12:32 +0800 Subject: [PATCH 4/6] fix: trigger empty From 09e90c6d50d38d3091c6bf14b8dedaf7eeeb72d9 Mon Sep 17 00:00:00 2001 From: rupato-deriv Date: Mon, 18 Sep 2023 18:37:23 +0800 Subject: [PATCH 5/6] fix: for sonarcloud --- .../src/components/dashboard/tutorial-tab/sidebar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 3a1e9c29bee7..38b468380cd0 100644 --- a/packages/bot-web-ui/src/components/dashboard/tutorial-tab/sidebar.tsx +++ b/packages/bot-web-ui/src/components/dashboard/tutorial-tab/sidebar.tsx @@ -55,7 +55,7 @@ const Sidebar = observer(() => { }, [active_tab_tutorials, active_tab]); const removeHTMLTagsFromString = (param = '') => { - return param.replace(/<[^>]*>/g, ''); + return param.replace(/<.*?>/g, ''); }; React.useEffect(() => { From b6d9ecb8b443f350c72853b6e0fc35c8205f68e8 Mon Sep 17 00:00:00 2001 From: rupato-deriv Date: Tue, 3 Oct 2023 10:43:43 +0800 Subject: [PATCH 6/6] fix: trigger-circle-ci