feat: save quick replies to the userpref

Author: divyanshu-patil

app/i18n/locales/en.json

@@ -18,6 +18,7 @@
   "abac_removed_user_from_the_room": "was removed by ABAC",
   "ABAC_room_attributes": "Room attributes",
   "accept": "Accept",
+  "WatchOS_Quick_Replies_Description":"Enter Quick Replies to Display on Apple Watch",
   "Accessibility": "Accessibility",
   "Accessibility_and_Appearance": "Accessibility & appearance",
   "Accessibility_statement": "Accessibility statement",
@@ -33,6 +34,7 @@
   "Add_server": "Add workspace",
   "Add_thread_reply": "Add thread reply",
   "Add_users": "Add users",
+  "Add_Quick_Reply":"Add Quick Reply",
   "added__roomName__to_this_team": "added #{{roomName}} to this team",
   "Added__username__to_this_team": "added @{{user_added}} to this team",
   "Admin_Panel": "Admin panel",
@@ -977,6 +979,7 @@
   "Waiting_for_answer": "Waiting for answer",
   "Waiting_for_network": "Waiting for network...",
   "Waiting_for_server_connection": "Waiting for server connection",
+  "WatchOS_Quick_Replies":"WatchOS Quick Replies",
   "Websocket_disabled": "Websocket is disabled for this workspace.\n{{contact}}",
   "What_are_you_doing_right_now": "What are you doing right now?",
   "Whats_the_password_for_your_certificate": "What's the password for your certificate?",

app/lib/constants/keys.ts

@@ -25,3 +25,4 @@ export const ANALYTICS_EVENTS_KEY = 'RC_ANALYTICS_EVENTS_KEY';
 export const TOKEN_KEY = 'reactnativemeteor_usertoken';
 export const CURRENT_SERVER = 'currentServer';
 export const CERTIFICATE_KEY = 'RC_CERTIFICATE_KEY';
+export const WATCHOS_QUICKREPLIES = 'RC_WATCHOS_QUICKREPIES';

app/lib/methods/userPreferences.ts

@@ -149,6 +149,19 @@ class UserPreferences {
 		this.mmkv.set(key, value);
 	}
 
+	getArray<T = unknown>(key: string): T[] | null {
+		try {
+			const jsonString = this.mmkv.getString(key);
+			return jsonString ? (JSON.parse(jsonString) as T[]) : null;
+		} catch {
+			return null;
+		}
+	}
+
+	setArray<T>(key: string, value: T[]): void {
+		this.mmkv.set(key, JSON.stringify(value));
+	}
+
 	getAllKeys(): string[] {
 		return this.mmkv.getAllKeys();
 	}

app/stacks/InsideStack.tsx

@@ -36,6 +36,7 @@ import CannedResponseDetail from '../views/CannedResponseDetail';
 import ProfileView from '../views/ProfileView';
 import UserPreferencesView from '../views/UserPreferencesView';
 import UserNotificationPrefView from '../views/UserNotificationPreferencesView';
+import UserWatchOSQuickRepliesView from '../views/UserWatchOSQuickRepliesView';
 import ChangePasswordView from '../views/ChangePasswordView';
 // Display Preferences View
 import DisplayPrefsView from '../views/DisplayPrefsView';
@@ -171,6 +172,7 @@ const ProfileStackNavigator = () => {
 			<ProfileStack.Screen name='UserPreferencesView' component={UserPreferencesView} />
 			<ProfileStack.Screen name='ChangeAvatarView' component={ChangeAvatarView} />
 			<ProfileStack.Screen name='UserNotificationPrefView' component={UserNotificationPrefView} />
+			<ProfileStack.Screen name='UserWatchOSQuickRepliesView' component={UserWatchOSQuickRepliesView} />
 			<ProfileStack.Screen name='PushTroubleshootView' component={PushTroubleshootView} />
 			<ProfileStack.Screen name='PickerView' component={PickerView} />
 		</ProfileStack.Navigator>

app/stacks/types.ts

@@ -191,6 +191,7 @@ export type ProfileStackParamList = {
 	ProfileView: undefined;
 	UserPreferencesView: undefined;
 	UserNotificationPrefView: undefined;
+	UserWatchOSQuickRepliesView: undefined;
 	PushTroubleshootView: undefined;
 	ChangeAvatarView: {
 		context: TChangeAvatarViewContext;

app/views/UserPreferencesView/index.tsx

@@ -116,6 +116,16 @@ const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Ele
 					/>
 					<List.Separator />
 				</List.Section>
+				<List.Section title='WatchOS_Quick_Replies'>
+					<List.Separator />
+					<List.Item
+						title='WatchOS_Quick_Replies'
+						onPress={() => navigateToScreen('UserWatchOSQuickRepliesView')}
+						showActionIndicator
+						testID='preferences-view-watchos-quickreplies'
+					/>
+					<List.Separator />
+				</List.Section>
 			</List.Container>
 		</SafeAreaView>
 	);

app/views/UserWatchOSQuickRepliesView/index.tsx

@@ -0,0 +1,68 @@
+import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
+import React, { useEffect, useState } from 'react';
+import { ScrollView } from 'react-native-gesture-handler';
+
+import I18n from '../../i18n';
+import SafeAreaView from '../../containers/SafeAreaView';
+import * as List from '../../containers/List';
+import { type ProfileStackParamList } from '../../stacks/types';
+import { FormTextInput } from '../../containers/TextInput';
+import Chip from '../../containers/Chip';
+import { useUserPreferences } from '../../lib/methods/userPreferences';
+import { WATCHOS_QUICKREPLIES } from '../../lib/constants/keys';
+
+interface IUserPreferencesViewProps {
+	navigation: NativeStackNavigationProp<ProfileStackParamList, 'UserPreferencesView'>;
+}
+
+const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Element => {
+	const [quickreplies, setQuickreplies] = useUserPreferences<string[]>(WATCHOS_QUICKREPLIES, []);
+	const [input, setInput] = useState<string>('');
+
+	useEffect(() => {
+		navigation.setOptions({
+			title: I18n.t('Preferences')
+		});
+	}, [navigation]);
+
+	const removeQuickReply = (reply: string) => {
+		const newReplies = quickreplies?.filter(quickreply => quickreply !== reply);
+		setQuickreplies(newReplies);
+	};
+
+	const addQuickReply = () => {
+		const value = input.trim();
+		if (!value) return;
+		if (!quickreplies?.includes(input.trim())) setQuickreplies([...(quickreplies ?? []), value]);
+		setInput('');
+	};
+
+	return (
+		<SafeAreaView testID='preferences-view'>
+			<List.Container>
+				<List.Section title='WatchOS_Quick_Replies'>
+					<>
+						{quickreplies && quickreplies.length !== 0 && (
+							<ScrollView horizontal style={{ marginVertical: 8, paddingHorizontal: 4 }}>
+								{quickreplies.map((reply, index) => (
+									<Chip key={index} text={reply} onPress={() => removeQuickReply(reply)} />
+								))}
+							</ScrollView>
+						)}
+					</>
+					<List.Separator />
+					<FormTextInput
+						value={input}
+						onChangeText={text => setInput(text)}
+						placeholder={I18n.t('Add_Quick_Reply')}
+						onSubmitEditing={addQuickReply}
+					/>
+					<List.Separator />
+					<List.Info info='WatchOS_Quick_Replies_Description' />
+				</List.Section>
+			</List.Container>
+		</SafeAreaView>
+	);
+};
+
+export default UserPreferencesView;