Merge pull request #10 from concord-consortium/185951117-bug-fixes

Addressing QA issues (PT-185951117)

src/components/attribute-options.tsx

@@ -29,6 +29,9 @@ export const AttributeOptions: React.FC<IProps> = (props) => {
 
   return (
     <>
+    <div className={css.header}>
+      Choose attributes to include in your dataset from the list below.
+    </div>
       {
         attributeOptions.map((attr) => {
           return (

src/components/options.scss

@@ -81,5 +81,8 @@
 .instructions {
   padding-left: 6px;
   margin-top: 6px;
+}
 
+.header {
+  margin-bottom: 15px;
 }

src/components/options.tsx

@@ -31,7 +31,15 @@ export const Options: React.FC<IOptions> = (props) => {
         newSelection[optionKey].push(e.target.value);
         // If user selects "Age", "Gender", or "Race", auto-select "Total Farmers" as well
         if (optionKey === "farmerDemographics" && !newArray.includes("Total Farmers")) {
-          newSelection.farmDemographics.push("Total Farmers");
+          newSelection.farmerDemographics.push("Total Farmers");
+        }
+        // If user selects any option under Farm Demographics, auto-select "Total Farms" as well
+        if (optionKey === "farmDemographics" && !newArray.includes("Total Farms")) {
+          newSelection.farmDemographics.push("Total Farms");
+        }
+        // If user selects a crop and no unit is selected, auto-select Yield
+        if (optionKey === "crops" && !selectedOptions.cropUnits) {
+          newSelection.cropUnits = "Yield";
         }
         // If user selects a state, de-select "All States"
         if (optionKey === "states" && newArray.includes("All States")) {
@@ -43,10 +51,15 @@ export const Options: React.FC<IOptions> = (props) => {
         }
       } else {
         if (isOptionSelected(e.target.value)) {
-          const includes = (opt: string) => selectedOptions.farmerDemographics.includes(opt);
+          const includesAny = (opts: string[], key: keyof IStateOptions) => opts.some(opt => selectedOptions[key].includes(opt));
           // "Total Farmers" can only be unselected if race, gender, and age are unselected
           if (optionKey === "farmerDemographics" && e.target.value === "Total Farmers") {
-            const shouldFilter = !includes("Race") && !includes("Gender") && !includes("Age");
+            const shouldFilter = !includesAny(["Race", "Gender", "Age"], "farmerDemographics");
+            if (shouldFilter) {
+              newSelection[optionKey] = newArray.filter((o) => o !== e.target.value);
+            }
+          } else if (optionKey === "farmDemographics" && e.target.value === "Total Farms") {
+            const shouldFilter = !includesAny(["Economic Class", "Acres Operated", "Organic", "Organization Type"], "farmDemographics");
             if (shouldFilter) {
               newSelection[optionKey] = newArray.filter((o) => o !== e.target.value);
             }

src/components/summary.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { IStateOptions } from "../constants/types";
 import { attributeOptions } from "../constants/constants";
+import { flatten } from "../scripts/utils";
 
 interface IProps {
   category: string;
@@ -18,28 +19,8 @@ export const Summary: React.FC<IProps> = ({category, selectedOptions}) => {
         `${place}${colon}${states}`
       );
     } else if (category === "Attributes") {
-        const resultString = attributeOptions.filter((attr) => {
-          const value = selectedOptions[attr.key];
-          const valueIsArrayWithLength = Array.isArray(value) && value.length > 0;
-          const valueIsDefined = typeof value === "string" && value;
-          return valueIsArrayWithLength || valueIsDefined;
-        }).map((attr) => {
-          const value = selectedOptions[attr.key];
-          const valueIsArrayWithLength = Array.isArray(value) && value.length > 0;
-          const valueIsDefined = typeof value === "string" && value;
-          const label = attr.label && (valueIsArrayWithLength || valueIsDefined) ? `${attr.label}: ` : "";
-
-          if (valueIsArrayWithLength) {
-            return `${label}${value.join(", ")}`;
-          } else if (value) {
-            return `${attr.label}: ${value}`;
-          } else {
-            return null;
-          }
-        })
-        .filter((item) => item !== null);
-        const finalString = resultString.join(", ");
-        return finalString;
+        const result = flatten(attributeOptions.filter((opt) => selectedOptions[opt.key]).map((opt) => selectedOptions[opt.key]));
+        return result.join(", ");
     } else if (category === "Years") {
       return selectedOptions.years.join(", ");
     }

src/constants/constants.ts

@@ -93,7 +93,7 @@ const cropUnitOptions: IAttrOptions = {
   key: "cropUnits",
   label: "Crop Production",
   options: ["Area Harvested", "Yield"],
-  instructions: "(Choose units)"
+  instructions: "(Choose unit)"
 };
 export const cropOptions: IAttrOptions = {
   key: "crops",