@imerss/inat-components 1.1.1 → 2.0.0

package/src/components/favourites/favourites.tsx

@@ -1,20 +1,21 @@
-import React, {useEffect, useState} from "react";
-import {formatDate, C, getFavourites, FavouritesData, BaseComponentProps, DataSource} from "../../__shared";
-import {Observation} from "../observation/observation";
+import React from "react";
+import { formatDate, C, getFavourites, FavouritesData, BaseComponentProps, GeneralClasses } from "../../__shared";
+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 generalStyles from "../shared/css/general.module.scss";
 
 export type FavouritesProps = BaseComponentProps & {
-	year: string | number;
+	year: number | string;
 }
 
-export const FavouritesLabel = (data: FavouritesData) => (
+export const FavouritesLabel = (data: FavouritesData & { classes: GeneralClasses }) => (
 	<div className={generalStyles.obsLabel}>
-		<h3>{data.taxonCommonName || data.taxonName}</h3>
-		<div>{data.observerUsername}</div>
-		<div>{formatDate(data.obsDate)}</div>
-		<label className={generalStyles.count}>{data.numFaves}</label>
+		<h3 className={data.classes?.observationLabelTitle}>{data.taxonCommonName || data.taxonName}</h3>
+		<div className={data.classes?.observationLabelTitle}>{data.observerUsername}</div>
+		<div className={data.classes?.observationLabelDate}>{formatDate(data.obsDate)}</div>
+		<label className={`${data.classes?.observationCount || ''} ${generalStyles.count}`}>{data.numFaves}</label>
 	</div>
 );
 
@@ -23,73 +24,47 @@ export const Favourites = ({
 	source,
 	taxonId,
 	placeId,
-	data,
 	dataUrl,
 	components,
 	className,
-	perPage = C.PER_PAGE
+	tabDesc,
+	generalClasses,
+	itemWidth = C.DEFAULT_ITEM_WIDTH,
+	numResults = C.NUM_RESULTS
 }: FavouritesProps) => {
-	const [observations, setObservations] = useState<any>(() => (source === DataSource.dataProp) ? data : []);
-	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;
-		}
-
-		(async () => {
-			setLoading(true);
-			const resp = await getFavourites({taxonId, placeId, year, perPage});
-			setObservations(resp.results);
-			setLoading(false);
-		})();
-	}, [source, year, placeId, taxonId, 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({
+		year,
+		taxonId,
+		placeId,
+		numResults,
+		dataUrl,
+		source,
+		action: getFavourites
+	});
 	const Load = components?.loader ? components.loader as any : Loader;
 	const Label = components?.label ? components.label as any : FavouritesLabel;
 
-	let classes = generalStyles.panel;
+	let elClasses = generalStyles.panel;
 	if (className) {
-		classes += ` ${className}`;
+		elClasses += ` ${className}`;
+	}
+	let descClasses = generalStyles.tabDesc;
+	if (generalClasses?.tabDesc) {
+		descClasses += ` ${generalClasses.tabDesc}`;
 	}
 	return (
-		<div className={classes}>
+		<div className={elClasses}>
+			{tabDesc && <p className={descClasses}>{tabDesc}</p>}
 			<Load loading={loading}/>
 			{!loading && observations.length === 0 && <NoResults/>}
-			<div className={generalStyles.grid}>
+			<div className={generalStyles.grid} style={{ gridTemplateColumns: `repeat(auto-fit, minmax(${itemWidth}px, 1fr))` }}>
 				{observations.map((obs: any) => (
 					<Observation
 						key={obs.id}
 						imageUrl={obs.imageUrl.replace(/square/, "medium")}
+						itemWidth={itemWidth}
 						linkUrl={obs.obsUrl}>
-						<Label {...obs} />
+						<Label {...obs} classes={generalClasses} />
 					</Observation>
 				))}
 			</div>

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,13 +1,14 @@
-import React, {useCallback} from 'react';
+import React, { useCallback } from "react";
 import styles from "./observation.module.scss";
 
 export type ObservationProps = {
 	imageUrl: string;
 	linkUrl: string;
+	itemWidth: number;
 	children: any;
 };
 
-export const Observation = ({imageUrl, linkUrl, children}: ObservationProps) => {
+export const Observation = ({imageUrl, linkUrl, itemWidth, children}: ObservationProps) => {
 	const gotoObservation = useCallback(() => {
 		window.open(linkUrl);
 	}, [linkUrl]);
@@ -15,8 +16,8 @@ export const Observation = ({imageUrl, linkUrl, children}: ObservationProps) =>
 	return (
 		<article className={styles.obs} onClick={gotoObservation}>
 			<div style={{
-				width: 200,
-				height: 200,
+				width: itemWidth,
+				height: itemWidth,
 				overflow: "hidden",
 				borderRadius: 5,
 				background: `url(${imageUrl}) 50% 50% no-repeat`,

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

@@ -1,17 +1,26 @@
-import React, {useEffect, useState} from "react";
-import {formatDate, C, getRecentObservations, RecentObservationData, BaseComponentProps, DataSource} from "../../__shared";
-import {Observation} from "../observation/observation";
+import React from "react";
+import {
+	formatDate,
+	C,
+	getRecentObservations,
+	RecentObservationData,
+	BaseComponentProps,
+	DataSourceEnum,
+	GeneralClasses
+} from "../../__shared";
+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) => (
+export const RecentObservationLabel = (obs: RecentObservationData & { classes: GeneralClasses }) => (
 	<div className={styles.obsLabel}>
-		<h3>{obs.taxonCommonName || obs.taxonName}</h3>
-		<div>{formatDate(obs.obsDate)}</div>
-		<div>
+		<h3 className={obs.classes?.observationLabelTitle}>{obs.taxonCommonName || obs.taxonName}</h3>
+		<div className={obs.classes?.observationLabelDate}>{formatDate(obs.obsDate)}</div>
+		<div className={obs.classes?.observationLabelName}>
 			<a href={`${C.BASE_URL}/people/${obs.observerUsername}`}
 			   target="_blank"
 			   rel="noreferrer"
@@ -25,74 +34,48 @@ export const RecentObservationLabel = (obs: RecentObservationData) => (
 export const RecentObservations = ({
 	taxonId,
 	placeId,
-	data,
 	dataUrl,
-	source = DataSource.autoLoad,
-	perPage = C.PER_PAGE,
 	components,
-	className
+	className,
+	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;
 
-	let classes = styles.panel;
+	let componentClasses = styles.panel;
 	if (className) {
-		classes += ` ${className}`;
+		componentClasses += ` ${className}`;
 	}
+	let descClasses = styles.tabDesc;
+	if (generalClasses?.tabDesc) {
+		descClasses += ` ${generalClasses.tabDesc}`;
+	}
+
 	return (
-		<div className={classes}>
+		<div className={componentClasses}>
+			{tabDesc && <p className={descClasses}>{tabDesc}</p>}
 			<Load loading={loading}/>
-			<div className={styles.grid}>
+			<div className={styles.grid} style={{ gridTemplateColumns: `repeat(auto-fit, minmax(${itemWidth}px, 1fr))` }}>
 				{!loading && observations.length === 0 && <NoResults/>}
 				{observations.map((obs: RecentObservationData) => (
 					<Observation
 						key={obs.id}
 						imageUrl={obs.imageUrl.replace(/square/, "medium")}
+						itemWidth={itemWidth}
 						linkUrl={obs.obsUrl}>
-						<Label {...obs} />
+						<Label {...obs} classes={generalClasses} />
 					</Observation>
 				))}
 			</div>

package/src/components/shared/css/general.module.scss

@@ -16,7 +16,6 @@
 
 .grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr) );
   width: 100%;
   grid-gap: 8px;
   text-align: center;
@@ -67,3 +66,8 @@
   font-weight: bold;
   font-size: 18px;
 }
+
+.tabDesc {
+  font-size: 14px;
+  margin-bottom: 20px;
+}

package/src/components/summary/ObserverList.tsx

@@ -1,18 +1,24 @@
 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}: { observers: Observer[] }) => (
-	<ul className={styles.top}>
-		{observers.map((obs) => (
-			<li key={obs.id}>
-				<a href={`${C.BASE_URL}/people/${obs.userName}`} target="_blank" rel="noreferrer">
-					{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>
-				</a>
-			</li>
-		))}
-	</ul>
-);
+export const ObserverList = ({ observers, generalClasses, className = '' }: { observers: Observer[], generalClasses?: GeneralClasses, className?: string }) => {
+	let classes = styles.top;
+	if (className) {
+		classes += ` ${className}`;
+	}
+	return (
+		<ul className={classes}>
+			{observers.map((obs) => (
+				<li key={obs.id}>
+					<a href={`${C.BASE_URL}/people/${obs.userName}`} target="_blank" rel="noreferrer">
+						{obs.iconUrl ? <img src={obs.iconUrl || ""} className={styles.avatar} alt="User icon"/> :
+							<div className={styles.noAvatar}/>}
+						<h3>{obs.userName}</h3>
+						<label className={generalClasses?.observationCount}>{numberWithCommas(obs.numObservations)}</label>
+					</a>
+				</li>
+			))}
+		</ul>
+	);
+};

package/src/components/summary/summary.tsx

@@ -1,83 +1,91 @@
-import React, {useEffect, useState} from "react";
-import {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; /// TODO
+    year: number;
+    source: DataSource;
     dataUrl?: string;
+    generalClasses?: GeneralClasses;
+    className?: string;
+    tabDesc?: string;
+    observersListClass?: string;
+    statsCountSummaryClass?: string;
 };
 
-export const Summary = ({ source, data, dataUrl, taxonId, placeId, year }: 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;
-        }
+    let countSummaryClasses = styles.countSummary;
+    if (statsCountSummaryClass) {
+        countSummaryClasses += ` ${statsCountSummaryClass}`;
+    }
+    let descClasses = styles.tabDesc;
+    if (generalClasses?.tabDesc) {
+        descClasses += ` ${generalClasses.tabDesc}`;
+    }
 
-        (async () => {
-            setLoading(true);
-            const obs = await fetch(dataUrl);
-            const json = await obs.json();
-            setSummaryData(json);
-            setLoading(false);
-        })();
-    }, [source, dataUrl]);
+    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={styles.countSummary}>
+            <ul className={countSummaryClasses}>
                 <li>Total number of observers: <b>{summaryData.observers?.totalCount ? numberWithCommas(summaryData.observers.totalCount): ""}</b></li>
                 <li>Total number of observations: <b>{summaryData.observations?.totalCount ? numberWithCommas(summaryData.observations.totalCount): ""}</b></li>
             </ul>
-
             <section>
                 <div className={styles.seasonalityBlock}>
                     <h1>Seasonality</h1>
                     {summaryData.seasonalityData && <SeasonalityGraph data={summaryData.seasonalityData.monthOfYear} />}
                 </div>
-
                 <div className={styles.observersBlock}>
                     <h1>Top observers</h1>
-                    {summaryData.observers?.top && <ObserverList observers={summaryData.observers.top} />}
+                    {summaryData.observers?.top && (
+                        <ObserverList
+                            observers={summaryData.observers.top}
+                            className={observersListClass}
+                            generalClasses={generalClasses}
+                        />
+                    )}
                 </div>
             </section>
         </div>
     );
-}
+}

package/src/components/tabs/tabs.tsx

@@ -1,42 +1,63 @@
 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; // TODO
+    selectedTab: Feature;
+    onChangeTab: (tab: Feature) => void;
+    features: TaxonPanelFeatures;
+    className?: string;
 }
 
-const Tabs = ({ selectedTab, onChangeTab, features }: TabsProps) => {
+const Tabs = ({ selectedTab, onChangeTab, features, className }: TabsProps) => {
     const titles = useFeatureTitles(features);
 
-    return (
-        <ul className={styles.tabs}>
-            {features.recentObservations && (
-                <li onClick={() => onChangeTab(Tab.recent)}
-                    className={selectedTab === Tab.recent ? styles.selected : ""}>
-                    {titles[Tab.recent]}
+    let classes = styles.tabs;
+    if (className) {
+        classes += ` ${className}`;
+    }
+
+    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>
     );
 }