getTimeFromNow to native and localized

package.json

@@ -48,7 +48,7 @@
     "lottie-react-native": "^3.2.1",
     "moment": "^2.22.2",
     "react": "16.9.0",
-    "react-intl": "^3.3.1",
+    "react-intl": "^3.9.2",
     "react-native": "0.61.2",
     "react-native-actionsheet": "^2.4.2",
     "react-native-autoheight-webview": "^1.3.4",

src/components/basicUIElements/view/userListItem/userListItem.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
+import { FormattedRelativeTime } from 'react-intl';
 import { UserAvatar } from '../../../userAvatar';
 import styles from './userListItemStyles';
 
@@ -31,7 +32,15 @@ const UserListItem = ({
       <UserAvatar noAction={userCanPress} style={styles.avatar} username={username} />
       <View style={styles.userDescription}>
         <Text style={styles.name}>{text || username}</Text>
-        {description && <Text style={styles.date}>{description}</Text>}
+        {description && (
+          <Text style={styles.date}>
+            <FormattedRelativeTime
+              value={description.value}
+              numeric="auto"
+              unit={description.unit}
+            />
+          </Text>
+        )}
       </View>
       {middleText && (
         <View style={styles.middleWrapper}>

src/components/postCard/view/postCardView.js

@@ -96,7 +96,6 @@ class PostCardView extends Component {
       <View style={styles.post}>
         <View style={styles.bodyHeader}>
           <PostHeaderDescription
-            // date={intl.formatRelative(content.created)}
             date={getTimeFromNow(get(content, 'created'))}
             isHideImage={isHideImage}
             name={get(content, 'author')}

src/components/postElements/headerDescription/view/postHeaderDescription.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import { withNavigation } from 'react-navigation';
-import { injectIntl } from 'react-intl';
+import { injectIntl, FormattedRelativeTime } from 'react-intl';
 
 // Components
 import { Tag } from '../../../basicUIElements';
@@ -78,7 +78,11 @@ class PostHeaderDescription extends PureComponent {
             </TouchableOpacity>
           )}
           <Text style={styles.date}>
-            {isPromoted ? intl.formatMessage({ id: 'post.sponsored' }) : date}
+            {isPromoted ? (
+              intl.formatMessage({ id: 'post.sponsored' })
+            ) : (
+              <FormattedRelativeTime value={date.value} numeric="auto" unit={date.unit} />
+            )}
           </Text>
           {isShowOwnerIndicator && (
             <Icon style={styles.ownerIndicator} name="stars" iconType="MaterialIcons" />

src/components/postListItem/view/postListItemView.js

@@ -45,7 +45,6 @@ class PostListItemView extends Component {
       handleOnRemoveItem,
       id,
       intl,
-      isFormatedDate,
     } = this.props;
 
     return (
@@ -53,8 +52,7 @@ class PostListItemView extends Component {
         <View style={styles.container}>
           <View style={styles.header}>
             <PostHeaderDescription
-              // date={intl.formatRelative(created)}
-              date={isFormatedDate ? created : getTimeFromNow(created, true)}
+              date={getTimeFromNow(created)}
               name={username}
               reputation={reputation}
               size={36}

src/components/postView/view/postDisplayView.js

@@ -210,7 +210,6 @@ class PostDisplayView extends PureComponent {
                   <Text style={styles.footerText}>
                     Posted by
                     <Text style={styles.footerName}>{` ${author || post.author} `}</Text>
-                    {formatedTime}
                   </Text>
                   {/* {isPostEnd && this._getTabBar()} */}
                 </View>

src/components/upvote/view/upvoteView.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import { View, TouchableOpacity, Text, Alert } from 'react-native';
-import { injectIntl } from 'react-intl';
+import { injectIntl, FormattedRelativeTime } from 'react-intl';
 import { Popover, PopoverController } from 'react-native-modal-popover';
 import Slider from 'react-native-slider';
 import get from 'lodash/get';
@@ -331,7 +331,12 @@ class UpvoteView extends Component {
                     <Text style={styles.detailsText}>
                       {`${intl.formatMessage({
                         id: 'payout.payout_date',
-                      })} ${payoutDate}`}
+                      })} `}
+                      <FormattedRelativeTime
+                        value={payoutDate.value}
+                        numeric="auto"
+                        unit={payoutDate.unit}
+                      />
                     </Text>
                     {warnZeroPayout && (
                       <Text style={styles.detailsText}>

src/utils/time.js

@@ -1,19 +1,53 @@
-import moment from 'moment';
-
 const TODAY = new Date();
 const ONE_DAY = new Date(TODAY.getTime() - 24 * 60 * 60 * 1000);
 const SEVEN_DAY = new Date(TODAY.getTime() - 7 * 24 * 60 * 60 * 1000);
 
-export const getTimeFromNow = (value, isWithoutUtc) => {
-  if (!value) {
+const MINUTE = 60;
+const HOUR = 60 * 60;
+const DAY = 60 * 60 * 24;
+const WEEK = 60 * 60 * 24 * 7;
+const MONTH = 60 * 60 * 24 * 30;
+const YEAR = 60 * 60 * 24 * 365;
+
+export const getTimeFromNow = d => {
+  if (!d) {
     return null;
   }
+  const dateIn = new Date(`${d}.000Z`);
+  const dateNow = new Date();
+  let future = false;
 
-  if (isWithoutUtc) {
-    return moment(value).fromNow(true);
+  if (dateIn > dateNow) {
+    future = true;
   }
 
-  return moment.utc(value).fromNow(true);
+  const diff = Math.abs((dateNow - dateIn) / 1000);
+
+  if (diff < MINUTE) {
+    return { unit: 'second', value: future ? Math.round(diff) : -Math.round(diff) };
+  }
+  if (diff < HOUR) {
+    return {
+      unit: 'minute',
+      value: future ? Math.round(diff / MINUTE) : -Math.round(diff / MINUTE),
+    };
+  }
+  if (diff < DAY) {
+    return { unit: 'hour', value: future ? Math.round(diff / HOUR) : -Math.round(diff / HOUR) };
+  }
+  if (diff < WEEK) {
+    return { unit: 'day', value: future ? Math.round(diff / DAY) : -Math.round(diff / DAY) };
+  }
+  if (diff < MONTH) {
+    return { unit: 'week', value: future ? Math.round(diff / WEEK) : -Math.round(diff / WEEK) };
+  }
+  if (diff < YEAR) {
+    return { unit: 'month', value: future ? Math.round(diff / MONTH) : -Math.round(diff / MONTH) };
+  }
+  if (diff > YEAR) {
+    return { unit: 'year', value: future ? Math.round(diff / YEAR) : -Math.round(diff / YEAR) };
+  }
+  return { unit: 'day', value: future ? Math.round(diff / DAY) : -Math.round(diff / DAY) };
 };
 
 export const getFormatedCreatedDate = value => {

yarn.lock

@@ -7498,7 +7498,7 @@ react-devtools-core@^3.6.3:
     shell-quote "^1.6.1"
     ws "^3.3.1"
 
-react-intl@^3.3.1:
+react-intl@^3.9.2:
   version "3.9.2"
   resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-3.9.2.tgz#24d479877e43fb953bc8af494927ae57d6a6421a"
   integrity sha512-QuiY90qO1mGRJ21Lpe1jL3NxAexmhYBrv/9Rw8dcrytv6M1FfVcGVYsruU8PUFYdFhFvQd2BMcw1uu0nomTIHg==