fix for using date-fns 2.0

src/client/js/components/PageComment/Comment.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { distanceInWordsStrict } from 'date-fns';
-import dateFnsFormat from 'date-fns/format';
+import { format, formatDistanceStrict } from 'date-fns';
 
 import Button from 'react-bootstrap/es/Button';
 import Tooltip from 'react-bootstrap/es/Tooltip';
@@ -219,9 +218,10 @@ class Comment extends React.Component {
     const comment = this.props.comment;
     const creator = comment.creator;
     const isMarkdown = comment.isMarkdown;
+    const createdAt = new Date(comment.createdAt);
 
     const rootClassName = this.getRootClassName(comment);
-    const commentDate = distanceInWordsStrict(comment.createdAt, new Date());
+    const commentDate = formatDistanceStrict(createdAt, new Date());
     const commentBody = isMarkdown ? this.renderRevisionBody() : this.renderText(comment.comment);
     const revHref = `?revision=${comment.revision}`;
     const revFirst8Letters = comment.revision.substr(-8);
@@ -229,7 +229,7 @@ class Comment extends React.Component {
 
     const commentDateTooltip = (
       <Tooltip id={`commentDateTooltip-${comment._id}`}>
-        {dateFnsFormat(comment.createdAt, 'YYYY/MM/DD HH:mm')}
+        {format(createdAt, 'yyyy/MM/dd HH:mm')}
       </Tooltip>
     );
 

src/client/js/components/PageComment/DeleteCommentModal.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import Button from 'react-bootstrap/es/Button';
 import Modal from 'react-bootstrap/es/Modal';
 
-import dateFnsFormat from 'date-fns/format';
+import { format } from 'date-fns';
 
 import UserPicture from '../User/UserPicture';
 import Username from '../User/Username';
@@ -25,7 +25,7 @@ export default class DeleteCommentModal extends React.Component {
     }
 
     const comment = this.props.comment;
-    const commentDate = dateFnsFormat(comment.createdAt, 'YYYY/MM/DD HH:mm');
+    const commentDate = format(new Date(comment.createdAt), 'yyyy/MM/dd HH:mm');
 
     // generate body
     let commentBody = comment.comment;

src/client/js/components/User/UserDate.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import dateFnsFormat from 'date-fns/format';
+import { format } from 'date-fns';
 
 /**
  * UserDate
@@ -11,7 +11,8 @@ import dateFnsFormat from 'date-fns/format';
 export default class UserDate extends React.Component {
 
   render() {
-    const dt = dateFnsFormat(this.props.dateTime, this.props.format);
+    const date = new Date(this.props.dateTime);
+    const dt = format(date, this.props.format);
 
     return (
       <span className={this.props.className}>
@@ -29,6 +30,6 @@ UserDate.propTypes = {
 };
 
 UserDate.defaultProps = {
-  format: 'YYYY/MM/DD HH:mm:ss',
+  format: 'yyyy/MM/dd HH:mm:ss',
   className: '',
 };

src/server/util/middlewares.js

@@ -1,6 +1,6 @@
 const debug = require('debug')('growi:lib:middlewares');
 const logger = require('@alias/logger')('growi:lib:middlewares');
-const { distanceInWordsStrict } = require('date-fns');
+const { formatDistanceStrict } = require('date-fns');
 const pathUtils = require('growi-commons').pathUtils;
 const md5 = require('md5');
 const entities = require('entities');
@@ -121,7 +121,7 @@ module.exports = (crowi, app) => {
       });
 
       swig.setFilter('dateDistance', (input) => {
-        return distanceInWordsStrict(input, new Date());
+        return formatDistanceStrict(input, new Date());
       });
 
       swig.setFilter('nl2br', (string) => {