feat: fuzzy time for conversation messages

berty · Feb 6, 2019 · 965e862 · 965e862
1 parent 60a34d5
commit 965e862
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 4 deletions.
diff --git a/client/react-native/common/components/Screens/Chats/Detail.js b/client/react-native/common/components/Screens/Chats/Detail.js
@@ -15,6 +15,7 @@ import { merge } from '../../../helpers'
 import { parseEmbedded } from '../../../helpers/json'
 import { shadow } from '../../../styles'
 import { conversation as utils } from '../../../utils'
+import * as dateFns from '../../../i18n/dateFns'
 
 class Message extends React.PureComponent {
   static contextType = RelayContext
@@ -94,7 +95,7 @@ class Message extends React.PureComponent {
             [isMyself ? 'left' : 'right']: 42,
           }}
         >
-          {new Date(data.createdAt).toTimeString()}{' '}
+          {dateFns.fuzzyTimeOrFull(new Date(data.createdAt))}{' '}
           {isMyself ? (
             <Icon
               name={

diff --git a/client/react-native/common/i18n/dateFns.js b/client/react-native/common/i18n/dateFns.js
@@ -0,0 +1,56 @@
+import i18n from 'i18next'
+import dateFns from 'date-fns'
+
+const loadedLocales = {
+  'en': require('date-fns/locale/en'),
+  'fr': require('date-fns/locale/fr'),
+  'ja': require('date-fns/locale/ja'),
+  'pl': require('date-fns/locale/pl'),
+  'ru': require('date-fns/locale/ru'),
+  'tr': require('date-fns/locale/tr'),
+  // 'he': require('date-fns/locale/he'),
+  // 'uk': require('date-fns/locale/uk'),
+}
+
+const getLocale = () => {
+  let languageCode = 'en'
+  try {
+    languageCode = i18n.language.split('-')[0]
+  } catch (e) {
+    // noop
+  }
+
+  if (loadedLocales[languageCode] !== undefined) {
+    return loadedLocales[languageCode]
+  }
+
+  return loadedLocales['en']
+}
+
+export const distanceInWords = (from, to) => dateFns.distanceInWords(
+  from, to, {
+    locale: getLocale(),
+  }
+)
+
+export const distanceInWordsToNow = from => dateFns.distanceInWordsToNow(
+  from,
+  {
+    includeSeconds: true,
+    locale: getLocale(),
+  }
+)
+
+export const formatTime = date => dateFns.format(date, i18n.t('time.time'), { locale: getLocale() })
+
+export const formatDateTime = date => dateFns.format(date, i18n.t('time.datetime'), { locale: getLocale() })
+
+export const fuzzyTimeOrFull = date => {
+  if (dateFns.isToday(date)) {
+    return distanceInWordsToNow(date)
+  } else if (dateFns.isBefore(date, dateFns.subDays(Date.now(), 1))) {
+    return formatTime(date)
+  }
+
+  return formatDateTime(date)
+}
diff --git a/client/react-native/common/i18n/en/messages.json b/client/react-native/common/i18n/en/messages.json
@@ -203,5 +203,9 @@
   "my-account": {
     "title": "My account",
     "delete-my-account": "Delete my account (not implem.)"
+  },
+  "time": {
+    "time": "hh:mm A",
+    "datetime": "MMM Do YYYY hh:mm A"
   }
 }
diff --git a/client/react-native/common/i18n/fr/messages.json b/client/react-native/common/i18n/fr/messages.json
@@ -203,5 +203,9 @@
   "my-account": {
     "title": "Mon compte",
     "delete-my-account": "Supprimer mon compte (pas implem.)"
+  },
+  "time": {
+    "time": "HH:mm",
+    "datetime": "HH:mm DD/MM/YYYY"
   }
 }
diff --git a/client/react-native/ios/Berty.xcodeproj/project.pbxproj b/client/react-native/ios/Berty.xcodeproj/project.pbxproj
@@ -5,7 +5,6 @@
 	};
 	objectVersion = 46;
 	objects = {
-
 /* Begin PBXBuildFile section */
 		00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
 		00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };

diff --git a/client/react-native/ios/Berty/Info.plist b/client/react-native/ios/Berty/Info.plist
@@ -32,7 +32,7 @@
 	<key>CFBundleVersion</key>
 	<string>1</string>
 	<key>LSApplicationCategoryType</key>
-	<string></string>
+	<string/>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSAppTransportSecurity</key>
@@ -51,7 +51,7 @@
 	<key>NSCameraUsageDescription</key>
 	<string>Berty would like to use your camera</string>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>NSMicrophoneUsageDescription</key>
 	<string>Berty would like to use your microphone (for videos)</string>
 	<key>NSPhotoLibraryAddUsageDescription</key>

diff --git a/client/react-native/package.json b/client/react-native/package.json
@@ -18,6 +18,7 @@
     "cavy": "git+https://git@github.com/berty/cavy.git",
     "concurrently": "^4.0.1",
     "crypto-js": "^3.1.9-1",
+    "date-fns": "^1.30.1",
     "deepmerge": "^2.2.1",
     "graphql": "^14.0.2",
     "graphql-relay": "^0.5.5",

diff --git a/client/react-native/yarn.lock b/client/react-native/yarn.lock
@@ -2004,6 +2004,10 @@ date-fns@^1.23.0:
   version "1.29.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"
 
+date-fns@^1.30.1:
+  version "1.30.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
+
 debug@2.6.9, debug@^2.1.2, debug@^2.1.3, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"