@imerss/inat-components 1.1.1 → 2.0.0

package/src/components/taxon-panel/taxon-panel.tsx

@@ -1,100 +1,106 @@
-import React, {useState} from "react";
-import {getSourceFile, Tab, DataSource, Feature} from "../../__shared";
-import {RecentObservations, RecentObservationsProps} from '../recent-observations/recent-observations';
-import {CommonTaxa} from '../common-taxa/common-taxa';
-import {Favourites} from "../favourites/favourites"
-import {Summary} from "../summary/summary";
+import React, { useMemo, useState } from "react";
+import { C, getSourceFile, DataSource, DataSourceEnum, Feature, GeneralClasses, TaxonPanelFeatures } from "../../__shared";
+import { RecentObservations } from '../recent-observations/recent-observations';
+import { CommonTaxa } from '../common-taxa/common-taxa';
+import { Favourites } from "../favourites/favourites"
+import { Summary } from "../summary/summary";
 import Years from "../year-dropdown/year-dropdown";
 import Tabs from "../tabs/tabs";
-import {useFeatureTitles} from "../hooks/hooks";
-import styles from '../shared/css/general.module.scss';
+import { convertFeaturesToObj, useFeatureTitles } from "../hooks/hooks";
+import styles from "../shared/css/general.module.scss";
 
-const TaxonPanel = ({ taxonId, placeId, dataSource, config, baseURL }: any) => {
-    const [tab, setTab] = useState(Tab.recent);
+export type TaxonPanelProps = {
+    taxon: {
+        id: number;
+        str: string;
+    };
+    place: {
+        id: number;
+        str: string;
+    }
+    dataSourceBaseUrl: string;
+    dataSource: DataSource;
+    features: TaxonPanelFeatures;
+    generalClasses: GeneralClasses;
+    itemWidth?: number;
+}
+
+const TaxonPanel = ({ taxon, place, features, dataSource, dataSourceBaseUrl, itemWidth, generalClasses }: TaxonPanelProps) => {
+    const [tab, setTab] = useState(features[0].feature);
     const [year, setYear] = useState<string>("all");
-    const titles = useFeatureTitles(config.features);
-    const [taxonInfo, setTaxonInfo] = useState(() => config.taxa.find((i) => i.taxonId === taxonId));
-    const [placeInfo, setPlaceInfo] = useState(() => config.places.find((i) => i.placeId === placeId));
+    const featuresObj = useMemo(() => {
+        return convertFeaturesToObj(features);
+    }, [features]);
+    const titles = useFeatureTitles(featuresObj);
+
+    const getProps = (feature: Feature): any => {
+        const props: any = {
+            source: dataSource,
+            itemWidth,
+            tabDesc: featuresObj[feature]?.desc,
+            generalClasses,
+            className: featuresObj[feature]?.className
+        };
+        if (dataSource === DataSourceEnum.url) {
+            props.dataUrl = dataSourceBaseUrl + '/' + getSourceFile(feature, taxon, place, year);
+        } else {
+            props.placeId = place.id;
+            props.taxonId = taxon.id;
+        }
+
+        if (feature !== Feature.stats) {
+            props.numResults = featuresObj[feature]?.numResults;
+        }
+
+        if (feature !== Feature.recentObservations) {
+            props.year = year;
+        }
+
+        return props;
+    };
 
     const getCurrentTab = () => {
         switch (tab) {
-            case Tab.recent: {
-                const props: Partial<RecentObservationsProps> = {
-                    source: dataSource
-                };
-                if (dataSource === DataSource.url) {
-                    props.dataUrl = baseURL + '/' + getSourceFile(Feature.recentObservations, taxonInfo, placeInfo);
-                } else {
-                    props.placeId = placeId;
-                    props.taxonId = taxonId;
-                }
-                return (
-                    <RecentObservations {...props} />
-                );
-            }
+            case Feature.recentObservations:
+                return <RecentObservations {...getProps(Feature.recentObservations)} />;
+            case Feature.commonTaxa:
+                return <CommonTaxa {...getProps(Feature.commonTaxa)} />;
+            case Feature.favourites:
+                return <Favourites {...getProps(Feature.favourites)} />;
 
-            case Tab.commonTaxa: {
-                const props: any = {
-                    source: dataSource,
-                    year
-                };
-                if (dataSource === DataSource.url) {
-                    props.dataUrl = baseURL + '/' + getSourceFile(Feature.commonTaxa, taxonInfo, placeInfo, year);
-                } else {
-                    props.placeId = placeId;
-                    props.taxonId = taxonId;
-                }
+            case Feature.stats:
                 return (
-                    <CommonTaxa {...props} />
+                    <Summary
+                        {...getProps(Feature.stats)}
+                        observersListClass={featuresObj[Feature.stats]?.observersListClass}
+                        statsCountSummaryClass={featuresObj[Feature.stats]?.statsCountSummaryClass}
+                    />
                 );
-            }
-
-            case Tab.favourites: {
-                const props: any = {
-                    source: dataSource,
-                    year
-                };
-                if (dataSource === DataSource.url) {
-                    props.dataUrl = baseURL + '/' + getSourceFile(Feature.favourites, taxonInfo, placeInfo, year);
-                } else {
-                    props.placeId = placeId;
-                    props.taxonId = taxonId;
-                }
-                return (
-                    <Favourites {...props} />
-                );
-            }
-
-            case Tab.stats: {
-                const props: any = {
-                    source: dataSource,
-                    year
-                };
-                if (dataSource === DataSource.url) {
-                    props.dataUrl = baseURL + '/' + getSourceFile(Feature.stats, taxonInfo, placeInfo, year);
-                } else {
-                    props.placeId = placeId;
-                    props.taxonId = taxonId;
-                }
-                return <Summary {...props} />;
-            }
         }
     };
 
+    const tabsClass = generalClasses?.tabsElement || '';
+    const yearDropdownClass = generalClasses?.yearsDropdown || '';
+
     return (
         <div className={styles.page}>
-            <Tabs
+            {features.length > 1 && <Tabs
                 selectedTab={tab}
                 onChangeTab={setTab}
-                features={config.features}
-            />
+                features={features}
+                className={tabsClass}
+            />}
             <div>
-                {tab !== Tab.recent && (
-                    <div style={{ float: "right" }}>
-                        <Years value={year} onChange={setYear} />
+                {tab !== Feature.recentObservations && (
+                    <div style={{ float: "right" }} className={yearDropdownClass}>
+                        <Years
+                            value={year}
+                            numYears={featuresObj[tab]?.numYears || C.DEFAULT_NUM_YEARS}
+                            onChange={setYear}
+                        />
                     </div>
                 )}
-                <h1>{titles[tab]}</h1>
+                <h1 className={generalClasses?.pageHeadings}>{titles[tab]}</h1>
             </div>
             {getCurrentTab()}
         </div>

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;