Replace intl with date-fns

app/hotels/src/navigation/allHotels/navigationOptions/HeaderLeft.js

@@ -9,11 +9,7 @@ import { Text, StyleSheet, DatePicker, Translation } from '@kiwicom/mobile-share
 import DateButton from './DateButton';
 import { HotelsContext, type HotelsContextState } from '../../../HotelsContext';
 
-const dateFormat = {
-  weekday: 'short',
-  day: '2-digit',
-  month: 'short',
-};
+const dateFormat = 'E do MMM';
 
 export default function HeaderLeft() {
   const {

package.json

@@ -104,6 +104,7 @@
     "code-push-target-binary-version": "16.0.0"
   },
   "resolutions": {
-    "@adeira/js": "^0.2.0"
+    "@adeira/js": "^0.2.0",
+    "date-fns": "^2.8.1"
   }
 }

packages/localization/index.js

@@ -16,11 +16,6 @@ export { replaceValues } from './src/TranslationHelpers';
 export type TranslationKeysType = TranslationKeys;
 export type AlertTranslationType = AlertTranslation;
 
-export type DateFormatterFunctions =
-  | 'formatToDate'
-  | 'formatToTime'
-  | 'formatToShortDate'
-  | 'formatToBirthday'
-  | 'formatForMachine';
+export type DateFormatterFunctions = 'formatToDate' | 'formatForMachine';
 
 export type SupportedTransformationsType = _SupportedTransformationsType;

packages/localization/package.json

@@ -8,8 +8,7 @@
     "@kiwicom/rnmodules": "^0",
     "date-fns": "^2.8.1",
     "form-data": "^2.5.1",
