chore: update date-fns

client/package-lock.json

@@ -9049,9 +9049,9 @@
       }
     },
     "date-fns": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
-      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz",
+      "integrity": "sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ=="
     },
     "debug": {
       "version": "2.6.9",

client/package.json

@@ -27,7 +27,7 @@
     "browser-cookies": "^1.2.0",
     "chai": "^4.2.0",
     "csrf": "^3.1.0",
-    "date-fns": "^1.30.1",
+    "date-fns": "^2.16.1",
     "entities": "^1.1.2",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.5",

client/src/client-only-routes/ShowCertification.js

@@ -34,7 +34,7 @@ const propTypes = {
     certName: PropTypes.string,
     certTitle: PropTypes.string,
     completionTime: PropTypes.number,
-    date: PropTypes.string
+    date: PropTypes.number
   }),
   certDashedName: PropTypes.string,
   certName: PropTypes.string,
@@ -193,14 +193,14 @@ class ShowCertification extends Component {
     }
 
     const {
-      date: issueDate,
+      date,
       name: userFullName,
       username,
       certTitle,
       completionTime
     } = cert;
 
-    const certDate = new Date(issueDate);
+    const certDate = new Date(date);
     const certYear = certDate.getFullYear();
     const certMonth = certDate.getMonth();
     const certURL = `https://freecodecamp.org${pathname}`;
@@ -282,9 +282,9 @@ class ShowCertification extends Component {
                 </div>
               </Col>
               <Col md={7} sm={12}>
-                <div className='issue-date'>
+                <div data-cy='issue-date' className='issue-date'>
                   Issued&nbsp;
-                  <strong>{format(certDate, 'MMMM D, YYYY')}</strong>
+                  <strong>{format(certDate, 'MMMM d, y')}</strong>
                 </div>
               </Col>
             </header>

client/src/components/profile/components/HeatMap.js

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import CalendarHeatMap from '@freecodecamp/react-calendar-heatmap';
 import { Row } from '@freecodecamp/react-bootstrap';
 import ReactTooltip from 'react-tooltip';
-import addDays from 'date-fns/add_days';
-import addMonths from 'date-fns/add_months';
-import startOfDay from 'date-fns/start_of_day';
-import isEqual from 'date-fns/is_equal';
+import addDays from 'date-fns/addDays';
+import addMonths from 'date-fns/addMonths';
+import startOfDay from 'date-fns/startOfDay';
+import isEqual from 'date-fns/isEqual';
 
 import FullWidthRow from '../../helpers/FullWidthRow';
 import Spacer from '../../helpers/Spacer';

client/src/components/profile/components/TimeLine.js

@@ -80,7 +80,8 @@ class TimelineInner extends Component {
 
   renderCompletion(completed) {
     const { idToNameMap, username } = this.props;
-    const { id, completedDate } = completed;
+    const { id } = completed;
+    const completedDate = new Date(completed.completedDate);
     const { challengeTitle, challengePath, certPath } = idToNameMap.get(id);
     return (
       <tr className='timeline-row' key={id}>
@@ -99,8 +100,8 @@ class TimelineInner extends Component {
           )}
         </td>
         <td className='text-center'>
-          <time dateTime={format(completedDate, 'YYYY-MM-DDTHH:MM:SSZ')}>
-            {format(completedDate, 'MMMM D, YYYY')}
+          <time dateTime={completedDate.toISOString()}>
+            {format(completedDate, 'MMMM d, y')}
           </time>
         </td>
       </tr>