Checkpoint

src/components/app.tsx

@@ -4,17 +4,22 @@ import classnames from "classnames";
 import { Information } from "./information";
 import { categories, defaultSelectedOptions } from "./constants";
 import { IStateOptions } from "./types";
+import { createQueryFromSelections } from "../scripts/api";
+import { connect } from "../scripts/connect";
+
 
 import css from "./app.scss";
-import { runTestQuery } from "../scripts/api";
 
 function App() {
   const [showInfo, setShowInfo] = useState<boolean>(false);
   const [selectedOptions, setSelectedOptions] = useState<IStateOptions>(defaultSelectedOptions);
 
   useEffect(() => {
-    runTestQuery();
-  }, [])
+    const init = async () => {
+      await connect.initialize();
+    };
+    init();
+  }, []);
 
   const handleSetSelectedOptions = (option: string, value: string | string[]) => {
     const newSelectedOptions = {...selectedOptions, [option]: value};
@@ -25,6 +30,18 @@ function App() {
     setShowInfo(true);
   };
 
+  const handleGetData = () => {
+    createQueryFromSelections(selectedOptions);
+
+    const makeDataSetAndTable = async () => {
+      const dS = await connect.guaranteeDataset(selectedOptions.geographicLevel);
+      if (dS.success) {
+        await connect.makeCaseTableAppear();
+      }
+    };
+    makeDataSetAndTable();
+  };
+
   return (
     <div className={css.pluginContent}>
       { showInfo &&
@@ -52,12 +69,12 @@ function App() {
               handleSetSelectedOptions={handleSetSelectedOptions}
               selectedOptions={selectedOptions}
             />
-          )
+          );
         })}
       </div>
       <div className={css.summary}>
         <span className={css.statusGraphic}></span>
-        <button className={css.getDataButton}>Get Data</button>
+        <button className={css.getDataButton} onClick={handleGetData}>Get Data</button>
       </div>
     </div>
 

src/components/constants.ts

@@ -12,6 +12,7 @@ export const stateOptions: IAttrOptions = {
   key: "states",
   instructions: "Choose states to include in your dataset from the list below",
   options: [
+    "All States",
     "Alabama",
     "Alaska",
     "Arizona",
@@ -110,21 +111,21 @@ export const yearsOptions: IAttrOptions = {
   label: "Years",
   options: yearsArray,
   instructions: null
-}
+};
 
 export const categories = [
   {header: "Place", options: placeOptions, altText: ""},
   {header: "Attributes", options: attributeOptions, altText: ""},
   {header: "Years", options: yearsOptions, altText: ""}
-]
+];
 
 export const defaultSelectedOptions: IStateOptions = {
-  "geographicLevel": "",
-  "states": [],
+  "geographicLevel": "State",
+  "states": ["All States"],
   "farmerDemographics": [],
   "farmDemographics": [],
   "economicsAndWages": [],
   "cropUnits": "",
   "crops": [],
   "years": []
-};
+};

src/components/dropdown.tsx

@@ -28,7 +28,7 @@ export const Dropdown: React.FC<IProps> = (props) => {
   const renderOptions = () => {
     return category === "Place" ? <PlaceOptions {...commonProps}/> :
     category === "Attributes" ? <AttributeOptions {...commonProps}/> :
-    <YearsOptions {...commonProps}/>
+    <YearsOptions {...commonProps}/>;
   };
 
   return (

src/components/summary.tsx

@@ -37,17 +37,17 @@ export const Summary: React.FC<IProps> = ({category, selectedOptions}) => {
             return null;
           }
         })
-        .filter((item) => item !== null)
+        .filter((item) => item !== null);
         const finalString = resultString.join(", ");
         return finalString;
     } else if (category === "Years") {
-      return selectedOptions.years.join(", ")
+      return selectedOptions.years.join(", ");
     }
-  }
+  };
 
   return (
     <div>
       {getSummaryText()}
     </div>
-  )
-}
+  );
+};

src/components/years-options.tsx

@@ -39,11 +39,11 @@ export const YearsOptions: React.FC<IProps> = (props) => {
               console.log({selectedYears});
               // do something if years are not valid
             }
-          })
+          });
         }
-      })
+      });
     }
