- make dates follow internationalization standard

gatsby-config.js

@@ -5,7 +5,7 @@ module.exports = {
     title: 'Reactive Resume',
     siteUrl: 'https://rxresu.me',
     description: 'A free and open source resume builder.',
-    version: '2.0.1',
+    version: '2.0.2',
   },
   plugins: [
     'gatsby-plugin-react-helmet',

src/components/dashboard/ResumePreview.js

@@ -1,16 +1,16 @@
 import { Menu, MenuItem } from '@material-ui/core';
 import { navigate } from 'gatsby';
-import moment from 'moment';
+import moment from 'moment/min/moment-with-locales';
 import React, { useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { MdMoreHoriz, MdOpenInNew } from 'react-icons/md';
 import { toast } from 'react-toastify';
-import { useTranslation } from 'react-i18next';
 import DatabaseContext from '../../contexts/DatabaseContext';
 import ModalContext from '../../contexts/ModalContext';
 import styles from './ResumePreview.module.css';
 
 const ResumePreview = ({ resume }) => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const [anchorEl, setAnchorEl] = useState(null);
   const { emitter, events } = useContext(ModalContext);
   const { duplicateResume, deleteResume } = useContext(DatabaseContext);
@@ -84,7 +84,9 @@ const ResumePreview = ({ resume }) => {
         {resume.updatedAt && (
           <span>
             {t('dashboard.lastUpdated', {
-              timestamp: moment(resume.updatedAt).fromNow(),
+              timestamp: moment(resume.updatedAt)
+                .locale(i18n.language.substr(0, 2))
+                .fromNow(),
             })}
           </span>
         )}

src/i18n/locales/index.js

@@ -1,15 +1,15 @@
 import en from './en.json';
-import kn from './kn.json';
 import es from './es.json';
-import ptBr from './pt-br.json';
 import fi from './fi.json';
 import fr from './fr.json';
+import kn from './kn.json';
+import ptBr from './pt-br.json';
 
 export default {
   en: { translation: en },
-  kn: { translation: kn },
   es: { translation: es },
-  ptBr: { translation: ptBr },
   fi: { translation: fi },
   fr: { translation: fr },
+  kn: { translation: kn },
+  ptBr: { translation: ptBr },
 };

src/templates/blocks/Awards/AwardsA.js

@@ -1,27 +1,34 @@
-import moment from 'moment';
+import moment from 'moment/min/moment-with-locales';
 import React, { memo, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
 import { safetyCheck } from '../../../utils';
 
-const AwardItem = (x) => (
-  <div key={x.id}>
-    <div className="flex justify-between items-center">
-      <div className="flex flex-col text-left mr-2">
-        <h6 className="font-semibold">{x.title}</h6>
-        <span className="text-xs">{x.awarder}</span>
+const AwardItem = (x) => {
+  const { i18n } = useTranslation();
+
+  return (
+    <div key={x.id}>
+      <div className="flex justify-between items-center">
+        <div className="flex flex-col text-left mr-2">
+          <h6 className="font-semibold">{x.title}</h6>
+          <span className="text-xs">{x.awarder}</span>
+        </div>
+        {x.date && (
+          <h6 className="text-xs font-medium text-right">
+            {moment(x.date)
+              .locale(i18n.language.substr(0, 2))
+              .format('MMMM YYYY')}
+          </h6>
+        )}
       </div>
-      {x.date && (
-        <h6 className="text-xs font-medium text-right">
-          {moment(x.date).format('MMMM YYYY')}
-        </h6>
+      {x.summary && (
+        <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
       )}
     </div>
-    {x.summary && (
-      <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
-    )}
-  </div>
-);
+  );
+};
 
 const AwardsA = () => {
   const { data, heading: Heading } = useContext(PageContext);

src/templates/blocks/Certifications/CertificationsA.js

@@ -1,27 +1,34 @@
-import moment from 'moment';
+import moment from 'moment/min/moment-with-locales';
 import React, { memo, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
 import { safetyCheck } from '../../../utils';
 
-const CertificationItem = (x) => (
-  <div key={x.id}>
-    <div className="flex justify-between items-center">
-      <div className="flex flex-col text-left mr-2">
-        <h6 className="font-semibold">{x.title}</h6>
-        <span className="text-xs">{x.issuer}</span>
+const CertificationItem = (x) => {
+  const { i18n } = useTranslation();
+
+  return (
+    <div key={x.id}>
+      <div className="flex justify-between items-center">
+        <div className="flex flex-col text-left mr-2">
+          <h6 className="font-semibold">{x.title}</h6>
+          <span className="text-xs">{x.issuer}</span>
+        </div>
+        {x.date && (
+          <h6 className="text-xs font-medium text-right">
+            {moment(x.date)
+              .locale(i18n.language.substr(0, 2))
+              .format('MMMM YYYY')}
+          </h6>
+        )}
       </div>
-      {x.date && (
-        <h6 className="text-xs font-medium text-right">
-          {moment(x.date).format('MMMM YYYY')}
-        </h6>
+      {x.summary && (
+        <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
       )}
     </div>
-    {x.summary && (
-      <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
-    )}
-  </div>
-);
+  );
+};
 
 const CertificationsA = () => {
   const { data, heading: Heading } = useContext(PageContext);

src/templates/blocks/Projects/ProjectsA.js

@@ -1,31 +1,38 @@
-import moment from 'moment';
+import moment from 'moment/min/moment-with-locales';
 import React, { memo, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
 import { safetyCheck } from '../../../utils';
 
-const ProjectItem = (x) => (
-  <div key={x.id}>
-    <div className="flex justify-between items-center">
-      <div className="flex flex-col text-left mr-2">
-        <h6 className="font-semibold">{x.title}</h6>
-        {x.link && (
-          <a href={x.link} className="text-xs">
-            {x.link}
-          </a>
+const ProjectItem = (x) => {
+  const { i18n } = useTranslation();
+
+  return (
+    <div key={x.id}>
+      <div className="flex justify-between items-center">
+        <div className="flex flex-col text-left mr-2">
+          <h6 className="font-semibold">{x.title}</h6>
+          {x.link && (
+            <a href={x.link} className="text-xs">
+              {x.link}
+            </a>
+          )}
+        </div>
+        {x.date && (
+          <h6 className="text-xs font-medium text-right">
+            {moment(x.date)
+              .locale(i18n.language.substr(0, 2))
+              .format('MMMM YYYY')}
+          </h6>
         )}
       </div>
-      {x.date && (
-        <h6 className="text-xs font-medium text-right">
-          {moment(x.date).format('MMMM YYYY')}
-        </h6>
+      {x.summary && (
+        <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
       )}
     </div>
-    {x.summary && (
-      <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
-    )}
-  </div>
-);
+  );
+};
 
 const ProjectsA = () => {
   const { data, heading: Heading } = useContext(PageContext);

src/utils/index.js

@@ -1,5 +1,5 @@
 import { get, isEmpty } from 'lodash';
-import moment from 'moment';
+import moment from 'moment/min/moment-with-locales';
 import { useTranslation } from 'react-i18next';
 
 export const getModalText = (isEditMode, type) => {
@@ -22,10 +22,19 @@ export const isFileImage = (file) => {
   return file && acceptedImageTypes.includes(file.type);
 };
 
-export const formatDateRange = ({ startDate, endDate }) =>
-  `${moment(startDate).format('MMMM Y')} — ${
-    moment(endDate).isValid() ? moment(endDate).format('MMMM Y') : 'Present'
-  }`;
+export const formatDateRange = ({ startDate, endDate }) => {
+  const { i18n } = useTranslation();
+
+  const start = `${moment(startDate)
+    .locale(i18n.language.substr(0, 2))
+    .format('MMMM Y')}`;
+
+  const end = moment(endDate).isValid()
+    ? `${moment(endDate).locale(i18n.language.substr(0, 2)).format('MMMM Y')}`
+    : 'Present';
+
+  return `${start} - ${end}`;
+};
 
 export const getFieldProps = (formik, schema, name) => ({
   touched: get(formik, `touched.${name}`, false),