Change time format of RoomItems

app/containers/MessageBox/ReplyPreview.tsx

@@ -46,31 +46,22 @@ const styles = StyleSheet.create({
 interface IMessageBoxReplyPreview {
 	replying: boolean;
 	message: IMessage;
-	Message_TimeFormat: string;
 	close(): void;
 	baseUrl: string;
 	username: string;
 	getCustomEmoji: Function;
 	useRealName: boolean;
-	timeFormat: number;
+	timeFormat: string;
 }
 
 const ReplyPreview = React.memo(
-	({ message, Message_TimeFormat, replying, close, useRealName, timeFormat }: IMessageBoxReplyPreview) => {
+	({ message, replying, close, useRealName, timeFormat }: IMessageBoxReplyPreview) => {
 		const { theme } = useTheme();
 
-		const getTimeFormat = () => {
-			const timeFormats = ['h:mm A', 'H:mm'];
-			if (timeFormat) {
-				return timeFormats[timeFormat - 1];
-			}
-			return Message_TimeFormat;
-		};
-
 		if (!replying) {
 			return null;
 		}
-		const time = moment(message.ts).format(getTimeFormat());
+		const time = moment(message.ts).format(timeFormat);
 		return (
 			<View style={[styles.container, { backgroundColor: themes[theme].messageboxBackground }]}>
 				<View style={[styles.messageContainer, { backgroundColor: themes[theme].chatComponentBackground }]}>
@@ -91,7 +82,6 @@ const ReplyPreview = React.memo(
 );
 
 const mapStateToProps = (state: IApplicationState) => ({
-	Message_TimeFormat: state.settings.Message_TimeFormat as string,
 	baseUrl: state.server.server,
 	useRealName: state.settings.UI_Use_Real_Name as boolean
 });

app/containers/RoomItem/index.tsx

@@ -120,13 +120,14 @@ class RoomItemContainer extends React.Component<IRoomItemContainerProps, any> {
 			swipeEnabled,
 			autoJoin,
 			showAvatar,
-			displayMode
+			displayMode,
+			timeFormat
 		} = this.props;
 		const name = getRoomTitle(item);
 		const testID = `rooms-list-view-item-${name}`;
 		const avatar = getRoomAvatar(item);
 		const isRead = getIsRead(item);
-		const date = item.roomUpdatedAt && formatDate(item.roomUpdatedAt);
+		const date = item.roomUpdatedAt && formatDate(item.roomUpdatedAt, timeFormat);
 		const alert = item.alert || item.tunread?.length;
 
 		let accessibilityLabel = name;

app/containers/RoomItem/interfaces.ts

@@ -92,6 +92,7 @@ export interface IRoomItemContainerProps {
 	autoJoin: boolean;
 	showAvatar: boolean;
 	displayMode: string;
+	timeFormat: string;
 }
 
 export interface IRoomItemProps {

app/definitions/ILoggedUser.ts

@@ -21,7 +21,7 @@ export interface ILoggedUser {
 	showMessageInMainThread?: boolean;
 	isFromWebView?: boolean;
 	enableMessageParserEarlyAdoption: boolean;
-	timeFormat: number;
+	timeFormat: string;
 }
 
 export interface ILoggedUserResultFromServer

app/lib/database/model/servers/migrations.js

@@ -109,7 +109,7 @@ export default schemaMigrations({
 			steps: [
 				addColumns({
 					table: 'users',
-					columns: [{ name: 'time_format', type: 'number', isOptional: true }]
+					columns: [{ name: 'time_format', type: 'string', isOptional: true }]
 				})
 			]
 		}

app/lib/database/schema/servers.js

@@ -18,7 +18,7 @@ export default appSchema({
 				{ name: 'avatar_etag', type: 'string', isOptional: true },
 				{ name: 'is_from_webview', type: 'boolean', isOptional: true },
 				{ name: 'enable_message_parser_early_adoption', type: 'boolean', isOptional: true },
-				{ name: 'time_format', type: 'number', isOptional: true }
+				{ name: 'time_format', type: 'string', isOptional: true }
 			]
 		}),
 		tableSchema({

app/lib/methods/subscriptions/rooms.ts

@@ -296,7 +296,7 @@ export default function subscribeRooms() {
 				store.dispatch(setUser({ showMessageInMainThread: diff['settings.preferences.showMessageInMainThread'] }));
 			}
 			if ((['settings.preferences.clockMode'] as any) in diff) {
-				store.dispatch(setUser({ timeFormat: diff['settings.preferences.clockMode'] }));
+				store.dispatch(setUser({ timeFormat: diff['settings.preferences.clockMode'] === 2 ? 'H:mm' : 'h:mm A' }));
 			}
 		}
 		if (/subscriptions/.test(ev)) {

app/lib/services/connect.ts

@@ -286,7 +286,7 @@ async function login(credentials: ICredentials, isFromWebView = false): Promise<
 			isFromWebView,
 			showMessageInMainThread: result.me.settings?.preferences?.showMessageInMainThread ?? true,
 			enableMessageParserEarlyAdoption: result.me.settings?.preferences?.enableMessageParserEarlyAdoption ?? true,
-			timeFormat: result.me.settings?.preferences?.clockMode ?? 0
+			timeFormat: result.me.settings?.preferences?.clockMode === 2 ? 'H:mm' : 'h:mm A'
 		};
 		return user;
 	}

app/utils/room.ts

@@ -23,10 +23,10 @@ export const capitalize = (s: string): string => {
 	return s.charAt(0).toUpperCase() + s.slice(1);
 };
 
-export const formatDate = (date: string | Date): string =>
+export const formatDate = (date: string | Date, timeFormat: string | undefined): string =>
 	moment(date).calendar(null, {
 		lastDay: `[${I18n.t('Yesterday')}]`,
-		sameDay: 'LT',
+		sameDay: timeFormat || 'LT',
 		lastWeek: 'dddd',
 		sameElse: 'L'
 	});

app/views/RoomView/index.tsx

@@ -144,7 +144,6 @@ interface IRoomViewProps extends IBaseScreen<ChatsStackParamList, 'RoomView'> {
 	useRealName?: boolean;
 	isAuthenticated: boolean;
 	Message_GroupingPeriod?: number;
-	Message_TimeFormat?: string;
 	Message_Read_Receipt_Enabled?: boolean;
 	Hide_System_Messages?: string[];
 	baseUrl: string;
@@ -1183,19 +1182,9 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		});
 	};
 
-	getMessageTimeFormat = () => {
-		const { user, Message_TimeFormat } = this.props;
-		const timeFormats = ['h:mm A', 'H:mm'];
-		if (user.timeFormat) {
-			return timeFormats[user.timeFormat - 1];
-		}
-		return Message_TimeFormat;
-	};
-
 	renderItem = (item: TAnyMessageModel, previousItem: TAnyMessageModel, highlightedMessage?: string) => {
 		const { room, lastOpen, canAutoTranslate } = this.state;
 		const { user, Message_GroupingPeriod, useRealName, baseUrl, Message_Read_Receipt_Enabled, theme } = this.props;
-		const Message_TimeFormat = this.getMessageTimeFormat();
 		let dateSeparator = null;
 		let showUnreadSeparator = false;
 
@@ -1246,7 +1235,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 					isSystemMessage={room.sysMes as boolean}
 					baseUrl={baseUrl}
 					Message_GroupingPeriod={Message_GroupingPeriod}
-					timeFormat={Message_TimeFormat}
+					timeFormat={user.timeFormat}
 					useRealName={useRealName}
 					isReadReceiptEnabled={Message_Read_Receipt_Enabled}
 					autoTranslateRoom={canAutoTranslate && 'id' in room && room.autoTranslate}
@@ -1455,7 +1444,6 @@ const mapStateToProps = (state: IApplicationState) => ({
 	useRealName: state.settings.UI_Use_Real_Name as boolean,
 	isAuthenticated: state.login.isAuthenticated,
 	Message_GroupingPeriod: state.settings.Message_GroupingPeriod as number,
-	Message_TimeFormat: state.settings.Message_TimeFormat as string,
 	customEmojis: state.customEmojis,
 	baseUrl: state.server.server,
 	serverVersion: state.server.version,

app/views/RoomsListView/index.tsx

@@ -936,7 +936,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 
 		const { item: currentItem } = this.state;
 		const {
-			user: { username },
+			user: { username, timeFormat },
 			StoreLastMessage,
 			useRealName,
 			theme,
@@ -972,6 +972,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 				swipeEnabled={swipeEnabled}
 				showAvatar={showAvatar}
 				displayMode={displayMode}
+				timeFormat={timeFormat}
 			/>
 		);
 	};

app/views/TeamChannelsView.tsx

@@ -17,7 +17,7 @@ import RoomHeader from '../containers/RoomHeader';
 import SafeAreaView from '../containers/SafeAreaView';
 import SearchHeader from '../containers/SearchHeader';
 import StatusBar from '../containers/StatusBar';
-import { IApplicationState, IBaseScreen, TSubscriptionModel } from '../definitions';
+import { IApplicationState, IBaseScreen, TSubscriptionModel, IUser } from '../definitions';
 import { ERoomType } from '../definitions/ERoomType';
 import { withDimensions } from '../dimensions';
 import I18n from '../i18n';
@@ -88,6 +88,7 @@ interface ITeamChannelsViewProps extends IBaseScreen<ChatsStackParamList, 'TeamC
 	showActionSheet: (options: TActionSheetOptions) => void;
 	showAvatar: boolean;
 	displayMode: DisplayMode;
+	user: IUser;
 }
 class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChannelsViewState> {
 	private teamId: string;
@@ -496,7 +497,15 @@ class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChan
 	};
 
 	renderItem = ({ item }: { item: IItem }) => {
-		const { StoreLastMessage, useRealName, theme, width, showAvatar, displayMode } = this.props;
+		const {
+			user: { timeFormat },
+			StoreLastMessage,
+			useRealName,
+			theme,
+			width,
+			showAvatar,
+			displayMode
+		} = this.props;
 		return (
 			<RoomItem
 				item={item}
@@ -513,6 +522,7 @@ class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChan
 				autoJoin={item.teamDefault}
 				showAvatar={showAvatar}
 				displayMode={displayMode}
+				timeFormat={timeFormat}
 			/>
 		);
 	};

app/views/UserPreferencesView/index.tsx

@@ -29,16 +29,19 @@ const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Ele
 	interface ITimeFormats {
 		label: string;
 		value: number;
+		format: string;
 	}
 
 	const timeFormats: ITimeFormats[] = [
 		{
 			label: '12_Hour',
-			value: 1
+			value: 1,
+			format: 'h:mm A'
 		},
 		{
 			label: '24_Hour',
-			value: 2
+			value: 2,
+			format: 'H:mm'
 		}
 	];
 
@@ -70,7 +73,7 @@ const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Ele
 
 	const onChangeTimeFormat = async (item: ITimeFormats) => {
 		try {
-			dispatch(setUser({ timeFormat: item.value }));
+			dispatch(setUser({ timeFormat: item.format }));
 			await Services.saveUserPreferences({ id, clockMode: item.value });
 		} catch (e) {
 			log(e);
@@ -105,13 +108,13 @@ const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Ele
 					<List.Item
 						title={timeFormats[0].label}
 						onPress={() => onChangeTimeFormat(timeFormats[0])}
-						right={() => (timeFormat === timeFormats[0].value ? renderIcon() : null)}
+						right={() => (timeFormat === timeFormats[0].format ? renderIcon() : null)}
 					/>
 					<List.Separator />
 					<List.Item
 						title={timeFormats[1].label}
 						onPress={() => onChangeTimeFormat(timeFormats[1])}
-						right={() => (timeFormat === timeFormats[1].value ? renderIcon() : null)}
+						right={() => (timeFormat === timeFormats[1].format ? renderIcon() : null)}
 					/>
 					<List.Separator />
 				</List.Section>