feat: use Intl API for date outputs

marscoin · Mar 3, 2023 · 9d9be8c · 9d9be8c
1 parent 5009999
commit 9d9be8c
Show file tree

Hide file tree

Showing 18 changed files with 369 additions and 157 deletions.
diff --git a/__tests__/helpers.ts b/__tests__/helpers.ts
@@ -1,4 +1,4 @@
-import { removeKeysFromObject } from '../src/utils/helpers';
+import { removeKeysFromObject, timeAgo } from '../src/utils/helpers';
 
 describe('removeKeysFromObject', () => {
 	it('takes a string, removes a single key from the object and returns the result', () => {
@@ -32,3 +32,20 @@ describe('removeKeysFromObject', () => {
 		expect(result).toEqual(expected);
 	});
 });
+
+describe('timeAgo', () => {
+	it('cat format time', () => {
+		expect(timeAgo(+new Date())).toEqual('now');
+		expect(timeAgo(+new Date() - 1000 * 10)).toEqual('10 seconds ago');
+		expect(timeAgo(+new Date() - 1000 * 60 * 10)).toEqual('10 minutes ago');
+		expect(timeAgo(+new Date() - 1000 * 60 * 60 * 5)).toEqual('5 hours ago');
+		expect(timeAgo(+new Date() - 1000 * 60 * 60 * 24)).toEqual('yesterday');
+		expect(timeAgo(+new Date() - 1000 * 60 * 60 * 24 * 2)).toEqual(
+			'2 days ago',
+		);
+		expect(timeAgo(+new Date(new Date().getFullYear(), 0, 1))).toEqual(
+			'January 1 at 12:00 AM',
+		);
+		expect(timeAgo(1)).toEqual('January 1, 1970');
+	});
+});
diff --git a/index.js b/index.js
@@ -31,7 +31,7 @@ if (__DEV__) {
 	// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 	global.console.error = (...arg) => {
 		for (const error of ignoreList) {
-			if (arg[0].startsWith(error)) {
+			if (arg[0]?.startsWith?.(error)) {
 				return;
 			}
 		}

diff --git a/package.json b/package.json
@@ -31,6 +31,12 @@
     "postinstall": "node postinstall.js"
   },
   "dependencies": {
+    "@formatjs/intl-datetimeformat": "6.5.1",
+    "@formatjs/intl-getcanonicallocales": "2.1.0",
+    "@formatjs/intl-locale": "3.1.1",
+    "@formatjs/intl-numberformat": "8.3.5",
+    "@formatjs/intl-pluralrules": "5.1.10",
+    "@formatjs/intl-relativetimeformat": "11.1.10",
     "@gorhom/bottom-sheet": "4.4.4",
     "@react-native-clipboard/clipboard": "^1.10.0",
     "@react-native-community/blur": "^4.2.0",
@@ -65,7 +71,6 @@
     "fuzzysort": "^1.9.0",
     "i18next": "22.4.10",
     "immer": "^9.0.16",
-    "intl": "^1.2.5",
     "jdenticon": "^3.1.1",
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8",

diff --git a/shim.js b/shim.js
@@ -36,3 +36,22 @@ if (typeof localStorage !== 'undefined') {
 // If using the crypto shim, uncomment the following line to ensure
 // crypto is loaded first, so it can populate global.crypto
 require('crypto');
+
+// Intl JS api
+if (typeof Intl === 'undefined') {
+	require('@formatjs/intl-getcanonicallocales/polyfill');
+	require('@formatjs/intl-locale/polyfill');
+	require('@formatjs/intl-pluralrules/polyfill');
+	require('@formatjs/intl-pluralrules/locale-data/en');
+	require('@formatjs/intl-pluralrules/locale-data/ru');
+	require('@formatjs/intl-numberformat/polyfill');
+	require('@formatjs/intl-numberformat/locale-data/en');
+	require('@formatjs/intl-numberformat/locale-data/ru');
+	require('@formatjs/intl-datetimeformat/polyfill');
+	require('@formatjs/intl-datetimeformat/locale-data/en');
+	require('@formatjs/intl-datetimeformat/locale-data/ru');
+	require('@formatjs/intl-datetimeformat/add-all-tz');
+	require('@formatjs/intl-relativetimeformat/polyfill');
+	require('@formatjs/intl-relativetimeformat/locale-data/en');
+	require('@formatjs/intl-relativetimeformat/locale-data/ru');
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,5 @@
 import '../shim';
-import 'intl';
-import 'intl/locale-data/jsonp/en';
+
 import React, {
 	memo,
 	ReactElement,

diff --git a/src/screens/Activity/ActivityDetail.tsx b/src/screens/Activity/ActivityDetail.tsx
@@ -354,9 +354,14 @@ const OnchainActivityDetail = ({
 						<View style={styles.row}>
 							<CalendarIcon style={styles.rowIcon} color="brand" />
 							<Text02M>
-								{new Date(timestamp).toLocaleString(undefined, {
-									month: 'long',
-									day: 'numeric',
+								{t('intl:dateTime', {
+									v: new Date(timestamp),
+									formatParams: {
+										v: {
+											month: 'long',
+											day: 'numeric',
+										},
+									},
 								})}
 							</Text02M>
 						</View>
@@ -368,10 +373,15 @@ const OnchainActivityDetail = ({
 						<View style={styles.row}>
 							<ClockIcon style={styles.rowIcon} color="brand" />
 							<Text02M>
-								{new Date(timestamp).toLocaleString(undefined, {
-									hour: 'numeric',
-									minute: 'numeric',
-									hour12: false,
+								{t('intl:dateTime', {
+									v: new Date(timestamp),
+									formatParams: {
+										v: {
+											hour: 'numeric',
+											minute: 'numeric',
+											hour12: false,
+										},
+									},
 								})}
 							</Text02M>
 						</View>
@@ -653,9 +663,14 @@ const LightningActivityDetail = ({
 						<View style={styles.row}>
 							<CalendarIcon style={styles.rowIcon} color="purple" />
 							<Text02M>
-								{new Date(timestamp).toLocaleString(undefined, {
-									month: 'long',
-									day: 'numeric',
+								{t('intl:dateTime', {
+									v: new Date(timestamp),
+									formatParams: {
+										v: {
+											month: 'long',
+											day: 'numeric',
+										},
+									},
 								})}
 							</Text02M>
 						</View>
@@ -667,10 +682,15 @@ const LightningActivityDetail = ({
 						<View style={styles.row}>
 							<ClockIcon style={styles.rowIcon} color="purple" />
 							<Text02M>
-								{new Date(timestamp).toLocaleString(undefined, {
-									hour: 'numeric',
-									minute: 'numeric',
-									hour12: false,
+								{t('intl:dateTime', {
+									v: new Date(timestamp),
+									formatParams: {
+										v: {
+											hour: 'numeric',
+											minute: 'numeric',
+											hour12: false,
+										},
+									},
 								})}
 							</Text02M>
 						</View>

diff --git a/src/screens/Settings/Lightning/ChannelDetails.tsx b/src/screens/Settings/Lightning/ChannelDetails.tsx
@@ -219,21 +219,24 @@ const ChannelDetails = ({
 			if (!timestamp) {
 				return;
 			}
-			const formattedDate = new Date(timestamp * 1000).toLocaleString(
-				undefined,
-				{
-					year: 'numeric',
-					month: 'short',
-					day: 'numeric',
-					hour: 'numeric',
-					minute: 'numeric',
-					hour12: false,
+
+			const formattedDate = t('intl:dateTime', {
+				v: new Date(timestamp * 1000),
+				formatParams: {
+					v: {
+						year: 'numeric',
+						month: 'short',
+						day: 'numeric',
+						hour: 'numeric',
+						minute: 'numeric',
+						hour12: false,
+					},
 				},
-			);
+			});
 
 			setTxTime(formattedDate);
 		});
-	}, [selectedNetwork, channel.funding_txid]);
+	}, [selectedNetwork, channel.funding_txid, t]);
 
 	const openSupportLink = async (order: IGetOrderResponse): Promise<void> => {
 		await openURL(
@@ -301,17 +304,19 @@ const ChannelDetails = ({
 							name={t('created_on')}
 							value={
 								<Caption13M>
-									{new Date(blocktankOrder.created_at).toLocaleString(
-										undefined,
-										{
-											year: 'numeric',
-											month: 'short',
-											day: 'numeric',
-											hour: 'numeric',
-											minute: 'numeric',
-											hour12: false,
+									{t('intl:dateTime', {
+										v: new Date(blocktankOrder.created_at),
+										formatParams: {
+											v: {
+												year: 'numeric',
+												month: 'short',
+												day: 'numeric',
+												hour: 'numeric',
+												minute: 'numeric',
+												hour12: false,
+											},
 										},
-									)}
+									})}
 								</Caption13M>
 							}
 						/>

diff --git a/src/screens/Wallets/Send/FeeCustom.tsx b/src/screens/Wallets/Send/FeeCustom.tsx
@@ -45,7 +45,6 @@ const FeeCustom = ({
 		[getFee, transaction.satsPerByte],
 	);
 	const totalFeeDisplay = useDisplayValues(feeSats);
-
 	const feeTotal = useMemo(() => {
 		if (totalFeeDisplay.fiatFormatted === '—') {
 			return t('send_fee_total', { feeSats });