Limit years options and "get data" button availability.

src/components/app.scss

@@ -86,7 +86,7 @@ button {
   font-family: 'Montserrat', sans-serif;
   font-size: 12px;
   font-weight: 500;
-  &:hover {
+  &:hover:not(:disabled) {
     cursor: pointer;
     background: $teal-light-12;
   }

src/components/app.tsx

@@ -2,7 +2,7 @@ import React, {useEffect, useState} from "react";
 import { Dropdown } from "./dropdown";
 import classnames from "classnames";
 import { Information } from "./information";
-import { categories, defaultSelectedOptions } from "./constants";
+import { attributeOptions, categories, defaultSelectedOptions, yearsOptions } from "./constants";
 import { IStateOptions } from "./types";
 import { createQueryFromSelections } from "../scripts/api";
 import { connect } from "../scripts/connect";
@@ -13,6 +13,8 @@ import css from "./app.scss";
 function App() {
   const [showInfo, setShowInfo] = useState<boolean>(false);
   const [selectedOptions, setSelectedOptions] = useState<IStateOptions>(defaultSelectedOptions);
+  const [getDataDisabled, setGetDataDisabled] = useState<boolean>(true);
+  const {farmerDemographics, farmDemographics, crops, economicsAndWages} = selectedOptions;
 
   useEffect(() => {
     const init = async () => {
@@ -21,6 +23,17 @@ function App() {
     init();
   }, []);
 
+  useEffect(() => {
+    const {geographicLevel, states, years} = selectedOptions;
+    const attrKeys = attributeOptions.filter((attr) => attr.key !== "cropUnits").map((attr) => attr.key);
+    const selectedAttrKeys = attrKeys.filter((key) => selectedOptions[key].length > 0);
+    if (selectedAttrKeys.length && geographicLevel && states.length && years.length) {
+      setGetDataDisabled(false);
+    } else {
+      setGetDataDisabled(true);
+    }
+  }, [selectedOptions]);
+
   const handleSetSelectedOptions = (option: string, value: string | string[]) => {
     const newSelectedOptions = {...selectedOptions, [option]: value};
     setSelectedOptions(newSelectedOptions);
@@ -74,7 +87,7 @@ function App() {
       </div>
       <div className={css.summary}>
         <span className={css.statusGraphic}></span>
-        <button className={css.getDataButton} onClick={handleGetData}>Get Data</button>
+        <button className={css.getDataButton} disabled={getDataDisabled} onClick={handleGetData}>Get Data</button>
       </div>
     </div>
 

src/components/constants.ts

@@ -120,12 +120,12 @@ export const categories = [
 ];
 
 export const defaultSelectedOptions: IStateOptions = {
-  "geographicLevel": "State",
-  "states": ["All States"],
-  "farmerDemographics": [],
-  "farmDemographics": [],
-  "economicsAndWages": [],
-  "cropUnits": "",
-  "crops": [],
-  "years": []
+  geographicLevel: "State",
+  states: ["All States"],
+  farmerDemographics: [],
+  farmDemographics: [],
+  economicsAndWages: [],
+  cropUnits: "",
+  crops: [],
+  years: []
 };

src/components/types.ts

@@ -1,12 +1,12 @@
 export interface IStateOptions {
-  "geographicLevel": string,
-  "states": string[]
-  "farmerDemographics": string[],
-  "farmDemographics": string[],
-  "economicsAndWages": string[],
-  "cropUnits": string,
-  "crops": string[]
-  "years": string[]
+  geographicLevel: string,
+  states: string[]
+  farmerDemographics: string[],
+  farmDemographics: string[],
+  economicsAndWages: string[],
+  cropUnits: string,
+  crops: string[]
+  years: string[]
 }
 
 export type OptionKey = keyof IStateOptions;

src/components/utils.ts

@@ -0,0 +1,4 @@
+export const flatten = (arr: any[]): any[] => {
+  return arr.reduce((acc: any[], val: any) =>
+    Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), []);
+}

src/components/years-options.tsx

@@ -1,10 +1,11 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { attributeOptions, yearsOptions } from "./constants";
 import { IStateOptions } from "./types";
 import { Options } from "./options";
+import { queryData } from "../scripts/query-headers";
+import { flatten } from "./utils";
 
 import css from "./options.scss";
-import { queryData } from "../scripts/query-headers";
 
 interface IProps {
   handleSetSelectedOptions: (option: string, value: string|string[]) => void;
@@ -13,47 +14,49 @@ interface IProps {
 
 export const YearsOptions: React.FC<IProps> = (props) => {
   const {handleSetSelectedOptions, selectedOptions} = props;
+  const [availableYearOptions, setAvailableYearOptions] = useState<string[]>([]);
+  const {farmerDemographics, farmDemographics, crops, economicsAndWages} = selectedOptions;
 
-  const handleSelectYear = (yearKey: string, years: string|string[]) => {
-    handleSetSelectedOptions(yearKey, years);
-
-    // check if any attributeOption keys have values in selectedOptions
-    const attrKeys = attributeOptions.map((attr) => attr.key);
+  useEffect(() => {
+    const attrKeys = attributeOptions.filter((attr) => attr.key !== "cropUnits").map((attr) => attr.key);
     const selectedAttrKeys = attrKeys.filter((key) => selectedOptions[key].length > 0);
-    const areAnyAttrsSelected = selectedAttrKeys.length > 0;
-    // if any attributes are selected, check that selected year data is available for that selected attribute
-    if (areAnyAttrsSelected) {
-      const selectedYears = Array.isArray(years) ? years : [years];
-      const selectedAttrs = selectedAttrKeys.map((key) => selectedOptions[key]);
-      selectedAttrs.forEach((attr) => {
-        if (Array.isArray(attr)) {
-          attr.forEach((subAttr) => {
-            const subAttrData = queryData.find((d) => d.plugInAttribute === subAttr);
-            const yearKeyToUse = selectedOptions.geographicLevel === "county" ? "county" : "state";
-            const availableYears = subAttrData?.years[yearKeyToUse];
-            if (availableYears) {
-              // check -- are selectedYears included in queryParams?.years[yearKeyTouse] ?
-              const areYearsValid = selectedYears.map((y) => availableYears.indexOf(y) > -1).indexOf(false) < 0;
-              console.log({areYearsValid});
-              console.log({availableYears});
-              console.log({selectedYears});
-              // do something if years are not valid
-            }
-          });
-        }
-      });
+
+    if (!selectedAttrKeys.length) {
+      return;
     }
+
+    const yearKeyToUse = selectedOptions.geographicLevel === "County" ? "county" : "state";
+    const allSelectedAttrs = flatten(selectedAttrKeys.map((key) => selectedOptions[key]));
+    const newAvailableYears = allSelectedAttrs.reduce((years, attr) => {
+      const subAttrData = queryData.find((d) => d.plugInAttribute === attr);
+      const availableYears = subAttrData?.years[yearKeyToUse];
+      if (availableYears) {
+        availableYears.forEach((y) => {
+          years.add(y);
+        });
+      }
+      return years;
+    }, new Set());
+
+    setAvailableYearOptions(Array.from(newAvailableYears));
+  }, [farmerDemographics, farmDemographics, crops, economicsAndWages])
+
+  const handleSelectYear = (yearKey: string, years: string|string[]) => {
+    handleSetSelectedOptions(yearKey, years);
   };
 
   return (
     <div className={css.checkOptions}>
+      {availableYearOptions.length === 0 ?
+      <div>Please select attributes to see available years.</div>
+      :
       <Options
-        options={yearsOptions.options}
+        options={availableYearOptions}
         optionKey={yearsOptions.key}
         inputType={"checkbox"}
         selectedOptions={selectedOptions}
         handleSetSelectedOptions={handleSelectYear}
-      />
+      />}
     </div>
   );
 };

src/scripts/connect.js

@@ -19,7 +19,7 @@ export const connect = {
     },
 
     createNewDataset: async function (geoLevel) {
-      const geoLabel = geoLevel === "State" ? "States" : "Counties";
+      const geoLabel = geoLevel === "State" ? states : "Counties";
       return codapInterface.sendRequest({
           action: 'create',
           resource: 'dataContext',