From 81ad16ae8a171a7117921d17f90604858733470e Mon Sep 17 00:00:00 2001
From: Ryan Polley <rypolley@gmail.com>
Date: Mon, 9 Nov 2020 15:59:24 -0600
Subject: [PATCH] update project to use date range

---
 src/modals/sections/ProjectModal.js        | 12 ++++-
 src/templates/blocks/Projects/ProjectsA.js | 53 ++++++++++++++--------
 2 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/src/modals/sections/ProjectModal.js b/src/modals/sections/ProjectModal.js
index 04728db5..9d9c13fd 100644
--- a/src/modals/sections/ProjectModal.js
+++ b/src/modals/sections/ProjectModal.js
@@ -52,8 +52,16 @@ const ProjectModal = () => {
 
             <Input
               type="date"
-              label={t('shared.forms.date')}
-              {...getFieldProps(formik, schema, 'date')}
+              label={t('shared.forms.startDate')}
+              placeholder="6th August 208"
+              {...getFieldProps(formik, schema, 'startDate')}
+            />
+
+            <Input
+              type="date"
+              label={t('shared.forms.endDate')}
+              placeholder="6th August 208"
+              {...getFieldProps(formik, schema, 'endDate')}
             />
 
             <Input
diff --git a/src/templates/blocks/Projects/ProjectsA.js b/src/templates/blocks/Projects/ProjectsA.js
index 017166e1..3ffcd281 100644
--- a/src/templates/blocks/Projects/ProjectsA.js
+++ b/src/templates/blocks/Projects/ProjectsA.js
@@ -1,30 +1,43 @@
 import React, { memo, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
-import { formatDate, safetyCheck } from '../../../utils';
+import { formatDateRange, safetyCheck } from '../../../utils';
 
-const ProjectItem = ({ item, language }) => (
-  <div>
-    <div className="flex justify-between items-center">
-      <div className="flex flex-col text-left mr-2">
-        <h6 className="font-semibold">{item.title}</h6>
-        {item.link && (
-          <a href={item.link} className="text-xs">
-            {item.link}
-          </a>
-        )}
+const ProjectItem = ({ item, language }) => {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <div className="flex justify-between items-center">
+        <div className="flex flex-col text-left mr-2">
+          <h6 className="font-semibold">{item.title}</h6>
+          {item.link && (
+            <a href={item.link} className="text-xs">
+              {item.link}
+            </a>
+          )}
+        </div>
+        {(item.startDate || item.date) && (
+            <h6 className="text-xs font-medium text-right">
+              (
+              {formatDateRange(
+                {
+                  startDate: item.startDate? item.startDate : item.date,
+                  endDate: item.endDate,
+                  language,
+                },
+                t,
+              )}
+              )
+            </h6>
+          )}
       </div>
-      {item.date && (
-        <h6 className="text-xs font-medium text-right">
-          {formatDate({ date: item.date, language })}
-        </h6>
+      {item.summary && (
+        <ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
       )}
     </div>
-    {item.summary && (
-      <ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
-    )}
-  </div>
-);
+  );
+};
 
 const ProjectsA = () => {
   const { data, heading: Heading } = useContext(PageContext);