diff --git a/.eslintrc.js b/.eslintrc.js index 86fe1d0..b4b69ac 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -56,7 +56,7 @@ module.exports = { "import/no-extraneous-dependencies": "warn", "import/no-useless-path-segments": "warn", "jsx-quotes": ["error", "prefer-double"], - "max-len": ["warn", { code: 120, ignoreUrls: true }], + "max-len": ["off"], "no-bitwise": "error", "no-debugger": "off", "no-duplicate-imports": "error", diff --git a/src/components/app.tsx b/src/components/app.tsx index 8196f42..3f851c6 100644 --- a/src/components/app.tsx +++ b/src/components/app.tsx @@ -10,6 +10,9 @@ import { connect } from "../scripts/connect"; import ProgressIndicator from "../assets/progress-indicator.svg"; import Checkmark from "../assets/done.svg"; import Error from "../assets/warning.svg"; +import { flatten } from "../scripts/utils"; +import { queryData } from "../constants/queryHeaders"; +import { strings } from "../constants/strings"; import css from "./app.scss"; @@ -20,6 +23,7 @@ function App() { const [statusMessage, setStatusMessage] = useState(""); const [statusGraphic, setStatusGraphic] = useState(); const [showWarning, setShowWarning] = useState(false); + const [warningMessage, setWarningMessage] = useState(""); useEffect(() => { const init = async () => { @@ -49,21 +53,43 @@ function App() { }; const getData = async () => { - setStatusMessage("Fetching data..."); + setStatusMessage(strings.fetchingMsg); setStatusGraphic(); const res = await createTableFromSelections(selectedOptions); if (res !== "success") { - setStatusMessage("Fetch Error. Please retry."); + setStatusMessage(strings.fetchSuccess); setStatusGraphic(); } else { - setStatusMessage("Fetched data."); + setStatusMessage(strings.fetchError); setStatusGraphic(); } }; const handleGetData = async () => { const numberOfRows = getNumberOfItems(selectedOptions); + + const attrKeys = attributeOptions.filter((attr) => attr.key !== "cropUnits").map((attr) => attr.key); + const selectedAttrKeys = attrKeys.filter((key) => selectedOptions[key].length > 0); + const allSelectedAttrs = flatten(selectedAttrKeys.map((key) => selectedOptions[key])); + const selectedYears = selectedOptions.years; + + allSelectedAttrs.map((attr) => { + const attrInfo = queryData.find((q) => q.plugInAttribute === attr); + if (attrInfo) { + const availableYears = attrInfo.years[selectedOptions.geographicLevel]; + for (let i = 0; i < selectedYears.length; i ++) { + const y = selectedYears[i]; + if (!availableYears.includes(y)) { + setWarningMessage(strings.yearsWarning); + setShowWarning(true); + break; + } + } + } + }); + if (numberOfRows > 4000) { + setWarningMessage(strings.rowsWarning); setShowWarning(true); } else { await getData(); @@ -71,6 +97,7 @@ function App() { }; const handleCloseWarning = async (getDataAnyway: boolean) => { + setWarningMessage(""); setShowWarning(false); if (getDataAnyway) { await getData(); @@ -85,10 +112,10 @@ function App() {
- Retrieve data on U.S. agricultural statistics at the state or county level. + {strings.appDescription} @@ -112,10 +139,15 @@ function App() {
{statusGraphic}
{statusMessage}
- +
{ showWarning && - + } diff --git a/src/components/warning.tsx b/src/components/warning.tsx index bd0e2f3..adc7af1 100644 --- a/src/components/warning.tsx +++ b/src/components/warning.tsx @@ -1,13 +1,13 @@ import React from "react"; -import WarningIcon from "../assets/warning.svg"; import css from "./warning.scss"; interface IProps { - handleCloseWarning: (getDataAnyway: boolean) => void + handleCloseWarning: (getDataAnyway: boolean) => void; + message: string; } export const Warning: React.FC = (props) => { - const {handleCloseWarning} = props; + const {handleCloseWarning, message} = props; return (
@@ -16,7 +16,7 @@ export const Warning: React.FC = (props) => {
- The number of attributes you have selected is over 4000 rows and may lead to the program running slowly. + {message}
diff --git a/src/constants/strings.ts b/src/constants/strings.ts new file mode 100644 index 0000000..58cc228 --- /dev/null +++ b/src/constants/strings.ts @@ -0,0 +1,10 @@ +export const strings = { + appDescription: "Retrieve data on U.S. agricultural statistics at the state or county level.", + infoTitle: "Further information about this CODAP plugin", + getData: "Get Data", + yearsWarning: "Some of the attributes you selected are not available for all the years you selected.", + rowsWarning: "The number of attributes you have selected is over 4000 rows and may lead to the program running slowly.", + fetchingMsg: "Fetching data...", + fetchError: "Fetch Error. Please retry.", + fetchSuccess: "Fetched data." +};