fix: apply dark mode preview when changed to initial value

refs: IRIS-3481 (#163)

src/constants/index.ts

@@ -87,7 +87,7 @@ export const EMAIL_VALIDATION_REGEX =
 
 export const ROOT_NAME = 'USER_ROOT';
 
-export const DR_VALUES = ['auto', 'enabled', 'disabled'];
+export const DARK_READER_VALUES = ['auto', 'enabled', 'disabled'] as const;
 
 export const FOLDER_VIEW = {
 	search_folder: 'search folder',

src/settings/components/general-settings/appearance-settings.tsx

@@ -4,24 +4,26 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { FormSubSection, Select } from '@zextras/carbonio-design-system';
+import { FormSubSection, Select, SelectProps } from '@zextras/carbonio-design-system';
 import { find } from 'lodash';
 import React, { FC, useCallback, useContext, useMemo } from 'react';
 import { ThemeCallbacksContext } from '../../../boot/theme-provider';
-import { DR_VALUES, SHELL_APP_ID } from '../../../constants';
+import { SHELL_APP_ID } from '../../../constants';
 import { getT } from '../../../store/i18n';
 import { themeSubSection } from '../../general-settings-sub-sections';
 import { useDarkReaderResultValue } from '../../../custom-hooks/useDarkReaderResultValue';
+import { DarkReaderPropValues, isDarkReaderPropValues } from '../../../../types';
 
 const AppearanceSettings: FC<{
 	addMod: (type: 'prefs' | 'props', key: string, value: { value: any; app: string }) => void;
-}> = ({ addMod }) => {
+	removeMod: (type: 'prefs' | 'props', key: string) => void;
+}> = ({ addMod, removeMod }) => {
 	const { setDarkReaderState } = useContext(ThemeCallbacksContext);
 
 	const darkReaderResultValue = useDarkReaderResultValue();
 
 	const t = getT();
-	const items = useMemo(
+	const items = useMemo<Array<{ label: string; value: DarkReaderPropValues }>>(
 		() => [
 			{
 				label: t('settings.general.theme_auto', 'Auto'),
@@ -42,14 +44,18 @@ const AppearanceSettings: FC<{
 		() => find(items, { value: darkReaderResultValue }),
 		[darkReaderResultValue, items]
 	);
-	const onSelectionChange = useCallback(
-		(v) => {
-			if (DR_VALUES.includes(v) && v !== darkReaderResultValue) {
-				setDarkReaderState(v);
-				addMod('props', 'zappDarkreaderMode', { app: SHELL_APP_ID, value: v });
+	const onSelectionChange = useCallback<NonNullable<SelectProps['onChange']>>(
+		(value) => {
+			if (isDarkReaderPropValues(value)) {
+				setDarkReaderState(value);
+				if (value !== darkReaderResultValue) {
+					addMod('props', 'zappDarkreaderMode', { app: SHELL_APP_ID, value });
+				} else {
+					removeMod('props', 'zappDarkreaderMode');
+				}
 			}
 		},
-		[addMod, darkReaderResultValue, setDarkReaderState]
+		[addMod, darkReaderResultValue, removeMod, setDarkReaderState]
 	);
 	const subSection = useMemo(() => themeSubSection(t), [t]);
 	return (
@@ -62,7 +68,6 @@ const AppearanceSettings: FC<{
 			<Select
 				items={items}
 				selection={defaultSelection}
-				defaultSelection={defaultSelection}
 				label={t('settings.general.dark_mode', 'Dark Mode')}
 				onChange={onSelectionChange}
 			/>

src/settings/general-settings.tsx

@@ -5,7 +5,7 @@
  */
 
 import { Container, useSnackbar } from '@zextras/carbonio-design-system';
-import { includes, isEmpty } from 'lodash';
+import { includes, isEmpty, size } from 'lodash';
 import React, { FC, useCallback, useMemo, useState } from 'react';
 import { Mods } from '../../types';
 import { editSettings } from '../network/edit-settings';
@@ -34,6 +34,24 @@ const GeneralSettings: FC = () => {
 			}
 		}));
 	}, []);
+	// TODO update type
+	const removeMod = useCallback((type: 'props' | 'prefs', key: string) => {
+		setMods((prevState) => {
+			const prevType = prevState[type];
+			if (prevType && prevType[key] !== undefined) {
+				const nextState = { ...prevState, [type]: { ...prevState[type] } };
+				const nextType = nextState[type];
+				if (nextType && nextType[key] !== undefined) {
+					delete nextType[key];
+				}
+				if (size(nextState[type]) === 0) {
+					delete nextState[type];
+				}
+				return nextState;
+			}
+			return prevState;
+		});
+	}, []);
 	const createSnackbar = useSnackbar();
 
 	const onSave = useCallback(() => {
@@ -78,7 +96,7 @@ const GeneralSettings: FC = () => {
 				padding={{ all: 'medium' }}
 				style={{ overflow: 'auto' }}
 			>
-				<AppearanceSettings addMod={addMod} />
+				<AppearanceSettings addMod={addMod} removeMod={removeMod} />
 				<LanguageAndTimeZoneSettings
 					settings={settings}
 					addMod={addMod}

src/store/login/store.ts

@@ -11,5 +11,6 @@ export const useLoginConfigStore = create<LoginConfigStore>(() => ({
 	carbonioWebUIDarkMode: undefined,
 	carbonioWebUiAppLogo: undefined,
 	carbonioWebUiDarkAppLogo: undefined,
-	carbonioWebUiTitle: undefined
+	carbonioWebUiTitle: undefined,
+	carbonioWebUiFavicon: undefined
 }));

types/misc/index.d.ts

@@ -8,6 +8,7 @@ import { Store } from '@reduxjs/toolkit';
 import { To } from 'history';
 import { ComponentType } from 'react';
 import { CarbonioModule, PanelMode } from '../apps';
+import { DARK_READER_VALUES } from '../../src/constants';
 
 // eslint-disable-next-line no-shadow
 export enum JSNS {
@@ -18,7 +19,16 @@ export enum JSNS {
 	SYNC = 'urn:zimbraSync'
 }
 
-export type DarkReaderPropValues = 'auto' | 'enabled' | 'disabled';
+export type DarkReaderPropValues = typeof DARK_READER_VALUES[number];
+
+export function isDarkReaderPropValues(
+	maybeDarkReaderPropValue: unknown
+): maybeDarkReaderPropValue is DarkReaderPropValues {
+	return (
+		typeof maybeDarkReaderPropValue === 'string' &&
+		DARK_READER_VALUES.includes(maybeDarkReaderPropValue)
+	);
+}
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 export type PackageDependentFunction = (app: string) => Function;