Merge pull request #3 from concord-consortium/185951117-attribute-dro…

…pdown

Attribute dropdown menu (PT-185951117)

package.json

@@ -135,7 +135,9 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.5.0",
     "classnames": "^2.3.2",
+    "fetch-jsonp": "^1.3.0",
     "iframe-phone": "^1.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

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

@@ -1,14 +1,37 @@
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 import { Dropdown } from "./dropdown";
-import css from "./app.scss";
 import classnames from "classnames";
 import { Information } from "./information";
-import { defaultSelectedOptions } from "./constants";
+import { attributeOptions, categories, defaultSelectedOptions } from "../constants/constants";
+import { IStateOptions } from "../constants/types";
+import { createTableFromSelections } from "../scripts/api";
+import { connect } from "../scripts/connect";
+
 
+import css from "./app.scss";
 
 function App() {
   const [showInfo, setShowInfo] = useState<boolean>(false);
-  const [selectedOptions, setSelectedOptions] = useState<typeof defaultSelectedOptions>(defaultSelectedOptions);
+  const [selectedOptions, setSelectedOptions] = useState<IStateOptions>(defaultSelectedOptions);
+  const [getDataDisabled, setGetDataDisabled] = useState<boolean>(true);
+
+  useEffect(() => {
+    const init = async () => {
+      await connect.initialize();
+    };
+    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};
@@ -19,6 +42,10 @@ function App() {
     setShowInfo(true);
   };
 
+  const handleGetData = async () => {
+    await createTableFromSelections(selectedOptions);
+  };
+
   return (
     <div className={css.pluginContent}>
       { showInfo &&
@@ -37,31 +64,21 @@ function App() {
         </div>
       </div>
       <div className={css.scrollArea}>
-        <Dropdown
-          sectionName={"Place"}
-          sectionAltText={"Place alt text"}
-          sectionDescription={"Place description"}
-          handleSetSelectedOptions={handleSetSelectedOptions}
-          selectedOptions={selectedOptions}
-        />
-        <Dropdown
-          sectionName={"Attributes"}
-          sectionAltText={"Attributes alt text"}
-          sectionDescription={"Attributes description"}
-          handleSetSelectedOptions={handleSetSelectedOptions}
-          selectedOptions={selectedOptions}
-        />
-        <Dropdown
-          sectionName={"Years"}
-          sectionAltText={"Years alt text"}
-          sectionDescription={"Years description"}
-          handleSetSelectedOptions={handleSetSelectedOptions}
-          selectedOptions={selectedOptions}
-        />
+        {categories.map((cat) => {
+          return (
+            <Dropdown
+              key={cat.header}
+              category={cat.header}
+              sectionAltText={cat.altText}
+              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} disabled={getDataDisabled} onClick={handleGetData}>Get Data</button>
       </div>
     </div>