Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Switch FormattedDate component to Intl.DateTimeFormat #8276

Merged
merged 7 commits into from
Oct 30, 2024
Merged

feat: Switch FormattedDate component to Intl.DateTimeFormat #8276

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c0dfe7a
feat: Switch FormattedDate component to Intl.DateTimeFormat
KuSh Oct 20, 2024
80a06ae
feat: Revert stylistic only changes
KuSh Oct 22, 2024
723b55b
Add tests
KuSh Oct 26, 2024
247d2e2
Take code review into account
KuSh Oct 26, 2024
b4f1e6a
Fix tests by forcing timezone
KuSh Oct 26, 2024
80f7200
Use constant formats in DateSeparator to avoid uneeded rerenders
KuSh Oct 29, 2024
f38c5b6
Add UserTimezone tests
KuSh Oct 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions app/components/custom_status/custom_status_expiry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {Text, type TextStyle} from 'react-native';
import {of as of$} from 'rxjs';
import {switchMap} from 'rxjs/operators';

import FormattedDate from '@components/formatted_date';
import FormattedDate, {type FormattedDateFormat} from '@components/formatted_date';
import FormattedText from '@components/formatted_text';
import FormattedTime from '@components/formatted_time';
import {getDisplayNamePreferenceAsBool} from '@helpers/api/preference';
Expand Down Expand Up @@ -43,6 +43,12 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
};
});

const DATE_FORMATS = {
withinWeek: {weekday: 'long'},
withinYear: {month: 'short', day: 'numeric'},
afterYear: {dateStyle: 'medium'},
} satisfies Record<string, FormattedDateFormat>;

const CustomStatusExpiry = ({currentUser, isMilitaryTime, showPrefix, showTimeCompulsory, showToday, testID = '', textStyles = {}, theme, time, withinBrackets}: Props) => {
const userTimezone = getUserTimezoneProps(currentUser);
const timezone = userTimezone.useAutomaticTimezone ? userTimezone.automaticTimezone : userTimezone.manualTimezone;
Expand Down Expand Up @@ -72,11 +78,11 @@ const CustomStatusExpiry = ({currentUser, isMilitaryTime, showPrefix, showTimeCo
/>
);
} else if (expiryMomentTime.isAfter(tomorrowEndTime)) {
let format = 'dddd';
let format: FormattedDateFormat = DATE_FORMATS.withinWeek;
if (expiryMomentTime.isAfter(plusSixDaysEndTime) && isCurrentYear) {
format = 'MMM DD';
format = DATE_FORMATS.withinYear;
} else if (!isCurrentYear) {
format = 'MMM DD, YYYY';
format = DATE_FORMATS.afterYear;
}

dateComponent = (
Expand Down
30 changes: 19 additions & 11 deletions app/components/files/file_info.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import React from 'react';
import {Text, TouchableOpacity, View} from 'react-native';

import FormattedDate from '@components/formatted_date';
import FormattedDate, {type FormattedDateFormat} from '@components/formatted_date';
import {useTheme} from '@context/theme';
import {getFormattedFileSize} from '@utils/file';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
Expand All @@ -14,10 +14,15 @@ type FileInfoProps = {
disabled?: boolean;
file: FileInfo;
showDate: boolean;
channelName?: string ;
channelName?: string;
onPress: () => void;
}
const FORMAT = ' • MMM DD HH:MM A';
};
const FORMAT: FormattedDateFormat = {
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
};

const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
return {
Expand Down Expand Up @@ -91,13 +96,16 @@ const FileInfo = ({disabled, file, channelName, showDate, onPress}: FileInfoProp
<Text style={style.infoText}>
{`${getFormattedFileSize(file.size)}`}
</Text>
{showDate &&
<FormattedDate
style={style.infoText}
format={FORMAT}
value={file.create_at as number}
/>
}
{showDate && file.create_at != null && (
<>
{' • '}
<FormattedDate
style={style.infoText}
format={FORMAT}
value={file.create_at}
/>
</>
)}
</View>
</View>
</TouchableOpacity>
Expand Down
12 changes: 9 additions & 3 deletions app/components/files_search/file_options/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,21 @@
import React from 'react';
import {View, Text} from 'react-native';

import FormattedDate from '@components/formatted_date';
import FormattedDate, {type FormattedDateFormat} from '@components/formatted_date';
import {useTheme} from '@context/theme';
import {getFormattedFileSize} from '@utils/file';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import {typography} from '@utils/typography';

import Icon, {ICON_SIZE} from './icon';

const format = 'MMM DD YYYY HH:MM A';
const FORMAT: FormattedDateFormat = {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
};

const HEADER_MARGIN = 8;
const FILE_ICON_MARGIN = 8;
Expand Down Expand Up @@ -78,7 +84,7 @@ const Header = ({fileInfo}: Props) => {
<Text style={style.infoText}>{`${size} • `}</Text>
<FormattedDate
style={style.date}
format={format}
format={FORMAT}
value={fileInfo.create_at as number}
/>
</View>
Expand Down
Loading