-  }
+  };
 
   return (
     <div className={css.checkOptions}>

src/scripts/api.ts

@@ -1,23 +1,94 @@
 import fetchJsonp from "fetch-jsonp";
 import { queryData } from "./query-headers";
+import { IStateOptions } from "../components/types";
+import { connect } from "./connect";
 
 const baseURL = `https://quickstats.nass.usda.gov/api/api_GET/?key=9ED0BFB8-8DDD-3609-9940-A2341ED6A9E3`;
 
 export const createRequest = (attribute: string, geoLevel: string, location: string, year: string) => {
   const queryParams = queryData.find((d) => d.plugInAttribute === attribute);
   const {sector, group, commodity, category, domains, dataItem} = queryParams!;
-  const req = `${baseURL}&sect_desc=${sector}&group_desc=${group}&commodity_desc=${commodity}&statisticcat_desc=${category}&domain_desc=${domains}&short_desc=${dataItem}&agg_level_desc=${geoLevel}&state_name=${location}&year=${year}`;
-  return req;
+
+  const baseReq = `${baseURL}&sect_desc=${sector}&group_desc=${group}&commodity_desc=${commodity}&statisticcat_desc=${category}&domain_desc=${domains}&agg_level_desc=${geoLevel}&state_name=${location}&year=${year}`;
+
+  const reqs = [];
+
+  if (Array.isArray(dataItem)) {
+    dataItem.forEach(item => {
+      reqs.push(`${baseReq}&short_desc=${item}`);
+    });
+  } else {
+    reqs.push(`${baseReq}&short_desc=${dataItem}`);
+  }
+
+  return reqs;
+};
+
+export const createQueryFromSelections = (selectedOptions: IStateOptions) => {
+  const {geographicLevel, states, years, ...subOptions} = selectedOptions;
+  const multipleStatesSelected = states.length > 1 || states[0] === "All States";
+  const multipleYearsSelected = years.length > 1;
+
+  if (multipleStatesSelected) {
+    states.forEach((state) => {
+      if (multipleYearsSelected) {
+        years.forEach(year => {
+          // do something
+          console.log("multiple years and mulitple states selected");
+        });
+      } else {
+        console.log("multiple states selected with one year");
+      }
+    });
+  } else {
+    for (const key in subOptions) {
+      const value = subOptions[key as keyof typeof subOptions];
+      console.log("current value", value);
+      if (value && Array.isArray(value) && value.length > 1) {
+        console.log("you selected more than one value from a sub-category");
+      } else if (value && Array.isArray(value) && value.length === 1) {
+        console.log("you selected only one value from a sub-category and it is this value", value);
+        const reqArray = createRequest(value[0], geographicLevel, states[0], years[0]);
+        console.log("REQUEST", reqArray[0]);
+        getDataAndCreateCodapTable(reqArray);
+      }
+    }
+  }
 };
 
-export const runTestQuery = () => {
-  const request = createRequest("Total Farmers", "STATE", "CALIFORNIA", "2017");
-  fetchJsonp(request)
+export const getDataAndCreateCodapTable = (reqs: string[]) => {
+  reqs.forEach((req) => {
+    fetchJsonp(req)
     .then(function(response) {
       return response.json();
     }).then(function(json) {
       console.log("parsed json", json);
+      const formattedData = formatDataForCODAP(json);
     }).catch(function(ex) {
       console.log("parsing failed", ex);
-    })
+    });
+  });
 };
+
+const formatDataForCODAP = (res: any) => {
+  console.log({res});
+  return res;
+};
+
+// export const runTestQuery = () => {
+//   const request1 = createRequest("Total Farmers", "STATE", "CALIFORNIA", "2017")[0];
+//   const request2 = createRequest("Total Farmers", "STATE", "ARKANSAS", "2017")[0];
+//   const request3 = createRequest("Total Farmers", "STATE", "ALABAMA", "2017")[0];
+//   const request4 = createRequest("Total Farmers", "STATE", "MONTANA", "2017")[0];
+//   const requests = [request1, request2, request3, request4];
+//   requests.forEach((req) => {
+//     fetchJsonp(req)
+//     .then(function(response) {
+//       return response.json();
+//     }).then(function(json) {
+//       console.log("parsed json", json);
+//     }).catch(function(ex) {
+//       console.log("parsing failed", ex);
+//     })
+//   })
+// };

src/scripts/connect.js

@@ -1,10 +1,90 @@
 import { codapInterface } from "./codapInterface";
 
+const dataSetName = "NASS Quickstats Data";
+const dataSetTitle = "NASS Quickstats Data";
+
 export const connect = {
     initialize: async function () {
         return await codapInterface.init(this.iFrameDescriptor, null);
     },
 
+    makeCODAPAttributeDef: function (attr) {
+      return {
+        name: attr.title,
+        title: attr.title,
+        description: attr.description,
+        type: attr.format,
+        formula: attr.formula
+      }
+    },
+
+    createNewDataset: async function (geoLevel) {
+      const geoLabel = geoLevel === "State" ? "States" : "Counties";
+      return codapInterface.sendRequest({
+          action: 'create',
+          resource: 'dataContext',
+          values: {
+            name: dataSetName,
+            title: dataSetTitle,
+            collections: [{
+              name: geoLabel,
+              attrs: [
+                {
+                  name: geoLevel,
+                  title: geoLevel,
+                  description: `Selected ${geoLabel}`
+                },
+                {
+                  name: "Boundaries",
+                  title: "Boundaries",
+                  formula: 'lookupBoundary(US_state_boundaries, State)',
+                  formulaDependents: 'State'
+                }
+              ]
+            }, {
+              name: "Data",
+              parent: geoLabel,
+              attrs: [ // note how this is an array of objects.
+                {name: "Year", title: "Year"}
+              ]
+            }]
+          }
+      });
+    },
+
+
+    guaranteeDataset: async function (geoLevel) {
+      let datasetResource = 'dataContext[' + dataSetName +
+          ']';
+      await this.createNewDataset(geoLevel);
+      const response = await codapInterface.sendRequest({
+        action: 'get',
+        resource: datasetResource});
+      return response;
+    },
+
+    makeCaseTableAppear : async function() {
+      const theMessage = {
+        action : "create",
+        resource : "component",
+        values : {
+          type : 'caseTable',
+          dataContext : dataSetName,
+          name : dataSetName,
+          title: dataSetName,
+          cannotClose : true
+        }
+      };
+
+      const makeCaseTableResult = await codapInterface.sendRequest(theMessage);
+      if (makeCaseTableResult.success) {
+        console.log("Success creating case table: " + theMessage.title);
+      } else {
+        console.log("FAILED to create case table: " + theMessage.title);
+      }
+      return makeCaseTableResult.success && makeCaseTableResult.values.id;
+    },
+
     createNewCollection: async function(dSName, collName) {
       const message = {
         "action": "create",
@@ -33,6 +113,6 @@ export const connect = {
     iFrameDescriptor: {
       version: '0.0.1',
       name: 'nass-plugin',
-      title: 'MultiData'
+      title: 'NASS Quickstats Data'
     },
 }