feat(grower-detail): display device manufacturer with device id (Gree…

…nstand#196) * feat(grower-detail): display device manufacturer with device id * feat(grower-detail): display device manufacturer with device id
gwynndp · Nov 24, 2021 · ba9158f · ba9158f
1 parent 6fef653
commit ba9158f
Showing 1 changed file with 23 additions and 7 deletions.
diff --git a/src/components/GrowerDetail.js b/src/components/GrowerDetail.js
@@ -93,7 +93,13 @@ const GrowerDetail = (props) => {
               setGrowerRegistrations(sortedRegistrations);
               setDeviceIdentifiers(
                 sortedRegistrations
-                  .map((reg) => reg.device_identifier)
+                  .map((reg) => ({
+                    id: reg.device_identifier,
+                    os:
+                      reg.manufacturer.toLowerCase() === 'apple'
+                        ? 'iOS'
+                        : 'Android',
+                  }))
                   .filter((id) => id),
               );
             }
@@ -247,12 +253,22 @@ const GrowerDetail = (props) => {
               <Typography variant="subtitle1">
                 Device Identifier{deviceIdentifiers.length >= 2 ? 's' : ''}
               </Typography>
-              {(deviceIdentifiers.length &&
-                deviceIdentifiers.map((identifier, index) => (
-                  <Typography variant="body1" key={index}>
-                    {identifier}
-                  </Typography>
-                ))) || <Typography variant="body1">---</Typography>}
+              {(deviceIdentifiers.length && (
+                <table>
+                  <tbody>
+                    {deviceIdentifiers.map((device, i) => (
+                      <tr key={i}>
+                        <td>
+                          <Typography variant="body1">{device.id}</Typography>
+                        </td>
+                        <td>
+                          <Typography variant="body1">({device.os})</Typography>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )) || <Typography variant="body1">---</Typography>}
             </Grid>
           </Grid>
         </Grid>