Skip to content

Commit

Permalink
Merge pull request #4 from concord-consortium/185951219-years-dropdown
Browse files Browse the repository at this point in the history
Years dropdown (PT-185951219)
  • Loading branch information
lublagg authored Sep 20, 2023
2 parents 7d8dee0 + d7f3fb6 commit e5407f4
Show file tree
Hide file tree
Showing 24 changed files with 4,649 additions and 378 deletions.
11 changes: 11 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@
"@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",
Expand Down
2 changes: 1 addition & 1 deletion src/components/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
63 changes: 41 additions & 22 deletions src/components/app.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,37 @@
import React, {useState} from "react";
import React, {useEffect, useState} from "react";
import { Dropdown } from "./dropdown";
import classnames from "classnames";
import { Information } from "./information";
import { defaultSelectedOptions } from "./constants";
import { IStateOptions } from "./types";
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<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};
Expand All @@ -20,6 +42,10 @@ function App() {
setShowInfo(true);
};

const handleGetData = async () => {
await createTableFromSelections(selectedOptions);
};

return (
<div className={css.pluginContent}>
{ showInfo &&
Expand All @@ -38,28 +64,21 @@ function App() {
</div>
</div>
<div className={css.scrollArea}>
<Dropdown
sectionName={"Place"}
sectionAltText={"Place alt text"}
handleSetSelectedOptions={handleSetSelectedOptions}
selectedOptions={selectedOptions}
/>
<Dropdown
sectionName={"Attributes"}
sectionAltText={"Attributes alt text"}
handleSetSelectedOptions={handleSetSelectedOptions}
selectedOptions={selectedOptions}
/>
<Dropdown
sectionName={"Years"}
sectionAltText={"Years alt text"}
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>

Expand Down
17 changes: 11 additions & 6 deletions src/components/attribute-options.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from "react";
import { Options } from "./options";
import { attributeOptions } from "./constants";
import { attributeOptions } from "../constants/constants";
import classnames from "classnames";
import { IStateOptions } from "./types";
import { IStateOptions } from "../constants/types";

import css from "./options.scss";

Expand All @@ -15,7 +15,6 @@ export const AttributeOptions: React.FC<IProps> = (props) => {
const {handleSetSelectedOptions, selectedOptions} = props;

const commonProps = {
inputType: "checkbox" as "checkbox"|"radio",
handleSetSelectedOptions,
selectedOptions
};
Expand All @@ -34,10 +33,16 @@ export const AttributeOptions: React.FC<IProps> = (props) => {
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))}>
{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}`}
inputType={attr.key === "cropUnits" ? "radio" : "checkbox"}
options={attr.options}
optionKey={attr.key}
{...commonProps}
Expand Down
106 changes: 0 additions & 106 deletions src/components/constants.ts

This file was deleted.

38 changes: 10 additions & 28 deletions src/components/dropdown.tsx
Original file line number Diff line number Diff line change
@@ -1,59 +1,41 @@
import React, { useState } from "react";
import classnames from "classnames";
import { PlaceOptions } from "./place-options";
import { defaultSelectedOptions } from "./constants";
import { defaultSelectedOptions } from "../constants/constants";
import { AttributeOptions } from "./attribute-options";

import css from "./dropdown.scss";
import { YearsOptions } from "./years-options";
import { Summary } from "./summary";

interface IProps {
sectionName: string
category: string
sectionAltText: string
handleSetSelectedOptions: (option: string, value: string|string[]) => void
selectedOptions: typeof defaultSelectedOptions;
}

export const Dropdown: React.FC<IProps> = (props) => {
const {sectionName, sectionAltText, handleSetSelectedOptions, selectedOptions} = props;
const {category, sectionAltText, handleSetSelectedOptions, selectedOptions} = props;
const [showItems, setShowItems] = useState<boolean>(false);

const handleClick = () => {
setShowItems(!showItems);
};

const renderSummary = () => {
if (sectionName === "Place") {
const place = selectedOptions.geographicLevel || "";
const states = selectedOptions.states.join(`, `);
return (
`${place}: ${states}`
);
} else if (sectionName === "Attributes") {
return (
""
);
}
};

const commonProps = {handleSetSelectedOptions, selectedOptions};

const renderOptions = () => {
if (sectionName === "Place") {
return (
<PlaceOptions {...commonProps}/>
);
} else if (sectionName === "Attributes") {
return (
<AttributeOptions {...commonProps}/>
);
}
return category === "Place" ? <PlaceOptions {...commonProps}/> :
category === "Attributes" ? <AttributeOptions {...commonProps}/> :
<YearsOptions {...commonProps}/>;
};

return (
<div className={`${css.dropdown}`}>
<div className={`${css.sectionHeaderLine} ${css.dropdownHeader}`} title={sectionAltText}>
<span className={css.sectionTitle}>{sectionName}</span>
<div>{renderSummary()}</div>
<span className={css.sectionTitle}>{category}</span>
<Summary category={category} selectedOptions={selectedOptions}/>
<span className={css.userSelection}></span>
<span className={classnames(css.dropdownIndicator, {[css.up]: showItems})} onClick={handleClick}></span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/information.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
2 changes: 1 addition & 1 deletion src/components/options.scss
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
}
}

.category {
.statisticcat_desc {
font-weight: 600;
}

Expand Down
Loading

0 comments on commit e5407f4

Please sign in to comment.