@imerss/inat-components 1.1.2 → 2.0.0

package/src/components/hooks/hooks.tsx

@@ -1,11 +1,11 @@
-import {useEffect, useState} from "react";
-import {Tab} from "../../__shared";
+import { useEffect, useState } from "react";
+import { Feature, TaxonPanelFeatures } from "../../__shared";
 
 const defaultTitles = {
-    [Tab.recent]: "Recent",
-    [Tab.commonTaxa]: "Most common",
-    [Tab.favourites]: "Most favourited",
-    [Tab.stats]: "General stats"
+    [Feature.recentObservations]: "Recent",
+    [Feature.commonTaxa]: "Most common",
+    [Feature.favourites]: "Most favourited",
+    [Feature.stats]: "General stats"
 };
 
 export const useFeatureTitles = (features: any) => {
@@ -13,12 +13,22 @@ export const useFeatureTitles = (features: any) => {
 
     useEffect(() => {
         setTitles({
-            [Tab.recent]: features.recentObservations?.label || defaultTitles[Tab.recent],
-            [Tab.commonTaxa]: features.commonTaxa?.label || defaultTitles[Tab.commonTaxa],
-            [Tab.favourites]: features.favourites?.label || defaultTitles[Tab.favourites],
-            [Tab.stats]: features.stats?.label || defaultTitles[Tab.stats]
+            [Feature.recentObservations]: features.recentObservations?.title || defaultTitles[Feature.recentObservations],
+            [Feature.commonTaxa]: features.commonTaxa?.title || defaultTitles[Feature.commonTaxa],
+            [Feature.favourites]: features.favourites?.title || defaultTitles[Feature.favourites],
+            [Feature.stats]: features.stats?.title || defaultTitles[Feature.stats]
         });
     }, [features]);
 
     return titles;
 };
+
+export const convertFeaturesToObj = (features: TaxonPanelFeatures) => {
+    const featuresObj: any = {};
+    features.forEach((row) => {
+        const { feature, ...other } = row;
+        featuresObj[feature] = other;
+    });
+
+    return featuresObj;
+}

package/src/components/loader/loader.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import LoadingSpinner from "react-spinners/MoonLoader.js"; // TODO. Interesting. Why is this required?
+import LoadingSpinner from "react-spinners/MoonLoader.js";
 import styles from "../shared/css/general.module.scss";
 
 export type LoaderProps = {

package/src/components/observation/observation.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react';
+import React, { useCallback } from "react";
 import styles from "./observation.module.scss";
 
 export type ObservationProps = {

package/src/components/recent-observations/recent-observations.tsx

@@ -1,21 +1,22 @@
-import React, {useEffect, useState} from "react";
+import React from "react";
 import {
 	formatDate,
 	C,
 	getRecentObservations,
 	RecentObservationData,
 	BaseComponentProps,
-	DataSource,
-	BaseClasses
+	DataSourceEnum,
+	GeneralClasses
 } from "../../__shared";
-import {Observation} from "../observation/observation";
+import { Observation } from "../observation/observation";
 import Loader from "../loader/loader";
-import {NoResults} from "../no-results/no-results";
+import { NoResults } from "../no-results/no-results";
+import { useLoadSourceData } from "../../hooks/useLoadSourceData";
 import styles from "../shared/css/general.module.scss";
 
 export type RecentObservationsProps = BaseComponentProps;
 
-export const RecentObservationLabel = (obs: RecentObservationData & { classes: BaseClasses }) => (
+export const RecentObservationLabel = (obs: RecentObservationData & { classes: GeneralClasses }) => (
 	<div className={styles.obsLabel}>
 		<h3 className={obs.classes?.observationLabelTitle}>{obs.taxonCommonName || obs.taxonName}</h3>
 		<div className={obs.classes?.observationLabelDate}>{formatDate(obs.obsDate)}</div>
@@ -33,59 +34,23 @@ export const RecentObservationLabel = (obs: RecentObservationData & { classes: B
 export const RecentObservations = ({
 	taxonId,
 	placeId,
-	data,
 	dataUrl,
-	source = DataSource.autoLoad,
-	perPage = C.PER_PAGE,
-	itemWidth = C.DEFAULT_ITEM_WIDTH,
 	components,
 	className,
-	classes,
-	tabDesc
+	generalClasses,
+	tabDesc,
+	source = DataSourceEnum.autoLoad,
+	numResults = C.NUM_RESULTS,
+	itemWidth = C.DEFAULT_ITEM_WIDTH
 }: RecentObservationsProps) => {
-	const [loading, setLoading] = useState(false);
-	const [observations, setObservations] = useState<any>(() => (source === DataSource.dataProp) ? data : []);
-
-	useEffect(() => {
-		if (source !== DataSource.autoLoad) {
-			return;
-		}
-		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);
-			const obs = await getRecentObservations({taxonId, placeId, perPage});
-			setObservations(obs.results);
-			setLoading(false);
-		})();
-	}, [source, taxonId, placeId, perPage]);
-
-	useEffect(() => {
-		if (source !== DataSource.url) {
-			return;
-		}
-
-		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();
-			setObservations(json.results);
-			setLoading(false);
-		})();
-	}, [source, dataUrl]);
-
+	const { loading, results: observations } = useLoadSourceData({
+		taxonId,
+		placeId,
+		numResults,
+		dataUrl,
+		source,
+		action: getRecentObservations
+	});
 	const Load = components?.loader ? components.loader as any : Loader;
 	const Label = components?.label ? components.label as any : RecentObservationLabel;
 
@@ -94,9 +59,10 @@ export const RecentObservations = ({
 		componentClasses += ` ${className}`;
 	}
 	let descClasses = styles.tabDesc;
-	if (classes?.tabDesc) {
-		descClasses += ` ${classes.tabDesc}`;
+	if (generalClasses?.tabDesc) {
+		descClasses += ` ${generalClasses.tabDesc}`;
 	}
+
 	return (
 		<div className={componentClasses}>
 			{tabDesc && <p className={descClasses}>{tabDesc}</p>}
@@ -109,7 +75,7 @@ export const RecentObservations = ({
 						imageUrl={obs.imageUrl.replace(/square/, "medium")}
 						itemWidth={itemWidth}
 						linkUrl={obs.obsUrl}>
-						<Label {...obs} classes={classes} />
+						<Label {...obs} classes={generalClasses} />
 					</Observation>
 				))}
 			</div>

package/src/components/summary/ObserverList.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import {numberWithCommas, Observer, C} from "../../__shared";
+import { numberWithCommas, Observer, C, GeneralClasses } from "../../__shared";
 import styles from "./summary.module.scss";
 
-export const ObserverList = ({observers, className = ''}: { observers: Observer[], className?: string }) => {
+export const ObserverList = ({ observers, generalClasses, className = '' }: { observers: Observer[], generalClasses?: GeneralClasses, className?: string }) => {
 	let classes = styles.top;
 	if (className) {
 		classes += ` ${className}`;
@@ -15,7 +15,7 @@ export const ObserverList = ({observers, className = ''}: { observers: Observer[
 						{obs.iconUrl ? <img src={obs.iconUrl || ""} className={styles.avatar} alt="User icon"/> :
 							<div className={styles.noAvatar}/>}
 						<h3>{obs.userName}</h3>
-						<label>{numberWithCommas(obs.numObservations)}</label>
+						<label className={generalClasses?.observationCount}>{numberWithCommas(obs.numObservations)}</label>
 					</a>
 				</li>
 			))}

package/src/components/summary/summary.tsx

@@ -1,76 +1,69 @@
-import React, {useEffect, useState} from "react";
-import {BaseClasses, numberWithCommas, DataSource, getSummary, FavouritesRespData} from "../../__shared";
+import React from "react";
+import { numberWithCommas, DataSource, getSummary, GeneralClasses } from "../../__shared";
 import { ObserverList } from './ObserverList';
 import Loader from "../loader/loader";
-import {SeasonalityGraph} from "../seasonality-graph/seasonality-graph";
+import { SeasonalityGraph } from "../seasonality-graph/seasonality-graph";
 import styles from "./summary.module.scss";
+import { useLoadSourceData } from "../../hooks/useLoadSourceData";
 
 export type SummaryProps = {
-    source: DataSource;
     taxonId: number;
     placeId: number;
-    year: string | number;
-    data?: FavouritesRespData;
+    year: number;
+    source: DataSource;
     dataUrl?: string;
-    classes?: BaseClasses;
+    generalClasses?: GeneralClasses;
+    className?: string;
     tabDesc?: string;
+    observersListClass?: string;
+    statsCountSummaryClass?: string;
 };
 
-export const Summary = ({ source, data, dataUrl, taxonId, placeId, year, classes, tabDesc }: SummaryProps) => {
-    const [summaryData, setSummaryData] = useState<any>({});
-    const [loading, setLoading] = useState(false);
-
-    useEffect(() => {
-        if (source !== DataSource.autoLoad) {
-            return;
-        }
-        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;
-        }
+export const Summary = ({
+    source,
+    dataUrl,
+    taxonId,
+    placeId,
+    year,
+    generalClasses,
+    className,
+    tabDesc,
+    observersListClass,
+    statsCountSummaryClass
+}: SummaryProps) => {
+    const { loading, results: summaryData } = useLoadSourceData({
+        year,
+        taxonId,
+        placeId,
+        dataUrl,
+        source,
+        isSummaryData: true,
 
-        (async () => {
-            setLoading(true);
-            const data = await getSummary({ taxonId, placeId, year });
-            setSummaryData(data);
-            setLoading(false);
-        })();
-    }, [source, year, placeId, taxonId]);
+        // shim to standardize the response from the `action` method with a top-level `results` property. This
+        // just lets the useLoadSourceData hook work for all tab components
+        action: async (data) => {
+            const results = await getSummary(data);
 
-    useEffect(() => {
-        if (source !== DataSource.url) {
-            return;
+            return { results };
         }
-
-        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();
-            setSummaryData(json);
-            setLoading(false);
-        })();
-    }, [source, dataUrl]);
+    });
 
     let countSummaryClasses = styles.countSummary;
-    if (classes?.statsCountSummary) {
-        countSummaryClasses += ` ${classes.statsCountSummary}`;
+    if (statsCountSummaryClass) {
+        countSummaryClasses += ` ${statsCountSummaryClass}`;
     }
     let descClasses = styles.tabDesc;
-    if (classes?.tabDesc) {
-        descClasses += ` ${classes.tabDesc}`;
+    if (generalClasses?.tabDesc) {
+        descClasses += ` ${generalClasses.tabDesc}`;
+    }
+
+    let classList = styles.summaryPage;
+    if (className) {
+        classList += ` ${className}`;
     }
 
     return (
-        <div className={styles.summaryPage}>
+        <div className={classList}>
             {tabDesc && <p className={descClasses}>{tabDesc}</p>}
             <Loader loading={loading} />
             <ul className={countSummaryClasses}>
@@ -84,9 +77,15 @@ export const Summary = ({ source, data, dataUrl, taxonId, placeId, year, classes
                 </div>
                 <div className={styles.observersBlock}>
                     <h1>Top observers</h1>
-                    {summaryData.observers?.top && <ObserverList observers={summaryData.observers.top} className={classes?.observersList} />}
+                    {summaryData.observers?.top && (
+                        <ObserverList
+                            observers={summaryData.observers.top}
+                            className={observersListClass}
+                            generalClasses={generalClasses}
+                        />
+                    )}
                 </div>
             </section>
         </div>
     );
-}
+}

package/src/components/tabs/tabs.tsx

@@ -1,12 +1,12 @@
 import React from "react";
-import {Tab} from "../../__shared";
+import { Feature, TaxonPanelFeatures } from "../../__shared";
 import styles from "./tabs.module.scss";
-import {useFeatureTitles} from "../hooks/hooks";
+import { useFeatureTitles } from "../hooks/hooks";
 
 export type TabsProps = {
-    selectedTab: Tab;
-    onChangeTab: (tab: Tab) => void;
-    features: any;
+    selectedTab: Feature;
+    onChangeTab: (tab: Feature) => void;
+    features: TaxonPanelFeatures;
     className?: string;
 }
 
@@ -18,31 +18,46 @@ const Tabs = ({ selectedTab, onChangeTab, features, className }: TabsProps) => {
         classes += ` ${className}`;
     }
 
-    return (
-        <ul className={classes}>
-            {features.recentObservations && (
-                <li onClick={() => onChangeTab(Tab.recent)}
-                    className={selectedTab === Tab.recent ? styles.selected : ""}>
-                    {titles[Tab.recent]}
+    const items = features.map((item) => {
+        if (item.feature == Feature.recentObservations) {
+            return (
+                <li key={Feature.recentObservations}
+                    onClick={() => onChangeTab(Feature.recentObservations)}
+                    className={selectedTab === Feature.recentObservations ? styles.selected : ""}>
+                    {titles[Feature.recentObservations]}
                 </li>
-            )}
-            {features.commonTaxa && (
-                <li onClick={() => onChangeTab(Tab.commonTaxa)}
-                    className={selectedTab === Tab.commonTaxa ? styles.selected : ""}>
-                    {titles[Tab.commonTaxa]}
+            );
+        } else if (item.feature == Feature.commonTaxa) {
+            return (
+                <li key={Feature.commonTaxa}
+                    onClick={() => onChangeTab(Feature.commonTaxa)}
+                    className={selectedTab === Feature.commonTaxa ? styles.selected : ""}>
+                    {titles[Feature.commonTaxa]}
                 </li>
-            )}
-            {features.favourites && (
-                <li onClick={() => onChangeTab(Tab.favourites)}
-                    className={selectedTab === Tab.favourites ? styles.selected : ""}>
-                    {titles[Tab.favourites]}
+            );
+        } else if (item.feature == Feature.favourites) {
+            return (
+                <li key={Feature.favourites}
+                    onClick={() => onChangeTab(Feature.favourites)}
+                    className={selectedTab === Feature.favourites ? styles.selected : ""}>
+                    {titles[Feature.favourites]}
                 </li>
-            )}
-            {features.stats && (
-                <li onClick={() => onChangeTab(Tab.stats)} className={selectedTab === Tab.stats ? styles.selected : ""}>
-                    {titles[Tab.stats]}
+            );
+        } else if (item.feature == Feature.stats) {
+            return (
+                <li key={Feature.stats} onClick={() => onChangeTab(Feature.stats)} className={selectedTab === Feature.stats ? styles.selected : ""}>
+                    {titles[Feature.stats]}
                 </li>
-            )}
+            );
+        }
+
+        // possibly a user has included something wacky
+        return undefined;
+    });
+
+    return (
+        <ul className={classes}>
+            {items}
         </ul>
     );
 }

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

@@ -1,127 +1,106 @@
-import React, {useState} from "react";
-import {getSourceFile, Tab, DataSource, Feature, ConfigFile, BaseClasses, TabDescs} 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";
 
 export type TaxonPanelProps = {
-    taxonId: number;
-    placeId: number;
+    taxon: {
+        id: number;
+        str: string;
+    };
+    place: {
+        id: number;
+        str: string;
+    }
+    dataSourceBaseUrl: string;
     dataSource: DataSource;
-    config: ConfigFile;
-    baseUrl: string;
+    features: TaxonPanelFeatures;
+    generalClasses: GeneralClasses;
     itemWidth?: number;
-    classes?: BaseClasses;
-    tabDescs?: TabDescs;
 }
 
-const TaxonPanel = ({ taxonId, placeId, dataSource, config, baseUrl, itemWidth, classes, tabDescs }: TaxonPanelProps) => {
-    const [tab, setTab] = useState(Tab.recent);
+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] = useState(() => config.taxa.find((i) => i.taxonId === taxonId));
-    const [placeInfo] = 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;
+    };
 
-    console.log("..." , classes);
     const getCurrentTab = () => {
         switch (tab) {
-            case Tab.recent: {
-                const props: Partial<RecentObservationsProps> = {
-                    source: dataSource,
-                    itemWidth,
-                    classes,
-                    tabDesc: tabDescs?.recentDesc
-                };
-                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 = {
-                    classes,
-                    source: dataSource,
-                    itemWidth,
-                    year,
-                    tabDesc: tabDescs?.mostCommonDesc
-                };
-                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 = {
-                    classes,
-                    itemWidth,
-                    source: dataSource,
-                    year,
-                    tabDesc: tabDescs?.mostFavouritedDesc
-                };
-                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 = {
-                    classes,
-                    source: dataSource,
-                    year,
-                    tabDesc: tabDescs?.generalStatsDesc
-                };
-                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 = classes?.tabs || '';
-    const yearDropdownClass = classes?.yearsDropdown || '';
+    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 && (
+                {tab !== Feature.recentObservations && (
                     <div style={{ float: "right" }} className={yearDropdownClass}>
-                        <Years value={year} onChange={setYear} />
+                        <Years
+                            value={year}
+                            numYears={featuresObj[tab]?.numYears || C.DEFAULT_NUM_YEARS}
+                            onChange={setYear}
+                        />
                     </div>
                 )}
-                <h1 className={classes?.pageHeadings}>{titles[tab]}</h1>
+                <h1 className={generalClasses?.pageHeadings}>{titles[tab]}</h1>
             </div>
             {getCurrentTab()}
         </div>