Agent, Finance: update date format

apps/agent/app/src/components/TransactionFilters.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import { DateRangePicker, DropDown, GU } from '@aragon/ui'
 import { noop } from '../lib/utils'
-import { MMDDYY_FORMAT } from '../lib/date-utils'
 
 function TransactionFilters({
   dateRangeFilter,
@@ -40,10 +39,10 @@ function TransactionFilters({
         onChange={onTokenChange}
       />
       <DateRangePicker
+        startDate={dateRangeFilter.start}
         endDate={dateRangeFilter.end}
-        format={MMDDYY_FORMAT}
         onChange={onDateRangeChange}
-        startDate={dateRangeFilter.start}
+        format={'YYYY-MM-DD'}
       />
     </div>
   )

apps/agent/app/src/components/Transactions.js

@@ -29,7 +29,7 @@ import TransactionFilters from './TransactionFilters'
 import { TRANSACTION_TYPES_LABELS } from '../transaction-types'
 import useDownloadData from './useDownloadData'
 import useFilteredTransactions from './useFilteredTransactions'
-import { ISO_FORMAT, MMDDYY_FUNC_FORMAT } from '../lib/date-utils'
+import { ISO_SHORT_FORMAT, ISO_LONG_FORMAT } from '../lib/date-utils'
 import { addressesEqual, toChecksumAddress } from '../lib/web3-utils'
 import AgentSvg from './assets/agent_badge.svg'
 
@@ -175,20 +175,21 @@ const Transactions = React.memo(function Transactions({
         const [{ token, amount, to, from } = {}] = tokenTransfers
         const onlyOne = tokenTransfers.length === 1
         const entity = to || from
-        const formattedDate = format(date, ISO_FORMAT)
+        const formattedDate = format(date, ISO_SHORT_FORMAT)
+        const formattedLongDate = format(date, ISO_LONG_FORMAT)
         const isValidEntity =
           typeof targetContract === 'string' && tokenTransfers.length > 0
 
         const dateNode = (
           <time
             dateTime={formattedDate}
-            title={formattedDate}
+            title={formattedLongDate}
             css={`
               ${textStyle('body2')};
               color: ${theme.surfaceContent};
             `}
           >
-            {format(date, MMDDYY_FUNC_FORMAT)}
+            {formattedDate}
           </time>
         )
         const badgeNode = onlyOne ? (

apps/agent/app/src/components/useDownloadData.js

@@ -4,7 +4,7 @@ import { saveAs } from 'file-saver'
 import { formatTokenAmount } from '@aragon/ui'
 import { IdentityContext } from './IdentityManager/IdentityManager'
 import { toChecksumAddress } from '../lib/web3-utils'
-import { formatDate, ISO_SHORT_FORMAT } from '../lib/date-utils'
+import { ISO_SHORT_FORMAT } from '../lib/date-utils'
 import { TRANSACTION_TYPES_LABELS } from '../transaction-types'
 
 // Transforms a two dimensional array into a CSV data structure
@@ -41,7 +41,7 @@ async function getDownloadData({ transactions, tokenDetails, resolveAddress }) {
             })
           )
           return [
-            formatDate(date),
+            format(date, ISO_SHORT_FORMAT),
             source,
             recipient,
             TRANSACTION_TYPES_LABELS[type],

apps/agent/app/src/lib/date-utils.js

@@ -1,10 +1,2 @@
-import { format } from 'date-fns'
-
-export const MMDDYY_FORMAT = 'MM/DD/YY'
-export const MMDDYY_FUNC_FORMAT = 'MM/dd/yy'
-export const ISO_FORMAT = "yyyy-MM-dd'T'HH:mm:ss"
 export const ISO_SHORT_FORMAT = 'yyyy-MM-dd'
-
-export function formatDate(date) {
-  return format(date, MMDDYY_FUNC_FORMAT)
-}
+export const ISO_LONG_FORMAT = "yyyy-MM-dd'T'HH:mm:ss.SSSxxx"

apps/finance/app/src/components/Transfers.js

@@ -30,7 +30,7 @@ import { useIdentity, IdentityContext } from './IdentityManager/IdentityManager'
 import LocalIdentityBadge from './LocalIdentityBadge/LocalIdentityBadge'
 import useFilteredTransfers from './useFilteredTransfers'
 
-const formatDate = date => format(date, 'dd/MM/yy')
+const formatDate = date => format(date, 'yyyy-MM-dd')
 
 const getDownloadData = async (transfers, tokenDetails, resolveAddress) => {
   const mappedData = await Promise.all(
@@ -58,11 +58,11 @@ const getDownloadData = async (transfers, tokenDetails, resolveAddress) => {
 }
 
 const getDownloadFilename = (appAddress, { start, end }) => {
-  const today = format(Date.now(), 'yyyy-MM-dd')
+  const today = formatDate(Date.now())
   let filename = `finance_${appAddress}_${today}.csv`
   if (start && end) {
-    const formattedStart = format(start, 'yyyy-MM-dd')
-    const formattedEnd = format(end, 'yyyy-MM-dd')
+    const formattedStart = formatDate(start)
+    const formattedEnd = formatDate(end)
     filename = `finance_${appAddress}_${formattedStart}_to_${formattedEnd}.csv`
   }
   return filename
@@ -219,7 +219,7 @@ const Transfers = React.memo(({ tokens, transactions }) => {
 
         return [
           <time dateTime={formattedDate} title={formattedDate}>
-            {format(date, 'dd/MM/yy')}
+            {formatDate(date)}
           </time>,
           <div
             css={`

apps/finance/app/src/components/TransfersFilters.js

@@ -40,6 +40,7 @@ const TransfersFilters = ({
         startDate={dateRangeFilter.start}
         endDate={dateRangeFilter.end}
         onChange={onDateRangeChange}
+        format={'YYYY-MM-DD'}
       />
     </div>
   )