solving bugs reported in GH issues

src/templates/blocks/Work/WorkA.js

@@ -1,34 +1,46 @@
 import React, { memo, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
 import { formatDateRange, safetyCheck } from '../../../utils';
 
-const WorkItem = (x) => (
-  <div key={x.id}>
+const WorkItem = ({ item, i18n }) => (
+  <div>
     <div className="flex justify-between items-center">
       <div className="flex flex-col text-left mr-2">
-        <h6 className="font-semibold">{x.company}</h6>
-        <span className="text-xs">{x.position}</span>
+        <h6 className="font-semibold">{item.company}</h6>
+        <span className="text-xs">{item.position}</span>
       </div>
-      {x.startDate && (
+      {item.startDate && (
         <h6 className="text-xs font-medium text-right">
-          ({formatDateRange({ startDate: x.startDate, endDate: x.endDate })})
+          (
+          {formatDateRange({
+            startDate: item.startDate,
+            endDate: item.endDate,
+            language: i18n.language,
+          })}
+          )
         </h6>
       )}
     </div>
-    {x.summary && (
-      <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
+    {item.summary && (
+      <ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
     )}
   </div>
 );
 
 const WorkA = () => {
+  const { i18n } = useTranslation();
   const { data, heading: Heading } = useContext(PageContext);
 
   return safetyCheck(data.work) ? (
     <div>
       <Heading>{data.work.heading}</Heading>
-      <div className="grid gap-4">{data.work.items.map(WorkItem)}</div>
+      <div className="grid gap-4">
+        {data.work.items.map((x) => (
+          <WorkItem key={x.id} item={x} i18n={i18n} />
+        ))}
+      </div>
     </div>
   ) : null;
 };