Add loading message when fetching data.

src/components/app.scss

@@ -68,6 +68,11 @@ button:focus {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
+  .status {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
 }
 
 .introSection {
@@ -104,17 +109,3 @@ a {
     }
   }
 }
-
-.summary  {
-  font-family: 'icomoon' !important;
-  font-size: 20px;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}

src/components/app.tsx

@@ -6,14 +6,18 @@ import { attributeOptions, categories, defaultSelectedOptions } from "../constan
 import { IStateOptions } from "../constants/types";
 import { createTableFromSelections } from "../scripts/api";
 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 css from "./app.scss";
 
 function App() {
   const [showInfo, setShowInfo] = useState<boolean>(false);
   const [selectedOptions, setSelectedOptions] = useState<IStateOptions>(defaultSelectedOptions);
   const [getDataDisabled, setGetDataDisabled] = useState<boolean>(true);
+  const [statusMessage, setStatusMessage] = useState<string>("");
+  const [statusGraphic, setStatusGraphic] = useState<React.ReactElement>();
 
   useEffect(() => {
     const init = async () => {
@@ -43,7 +47,16 @@ function App() {
   };
 
   const handleGetData = async () => {
-    await createTableFromSelections(selectedOptions);
+    setStatusMessage("Fetching data...");
+    setStatusGraphic(<ProgressIndicator/>);
+    const res = await createTableFromSelections(selectedOptions);
+    if (res !== "success") {
+      setStatusMessage("Fetch Error. Please retry.");
+      setStatusGraphic(<Error/>)
+    } else {
+      setStatusMessage("Fetched data.");
+      setStatusGraphic(<Checkmark/>);
+    }
   };
 
   return (
@@ -77,7 +90,10 @@ function App() {
         })}
       </div>
       <div className={css.summary}>
-        <span className={css.statusGraphic}></span>
+        <div className={css.status}>
+          <div>{statusGraphic}</div>
+          <div>{statusMessage}</div>
+        </div>
         <button className={css.getDataButton} disabled={getDataDisabled} onClick={handleGetData}>Get Data</button>
       </div>
     </div>

src/constants/queryHeaders.ts

@@ -136,8 +136,8 @@ export const queryData: Array<IQueryHeaders> = [
       domain_desc: "Economic Class",
       geographicAreas: ["State"],
       years: {
-        "County": allYears.filter(y => Number(y) >= 1987),
-        "State": allYears.filter(y => Number(y) >= 1987)
+        "County": allYears.filter(y => Number(y) >= 1998),
+        "State": allYears.filter(y => Number(y) >= 1998)
       }
   },
   {

src/scripts/api.ts

@@ -27,17 +27,6 @@ interface IGetAttrDataParams {
   state?: string
 }
 
-// export const fetchData = async (req: string) => {
-//   try {
-//     const response = await fetchJsonp(req, {timeout: 10000});
-//     const json = await response.json();
-//     return json;
-//   } catch (error) {
-//     console.log("parsing failed", error);
-//     throw error;
-//   }
-// };
-
 export const fetchDataWithRetry = async (req: string, maxRetries = 3) => {
   let retries = 0;
   while (retries < maxRetries) {
@@ -103,36 +92,41 @@ export const createRequest = ({attribute, geographicLevel, location, year, cropC
 
 export const createTableFromSelections = async (selectedOptions: IStateOptions) => {
   const {geographicLevel, states, cropUnits, years, ...subOptions} = selectedOptions;
+
   await connect.getNewDataContext();
   await connect.createTopCollection(geographicLevel);
-
   const allAttrs: Array<string|ICropDataItem> = ["Year"];
 
-  for (const key in subOptions) {
-    const selections = subOptions[key as keyof typeof subOptions];
-    for (const attribute of selections) {
-      const queryParams = getQueryParams(attribute);
-      if (!queryParams) {
-        throw new Error("Invalid attribute");
-      }
-      const {short_desc} = queryParams;
-      if (Array.isArray(short_desc)) {
-        for (const desc of short_desc) {
-          console.log({desc});
-          const codapColumnName = attrToCODAPColumnName[desc].attributeNameInCodapTable;
-          allAttrs.push(codapColumnName);
+  try {
+    for (const key in subOptions) {
+      const selections = subOptions[key as keyof typeof subOptions];
+      for (const attribute of selections) {
+        const queryParams = getQueryParams(attribute);
+        if (!queryParams) {
+          throw new Error("Invalid attribute");
+        }
+        const {short_desc} = queryParams;
+        if (Array.isArray(short_desc)) {
+          for (const desc of short_desc) {
+            console.log({desc});
+            const codapColumnName = attrToCODAPColumnName[desc].attributeNameInCodapTable;
+            allAttrs.push(codapColumnName);
+          }
+        } else if (typeof short_desc === "object" && cropUnits) {
+          const attr = short_desc[cropUnits as keyof ICropDataItem][0];
+          allAttrs.push(attrToCODAPColumnName[attr].attributeNameInCodapTable);
         }
-      } else if (typeof short_desc === "object" && cropUnits) {
-        const attr = short_desc[cropUnits as keyof ICropDataItem][0];
-        allAttrs.push(attrToCODAPColumnName[attr].attributeNameInCodapTable);
       }
     }
-  }
 
-  await connect.createSubCollection(geographicLevel, allAttrs);
-  const items = await getItems(selectedOptions);
-  await connect.createItems(items);
-  await connect.makeCaseTableAppear();
+    await connect.createSubCollection(geographicLevel, allAttrs);
+    const items = await getItems(selectedOptions);
+    await connect.createItems(items);
+    await connect.makeCaseTableAppear();
+    return "success";
+  } catch (error) {
+    return error;
+  }
 };
 
 const getItems = async (selectedOptions: IStateOptions) => {