From 232c64081b790113c24e8d9c47aef5cc436c9b3f Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Wed, 15 Feb 2023 20:19:54 -0300
Subject: [PATCH] chore: refactor useThemeMode to save in userPreferences
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Júlia Jaeger Foresti <60678893+juliajforesti@users.noreply.github.com>
---
 .../meteor/app/lib/server/startup/settings.ts | 19 +++++++++++++++++
 .../client/sidebar/header/UserDropdown.tsx    |  6 +++---
 .../preferences/PreferencesGlobalSection.tsx  | 21 ++++++++++++++++---
 .../rocketchat-i18n/i18n/en.i18n.json         |  3 ++-
 .../ui-theming/src/hooks/useThemeMode.ts      | 14 +++++++++----
 .../v1/users/UsersSetPreferenceParamsPOST.ts  |  5 +++++
 .../methods/saveUserPreferences.ts            |  1 +
 7 files changed, 58 insertions(+), 11 deletions(-)

diff --git a/apps/meteor/app/lib/server/startup/settings.ts b/apps/meteor/app/lib/server/startup/settings.ts
index e8419471040a..364c31741a8c 100644
--- a/apps/meteor/app/lib/server/startup/settings.ts
+++ b/apps/meteor/app/lib/server/startup/settings.ts
@@ -375,6 +375,25 @@ settingsRegistry.addGroup('Accounts', function () {
 			public: true,
 			i18nLabel: 'Group_by_Type',
 		});
