Merge pull request #375 from rpolley/add-end-date-field-to-projects

Add end date field to projects

src/modals/sections/ProjectModal.js

@@ -52,10 +52,18 @@ const ProjectModal = () => {
 
             <Input
               type="date"
-              label={t('shared.forms.date')}
+              label={t('shared.forms.startDate')}
+              placeholder="6th August 208"
               {...getFieldProps(formik, schema, 'date')}
             />
 
+            <Input
+              type="date"
+              label={t('shared.forms.endDate')}
+              placeholder="6th August 208"
+              {...getFieldProps(formik, schema, 'endDate')}
+            />
+
             <Input
               type="textarea"
               label={t('shared.forms.summary')}

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 }) => (
+const ProjectItem = ({ item, language }) => {
-  <div>
+  const { t } = useTranslation();
-    <div className="flex justify-between items-center">
+  return (
-      <div className="flex flex-col text-left mr-2">
+    <div>
-        <h6 className="font-semibold">{item.title}</h6>
+      <div className="flex justify-between items-center">
-        {item.link && (
+        <div className="flex flex-col text-left mr-2">
-          <a href={item.link} className="text-xs">
+          <h6 className="font-semibold">{item.title}</h6>
-            {item.link}
+          {item.link && (
-          </a>
+            <a href={item.link} className="text-xs">
-        )}
+              {item.link}
+            </a>
+          )}
+        </div>
+        {item.date && (
+            <h6 className="text-xs font-medium text-right">
+              (
+              {formatDateRange(
+                {
+                  startDate: item.date,
+                  endDate: item.endDate,
+                  language,
+                },
+                t,
+              )}
+              )
+            </h6>
+          )}
       </div>
-      {item.date && (
+      {item.summary && (
-        <h6 className="text-xs font-medium text-right">
+        <ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
-          {formatDate({ date: item.date, language })}
-        </h6>
       )}
     </div>
-    {item.summary && (
+  );
-      <ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
+};
-    )}
-  </div>
-);
 
 const ProjectsA = () => {
   const { data, heading: Heading } = useContext(PageContext);