Encode parameters and unselect unavailable years.

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 { attributeOptions, categories, defaultSelectedOptions, yearsOptions } from "./constants";
+import { attributeOptions, categories, defaultSelectedOptions } from "./constants";
 import { IStateOptions } from "./types";
 import { createTableFromSelections } from "../scripts/api";
 import { connect } from "../scripts/connect";
@@ -14,7 +14,6 @@ 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 () => {

src/components/attribute-options.tsx

@@ -34,8 +34,12 @@ export const AttributeOptions: React.FC<IProps> = (props) => {
         attributeOptions.map((attr) => {
           return (
             <>
-            {attr.label && <div key={`header-${attr.key}`} className={css.category}>{attr.label}</div>}
-            {attr.instructions && <div key={`instructions-${attr.key}`} className={css.instructions}>{attr.instructions}</div>}
+            {attr.label && <div key={`header-${attr.key}`} className={css.statisticcat_desc}>{attr.label}</div>}
+            {attr.instructions &&
+              <div key={`instructions-${attr.key}`} className={css.instructions}>
+                {attr.instructions}
+              </div>
+            }
             <div key={`options-container-${attr.key}`} className={classnames(getClasses(attr.key))}>
               <Options
                 key={`options-${attr.key}`}

src/components/information.tsx

@@ -13,7 +13,7 @@ export const Information: React.FC<IProps> = (props) => {
     <div className={css.popUp}>
       <div className={css.popUpContent}>
         <div className={css.popUpBody}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum velit, pellentesque eget turpis non, vestibulum egestas tellus. Fusce sed dolor hendrerit, rutrum ligula et, imperdiet est. Nam tincidunt leo a ultricies elementum. Quisque ornare eget massa ac congue. Curabitur et nisi orci. Nulla mollis lacus eu velit mollis, in vehicula lectus ultricies. Nulla facilisi.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum velit, pellentesque eget turpis.
         </div>
         <div className={css.popUpFooter}>
           <div className={css.controlRow}>

src/components/options.scss

@@ -68,7 +68,7 @@
   }
 }
 
-.category {
+.statisticcat_desc {
   font-weight: 600;
 }
 

src/components/place-options.tsx

@@ -18,7 +18,10 @@ export const PlaceOptions: React.FC<IProps> = (props) => {
         return (
           <>
             <div key={`instructions-${placeOpt.key}`} className={css.instruction}>{placeOpt.instructions}:</div>
-            <div key={`options-container-${placeOpt.key}`} className={placeOpt.key === "geographicLevel" ? css.radioOptions : css.checkOptions}>
+            <div
+              key={`options-container-${placeOpt.key}`}
+              className={placeOpt.key === "geographicLevel" ? css.radioOptions : css.checkOptions}
+            >
               <Options
                 key={`options-${placeOpt.key}`}
                 options={placeOpt.options}

src/components/types.ts

@@ -58,4 +58,4 @@ export interface IResData {
   week_ending: string;
   year: number;
   zip_5: string;
-};
+};

src/components/utils.ts

@@ -1,4 +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

@@ -15,7 +15,6 @@ interface IProps {
 export const YearsOptions: React.FC<IProps> = (props) => {
   const {handleSetSelectedOptions, selectedOptions} = props;
   const [availableYearOptions, setAvailableYearOptions] = useState<string[]>([]);
-  const {farmerDemographics, farmDemographics, crops, economicsAndWages} = selectedOptions;
 
   useEffect(() => {
     const attrKeys = attributeOptions.filter((attr) => attr.key !== "cropUnits").map((attr) => attr.key);
@@ -37,9 +36,20 @@ export const YearsOptions: React.FC<IProps> = (props) => {
       }
       return years;
     }, new Set());
+    const newSet: string[] = Array.from(newAvailableYears);
+    setAvailableYearOptions(newSet);
 
-    setAvailableYearOptions(Array.from(newAvailableYears));
-  }, [farmerDemographics, farmDemographics, crops, economicsAndWages])
+    // if selected years includes years not in available options, remove them from selection
+    const selectionsNotAvailable = selectedOptions.years.filter(year => !newSet.includes(year));
+    if (selectionsNotAvailable.length) {
+      const newSelectedYears = [...selectedOptions.years];
+      selectionsNotAvailable.forEach((year) => {
+        newSelectedYears.splice(newSelectedYears.indexOf(year), 1);
+      });
+      handleSetSelectedOptions("years", newSelectedYears);
+    }
+
+  }, [selectedOptions, handleSetSelectedOptions]);
 
   const handleSelectYear = (yearKey: string, years: string|string[]) => {
     handleSetSelectedOptions(yearKey, years);

src/scripts/api.ts

@@ -1,5 +1,5 @@
 import fetchJsonp from "fetch-jsonp";
-import { ICropDataItem, queryData } from "./query-headers";
+import { ICropCategory, ICropDataItem, queryData } from "./query-headers";
 import { IStateOptions } from "../components/types";
 import { connect } from "./connect";
 import { cropOptions } from "../components/constants";
@@ -24,30 +24,41 @@ interface IGetAttrDataParams {
 
 export const createRequest = ({attribute, geographicLevel, location, year, cropCategory}: IRequestParams) => {
   const queryParams = queryData.find((d) => d.plugInAttribute === attribute);
-  const {sector, group, commodity, category, domains, dataItem} = queryParams!;
-
-  let item;
-  let cat;
-  if (cropCategory) {
-    const cropDataItem = queryParams?.dataItem as ICropDataItem;
-    const cropCat = queryParams?.category as ICropDataItem;
-    item = cropDataItem[cropCategory];
-    cat = cropCat[cropCategory];
-  } else {
-    item = dataItem;
-    cat = category;
-  }
 
-  const baseReq = `${baseURL}&sect_desc=${sector}&group_desc=${group}&commodity_desc=${commodity}&statisticcat_desc=${cat}&domain_desc=${domains}&agg_level_desc=${geographicLevel}&state_name=${location}&year=${year}`;
-  let req = baseReq;
-  if (Array.isArray(dataItem)) {
-    dataItem.forEach(dItem => {
-      req = req + `&short_desc=${dItem}`;
-    });
-  } else {
-    req = req + `&short_desc=${item}`;
+  if (!queryParams) {
+    throw new Error("Invalid attribute");
   }
 
+  const {
+    sect_desc,
+    group_desc,
+    commodity_desc,
+    statisticcat_desc,
+    domain_desc,
+    short_desc,
+  } = queryParams;
+
+  const item = cropCategory ?
+    (queryParams?.short_desc as ICropDataItem)[cropCategory] :
+    short_desc as string[];
+  const cat = cropCategory ?
+    (queryParams?.statisticcat_desc as ICropCategory)[cropCategory] :
+    statisticcat_desc;
+
+  const baseReq = `${baseURL}` +
+  `&sect_desc=${encodeURIComponent(sect_desc)}` +
+  `&group_desc=${encodeURIComponent(group_desc)}` +
+  `&commodity_desc=${encodeURIComponent(commodity_desc)}` +
+  `&statisticcat_desc=${encodeURIComponent(cat as string)}` +
+  `&domain_desc=${encodeURIComponent(domain_desc)}` +
+  `&agg_level_desc=${geographicLevel}` +
+  `&state_name=${location}` +
+  `&year=${year}`;
+
+  let req = baseReq;
+  item.forEach(subItem => {
+    req = req + `&short_desc=${encodeURIComponent(subItem)}`;
+  });
   return req;
 };
 
@@ -62,19 +73,22 @@ export const createTableFromSelections = async (selectedOptions: IStateOptions)
     const selections = subOptions[key as keyof typeof subOptions];
     for (const attribute of selections) {
       const queryParams = queryData.find((d) => d.plugInAttribute === attribute);
-      const {dataItem} = queryParams!;
-      if (Array.isArray(dataItem)) {
-        allAttrs.push(...dataItem);
+      if (!queryParams) {
+        throw new Error("Invalid attribute");
+      }
+      const {short_desc} = queryParams;
+      if (Array.isArray(short_desc)) {
+        allAttrs.push(...short_desc);
       } else {
-        allAttrs.push(dataItem);
+        allAttrs.push(short_desc);
       }
     }
   }
   await connect.createSubCollection(allAttrs);
   const items = await getItems(selectedOptions);
   await connect.createItems(items);
   await connect.makeCaseTableAppear();
-}
+};
 
 const getItems = async (selectedOptions: IStateOptions) => {
   const {states, years} = selectedOptions;
@@ -108,7 +122,7 @@ const getDataForSingleYearAndState = async (selectedOptions: IStateOptions, stat
   let item: any = {
     "State": state,
     "Year": year,
-  }
+  };
 
   for (const key in subOptions) {
     const value = subOptions[key as keyof typeof subOptions];
@@ -136,12 +150,12 @@ const getAttrData = async (params: IGetAttrDataParams) => {
     const {data} = res;
     data.forEach((dataItem: any) => {
         values[dataItem.short_desc] = dataItem.Value;
-    })
+    });
   } else {
     console.log("error");
   }
   return values;
-}
+};
 
 export const fetchData = async (req: string) => {
   try {
@@ -152,4 +166,4 @@ export const fetchData = async (req: string) => {
     console.log("parsing failed", error);
     throw error;
   }
-};
+};