feat(grower): show assigned organization in overview (#178)

* refactor(growers): render orgnisation name using react component

* feat(grower): add helper function that gets organisation by id

* feat(grower): show assigned organisation in overview

growers cards in the growers list have been enhenced to display growers assigned organization

* refactor(gower): move getOrganizationById helper function to the utilities

* test(utilities): add unit test for getOrganizationById utility function

* feat(growers): minor enhements in displaying org
own org made paler grey and in italics, a space has been added between assigned org name and id

src/components/EditGrower.js

@@ -28,7 +28,6 @@ const useStyle = makeStyles((theme) => ({
 }));
 
 const EditGrower = (props) => {
-  // console.log('render: edit grower');
   const classes = useStyle();
   const { isOpen, grower, onClose } = props;
   const appContext = useContext(AppContext);

src/components/Growers.js

@@ -2,6 +2,7 @@
  * Grower page
  */
 import React, { useState, useEffect, useContext } from 'react';
+import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
 import { makeStyles } from '@material-ui/core/styles';
@@ -23,6 +24,8 @@ import FilterTopGrower from './FilterTopGrower';
 import OptimizedImage from './OptimizedImage';
 import GrowerDetail from './GrowerDetail';
 import { GrowerContext } from '../context/GrowerContext';
+import { AppContext } from '../context/AppContext.js';
+import { getOrganizationById } from 'utilities/index.js';
 
 // const log = require('loglevel').getLogger('../components/Growers');
 
@@ -125,6 +128,49 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
+/**
+ * @function
+ * @name GrowerOrganization
+ * @description display organision associated with the grower
+ *
+ * @param {object} props
+ * @param {string} props.organizationName name of organization grower belongs to
+ * @param {number} props.assignedOrganizationId id of organization assigned to grower
+ *
+ * @returns {React.Component}
+ */
+const GrowerOrganization = (props) => {
+  const appContext = useContext(AppContext);
+  const { organizationName, assignedOrganizationId } = props;
+
+  const renderGrowerOrganization = () => (
+    <Typography style={{ color: '#C0C0C0', fontStyle: 'italic' }}>
+      {organizationName}
+    </Typography>
+  );
+  const renderGrowerAssignedOrganization = (id) => {
+    const assignedOrganization = getOrganizationById(appContext.orgList, id);
+    return (
+      <Typography>
+        {assignedOrganization?.name} ({id})
+      </Typography>
+    );
+  };
+
+  return assignedOrganizationId
+    ? renderGrowerAssignedOrganization(assignedOrganizationId)
+    : organizationName
+    ? renderGrowerOrganization()
+    : '';
+};
+
+GrowerOrganization.propTypes = {
+  organizationName: PropTypes.string,
+};
+GrowerOrganization.defaultProps = {
+  organizationName: null,
+};
+
 const Growers = (props) => {
   // log.debug('render: Growers...');
   const classes = useStyles(props);
@@ -318,9 +364,10 @@ export function Grower(props) {
               <Typography>
                 ID: <LinkToWebmap value={grower.id} type="user" />
               </Typography>
-              {grower.organization && (
-                <Typography>Organization: {grower.organization}</Typography>
-              )}
+              <GrowerOrganization
+                organizationName={grower?.organization}
+                assignedOrganizationId={grower?.organizationId}
+              />
             </Grid>
           </Grid>
         </CardActions>

src/utilities/index.js

@@ -8,3 +8,17 @@
  * @returns {string} A regular expression string
  */
 export const stringToSearchRegExp = (value) => `/.*${value}.*/i`;
+
+/**
+ * @function
+ * @name getOrganizationById
+ * @description gets an instance of organization from organization list
+ * based on supplied organisation id
+ *
+ * @param {Array} organizations
+ * @param {number} id
+ *
+ * @returns {object} found organization
+ */
+export const getOrganizationById = (organizations, organizationId) =>
+  organizations.find(({ id }) => id === organizationId);

src/utilities/index.test.js

@@ -1,8 +1,26 @@
-import { stringToSearchRegExp } from './';
+import { getOrganizationById, stringToSearchRegExp } from './';
 
-describe('converts string to regexp', () => {
+describe('utilities tests', () => {
   it('it should convert string to regexp', () => {
     const result = stringToSearchRegExp('test');
     expect(result).toEqual(`/.*test.*/i`);
   });
+
+  it('it should get organization by organisation id', () => {
+    const organizationId = 11;
+    const organizations = [
+      {
+        id: 1,
+        name: 'test1',
+        type: 'O',
+      },
+      {
+        id: 11,
+        name: 'freetown',
+        type: 'O',
+      },
+    ];
+    const result = getOrganizationById(organizations, organizationId);
+    expect(result).toEqual(organizations[1]);
+  });
 });