@imerss/inat-components 1.1.2 → 2.0.0

package/src/components/year-dropdown/year-dropdown.tsx

@@ -1,27 +1,31 @@
-import React, {useState} from "react";
-import {getCurrentYear} from "../../__shared";
+import React, { useEffect, useState } from "react";
+import { getCurrentYear } from "../../__shared";
 import styles from "./year-dropdown.module.scss";
 
 interface YearsProps {
     value: string;
     onChange: (year: string) => void;
+    numYears: number;
     className?: string;
 }
 
-const Years = ({ value, onChange, className }: YearsProps) => {
-    const [years] = useState(() => {
+const Years = ({ value, onChange, numYears, className }: YearsProps) => {
+    const [years, setYears] = useState([]);
+
+    useEffect(() => {
         const currentYear = getCurrentYear();
         const years: any = [];
-        for (let i = currentYear; i>=currentYear-10; i--) {
+        for (let i = currentYear; i>currentYear-numYears; i--) {
             years.push(i);
         }
-        return years;
-    });
+        setYears(years);
+    }, [numYears]);
 
     let classes = styles.dropdown;
     if (className) {
         classes += ` ${className}`;
     }
+
     return (
         <select className={classes} onChange={(e) => onChange(e.target.value)} defaultValue={value}>
             <option value="all">All years</option>

package/src/hooks/useLoadSourceData.ts

@@ -0,0 +1,81 @@
+import { useEffect, useState } from "react";
+import { DataSource, DataSourceEnum } from "../__shared";
+
+type UseLoadSourceData = {
+	action: any;
+	taxonId?: number;
+	placeId?: number;
+	numResults?: number;
+	source?: DataSource;
+	dataUrl?: string;
+	year?: number | string,
+	isSummaryData?: boolean;
+};
+
+/**
+ * This hook handles loading the iNat data from whatever source has been specified (DataSource):
+ *   nothing needs to be done.
+ * - "autoLoad": the user is developing locally and wants to just ping iNat directly for the source
+ * - "url": the user has generated the data sources at a URL somewhere via @imerss/inat-component-utils
+ */
+export const useLoadSourceData = ({
+	taxonId,
+	placeId,
+	numResults,
+	source,
+	dataUrl,
+	year,
+	action,
+	isSummaryData = false
+}: UseLoadSourceData) => {
+	const [loading, setLoading] = useState(false);
+	const [results, setResults] = useState<any>([]);
+
+	useEffect(() => {
+		if (source === DataSourceEnum.autoLoad) {
+			if (!taxonId) {
+				console.error("Please supply a `taxonId` prop for the `autoLoad` source prop option.");
+				return;
+			}
+			if (!placeId) {
+				console.error("Please supply a `placeId` prop for the `autoLoad` source prop option.");
+				return;
+			}
+
+			(async () => {
+				setLoading(true);
+
+				// note that `year` isn't used for recentObservations, but we pass it anyway to get more reusability out
+				// of this hook
+				const obs = await action({ taxonId, placeId, numResults, year });
+				setResults(obs.results);
+				setLoading(false);
+			})();
+		}
+
+		if (source === DataSourceEnum.url) {
+			if (!dataUrl) {
+				console.error("Please supply a `dataUrl` prop for the `url` source prop option.");
+				return;
+			}
+
+			(async () => {
+				setLoading(true);
+				const obs = await fetch(dataUrl);
+				const json = await obs.json();
+
+				// hack workaround. Better solution would have been to standardize the JSON structure at the top-level
+				if (isSummaryData) {
+					setResults(json);
+				} else {
+					setResults(json.results);
+				}
+				setLoading(false);
+			})();
+		}
+	}, [source, dataUrl, taxonId, placeId, year, numResults, isSummaryData]);
+
+	return {
+		loading, results
+	};
+}

package/src/index.ts

@@ -12,4 +12,4 @@ export * from "./components/summary/summary";
 // all typings
 export * from "./__shared";
 
-export default TaxonPanel;
+export default TaxonPanel;

package/src/types/index.d.ts

@@ -0,0 +1,17 @@
+import { TaxonPanelProps } from "../components/taxon-panel/taxon-panel";
+
+export {};
+declare global {
+	interface Window {
+		inatComponents: {
+			initTaxonPanel: (domId: string, taxonPanelProps: TaxonPanelProps) => void;
+		}
+	}
+}
+
+window.initStandalone = window.initStandalone || {};
+
+export enum DataSource {
+	autoLoad = "autoLoad",
+	url = "url"
+}

package/src/types/standalone.d.ts

@@ -0,0 +1,6 @@
+interface InitStandaloneProps {
+	taxonId: number;
+	placeId: number;
+}
+
+export type InitStandalone = (id: string, props: InitStandaloneProps) => void;