+		this.add('Accounts_Default_User_Preferences_themeAppearence', 'auto', {
+			type: 'select',
+			values: [
+				{
+					key: 'auto',
+					i18nLabel: 'Theme_match_system',
+				},
+				{
+					key: 'light',
+					i18nLabel: 'Theme_light',
+				},
+				{
+					key: 'dark',
+					i18nLabel: 'Theme_dark',
+				},
+			],
+			public: true,
+			i18nLabel: 'Theme_Appearence',
+		});
 		this.add('Accounts_Default_User_Preferences_sidebarViewMode', 'medium', {
 			type: 'select',
 			values: [
diff --git a/apps/meteor/client/sidebar/header/UserDropdown.tsx b/apps/meteor/client/sidebar/header/UserDropdown.tsx
index 6bb57cdccfc2..ce74cf4945ee 100644
--- a/apps/meteor/client/sidebar/header/UserDropdown.tsx
+++ b/apps/meteor/client/sidebar/header/UserDropdown.tsx
@@ -192,21 +192,21 @@ const UserDropdown = ({ user, onClose }: UserDropdownProps): ReactElement => {
 				<OptionIcon name='sun' />
 				<OptionContent>{t('Theme_light')}</OptionContent>
 				<OptionColumn>
-					<RadioButton checked={selectedTheme === 'light'} onChange={(): void => setTheme('light')} m='x4' />
+					<RadioButton checked={selectedTheme === 'light'} onChange={setTheme('light')} m='x4' />
 				</OptionColumn>
 			</Option>
 			<Option>
 				<OptionIcon name='moon' />
 				<OptionContent>{t('Theme_dark')}</OptionContent>
 				<OptionColumn>
-					<RadioButton checked={selectedTheme === 'dark'} onChange={(): void => setTheme('dark')} m='x4' />
+					<RadioButton checked={selectedTheme === 'dark'} onChange={setTheme('dark')} m='x4' />
 				</OptionColumn>
 			</Option>
 			<Option>
 				<OptionIcon name='desktop' />
 				<OptionContent>{t('Theme_match_system')}</OptionContent>
 				<OptionColumn>
-					<RadioButton checked={selectedTheme === 'auto'} onChange={(): void => setTheme('auto')} m='x4' />
+					<RadioButton checked={selectedTheme === 'auto'} onChange={setTheme('auto')} m='x4' />
 				</OptionColumn>
 			</Option>
 			<OptionDivider />
diff --git a/apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx
index 7c2410deb9fb..edc7e64b9dc8 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx
@@ -1,5 +1,5 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
-import { Accordion, Field, FieldGroup, MultiSelect } from '@rocket.chat/fuselage';
+import { Select, Accordion, Field, FieldGroup, MultiSelect } from '@rocket.chat/fuselage';
 import { useUserPreference, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { useMemo } from 'react';
@@ -11,6 +11,7 @@ const PreferencesGlobalSection = ({ onChange, commitRef, ...props }: FormSection
 	const t = useTranslation();
 
 	const userDontAskAgainList = useUserPreference<{ action: string; label: string }[]>('dontAskAgainList');
+	const themePreference = useUserPreference<'light' | 'dark' | 'auto'>('themeAppearence');
 
 	const options = useMemo(
 		() => (userDontAskAgainList || []).map(({ action, label }) => [action, label]) as SelectOption[],
@@ -22,18 +23,26 @@ const PreferencesGlobalSection = ({ onChange, commitRef, ...props }: FormSection
 	const { values, handlers, commit } = useForm(
 		{
 			dontAskAgainList: selectedOptions,
+			themeAppearence: themePreference,
 		},
 		onChange,
 	);
 
-	const { dontAskAgainList } = values as {
+	const { dontAskAgainList, themeAppearence } = values as {
 		dontAskAgainList: string[];
+		themeAppearence: string;
 	};
 
-	const { handleDontAskAgainList } = handlers;
+	const { handleDontAskAgainList, handleThemeAppearence } = handlers;
 
 	commitRef.current.global = commit;
 
+	const themeOptions: SelectOption[] = [
+		['auto', t('Theme_match_system')],
+		['light', t('Theme_light')],
+		['dark', t('Theme_dark')],
+	];
+
 	return (
 		<Accordion.Item title={t('Global')} {...props}>
 			<FieldGroup>
@@ -48,6 +57,12 @@ const PreferencesGlobalSection = ({ onChange, commitRef, ...props }: FormSection
 						/>
 					</Field.Row>
 				</Field>
+				<Field>
+					<Field.Label>{t('Theme_Appearence')}</Field.Label>
+					<Field.Row>
+						<Select value={themeAppearence} onChange={handleThemeAppearence} options={themeOptions} />
+					</Field.Row>
+				</Field>
 			</FieldGroup>
 		</Accordion.Item>
 	);
diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
index c076a28648f9..4dbffde6b8b9 100644
--- a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -5643,5 +5643,6 @@
   "cloud.RegisterWorkspace_Token_Step_One": "1. Go to: <1>cloud.rocket.chat > Workspaces</1> and click <3>'Register self-managed'</3>.",
   "cloud.RegisterWorkspace_Setup_Terms_Privacy": "I agree with <1>Terms and Conditions</1> and <3>Privacy Policy</3>",
   "Larger_amounts_of_active_connections": "For larger amounts of active connections you can consider our",
-  "multiple_instance_solutions": "multiple instance solutions"
+  "multiple_instance_solutions": "multiple instance solutions",
+  "Theme_Appearence": "Theme Appearence"
 }
diff --git a/ee/packages/ui-theming/src/hooks/useThemeMode.ts b/ee/packages/ui-theming/src/hooks/useThemeMode.ts
index ff1c47a5f52e..84deebb28374 100644
--- a/ee/packages/ui-theming/src/hooks/useThemeMode.ts
+++ b/ee/packages/ui-theming/src/hooks/useThemeMode.ts
@@ -1,5 +1,6 @@
-import { useDarkMode, useSessionStorage } from '@rocket.chat/fuselage-hooks';
-import type { Dispatch, SetStateAction } from 'react';
+import { useDarkMode } from '@rocket.chat/fuselage-hooks';
+import { useEndpoint, useUserPreference } from '@rocket.chat/ui-contexts';
+import { useCallback } from 'react';
 
 type ThemeMode = 'light' | 'dark' | 'auto';
 
@@ -9,8 +10,13 @@ type ThemeMode = 'light' | 'dark' | 'auto';
  * @returns [currentThemeMode, setThemeMode, resolvedThemeMode]
  */
 
-export const useThemeMode = (value: ThemeMode = 'auto'): [ThemeMode, Dispatch<SetStateAction<ThemeMode>>, 'light' | 'dark'] => {
-	const [theme, setTheme] = useSessionStorage<ThemeMode>(`rcx-theme`, value);
+export const useThemeMode = (): [ThemeMode, (value: ThemeMode) => () => void, 'light' | 'dark'] => {
+	const theme = useUserPreference<ThemeMode>('themeAppearence') || 'auto';
+
+	const saveUserPreferences = useEndpoint('POST', '/v1/users.setPreferences');
+
+	const setTheme = (value: ThemeMode): (() => void) =>
+		useCallback(() => saveUserPreferences({ data: { themeAppearence: value } }), [value]);
 
 	return [theme, setTheme, useDarkMode(theme === 'auto' ? undefined : theme === 'dark') ? 'dark' : 'light'];
 };
diff --git a/packages/rest-typings/src/v1/users/UsersSetPreferenceParamsPOST.ts b/packages/rest-typings/src/v1/users/UsersSetPreferenceParamsPOST.ts
index d3082d5c6782..5a07797dc80a 100644
--- a/packages/rest-typings/src/v1/users/UsersSetPreferenceParamsPOST.ts
+++ b/packages/rest-typings/src/v1/users/UsersSetPreferenceParamsPOST.ts
@@ -38,6 +38,7 @@ export type UsersSetPreferencesParamsPOST = {
 		sidebarGroupByType?: boolean;
 		muteFocusedConversations?: boolean;
 		dontAskAgainList?: Array<{ action: string; label: string }>;
+		themeAppearence?: 'auto' | 'light' | 'dark';
 		receiveLoginDetectionEmail?: boolean;
 		idleTimeLimit?: number;
 		omnichannelTranscriptEmail?: boolean;
@@ -190,6 +191,10 @@ const UsersSetPreferencesParamsPostSchema = {
 					},
 					nullable: true,
 				},
+				themeAppearence: {
+					type: 'string',
+					nullable: true,
+				},
 				receiveLoginDetectionEmail: {
 					type: 'boolean',
 					nullable: true,
diff --git a/packages/ui-contexts/src/ServerContext/methods/saveUserPreferences.ts b/packages/ui-contexts/src/ServerContext/methods/saveUserPreferences.ts
index 6b455f74f835..ae1df52b409f 100644
--- a/packages/ui-contexts/src/ServerContext/methods/saveUserPreferences.ts
+++ b/packages/ui-contexts/src/ServerContext/methods/saveUserPreferences.ts
@@ -29,6 +29,7 @@ type UserPreferences = {
 	sidebarGroupByType: boolean;
 	muteFocusedConversations: boolean;
 	dontAskAgainList: { action: string; label: string }[];
+	themeAppearence: 'auto' | 'light' | 'dark';
 	receiveLoginDetectionEmail: boolean;
 };