Change time format of RoomItems
This commit is contained in:
parent
8b4cc16548
commit
7df61a8621
|
@ -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
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -92,6 +92,7 @@ export interface IRoomItemContainerProps {
|
|||
autoJoin: boolean;
|
||||
showAvatar: boolean;
|
||||
displayMode: string;
|
||||
timeFormat: string;
|
||||
}
|
||||
|
||||
export interface IRoomItemProps {
|
||||
|
|
|
@ -21,7 +21,7 @@ export interface ILoggedUser {
|
|||
showMessageInMainThread?: boolean;
|
||||
isFromWebView?: boolean;
|
||||
enableMessageParserEarlyAdoption: boolean;
|
||||
timeFormat: number;
|
||||
timeFormat: string;
|
||||
}
|
||||
|
||||
export interface ILoggedUserResultFromServer
|
||||
|
|
|
@ -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 }]
|
||||
})
|
||||
]
|
||||
}
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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)) {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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'
|
||||
});
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue