Merge pull request #75 from Zextras/search-bar-fix

Search bar fix
zextras · May 9, 2022 · 776ae16 · 776ae16
2 parents 78aed75 + 9edc83d
commit 776ae16
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 43 deletions.
diff --git a/src/search/module-selector.tsx b/src/search/module-selector.tsx
@@ -10,6 +10,7 @@ import { AppRoute } from '../../types';
 import { useAppStore } from '../store/app';
 import { useSearchStore } from './search-store';
 import { SEARCH_APP_ID } from '../constants';
+import { pushHistory } from '../history/hooks';
 
 const SelectorContainer = styled(Container)<{ open: boolean }>`
 	border-right: 1px solid ${({ theme }): string => theme.palette.gray4.regular};
@@ -29,6 +30,7 @@ export const ModuleSelector: FC<{ activeRoute: AppRoute; disabled: boolean }> =
 		() => modules.find((m) => m.route === module) ?? modules[0],
 		[module, modules]
 	);
+
 	const [open, setOpen] = useState(false);
 
 	const dropdownItems = useMemo(
@@ -38,7 +40,10 @@ export const ModuleSelector: FC<{ activeRoute: AppRoute; disabled: boolean }> =
 				label,
 				icon,
 				active: id === module,
-				click: () => updateModule(route)
+				click: (): void => {
+					updateModule(route);
+					pushHistory({ route: SEARCH_APP_ID, path: `/${route}` });
+				}
 			})),
 		[module, modules, updateModule]
 	);

diff --git a/src/search/search-app-view.tsx b/src/search/search-app-view.tsx
@@ -91,6 +91,7 @@ export const SearchAppView: FC = () => {
 			)),
 		[searchViews]
 	);
+
 	return (
 		<>
 			{/* <RouteLeavingGuard

diff --git a/src/search/search-bar.tsx b/src/search/search-bar.tsx
@@ -12,8 +12,6 @@ import {
 	Container,
 	IconButton,
 	Tooltip,
-	Icon,
-	Text,
 	Padding
 } from '@zextras/carbonio-design-system';
 import { useTranslation } from 'react-i18next';
@@ -22,7 +20,7 @@ import styled from 'styled-components';
 import { useHistory } from 'react-router-dom';
 import { useLocalStorage } from '../shell/hooks';
 import { SEARCH_APP_ID } from '../constants';
-import { useAppStore } from '../store/app';
+
 import { useSearchStore } from './search-store';
 import { QueryChip, SearchBarProps } from '../../types';
 import { ModuleSelector } from './module-selector';
@@ -99,7 +97,6 @@ export const SearchBar: FC<SearchBarProps> = ({
 	const onSearch = useCallback(() => {
 		updateQuery((currentQuery) => {
 			const ref = inputRef?.current;
-
 			if (ref) ref.innerText = '';
 			if (inputTyped.length > 0) {
 				const newInputState = [
@@ -119,12 +116,13 @@ export const SearchBar: FC<SearchBarProps> = ({
 					filter(
 						currentQuery,
 						(qchip: QueryChip): boolean =>
-							qchip.isQueryFilter ||
 							!!find(inputState, (c: QueryChip): boolean => c.label === qchip.label)
 					)
 				);
 			}
+
 			setInputTyped('');
+
 			return reduce(
 				inputState,
 				(acc, chip) => {
@@ -133,10 +131,10 @@ export const SearchBar: FC<SearchBarProps> = ({
 					}
 					return acc;
 				},
+
 				filter(
 					currentQuery,
 					(qchip: QueryChip): boolean =>
-						qchip.isQueryFilter ||
 						!!find(inputState, (c: QueryChip): boolean => c.label === qchip.label)
 				)
 			);
@@ -146,7 +144,7 @@ export const SearchBar: FC<SearchBarProps> = ({
 		// }
 		setSearchIsEnabled(false);
 		// setChangedBySearchBar(true);
-	}, [updateQuery, inputTyped, inputState, history, module]);
+	}, [updateQuery, history, module, inputTyped, inputState]);
 
 	const appSuggestions = useMemo<Array<QueryChip & { hasAvatar: false }>>(
 		() =>

diff --git a/src/settings/components/general-settings/out-of-office-view.tsx b/src/settings/components/general-settings/out-of-office-view.tsx
@@ -110,6 +110,14 @@ const OutOfOfficeView: FC<{
 	const itemsExternalSenders = useMemo(() => ItemsExternalSenders(t), [t]);
 	const itemsOutOfOfficeStatus = useMemo(() => ItemsOutOfOfficeStatus(t), [t]);
 	const sectionTitle = useMemo(() => outOfOfficeSubSection(t), [t]);
+	const defaultSendAutoreply = useMemo(
+		() => getExternalSendersPrefsData(settings, 'label', t),
+		[settings, t]
+	);
+	const defaultOutOfOfficeStatus = useMemo(
+		() => getOutOfOfficeStatusPrefsData(settings, t),
+		[settings, t]
+	);
 	return (
 		<FormSubSection
 			label={sectionTitle.label}
@@ -123,10 +131,16 @@ const OutOfOfficeView: FC<{
 					background="gray5"
 					label={t('label.out_of_office', 'Out of Office')}
 					onChange={(value: any): void => {
-						updatePrefs(value, 'zimbraPrefOutOfOfficeReplyEnabled');
-						setSendAutoReply(!sendAutoReply);
+						if (
+							value &&
+							settings.prefs.zimbraPrefOutOfOfficeReplyEnabled &&
+							value !== settings.prefs.zimbraPrefOutOfOfficeReplyEnabled
+						) {
+							updatePrefs(value, 'zimbraPrefOutOfOfficeReplyEnabled');
+							setSendAutoReply(!sendAutoReply);
+						}
 					}}
-					defaultSelection={
+					selection={
 						settings.prefs.zimbraPrefOutOfOfficeReplyEnabled === 'TRUE'
 							? itemsSendAutoReplies[0]
 							: itemsSendAutoReplies[1]
@@ -152,16 +166,9 @@ const OutOfOfficeView: FC<{
 						background="gray5"
 						label={t('settings.out_of_office.labels.external_senders', 'External Senders')}
 						onChange={(value: unknown): void => {
-							externalSendersHandler(value);
-						}}
-						defaultSelection={{
-							// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-							// @ts-ignore
-							label: getExternalSendersPrefsData(settings, 'label', t),
-							// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-							// @ts-ignore
-							value: getExternalSendersPrefsData(settings, 'value', t)
+							if (value && value !== defaultSendAutoreply?.value) externalSendersHandler(value);
 						}}
+						selection={defaultSendAutoreply}
 					/>
 				</Padding>
 				{externalReplyInput && (
@@ -209,16 +216,10 @@ const OutOfOfficeView: FC<{
 								'Out Of Office Status:'
 							)}
 							onChange={(value: unknown): void => {
-								createAppointmentAsHandler(value);
-							}}
-							defaultSelection={{
-								// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-								// @ts-ignore
-								label: getOutOfOfficeStatusPrefsData(settings, 'label', t),
-								// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-								// @ts-ignore
-								value: getOutOfOfficeStatusPrefsData(settings, 'value', t)
+								if (value && value !== defaultOutOfOfficeStatus?.value)
+									createAppointmentAsHandler(value);
 							}}
+							selection={defaultOutOfOfficeStatus}
 						/>
 					</Padding>
 				</Container>

diff --git a/src/settings/components/utils.ts b/src/settings/components/utils.ts
@@ -67,7 +67,7 @@ export const getExternalSendersPrefsData = (
 	settings: AccountSettings,
 	ret: string,
 	t: TFunction
-): string => {
+): { label: string; value: string } => {
 	let item;
 	const itemsExternalSenders = ItemsExternalSenders(t);
 	if (
@@ -88,14 +88,14 @@ export const getExternalSendersPrefsData = (
 	} else {
 		item = { ...itemsExternalSenders[3] };
 	}
-	return String(item[ret]);
+
+	return item;
 };
 
 export const getOutOfOfficeStatusPrefsData = (
 	settings: AccountSettings,
-	ret: string,
 	t: TFunction
-): string => {
+): { label: string; value: string } => {
 	let item;
 	const itemsOutOfOfficeStatus = ItemsOutOfOfficeStatus(t);
 	if (settings.prefs.zimbraPrefOutOfOfficeFreeBusyStatus === 'BUSY') {
@@ -104,7 +104,7 @@ export const getOutOfOfficeStatusPrefsData = (
 		item = { ...itemsOutOfOfficeStatus[0] };
 	}
 
-	return String(item[ret]);
+	return item;
 };
 
 export const changeDateEvent = (date: string | Date): string =>

diff --git a/src/settings/language-and-timezone-settings.tsx b/src/settings/language-and-timezone-settings.tsx
@@ -33,6 +33,7 @@ const LanguageAndTimeZone: FC<{
 	const { t } = useTranslation();
 	const locales = useMemo(() => localeList(t), [t]);
 	const timezones = useMemo(() => timeZoneList(t), [t]);
+
 	const updatePrefs = useCallback(
 		(v, p) => {
 			addMod('prefs', p, v);
@@ -50,12 +51,11 @@ const LanguageAndTimeZone: FC<{
 
 	const defaultTimeZone = useMemo(
 		() =>
-			settings.prefs.zimbraPrefTimeZoneId &&
-			find(timezones, { value: settings.prefs.zimbraPrefTimeZoneId })
-				? find(timezones, { value: settings.prefs.zimbraPrefTimeZoneId })
-				: find(timezones, { value: 'UTC' }),
+			find(timezones, { value: settings.prefs.zimbraPrefTimeZoneId }) ??
+			find(timezones, { value: 'UTC' }),
 		[timezones, settings.prefs.zimbraPrefTimeZoneId]
 	);
+
 	const sectionTitle = useMemo(() => timezoneAndLanguageSubSection(t), [t]);
 	return (
 		<FormSubSection
@@ -71,24 +71,26 @@ const LanguageAndTimeZone: FC<{
 						background="gray5"
 						label={t('label.language', 'Language')}
 						onChange={(value: any): void => {
-							updatePrefs(value, 'zimbraPrefLocale');
+							if (value && value !== settings.prefs.zimbraPrefLocale)
+								updatePrefs(value, 'zimbraPrefLocale');
 						}}
-						defaultSelection={defaultSelection}
+						selection={defaultSelection}
 						showCheckbox={false}
 						dropdownMaxHeight="200px"
 						selectedBackgroundColor="highlight"
 					/>
 				)}
 				<Padding top="small" width="100%">
-					{Object.keys(settings.prefs).length > 0 && (
+					{Object.keys(settings.prefs).length > 0 && timezones && (
 						<Select
 							items={timezones}
 							background="gray5"
 							label={t('label.time_zone', 'Time Zone')}
 							onChange={(value: any): void => {
-								updatePrefs(value, 'zimbraPrefTimeZoneId');
+								if (value && value !== settings.prefs.zimbraPrefTimeZoneId)
+									updatePrefs(value, 'zimbraPrefTimeZoneId');
 							}}
-							defaultSelection={defaultTimeZone}
+							selection={defaultTimeZone}
 							showCheckbox={false}
 							dropdownMaxHeight="200px"
 							selectedBackgroundColor="highlight"
-Original file line number
+Diff line change
@@ Expand Up / @@ -91,6 +91,7 @@ export const SearchAppView: FC = () => { @@
     			)),
     		[searchViews]
     	);
     	return (
     		<>
     			{/* <RouteLeavingGuard
@@ Expand Down @@