Change time format of RoomItems

This commit is contained in:
Danish Ahmed Mirza 2022-06-03 02:50:46 +05:30
parent 8b4cc16548
commit 7df61a8621
13 changed files with 37 additions and 43 deletions

View File

@ -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
});

View File

@ -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;

View File

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

View File

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

View File

@ -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 }]
})
]
}

View File

@ -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({

View File

@ -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)) {

View File

@ -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;
}

View File

@ -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'
});

View File

@ -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,

View File

@ -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}
/>
);
};

View File

@ -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}
/>
);
};

View File

@ -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>