feat: remove moment and replace with date-fns
Audric Ackermann
8 months ago
parent
20d7534324
commit
5a7da00d00
@ -1,142 +0,0 @@
|
|||||||
import moment from 'moment';
|
|
||||||
import { compact, groupBy, sortBy } from 'lodash';
|
|
||||||
import { MediaItemType } from '../../lightbox/LightboxGallery';
|
|
||||||
|
|
||||||
// import { missingCaseError } from '../../../util/missingCaseError';
|
|
||||||
|
|
||||||
type StaticSectionType = 'today' | 'yesterday' | 'thisWeek' | 'thisMonth';
|
|
||||||
type YearMonthSectionType = 'yearMonth';
|
|
||||||
|
|
||||||
interface GenericSection<T> {
|
|
||||||
type: T;
|
|
||||||
mediaItems: Array<MediaItemType>;
|
|
||||||
}
|
|
||||||
|
|
||||||
type StaticSection = GenericSection<StaticSectionType>;
|
|
||||||
type YearMonthSection = GenericSection<YearMonthSectionType> & {
|
|
||||||
year: number;
|
|
||||||
month: number;
|
|
||||||
};
|
|
||||||
export type Section = StaticSection | YearMonthSection;
|
|
||||||
export const groupMediaItemsByDate = (
|
|
||||||
timestamp: number,
|
|
||||||
mediaItems: Array<MediaItemType>
|
|
||||||
): Array<Section> => {
|
|
||||||
// TODO: find where this is used and change to use date-fns
|
|
||||||
const referenceDateTime = moment.utc(timestamp);
|
|
||||||
|
|
||||||
const sortedMediaItem = sortBy(mediaItems, mediaItem => {
|
|
||||||
const { messageTimestamp } = mediaItem;
|
|
||||||
|
|
||||||
return -messageTimestamp;
|
|
||||||
});
|
|
||||||
const messagesWithSection = sortedMediaItem.map(withSection(referenceDateTime));
|
|
||||||
const groupedMediaItem = groupBy(messagesWithSection, 'type');
|
|
||||||
const yearMonthMediaItem = Object.values(groupBy(groupedMediaItem.yearMonth, 'order')).reverse();
|
|
||||||
|
|
||||||
return compact([
|
|
||||||
toSection(groupedMediaItem.today),
|
|
||||||
toSection(groupedMediaItem.yesterday),
|
|
||||||
toSection(groupedMediaItem.thisWeek),
|
|
||||||
toSection(groupedMediaItem.thisMonth),
|
|
||||||
...yearMonthMediaItem.map(toSection),
|
|
||||||
]);
|
|
||||||
};
|
|
||||||
|
|
||||||
const toSection = (
|
|
||||||
messagesWithSection: Array<MediaItemWithSection> | undefined
|
|
||||||
): Section | undefined => {
|
|
||||||
if (!messagesWithSection || messagesWithSection.length === 0) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
const firstMediaItemWithSection: MediaItemWithSection = messagesWithSection[0];
|
|
||||||
if (!firstMediaItemWithSection) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
const mediaItems = messagesWithSection.map(messageWithSection => messageWithSection.mediaItem);
|
|
||||||
switch (firstMediaItemWithSection.type) {
|
|
||||||
case 'today':
|
|
||||||
case 'yesterday':
|
|
||||||
case 'thisWeek':
|
|
||||||
case 'thisMonth':
|
|
||||||
return {
|
|
||||||
type: firstMediaItemWithSection.type,
|
|
||||||
mediaItems,
|
|
||||||
};
|
|
||||||
case 'yearMonth':
|
|
||||||
return {
|
|
||||||
type: firstMediaItemWithSection.type,
|
|
||||||
year: firstMediaItemWithSection.year,
|
|
||||||
month: firstMediaItemWithSection.month,
|
|
||||||
mediaItems,
|
|
||||||
};
|
|
||||||
default:
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
interface GenericMediaItemWithSection<T> {
|
|
||||||
order: number;
|
|
||||||
type: T;
|
|
||||||
mediaItem: MediaItemType;
|
|
||||||
}
|
|
||||||
|
|
||||||
type MediaItemWithStaticSection = GenericMediaItemWithSection<StaticSectionType>;
|
|
||||||
type MediaItemWithYearMonthSection = GenericMediaItemWithSection<YearMonthSectionType> & {
|
|
||||||
year: number;
|
|
||||||
month: number;
|
|
||||||
};
|
|
||||||
type MediaItemWithSection = MediaItemWithStaticSection | MediaItemWithYearMonthSection;
|
|
||||||
|
|
||||||
const withSection =
|
|
||||||
(referenceDateTime: moment.Moment) =>
|
|
||||||
(mediaItem: MediaItemType): MediaItemWithSection => {
|
|
||||||
const today = moment(referenceDateTime).startOf('day');
|
|
||||||
const yesterday = moment(referenceDateTime).subtract(1, 'day').startOf('day');
|
|
||||||
const thisWeek = moment(referenceDateTime).startOf('isoWeek');
|
|
||||||
const thisMonth = moment(referenceDateTime).startOf('month');
|
|
||||||
|
|
||||||
const { messageTimestamp } = mediaItem;
|
|
||||||
const mediaItemReceivedDate = moment.utc(messageTimestamp);
|
|
||||||
if (mediaItemReceivedDate.isAfter(today)) {
|
|
||||||
return {
|
|
||||||
order: 0,
|
|
||||||
type: 'today',
|
|
||||||
mediaItem,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (mediaItemReceivedDate.isAfter(yesterday)) {
|
|
||||||
return {
|
|
||||||
order: 1,
|
|
||||||
type: 'yesterday',
|
|
||||||
mediaItem,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (mediaItemReceivedDate.isAfter(thisWeek)) {
|
|
||||||
return {
|
|
||||||
order: 2,
|
|
||||||
type: 'thisWeek',
|
|
||||||
mediaItem,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (mediaItemReceivedDate.isAfter(thisMonth)) {
|
|
||||||
return {
|
|
||||||
order: 3,
|
|
||||||
type: 'thisMonth',
|
|
||||||
mediaItem,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const month: number = mediaItemReceivedDate.month();
|
|
||||||
const year: number = mediaItemReceivedDate.year();
|
|
||||||
|
|
||||||
return {
|
|
||||||
order: year * 100 + month,
|
|
||||||
type: 'yearMonth',
|
|
||||||
month,
|
|
||||||
year,
|
|
||||||
mediaItem,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
export function useFormattedDuration(seconds: number, options: { forceHours: boolean }) {
|
||||||
|
const hoursStr = `${Math.floor(seconds / 3600)}`.padStart(2, '0');
|
||||||
|
const minutesStr = `${Math.floor((seconds % 3600) / 60)}`.padStart(2, '0');
|
||||||
|
const secondsStr = `${Math.floor(seconds % 60)}`.padStart(2, '0');
|
||||||
|
|
||||||
|
if (hoursStr === '00' && !options.forceHours) {
|
||||||
|
return `${minutesStr}:${secondsStr}`;
|
||||||
|
}
|
||||||
|
return `${hoursStr}:${minutesStr}:${secondsStr}`;
|
||||||
|
}
|
||||||
@ -1,275 +0,0 @@
|
|||||||
import { assert } from 'chai';
|
|
||||||
import { shuffle } from 'lodash';
|
|
||||||
|
|
||||||
import { IMAGE_JPEG } from '../../../types/MIME';
|
|
||||||
import {
|
|
||||||
groupMediaItemsByDate,
|
|
||||||
Section,
|
|
||||||
} from '../../../components/conversation/media-gallery/groupMediaItemsByDate';
|
|
||||||
import { TestUtils } from '../../test-utils';
|
|
||||||
import { MediaItemType } from '../../../components/lightbox/LightboxGallery';
|
|
||||||
|
|
||||||
const generatedMessageSenderKey = TestUtils.generateFakePubKey().key;
|
|
||||||
|
|
||||||
const toMediaItem = (date: Date): MediaItemType => ({
|
|
||||||
objectURL: date.toUTCString(),
|
|
||||||
index: 0,
|
|
||||||
attachment: {
|
|
||||||
fileName: 'fileName',
|
|
||||||
contentType: IMAGE_JPEG,
|
|
||||||
url: 'url',
|
|
||||||
fileSize: null,
|
|
||||||
screenshot: null,
|
|
||||||
thumbnail: null,
|
|
||||||
path: '123456',
|
|
||||||
id: 123456,
|
|
||||||
},
|
|
||||||
contentType: IMAGE_JPEG,
|
|
||||||
messageSender: generatedMessageSenderKey,
|
|
||||||
messageTimestamp: date.getTime(),
|
|
||||||
messageId: '123456',
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('groupMediaItemsByDate', () => {
|
|
||||||
it('should group mediaItems', () => {
|
|
||||||
const referenceTime = new Date('2018-04-12T18:00Z').getTime(); // Thu
|
|
||||||
const input: Array<MediaItemType> = shuffle([
|
|
||||||
// Today
|
|
||||||
toMediaItem(new Date('2018-04-12T12:00Z')), // Thu
|
|
||||||
toMediaItem(new Date('2018-04-12T00:01Z')), // Thu
|
|
||||||
// This week
|
|
||||||
toMediaItem(new Date('2018-04-11T23:59Z')), // Wed
|
|
||||||
toMediaItem(new Date('2018-04-09T00:01Z')), // Mon
|
|
||||||
// This month
|
|
||||||
toMediaItem(new Date('2018-04-08T23:59Z')), // Sun
|
|
||||||
toMediaItem(new Date('2018-04-01T00:01Z')),
|
|
||||||
// March 2018
|
|
||||||
toMediaItem(new Date('2018-03-31T23:59Z')),
|
|
||||||
toMediaItem(new Date('2018-03-01T14:00Z')),
|
|
||||||
// February 2011
|
|
||||||
toMediaItem(new Date('2011-02-28T23:59Z')),
|
|
||||||
toMediaItem(new Date('2011-02-01T10:00Z')),
|
|
||||||
]);
|
|
||||||
|
|
||||||
const expected: Array<Section> = [
|
|
||||||
{
|
|
||||||
type: 'today',
|
|
||||||
mediaItems: [
|
|
||||||
{
|
|
||||||
objectURL: 'Thu, 12 Apr 2018 12:00:00 GMT',
|
|
||||||
index: 0,
|
|
||||||
contentType: IMAGE_JPEG,
|
|
||||||
|
|
||||||
attachment: {
|
|
||||||
fileName: 'fileName',
|
|
||||||
contentType: IMAGE_JPEG,
|
|
||||||
url: 'url',
|
|
||||||
fileSize: null,
|
|
||||||
screenshot: null,
|
|
||||||
thumbnail: null,
|
|
||||||
path: '123456',
|
|
||||||
id: 123456,
|
|
||||||
},
|
|
||||||
messageSender: generatedMessageSenderKey,
|
|
||||||
messageTimestamp: 1523534400000,
|
|
||||||
messageId: '123456',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
objectURL: 'Thu, 12 Apr 2018 00:01:00 GMT',
|
|
||||||
index: 0,
|
|
||||||
contentType: IMAGE_JPEG,
|
|
||||||
attachment: {
|
|
||||||
fileName: 'fileName',
|
|
||||||
contentType: IMAGE_JPEG,
|
|
||||||
url: 'url',
|
|
||||||
fileSize: null,
|
|
||||||
screenshot: null,
|
|
||||||
thumbnail: null,
|
|
||||||
path: '123456',
|
|
||||||
id: 123456,
|
|
||||||
},
|
|
||||||
messageSender: generatedMessageSenderKey,
|
|
||||||
messageTimestamp: 1523491260000,
|
|
||||||
messageId: '123456',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'yesterday',
|
|
||||||
mediaItems: [
|
|
||||||
{
|
|
||||||
objectURL: 'Wed, 11 Apr 2018 23:59:00 GMT',
|
|
||||||
index: 0,
|
|
||||||
contentType: IMAGE_JPEG,
|
|
||||||
attachment: {
|
|
||||||
fileName: 'fileName',
|
|
||||||
contentType: IMAGE_JPEG,
|
|
||||||
url: 'url',
|
|
||||||
fileSize: null,
|
|
||||||
screenshot: null,
|
|
||||||
thumbnail: null,
|
|
||||||
path: '123456',
|
|
||||||
id: 123456,
|
|
||||||
},
|
|
||||||
messageSender: generatedMessageSenderKey,
|
|
||||||
messageTimestamp: 1523491140000,
|
|
||||||
messageId: '123456',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'thisWeek',
|
|
||||||
mediaItems: [
|
|
||||||
{
|
|
||||||
objectURL: 'Mon, 09 Apr 2018 00:01:00 GMT',
|
|
||||||
index: 0,
|
|
||||||
contentType: IMAGE_JPEG,
|
|
||||||
attachment: {
|
|
||||||
fileName: 'fileName',
|
|
||||||
contentType: IMAGE_JPEG,
|
|
||||||
url: 'url',
|
|
||||||
fileSize: null,
|
|
||||||
screenshot: null,
|
|
||||||
thumbnail: null,
|
|
||||||
path: '123456',
|
|
||||||
id: 123456,
|
|
||||||
},
|
|
||||||
messageSender: generatedMessageSenderKey,
|
|
||||||
messageTimestamp: 1523232060000,
|
|
||||||
messageId: '123456',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'thisMonth',
|
|
||||||
mediaItems: [
|
|
||||||
{
|
|
||||||
objectURL: 'Sun, 08 Apr 2018 23:59:00 GMT',
|
|
||||||
index: 0,
|
|
||||||
contentType: IMAGE_JPEG,
|
|
||||||
attachment: {
|
|
||||||
fileName: 'fileName',
|
|
||||||
contentType: IMAGE_JPEG,
|
|
||||||
url: 'url',
|
|
||||||
fileSize: null,
|
|
||||||
screenshot: null,
|
|
||||||
thumbnail: null,
|
|
||||||
path: '123456',
|
|
||||||
id: 123456,
|
|
||||||
},
|
|
||||||
messageSender: generatedMessageSenderKey,
|
|
||||||
messageTimestamp: 1523231940000,
|
|
||||||
messageId: '123456',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
objectURL: 'Sun, 01 Apr 2018 00:01:00 GMT',
|
|
||||||
index: 0,
|
|
||||||
contentType: IMAGE_JPEG,
|
|
||||||
attachment: {
|
|
||||||
fileName: 'fileName',
|
|
||||||
contentType: IMAGE_JPEG,
|
|
||||||
url: 'url',
|
|
||||||
fileSize: null,
|
|
||||||
screenshot: null,
|
|
||||||
thumbnail: null,
|
|
||||||
path: '123456',
|
|
||||||
id: 123456,
|
|
||||||
},
|
|
||||||
messageSender: generatedMessageSenderKey,
|
|
||||||
messageTimestamp: 1522540860000,
|
|
||||||
messageId: '123456',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'yearMonth',
|
|
||||||
year: 2018,
|
|
||||||
month: 2,
|
|
||||||
mediaItems: [
|
|
||||||
{
|
|
||||||
objectURL: 'Sat, 31 Mar 2018 23:59:00 GMT',
|
|
||||||
index: 0,
|
|
||||||
contentType: IMAGE_JPEG,
|
|
||||||
attachment: {
|
|
||||||
fileName: 'fileName',
|
|
||||||
contentType: IMAGE_JPEG,
|
|
||||||
url: 'url',
|
|
||||||
fileSize: null,
|
|
||||||
screenshot: null,
|
|
||||||
thumbnail: null,
|
|
||||||
path: '123456',
|
|
||||||
id: 123456,
|
|
||||||
},
|
|
||||||
messageSender: generatedMessageSenderKey,
|
|
||||||
messageTimestamp: 1522540740000,
|
|
||||||
messageId: '123456',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
objectURL: 'Thu, 01 Mar 2018 14:00:00 GMT',
|
|
||||||
index: 0,
|
|
||||||
contentType: IMAGE_JPEG,
|
|
||||||
attachment: {
|
|
||||||
fileName: 'fileName',
|
|
||||||
contentType: IMAGE_JPEG,
|
|
||||||
url: 'url',
|
|
||||||
fileSize: null,
|
|
||||||
screenshot: null,
|
|
||||||
thumbnail: null,
|
|
||||||
path: '123456',
|
|
||||||
id: 123456,
|
|
||||||
},
|
|
||||||
messageSender: generatedMessageSenderKey,
|
|
||||||
messageTimestamp: 1519912800000,
|
|
||||||
messageId: '123456',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'yearMonth',
|
|
||||||
year: 2011,
|
|
||||||
month: 1,
|
|
||||||
mediaItems: [
|
|
||||||
{
|
|
||||||
objectURL: 'Mon, 28 Feb 2011 23:59:00 GMT',
|
|
||||||
index: 0,
|
|
||||||
attachment: {
|
|
||||||
fileName: 'fileName',
|
|
||||||
contentType: IMAGE_JPEG,
|
|
||||||
url: 'url',
|
|
||||||
fileSize: null,
|
|
||||||
screenshot: null,
|
|
||||||
thumbnail: null,
|
|
||||||
path: '123456',
|
|
||||||
id: 123456,
|
|
||||||
},
|
|
||||||
contentType: IMAGE_JPEG,
|
|
||||||
messageSender: generatedMessageSenderKey,
|
|
||||||
messageTimestamp: 1298937540000,
|
|
||||||
messageId: '123456',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
objectURL: 'Tue, 01 Feb 2011 10:00:00 GMT',
|
|
||||||
index: 0,
|
|
||||||
contentType: IMAGE_JPEG,
|
|
||||||
messageSender: generatedMessageSenderKey,
|
|
||||||
messageTimestamp: 1296554400000,
|
|
||||||
attachment: {
|
|
||||||
fileName: 'fileName',
|
|
||||||
contentType: IMAGE_JPEG,
|
|
||||||
url: 'url',
|
|
||||||
fileSize: null,
|
|
||||||
screenshot: null,
|
|
||||||
thumbnail: null,
|
|
||||||
path: '123456',
|
|
||||||
id: 123456,
|
|
||||||
},
|
|
||||||
messageId: '123456',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const actual = groupMediaItemsByDate(referenceTime, input);
|
|
||||||
assert.deepEqual(actual, expected);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue