feat: sorting the allowed products by name

bcgov · Apr 8, 2021 · 14994c3 · 14994c3
1 parent 834072c
commit 14994c3
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 10 deletions.
diff --git a/app/containers/Admin/ProductNaicsCode/AllowableProductsTable.tsx b/app/containers/Admin/ProductNaicsCode/AllowableProductsTable.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import {Alert, Table} from 'react-bootstrap';
 import {createFragmentContainer, graphql, RelayProp} from 'react-relay';
 import AllowableProductsTableRow from './AllowableProductsTableRow';
@@ -12,6 +12,16 @@ interface Props {
 export const AllowableProductsTableComponent: React.FunctionComponent<Props> = (
   props
 ) => {
+  const sortedProductNaicsCodes = useMemo(() => {
+    return props.naicsCode.productNaicsCodesByNaicsCodeId.edges
+      .map((e) => e.node)
+      .sort((a, b) =>
+        a.productByProductId.productName.localeCompare(
+          b.productByProductId.productName
+        )
+      );
+  }, [props.naicsCode.productNaicsCodesByNaicsCodeId.edges]);
+
   if (!props.naicsCode.productNaicsCodesByNaicsCodeId.edges.length) {
     return (
       <Alert variant="secondary" id="no-search-results">
@@ -33,11 +43,11 @@ export const AllowableProductsTableComponent: React.FunctionComponent<Props> = (
           </tr>
         </thead>
         <tbody>
-          {props.naicsCode.productNaicsCodesByNaicsCodeId.edges.map((e) => (
+          {sortedProductNaicsCodes.map((productNaicsCode) => (
             <AllowableProductsTableRow
               naicsCodeId={props.naicsCode.id}
-              key={e.node.id}
-              productNaicsCode={e.node}
+              key={productNaicsCode.id}
+              productNaicsCode={productNaicsCode}
             />
           ))}
         </tbody>
@@ -71,6 +81,9 @@ export default createFragmentContainer(AllowableProductsTableComponent, {
         edges {
           node {
             id
+            productByProductId {
+              productName
+            }
             ...AllowableProductsTableRow_productNaicsCode
           }
         }

diff --git a/app/tests/unit/containers/Admin/ProductNaicsCode/AllowableProductsTable.test.tsx b/app/tests/unit/containers/Admin/ProductNaicsCode/AllowableProductsTable.test.tsx
@@ -3,7 +3,7 @@ import {AllowableProductsTableComponent} from 'containers/Admin/ProductNaicsCode
 import {shallow} from 'enzyme';
 
 describe('The allowable products table for a NAICS code', () => {
-  it('should render table rows when there are  allowable products', () => {
+  it('should render sorted table rows when there are allowable products', () => {
     const componentUnderTest = shallow(
       <AllowableProductsTableComponent
         relay={{environment: 'test-env'} as any}
@@ -17,6 +17,9 @@ describe('The allowable products table for a NAICS code', () => {
                   id: 'test-id-1',
                   ' $fragmentRefs': {
                     AllowableProductsTableRow_productNaicsCode: true
+                  },
+                  productByProductId: {
+                    productName: 'A'
                   }
                 }
               },
@@ -25,6 +28,9 @@ describe('The allowable products table for a NAICS code', () => {
                   id: 'test-id-2',
                   ' $fragmentRefs': {
                     AllowableProductsTableRow_productNaicsCode: true
+                  },
+                  productByProductId: {
+                    productName: 'C'
                   }
                 }
               },
@@ -33,6 +39,9 @@ describe('The allowable products table for a NAICS code', () => {
                   id: 'test-id-3',
                   ' $fragmentRefs': {
                     AllowableProductsTableRow_productNaicsCode: true
+                  },
+                  productByProductId: {
+                    productName: 'B'
                   }
                 }
               }

diff --git a/...unit/containers/Admin/ProductNaicsCode/__snapshots__/AllowableProductsTable.test.tsx.snap b/...unit/containers/Admin/ProductNaicsCode/__snapshots__/AllowableProductsTable.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`The allowable products table for a NAICS code should render an alert bo
 </Alert>
 `;
 
-exports[`The allowable products table for a NAICS code should render table rows when there are  allowable products 1`] = `
+exports[`The allowable products table for a NAICS code should render sorted table rows when there are allowable products 1`] = `
 <Fragment>
   <ForwardRef
     bordered={true}
@@ -68,30 +68,39 @@ exports[`The allowable products table for a NAICS code should render table rows
               "AllowableProductsTableRow_productNaicsCode": true,
             },
             "id": "test-id-1",
+            "productByProductId": Object {
+              "productName": "A",
+            },
           }
         }
       />
       <Relay(AllowableProductsTableRowComponent)
-        key="test-id-2"
+        key="test-id-3"
         naicsCodeId="test_ID"
         productNaicsCode={
           Object {
             " $fragmentRefs": Object {
               "AllowableProductsTableRow_productNaicsCode": true,
             },
-            "id": "test-id-2",
+            "id": "test-id-3",
+            "productByProductId": Object {
+              "productName": "B",
+            },
           }
         }
       />
       <Relay(AllowableProductsTableRowComponent)
-        key="test-id-3"
+        key="test-id-2"
         naicsCodeId="test_ID"
         productNaicsCode={
           Object {
             " $fragmentRefs": Object {
               "AllowableProductsTableRow_productNaicsCode": true,
             },
-            "id": "test-id-3",
+            "id": "test-id-2",
+            "productByProductId": Object {
+              "productName": "C",
+            },
           }
         }
       />