Replace moment with date-fns

package.json

@@ -33,7 +33,7 @@
   "homepage": "https://github.com/uptick/react-keyed-file-browser#readme",
   "dependencies": {
     "classnames": "^2.2.6",
-    "moment": "^2.24.0",
+    "date-fns": "^2.12.0",
     "prop-types": "^15.7.2",
     "react-dnd": "^8.0",
     "react-dnd-html5-backend": "^8.0"
@@ -47,7 +47,7 @@
     "@babel/plugin-proposal-class-properties": "^7.3.0",
     "@babel/plugin-proposal-decorators": "^7.3.0",
     "@babel/plugin-proposal-export-default-from": "^7.2.0",
-    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-env": "^7.10.3",
     "@babel/preset-react": "^7.0.0",
     "@sambego/storybook-state": "^1.3.6",
     "@storybook/react": "^5.3.14",

src/browser.js

@@ -37,7 +37,11 @@ function getItemProps(file, browserProps) {
 
 class RawFileBrowser extends React.Component {
   static propTypes = {
-    files: PropTypes.array.isRequired,
+    files: PropTypes.arrayOf(PropTypes.shape({
+      key: PropTypes.string.isRequired,
+      modified: PropTypes.number,
+      size: PropTypes.number,
+    })).isRequired,
     actions: PropTypes.node,
     showActionBar: PropTypes.bool.isRequired,
     canFilter: PropTypes.bool.isRequired,

src/files/list-thumbnail.js

@@ -1,8 +1,8 @@
 import React from 'react'
-import Moment from 'moment'
 import ClassNames from 'classnames'
 import { DragSource, DropTarget } from 'react-dnd'
 import { NativeTypes } from 'react-dnd-html5-backend'
+import { formatDistanceToNow } from 'date-fns'
 
 import BaseFile, { BaseFileConnectors } from './../base-file.js'
 import { fileSize } from './utils.js'
@@ -87,7 +87,7 @@ class RawListThumbnailFile extends BaseFile {
       if (!isRenaming && !isDeleting) {
         modified = (
           <span className="modified">
-            Last modified: {Moment(this.props.modified).fromNow()}
+            Last modified: {formatDistanceToNow(this.props.modified, { addSuffix: true })}
           </span>
         )
       }

src/files/table.js

@@ -1,8 +1,8 @@
 import React from 'react'
-import Moment from 'moment'
 import ClassNames from 'classnames'
 import { DragSource, DropTarget } from 'react-dnd'
 import { NativeTypes } from 'react-dnd-html5-backend'
+import { formatDistanceToNow } from 'date-fns'
 
 import BaseFile, { BaseFileConnectors } from './../base-file.js'
 import { fileSize } from './utils.js'
@@ -86,7 +86,7 @@ class RawTableFile extends BaseFile {
         </td>
         <td className="size">{fileSize(size)}</td>
         <td className="modified">
-          {typeof modified === 'undefined' ? '-' : Moment(modified, 'x').fromNow()}
+          {typeof modified === 'undefined' ? '-' : formatDistanceToNow(modified, { addSuffix: true })}
         </td>
       </tr>
     )

src/groupers/by-modified.js

@@ -1,4 +1,4 @@
-import Moment from 'moment'
+import { format, startOfMonth, endOfMonth } from 'date-fns'
 import { relativeTimeWindows } from './utils'
 import { isFolder } from '../utils'
 
@@ -14,7 +14,7 @@ export default function(files, root) {
     }
 
     let allocated = false
-    const fileModified = +Moment(newFile.modified)
+    const fileModified = +newFile.modified
     for (let windex = 0; windex < timeWindows.length; windex++) {
       const timeWindow = timeWindows[windex]
       if (fileModified > +timeWindow.begins && fileModified <= +timeWindow.ends) {
@@ -25,9 +25,9 @@ export default function(files, root) {
     }
     if (!allocated) {
       const newWindow = {
-        name: Moment(newFile.modified).format('MMMM YYYY'),
-        begins: Moment(newFile.modified).startOf('month'),
-        ends: Moment(newFile.modified).startOf('month').endOf('month'),
+        name: format(newFile.modified, 'MMMM yyyy'),
+        begins: startOfMonth(newFile.modified),
+        ends: endOfMonth(newFile.modified),
         items: [],
       }
       newWindow.items.push(newFile)

src/groupers/utils.js

@@ -1,38 +1,49 @@
 // @ts-nocheck
-import Moment from 'moment'
+import {
+  startOfToday,
+  endOfToday,
+  startOfYesterday,
+  endOfYesterday,
+  startOfWeek,
+  endOfWeek,
+  addWeeks,
+  startOfMonth,
+  endOfMonth,
+  getMonth,
+} from 'date-fns'
 
 function relativeTimeWindows() {
   const windows = []
-  const now = Moment()
+  const now = new Date()
   windows.push({
     name: 'Today',
-    begins: Moment().startOf('day'),
-    ends: Moment().endOf('day'),
+    begins: startOfToday(),
+    ends: endOfToday(),
     items: [],
   })
   windows.push({
     name: 'Yesterday',
-    begins: Moment(windows[windows.length - 1].begins - Moment.duration(24, 'hours')),
-    ends: Moment(windows[windows.length - 1].ends - Moment.duration(24, 'hours')),
+    begins: startOfYesterday(),
+    ends: endOfYesterday(),
     items: [],
   })
   windows.push({
     name: 'Earlier this Week',
-    begins: windows[0].begins.clone().startOf('week'),
-    ends: windows[0].begins.clone().startOf('week').endOf('week'),
+    begins: startOfWeek(now),
+    ends: endOfWeek(now),
     items: [],
   })
   windows.push({
     name: 'Last Week',
-    begins: Moment(windows[2].begins - Moment.duration(7, 'days')),
-    ends: Moment(windows[2].begins - Moment.duration(7, 'days')).endOf('week'),
+    begins: startOfWeek(addWeeks(now, -1)),
+    ends: endOfWeek(addWeeks(now, -1)),
     items: [],
   })
-  if (Moment(windows[windows.length - 1].begins).month() === now.month()) {
+  if (getMonth(windows[windows.length - 1].begins) === getMonth(now)) {
     windows.push({
       name: 'Earlier this Month',
-      begins: Moment().startOf('month'),
-      ends: Moment().startOf('month').endOf('month'),
+      begins: startOfMonth(now),
+      ends: endOfMonth(now),
       items: [],
     })
   }

src/sorters/by-modified.js

@@ -1,8 +1,4 @@
-import Moment from 'moment'
-
-function lastModifiedComparer(a, b) {
-  return (+Moment(a.modified) < +Moment(b.modified))
-}
+import { compareAsc } from 'date-fns'
 
 function lastModifiedSort(allFiles) {
   const folders = []
@@ -19,7 +15,7 @@ function lastModifiedSort(allFiles) {
     }
   }
 
-  files = files.sort(lastModifiedComparer)
+  files = files.sort(compareAsc)
 
   for (let folderIndex = 0; folderIndex < folders.length; folderIndex++) {
     const folder = folders[folderIndex]