-    "@adeira/fetch": "^1.0.0",
-    "intl": "^1.2.5"
+    "@adeira/fetch": "^1.0.0"
   },
   "devDependencies": {},
   "peerDependencies": {

packages/localization/src/DateFormatter.js

@@ -1,63 +1,22 @@
 // @flow strict
 
-import { getLocaleDashed } from './GetDeviceLocale';
-import DateUtils from './DateUtils';
-
-import 'intl'; // Polyfill because of Android
-import 'intl/locale-data/complete';
+import { enGB } from 'date-fns/locale';
+import { format } from 'date-fns';
 
-type FormatterConfig = {|
-  +weekday?: 'narrow' | 'short' | 'long',
-  +year?: 'numeric' | '2-digit',
-  +month?: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long',
-  +day?: 'numeric' | '2-digit',
-  +hour?: 'numeric' | '2-digit',
-  +minute?: 'numeric' | '2-digit',
-  +second?: 'numeric' | '2-digit',
-|};
+import { getLanguage } from './GetDeviceLocale';
+import DateUtils from './DateUtils';
+import dateLanguageMap from './dateFnsLanguageMap';
 
-// language prop passed from native code is not accessible at this point
-const DEVICE_LOCALE = getLocaleDashed();
+const locale = dateLanguageMap[getLanguage()] ?? enGB; // fallback to default locale
 
 function date(date: Date) {
-  return Intl.DateTimeFormat(DEVICE_LOCALE, {
-    timeZone: 'UTC', // this is very important!
-    weekday: 'short',
-    month: 'numeric',
-    day: 'numeric',
-  }).format(date);
-}
-
-function shortDate(date: Date) {
-  return Intl.DateTimeFormat(DEVICE_LOCALE, {
-    timeZone: 'UTC', // this is very important!
-    month: 'numeric',
-    day: 'numeric',
-  }).format(date);
-}
-
-function time(date: Date) {
-  return Intl.DateTimeFormat(DEVICE_LOCALE, {
-    timeZone: 'UTC', // this is very important!
-    hour: 'numeric',
-    minute: 'numeric',
-  }).format(date);
+  return format(date, 'E, MM/dd', {
+    locale,
+  });
 }
 
-function birthday(date: Date) {
-  return Intl.DateTimeFormat(DEVICE_LOCALE, {
-    timeZone: 'UTC', // this is very important!
-    year: 'numeric',
-    month: 'numeric',
-    day: 'numeric',
-  }).format(date);
-}
-
-function custom(date: Date, config: FormatterConfig) {
-  return Intl.DateTimeFormat(DEVICE_LOCALE, {
-    ...config,
-    timeZone: 'UTC', // this is very important!
-  }).format(date);
+function custom(date: Date, dateFormat: string) {
+  return format(date, dateFormat, { locale });
 }
 
 function pad(number) {
@@ -75,11 +34,6 @@ function pad(number) {
 function DateFormatter(rawDate: Date = DateUtils.getUTCNow()) {
   return {
     formatToDate: () => date(rawDate),
-    formatToTime: () => time(rawDate),
-    formatToShortDate: () => shortDate(rawDate),
-
-    // note: I am not sure about the naming - improve when needed
-    formatToBirthday: () => birthday(rawDate),
 
     /**
      * Always returns YYYY-MM-DD at this moment.
@@ -90,15 +44,8 @@ function DateFormatter(rawDate: Date = DateUtils.getUTCNow()) {
       )}`;
     },
 
-    /**
-     * Always returns HH:mm at this moment.
-     */
-    formatTimeForMachine: () => {
-      return `${pad(rawDate.getUTCHours())}:${pad(rawDate.getUTCMinutes())}`;
-    },
-
     // Pass in your own configuration
-    formatCustom: (config: FormatterConfig) => custom(rawDate, config),
+    formatCustom: (dateFormat: string) => custom(rawDate, dateFormat),
   };
 }
 

packages/localization/src/__tests__/DateFormatter.test.js

@@ -7,29 +7,11 @@ it('formats date correctly', () => {
   expect(DateFormatter(new Date('2018-12-24T00:00:00Z')).formatToDate()).toBe('Mon, 12/24');
 });
 
-it('formats time correctly', () => {
-  expect(DateFormatter(new Date('2018-12-24')).formatToTime()).toBe(
-    '12:00 AM', // midnight
-  );
-  expect(DateFormatter(new Date('2018-12-24T01:00:00Z')).formatToTime()).toBe('1:00 AM');
-});
-
-it('formats birthday correctly', () => {
-  expect(DateFormatter(new Date('2018-12-24')).formatToBirthday()).toBe('12/24/2018');
-  expect(DateFormatter(new Date('2018-12-24T00:00:00Z')).formatToBirthday()).toBe('12/24/2018');
-});
-
 it('formats for machine correctly', () => {
   expect(DateFormatter(new Date('2018-12-24')).formatForMachine()).toBe('2018-12-24');
   expect(DateFormatter(new Date('2018-01-01T01:00:00Z')).formatForMachine()).toBe('2018-01-01');
 });
 
 it('always returns UTC', () => {
   expect(DateFormatter(new Date('2018-12-24T00:00:00+02:00')).formatToDate()).toBe('Sun, 12/23');
-  expect(DateFormatter(new Date('2018-12-24T00:00:00+02:00')).formatToTime()).toBe('10:00 PM');
-});
-
-it('formats shortDate correctly', () => {
-  expect(DateFormatter(new Date('2018-12-24')).formatToShortDate()).toBe('12/24');
-  expect(DateFormatter(new Date('2018-12-24T00:00:00Z')).formatToShortDate()).toBe('12/24');
 });

packages/localization/src/dateFnsLanguageMap.js

@@ -0,0 +1,111 @@
+// @flow strict
+
+import {
+  bg,
+  ca,
+  cs,
+  da,
+  de,
+  el,
+  enGB,
+  enUS,
+  es,
+  fr,
+  hr,
+  id,
+  it,
+  ja,
+  lt,
+  he,
+  hu,
+  nl,
+  nb,
+  pl,
+  pt,
+  ptBR,
+  ro,
+  ru,
+  sk,
+  sr,
+  fi,
+  sv,
+  th,
+  tr,
+  vi,
+  uk,
+  arDZ,
+  ko,
+  zhCN,
+  zhTW,
+} from 'date-fns/locale';
+import type { Locale } from 'date-fns';
+
+const LocaleMap: { [key: string]: Locale, ... } = {
+  bg,
+  ca,
+  cs,
+  da,
+  de,
+  at: de,
+  ch: de,
+  el: el,
+  en: enGB,
+  au: enGB,
+  ee: enGB,
+  hk: enGB,
+  in: enGB,
+  ie: enGB,
+  my: enGB,
+  nz: enGB,
+  sg: enGB,
+  za: enGB,
+  ph: enGB,
+  us: enUS,
+  es,
+  ag: es,
+  cl: es,
+  co: es,
+  ec: es,
+  pe: es,
+  mx: es,
+  fr,
+  be: fr,
+  'ca-fr': fr,
+  hr,
+  id,
+  is: enGB,
+  it,
+  ja,
+  lt,
+  il: he,
+  hu,
+  nl,
+  nb,
+  pl,
+  pt,
+  br: ptBR,
+  ro,
+  ru,
+  by: ru,
+  kz: ru,
+  sk,
+  sr,
+  fi,
+  sv,
+  th,
+  tr,
+  vn: vi,
+  uk,
+  ar: arDZ,
+  bh: arDZ,
+  jo: arDZ,
+  kw: arDZ,
+  om: arDZ,
+  qa: arDZ,
+  ae: arDZ,
+  ko: ko,
+  cn: zhCN,
+  tw: zhTW,
+};
+
+export default LocaleMap;

packages/shared/src/forms/datePicker/DatePicker.js

@@ -9,12 +9,7 @@ import Text from '../../Text';
 import Translation from '../../Translation';
 import StyleSheet from '../../PlatformStyleSheet';
 
-type DateFormatterFunctions =
-  | 'formatToDate'
-  | 'formatToTime'
-  | 'formatToShortDate'
-  | 'formatToBirthday'
-  | 'formatForMachine';
+type DateFormatterFunctions = 'formatToDate' | 'formatForMachine';
 
 type Props = {|
   +date: ?Date,

scripts/configureApplication.js

@@ -33,23 +33,6 @@ fs.writeFileSync(
 log('Linking all native dependencies...');
 childProcess.execSync('yarn react-native link');
 
-log('Patching intl package');
-const intlPackageJson = JSON.parse(
-  fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'intl', 'package.json'), 'utf-8'),
-);
-delete intlPackageJson.browser;
-
-fs.writeFileSync(
-  path.join(__dirname, '..', 'node_modules', 'intl', 'package.json'),
-  JSON.stringify(intlPackageJson, null, 2),
-);
-
-try {
-  fs.unlinkSync(path.join(__dirname, '..', 'node_modules', 'intl', '.babelrc'));
-} catch (e) {
-  // Ignore error - file doesn't exist
-}
-
 log('Checking node version');
 const version = process.versions.node;
 

yarn.lock

@@ -4734,12 +4734,7 @@ data-urls@^1.0.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
-date-fns@^2.7.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.8.0.tgz#628d865367e30e45747ed1e8b0c1572090b04f55"
-  integrity sha512-nbZMIMsoD7QiIKipZ5+XRTCtHZad1ch8OEkLaJxjGL6ThAK2IWAdjmAUAS7Fdz5fCaVWtqc+c8pAsN/MX8eaew==
-
-date-fns@^2.8.1:
+date-fns@^2.7.0, date-fns@^2.8.1:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.8.1.tgz#2109362ccb6c87c3ca011e9e31f702bc09e4123b"
   integrity sha512-EL/C8IHvYRwAHYgFRse4MGAPSqlJVlOrhVYZ75iQBKrnv+ZedmYsgwH3t+BCDuZDXpoo07+q9j4qgSSOa7irJg==
@@ -7091,11 +7086,6 @@ interpret@^1.0.0, interpret@^1.1.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
   integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
 
-intl@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/intl/-/intl-1.2.5.tgz#82244a2190c4e419f8371f5aa34daa3420e2abde"
-  integrity sha1-giRKIZDE5Bn4Nx9ao02qNCDiq94=
-
 [email protected], invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"