fix: as time component encapsulation

src/v2/components/Accounts/Table/index.jsx

@@ -11,8 +11,8 @@ import {map} from 'lodash/fp';
 import TypeLabel from 'v2/components/UI/TypeLabel';
 import Table from 'v2/components/UI/Table';
 import type {TableHeadProps} from 'v2/@types/table';
-import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import TableCard from 'v2/components/UI/TableCard';
+import asTime from 'v2/utils/asTime';
 
 import useStyles from './styles';
 
@@ -48,10 +48,6 @@ const AccountsTable = ({
   const theme = useTheme();
   const showTable = useMediaQuery(theme.breakpoints.up('md'));
 
-  const asTime = x => {
-    return formatDistanceToNow(Date.parse(x), {addSuffix: true});
-  };
-
   const renderRow = ({data: account}) => {
     return (
       <TableRow hover key={account.programId}>

src/v2/components/Blocks/Detail/index.jsx

@@ -4,7 +4,6 @@ import {observer} from 'mobx-react-lite';
 import React, {useEffect} from 'react';
 import {map} from 'lodash/fp';
 import {Match} from 'react-router-dom';
-import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import SectionHeader from 'v2/components/UI/SectionHeader';
 import Mixpanel from 'v2/mixpanel';
 import CopyBtn from 'v2/components/UI/CopyBtn';
@@ -13,6 +12,7 @@ import Loader from 'v2/components/UI/Loader';
 import BlockDetailStore from 'v2/stores/blocks/detail';
 import ValidatorName from 'v2/components/UI/ValidatorName';
 import InfoRow from 'v2/components/InfoRow';
+import asTime from 'v2/utils/asTime';
 
 import useStyles from './styles';
 
@@ -34,15 +34,11 @@ const BlockDetail = ({match}: {match: Match}) => {
     return <Loader width="533" height="290" />;
   }
 
-  const asTime = x => {
-    return formatDistanceToNow(Date.parse(x), {addSuffix: true});
-  };
-
   const specs = [
     {
       label: 'Time',
       hint: block.timestamp,
-      value: block.timestamp && asTime(block.timestamp),
+      value: asTime(block.timestamp),
     },
     {
       label: 'Fee',

src/v2/components/Blocks/Table/index.jsx

@@ -3,7 +3,6 @@
 import React from 'react';
 import {TableCell, TableRow} from '@material-ui/core';
 import cn from 'classnames';
-import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import {useTheme} from '@material-ui/core/styles';
 import {observer} from 'mobx-react-lite';
@@ -13,6 +12,7 @@ import Table from 'v2/components/UI/Table';
 import type {TableHeadProps} from 'v2/@types/table';
 import ValidatorName from 'v2/components/UI/ValidatorName';
 import TableCard from 'v2/components/UI/TableCard';
+import asTime from 'v2/utils/asTime';
 
 import useStyles from './styles';
 
@@ -66,10 +66,6 @@ const BlocksTable = ({
   const theme = useTheme();
   const showTable = useMediaQuery(theme.breakpoints.up('md'));
 
-  const asTime = x => {
-    return formatDistanceToNow(Date.parse(x), {addSuffix: true});
-  };
-
   const renderRow = ({data: block}) => {
     return (
       <TableRow hover key={block.id}>

src/v2/components/Favorites/index.jsx

@@ -19,10 +19,10 @@ import Table from 'v2/components/UI/Table';
 import TypeLabel from 'v2/components/UI/TypeLabel';
 import {ReactComponent as WarnIcon} from 'v2/assets/icons/warn.svg';
 import FavoritesStore from 'v2/stores/favorites';
+import asTime from 'v2/utils/asTime';
+import {Link} from 'react-router-dom';
 
 import useStyles from './styles';
-import {Link} from 'react-router-dom';
-import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 
 const fields: TableHeadProps[] = [
   {
@@ -77,10 +77,6 @@ const FavoritesPage = () => {
     removeFavorites(id, tab);
   };
 
-  const asTime = x => {
-    return formatDistanceToNow(Date.parse(x), {addSuffix: true});
-  };
-
   const renderRow = ({data: row}) => {
     const {id, type, timestamp} = row;
 
@@ -95,7 +91,7 @@ const FavoritesPage = () => {
           </div>
         </TableCell>
         <TableCell width={135} title={timestamp}>
-          {(timestamp && asTime(timestamp)) || 'Unknown'}
+          {asTime(timestamp) || 'Unknown'}
         </TableCell>
         <TableCell width={30} title="Remove this item">
           <Button color="primary" onClick={remove(id)}>

src/v2/components/Programs/Detail/index.jsx

@@ -11,11 +11,11 @@ import QRPopup from 'v2/components/QRPopup';
 import CopyBtn from 'v2/components/UI/CopyBtn';
 import Loader from 'v2/components/UI/Loader';
 import ProgramDetailStore from 'v2/stores/programs/detail';
-import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import {LAMPORT_SOL_RATIO} from 'v2/constants';
 import AddToFavorites from 'v2/components/AddToFavorites';
 import InfoRow from 'v2/components/InfoRow';
 import TabNav from 'v2/components/UI/TabNav';
+import asTime from 'v2/utils/asTime';
 
 import ProgramDetails from './Details';
 import ProgramCode from './Code';
@@ -36,10 +36,6 @@ const ProgramDetail = ({match}: {match: Match}) => {
     ProgramDetailStore.init({programId: match.params.id});
   }
 
-  const asTime = x => {
-    return formatDistanceToNow(Date.parse(x), {addSuffix: true});
-  };
-
   const [tab, setTab] = useState(0);
   const theme = useTheme();
   const verticalTable = useMediaQuery(theme.breakpoints.down('xs'));
@@ -82,7 +78,7 @@ const ProgramDetail = ({match}: {match: Match}) => {
     {
       label: 'Last Called',
       hint: '',
-      value: timestamp && asTime(timestamp),
+      value: asTime(timestamp),
     },
   ];
 

src/v2/components/Programs/Table/index.jsx

@@ -12,7 +12,7 @@ import TypeLabel from 'v2/components/UI/TypeLabel';
 import Table from 'v2/components/UI/Table';
 import type {TableHeadProps} from 'v2/@types/table';
 import TableCard from 'v2/components/UI/TableCard';
-import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+import asTime from 'v2/utils/asTime';
 
 import useStyles from './styles';
 
@@ -48,10 +48,6 @@ const ProgramsTable = ({
   const theme = useTheme();
   const showTable = useMediaQuery(theme.breakpoints.up('md'));
 
-  const asTime = x => {
-    return formatDistanceToNow(Date.parse(x), {addSuffix: true});
-  };
-
   const renderRow = ({data: program}) => {
     return (
       <TableRow hover key={program.programId}>

src/v2/components/Transactions/Detail/index.jsx

@@ -12,8 +12,8 @@ import CopyBtn from 'v2/components/UI/CopyBtn';
 import {observer} from 'mobx-react-lite';
 import _ from 'lodash';
 import TransactionDetailStore from 'v2/stores/transactions/detail';
-import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import {Link, Match} from 'react-router-dom';
+import asTime from 'v2/utils/asTime';
 
 import ProgramsTab from './ProgramsTab';
 import ProgramStatus from './Status';
@@ -42,15 +42,11 @@ const TransactionDetail = ({match}: {match: Match}) => {
     return <Loader width="533" height="290" />;
   }
 
-  const asTime = x => {
-    return formatDistanceToNow(Date.parse(x), {addSuffix: true});
-  };
-
   const specs = [
     {
       label: 'Time',
       hint: transaction.timestamp,
-      value: transaction.timestamp && asTime(transaction.timestamp),
+      value: asTime(transaction.timestamp),
     },
     {
       label: 'Fee',

src/v2/components/Transactions/Table/index.jsx

@@ -11,8 +11,8 @@ import {map} from 'lodash/fp';
 import TypeLabel from 'v2/components/UI/TypeLabel';
 import Table from 'v2/components/UI/Table';
 import type {TableHeadProps} from 'v2/@types/table';
-import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import TableCard from 'v2/components/UI/TableCard';
+import asTime from 'v2/utils/asTime';
 
 import useStyles from './styles';
 
@@ -66,10 +66,6 @@ const TransactionsTable = ({
   const theme = useTheme();
   const showTable = useMediaQuery(theme.breakpoints.up('md'));
 
-  const asTime = x => {
-    return formatDistanceToNow(Date.parse(x), {addSuffix: true});
-  };
-
   const renderRow = ({data: transaction}) => {
     return (
       <TableRow hover key={transaction.id}>

src/v2/utils/asTime.js

@@ -0,0 +1,11 @@
+import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+import isValid from 'date-fns/isValid';
+import parseISO from 'date-fns/parseISO';
+
+function asTime(value) {
+  const parsed = parseISO(value);
+  if (!value || !isValid(parsed)) return '';
+  return formatDistanceToNow(parsed, {addSuffix: true});
+}
+
+export default asTime;