From 9a66949e8121e401b99975cfe111bcd90b2fe142 Mon Sep 17 00:00:00 2001
From: Gwynn DP <gwynndp@gmail.com>
Date: Sun, 9 Jan 2022 00:47:55 -0800
Subject: [PATCH] feat: display unique devices and if they're iOS or Android

---
 src/components/GrowerDetail.js | 31 ++++++++++++++++++-------------
 src/components/Routers.js      |  4 ++--
 src/components/common/Menu.js  |  9 ++++++---
 3 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/components/GrowerDetail.js b/src/components/GrowerDetail.js
index b3a682931..aac7f8d2c 100644
--- a/src/components/GrowerDetail.js
+++ b/src/components/GrowerDetail.js
@@ -105,10 +105,9 @@ const useStyle = makeStyles((theme) => ({
   },
 }));
 
-const GrowerDetail = (props) => {
+const GrowerDetail = ({ open, growerId, onClose }) => {
   // console.log('render: grower detail');
   const classes = useStyle();
-  const { growerId } = props;
   const appContext = useContext(AppContext);
   const growerContext = useContext(GrowerContext);
   const { sendMessageFromGrower } = useContext(MessagingContext);
@@ -125,6 +124,7 @@ const GrowerDetail = (props) => {
     async function loadGrowerDetail() {
       if (grower && grower.id !== growerId) {
         setGrower({});
+        setDeviceIdentifiers([]);
       }
       if (growerId) {
         const match = await getGrower({
@@ -139,23 +139,28 @@ const GrowerDetail = (props) => {
         ) {
           setGrowerRegistrations(null);
           api.getGrowerRegistrations(growerId).then((registrations) => {
-            console.log('grower registrations: ', registrations);
             if (registrations && registrations.length) {
-              const sortedRegistrations = registrations.sort((a, b) =>
+              const sortedReg = registrations.sort((a, b) =>
                 a.created_at > b.created_at ? 1 : -1
               );
-              setGrowerRegistrations(sortedRegistrations);
-              setDeviceIdentifiers(
-                sortedRegistrations
-                  .map((reg) => ({
+              const uniqueDevices = {};
+              const devices = sortedReg.reduce((result, reg) => {
+                if (!uniqueDevices[reg.device_identifier]) {
+                  uniqueDevices[reg.device_identifier] = true;
+                  // if manufacturer isn't 'apple' it's an android phone
+                  result.push({
                     id: reg.device_identifier,
                     os:
                       reg.manufacturer.toLowerCase() === 'apple'
                         ? 'iOS'
                         : 'Android',
-                  }))
-                  .filter((id) => id)
-              );
+                  });
+                }
+                return result;
+              }, []);
+
+              setDeviceIdentifiers(devices);
+              setGrowerRegistrations(sortedReg);
             }
           });
         }
@@ -225,7 +230,7 @@ const GrowerDetail = (props) => {
 
   return (
     <>
-      <Drawer anchor="right" open={props.open} onClose={props.onClose}>
+      <Drawer anchor="right" open={open} onClose={onClose}>
         <Grid
           style={{
             width: GROWER_IMAGE_SIZE,
@@ -242,7 +247,7 @@ const GrowerDetail = (props) => {
                   </Box>
                 </Grid>
                 <Grid item>
-                  <IconButton onClick={() => props.onClose()}>
+                  <IconButton onClick={() => onClose()}>
                     <Close />
                   </IconButton>
                 </Grid>
diff --git a/src/components/Routers.js b/src/components/Routers.js
index f537983f9..18f88b038 100644
--- a/src/components/Routers.js
+++ b/src/components/Routers.js
@@ -16,6 +16,7 @@ import ReportingCard6 from './reportingCards/ReportingCard6';
 export default function Routers() {
   const refContainer = useRef();
   const appContext = useContext(AppContext);
+  const { search } = useLocation();
 
   return useMemo(() => {
     return (
@@ -78,11 +79,10 @@ export default function Routers() {
                     }
                     key={`route_${idx}`}
                   />
-                ),
+                )
               )}
               <Route path="/reporting">
                 {(() => {
-                  const { search } = useLocation();
                   const queryParams = new URLSearchParams(search);
                   const props = {
                     startDate: queryParams.get('start-date'),
diff --git a/src/components/common/Menu.js b/src/components/common/Menu.js
index e6e0dd118..a0402361a 100644
--- a/src/components/common/Menu.js
+++ b/src/components/common/Menu.js
@@ -82,7 +82,10 @@ export default function GSMenu(props) {
             .filter(({ disabled }) => !disabled)
             .map((item, i) =>
               item?.children ? (
-                <div className={classes.menuItemWithChildren}>
+                <div
+                  key={`${item}-${i}`}
+                  className={classes.menuItemWithChildren}
+                >
                   <Typography className={classes.menuTitle}>
                     {item.name}
                   </Typography>
@@ -144,9 +147,9 @@ export default function GSMenu(props) {
                     </Grid>
                   </MenuItem>
                 </Link>
-              ),
+              )
             ),
-        [appContext.routes, props.active, classes],
+        [appContext.routes, props.active, classes]
       )}
     </>
   );