Create attribute dropdown menu.

package.json

@@ -135,6 +135,7 @@
     "@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",
     "iframe-phone": "^1.3.1",
     "react": "^17.0.2",

src/components/app.tsx

@@ -1,14 +1,15 @@
 import React, {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 { IStateOptions } from "./types";
 
+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 handleSetSelectedOptions = (option: string, value: string | string[]) => {
     const newSelectedOptions = {...selectedOptions, [option]: value};
@@ -40,21 +41,18 @@ function App() {
         <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}
         />

src/components/attribute-options.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Options } from "./options";
+import { attributeOptions } from "./constants";
+import classnames from "classnames";
+import { IStateOptions } from "./types";
+
+import css from "./options.scss";
+
+interface IProps {
+  handleSetSelectedOptions: (option: string, value: string|string[]) => void;
+  selectedOptions: IStateOptions;
+}
+
+export const AttributeOptions: React.FC<IProps> = (props) => {
+  const {handleSetSelectedOptions, selectedOptions} = props;
+
+  const commonProps = {
+    inputType: "checkbox" as "checkbox"|"radio",
+    handleSetSelectedOptions,
+    selectedOptions
+  };
+
+  const getClasses = (key: string) => {
+    if (key === "cropUnits" || key === "crops") {
+      return classnames(css.checkOptions, css.narrow);
+    } else {
+      return classnames(css.checkOptions, css.vertical)
+    }
+  }
+
+  return (
+    <>
+      {
+        attributeOptions.map((attr) => {
+          return (
+            <>
+            {attr.label && <div className={css.category}>{attr.label}</div>}
+            {attr.instructions && <div className={css.instructions}>{attr.instructions}</div>}
+            <div className={classnames(getClasses(attr.key))}>
+              <Options
+                options={attr.options}
+                optionKey={attr.key}
+                {...commonProps}
+              />
+            </div>
+            </>
+          )
+        })
+      }
+    </>
+    );
+};

src/components/constants.ts

@@ -1,3 +1,5 @@
+import { IAttrOptions, IStateOptions } from "./types";
+
 export const placeOptions = {
   label: "Size of area for data",
   options : ["State", "County"]
@@ -59,7 +61,46 @@ export const stateOptions = {
   ]
 };
 
-export const defaultSelectedOptions = {
-  place: null,
-  states: []
+const farmerOptions: IAttrOptions = {
+  key: "farmerDemographics",
+  label: "Farmer Demographics",
+  options: ["Total Farmers", "Age", "Race", "Gender"],
+  instructions: null
+};
+const farmOptions: IAttrOptions = {
+  key: "farmDemographics",
+  label: "Farm Demographics",
+  options: ["Total Farms", "Organization Type", "Economic Class", "Acres Operated", "Organic"],
+  instructions: null
+};
+const economicOptions: IAttrOptions = {
+  key: "economicsAndWages",
+  label: "Economics & Wages",
+  options: ["Labor Status", "Wages", "Time Worked"],
+  instructions: null
+};
+const cropUnitOptions: IAttrOptions = {
+  key: "cropUnits",
+  label: "Production",
+  options: ["Area Harvested", "Yield"],
+  instructions: "(Choose units)"
+};
+const cropOptions: IAttrOptions = {
+  key: "crops",
+  label: null,
+  options: ["Corn", "Cotton", "Grapes", "Grasses", "Oats", "Soybeans", "Wheat"],
+  instructions: "(Choose crops)"
+};
+
+export const attributeOptions = [farmerOptions, farmOptions, economicOptions, cropUnitOptions, cropOptions];
+
+export const defaultSelectedOptions: IStateOptions = {
+  "geographicLevel": "",
+  "states": [],
+  "farmerDemographics": [],
+  "farmDemographics": [],
+  "economicsAndWages": [],
+  "cropUnits": "",
+  "crops": [],
+  "years": []
 };