From 76c061a440ac0198af1698a62e96b4356ccf270f Mon Sep 17 00:00:00 2001 From: Edgar Vitus Mlowe Date: Mon, 25 Oct 2021 22:51:19 +0300 Subject: [PATCH] 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 --- package-lock.json | 4 +-- src/components/EditGrower.js | 1 - src/components/Growers.js | 53 ++++++++++++++++++++++++++++++++++-- src/utilities/index.js | 14 ++++++++++ src/utilities/index.test.js | 22 +++++++++++++-- 5 files changed, 86 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7446cfbc2..b65fdd1a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "treetracker-admin-client", - "version": "1.20.1", + "version": "1.24.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "treetracker-admin-client", - "version": "1.20.1", + "version": "1.24.0", "dependencies": { "@date-io/date-fns": "^1.3.13", "@material-ui/core": "^4.9.10", diff --git a/src/components/EditGrower.js b/src/components/EditGrower.js index 1e037511f..c63da39dd 100644 --- a/src/components/EditGrower.js +++ b/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); diff --git a/src/components/Growers.js b/src/components/Growers.js index 857fe8d63..676a413f3 100644 --- a/src/components/Growers.js +++ b/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 = () => ( + + {organizationName} + + ); + const renderGrowerAssignedOrganization = (id) => { + const assignedOrganization = getOrganizationById(appContext.orgList, id); + return ( + + {assignedOrganization?.name} ({id}) + + ); + }; + + 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) { ID: - {grower.organization && ( - Organization: {grower.organization} - )} + diff --git a/src/utilities/index.js b/src/utilities/index.js index e57d5b8b5..92986229e 100644 --- a/src/utilities/index.js +++ b/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); diff --git a/src/utilities/index.test.js b/src/utilities/index.test.js index c628521b8..497cd0c27 100644 --- a/src/utilities/index.test.js +++ b/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]); + }); });