From 7df61a8621fcfa2b0530f1e80f4579a639639f4b Mon Sep 17 00:00:00 2001 From: Danish Ahmed Mirza Date: Fri, 3 Jun 2022 02:50:46 +0530 Subject: [PATCH] Change time format of RoomItems --- app/containers/MessageBox/ReplyPreview.tsx | 16 +++------------- app/containers/RoomItem/index.tsx | 5 +++-- app/containers/RoomItem/interfaces.ts | 1 + app/definitions/ILoggedUser.ts | 2 +- app/lib/database/model/servers/migrations.js | 2 +- app/lib/database/schema/servers.js | 2 +- app/lib/methods/subscriptions/rooms.ts | 2 +- app/lib/services/connect.ts | 2 +- app/utils/room.ts | 4 ++-- app/views/RoomView/index.tsx | 14 +------------- app/views/RoomsListView/index.tsx | 3 ++- app/views/TeamChannelsView.tsx | 14 ++++++++++++-- app/views/UserPreferencesView/index.tsx | 13 ++++++++----- 13 files changed, 37 insertions(+), 43 deletions(-) diff --git a/app/containers/MessageBox/ReplyPreview.tsx b/app/containers/MessageBox/ReplyPreview.tsx index ad4c59de4..3eb00a20d 100644 --- a/app/containers/MessageBox/ReplyPreview.tsx +++ b/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 ( @@ -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 }); diff --git a/app/containers/RoomItem/index.tsx b/app/containers/RoomItem/index.tsx index f64eaf6e0..3f276e954 100644 --- a/app/containers/RoomItem/index.tsx +++ b/app/containers/RoomItem/index.tsx @@ -120,13 +120,14 @@ class RoomItemContainer extends React.Component { 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; diff --git a/app/containers/RoomItem/interfaces.ts b/app/containers/RoomItem/interfaces.ts index 5bb5279cc..5148e48a5 100644 --- a/app/containers/RoomItem/interfaces.ts +++ b/app/containers/RoomItem/interfaces.ts @@ -92,6 +92,7 @@ export interface IRoomItemContainerProps { autoJoin: boolean; showAvatar: boolean; displayMode: string; + timeFormat: string; } export interface IRoomItemProps { diff --git a/app/definitions/ILoggedUser.ts b/app/definitions/ILoggedUser.ts index be95294ec..1f7339c5b 100644 --- a/app/definitions/ILoggedUser.ts +++ b/app/definitions/ILoggedUser.ts @@ -21,7 +21,7 @@ export interface ILoggedUser { showMessageInMainThread?: boolean; isFromWebView?: boolean; enableMessageParserEarlyAdoption: boolean; - timeFormat: number; + timeFormat: string; } export interface ILoggedUserResultFromServer diff --git a/app/lib/database/model/servers/migrations.js b/app/lib/database/model/servers/migrations.js index e0cc41843..41a1a56b1 100644 --- a/app/lib/database/model/servers/migrations.js +++ b/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 }] }) ] } diff --git a/app/lib/database/schema/servers.js b/app/lib/database/schema/servers.js index 1738130a0..28c6c37a9 100644 --- a/app/lib/database/schema/servers.js +++ b/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({ diff --git a/app/lib/methods/subscriptions/rooms.ts b/app/lib/methods/subscriptions/rooms.ts index 5847306a0..d74778f4c 100644 --- a/app/lib/methods/subscriptions/rooms.ts +++ b/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)) { diff --git a/app/lib/services/connect.ts b/app/lib/services/connect.ts index 629ace9f1..5d5219f5e 100644 --- a/app/lib/services/connect.ts +++ b/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; } diff --git a/app/utils/room.ts b/app/utils/room.ts index 0fa1dbe22..836f86be3 100644 --- a/app/utils/room.ts +++ b/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' }); diff --git a/app/views/RoomView/index.tsx b/app/views/RoomView/index.tsx index 3e8797367..a3f6a3904 100644 --- a/app/views/RoomView/index.tsx +++ b/app/views/RoomView/index.tsx @@ -144,7 +144,6 @@ interface IRoomViewProps extends IBaseScreen { 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 { }); }; - 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 { 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, diff --git a/app/views/RoomsListView/index.tsx b/app/views/RoomsListView/index.tsx index a9199bad2..ecb385aa1 100644 --- a/app/views/RoomsListView/index.tsx +++ b/app/views/RoomsListView/index.tsx @@ -936,7 +936,7 @@ class RoomsListView extends React.Component ); }; diff --git a/app/views/TeamChannelsView.tsx b/app/views/TeamChannelsView.tsx index 5b337b766..90a4fe351 100644 --- a/app/views/TeamChannelsView.tsx +++ b/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 void; showAvatar: boolean; displayMode: DisplayMode; + user: IUser; } class TeamChannelsView extends React.Component { private teamId: string; @@ -496,7 +497,15 @@ class TeamChannelsView extends React.Component { - const { StoreLastMessage, useRealName, theme, width, showAvatar, displayMode } = this.props; + const { + user: { timeFormat }, + StoreLastMessage, + useRealName, + theme, + width, + showAvatar, + displayMode + } = this.props; return ( ); }; diff --git a/app/views/UserPreferencesView/index.tsx b/app/views/UserPreferencesView/index.tsx index 123eebddc..f19475f8b 100644 --- a/app/views/UserPreferencesView/index.tsx +++ b/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 onChangeTimeFormat(timeFormats[0])} - right={() => (timeFormat === timeFormats[0].value ? renderIcon() : null)} + right={() => (timeFormat === timeFormats[0].format ? renderIcon() : null)} /> onChangeTimeFormat(timeFormats[1])} - right={() => (timeFormat === timeFormats[1].value ? renderIcon() : null)} + right={() => (timeFormat === timeFormats[1].format ? renderIcon() : null)} />