From d9abefa3534e04e35dd333725866d28946dd3995 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lu=C3=A3=20Carlos=20Martins?= <luacmartins@gmail.com>
Date: Fri, 12 Mar 2021 14:58:24 -0700
Subject: [PATCH] feat: Add country (#42)

* feat: add country input

* feat: add country to planter details

* fix: add checks and sort registrations array

* fix: change sort
---
 src/components/PlanterDetail.js | 45 ++++++++++++++++++++++-----------
 1 file changed, 30 insertions(+), 15 deletions(-)

diff --git a/src/components/PlanterDetail.js b/src/components/PlanterDetail.js
index 2fed37137..bbe664924 100644
--- a/src/components/PlanterDetail.js
+++ b/src/components/PlanterDetail.js
@@ -57,7 +57,7 @@ const useStyle = makeStyles((theme) => ({
 }));
 
 const PlanterDetail = (props) => {
-  const [planterRegistration, setPlanterRegistration] = React.useState(null);
+  const [planterRegistrations, setPlanterRegistrations] = React.useState(null);
   const [editDialogOpen, setEditDialogOpen] = React.useState(false);
   const [planter, setPlanter] = React.useState({});
   const classes = useStyle();
@@ -69,7 +69,6 @@ const PlanterDetail = (props) => {
       if (planter && planter.id !== planterId) {
         setPlanter({});
       }
-
       if (planterId) {
         const match = await props.plantersDispatch.getPlanter({
           id: planterId,
@@ -77,27 +76,25 @@ const PlanterDetail = (props) => {
         setPlanter(match);
 
         if (
-          !planterRegistration ||
-          planterRegistration.planterId !== planterId
+          !planterRegistrations ||
+          (planterRegistrations.length > 0 &&
+            planterRegistrations[0].planter_id !== planterId)
         ) {
-          setPlanterRegistration(null);
+          setPlanterRegistrations(null);
           api.getPlanterRegistrations(planterId).then((registrations) => {
             if (registrations && registrations.length) {
-              setPlanterRegistration(registrations[0]);
+              const sortedRegistrations = registrations.sort((a, b) =>
+                a.created_at > b.created_at ? 1 : -1,
+              );
+              setPlanterRegistrations(sortedRegistrations);
             }
           });
         }
       }
     }
-
     loadPlanterDetail();
     // eslint-disable-next-line
-  }, [
-    planterId,
-    planterRegistration,
-    props.plantersState.planters,
-    props.plantersDispatch,
-  ]);
+  }, [planterId, props.plantersState.planters, props.plantersDispatch]);
 
   function handleEditClick() {
     setEditDialogOpen(true);
@@ -195,11 +192,29 @@ const PlanterDetail = (props) => {
               </Typography>
             </Grid>
             <Divider />
+            <Grid container direction="column" className={classes.box}>
+              <Typography variant="subtitle1">Country</Typography>
+              <Typography variant="body1">
+                {(planterRegistrations &&
+                  planterRegistrations
+                    .map((item) => item.country)
+                    .filter(
+                      (country, i, arr) =>
+                        country && arr.indexOf(country) === i,
+                    )
+                    .join(', ')) ||
+                  '---'}
+              </Typography>
+            </Grid>
+            <Divider />
             <Grid container direction="column" className={classes.box}>
               <Typography variant="subtitle1">Registered</Typography>
               <Typography variant="body1">
-                {(planterRegistration &&
-                  getDateTimeStringLocale(planterRegistration.createdAt)) ||
+                {(planterRegistrations &&
+                  planterRegistrations.length > 0 &&
+                  getDateTimeStringLocale(
+                    planterRegistrations[0].created_at,
+                  )) ||
                   '---'}
               </Typography>
             </Grid>