@imerss/inat-components 1.0.0

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@imerss/inat-components",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "rollup -c",
+    "watch": "rollup -cw"
+  },
+  "dependencies": {
+    "date-fns": "^2.28.0",
+    "react-spinners": "^0.13.2",
+    "sleep-promise": "^9.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@modular-css/rollup": "^28.2.2",
+    "@rollup/plugin-typescript": "^8.3.3",
+    "@testing-library/react": "^13.3.0",
+    "@types/cli-progress": "^3.11.0",
+    "@types/jest": "^28.1.4",
+    "jest": "^28.1.2",
+    "node-sass": "^7.0.1",
+    "postcss": "^8.4.14",
+    "react-charts": "3.0.0-beta.38",
+    "rollup": "^2.75.7",
+    "rollup-plugin-dts": "^4.2.2",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tslib": "^2.4.0",
+    "typescript": "^4.7.4"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/public/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>iNat components</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

package/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/rollup.config.js

@@ -0,0 +1,36 @@
+import typescript from "@rollup/plugin-typescript";
+import postcss from "rollup-plugin-postcss";
+import dts from "rollup-plugin-dts";
+
+export default [
+    // front-end components + generate() node utils method, exposed as "@imerss/inat-components"
+    {
+        input: "src/index.ts",
+        output: {
+            dir: "dist",
+            format: "es"
+        },
+        external: [
+            "react"
+        ],
+        plugins: [
+            postcss({
+                modules: true,
+                plugins: []
+            }),
+            typescript()
+        ]
+    },
+
+    // not beautiful, but rolls up all typings for export
+    {
+        input: "src/index.ts",
+        output: {
+            dir: "dist",
+            format: "es"
+        },
+        plugins: [
+            dts()
+        ]
+    }
+];

package/src/__shared/api/common-taxa.ts

@@ -0,0 +1,56 @@
+import * as C from "../constants";
+
+export type CommonTaxaCallProps = {
+    year: string | number;
+    taxonId: string | number;
+    placeId: string | number;
+    perPage: number;
+};
+
+export type CommonTaxData = {
+    id: number;
+    imageUrl: string;
+    taxonName: string;
+    taxonCommonName: string;
+    obsCount: number;
+}
+
+export type CommonTaxaRespData = {
+    totalResults: number;
+    results: [CommonTaxData]
+}
+
+export const getCommonTaxa = async ({ year, taxonId, placeId, perPage }: CommonTaxaCallProps): Promise<CommonTaxaRespData> => {
+    let url = `${C.BASE_API_URL}/v1/observations/species_counts?verifiable=true&spam=false&place_id=${placeId}&taxon_id=${taxonId}&locale=en-US&per_page=${perPage}`;
+    if (year !== "all") {
+        url += `&d1=${year}-01-01&d2=${year}-12-31`;
+    }
+
+    const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+            Accept: 'application/json'
+        }
+    });
+
+    const resp = await response.json();
+    const sortedTaxa = resp.results.sort((a: any, b: any) => {
+        if (a.count > b.count) {
+            return -1;
+        } else if (a.count < b.count) {
+            return 1;
+        }
+        return 0;
+    });
+
+    return {
+        totalResults: resp.total_results,
+        results: sortedTaxa.map((row: any) => ({
+            id: row.taxon.id,
+            imageUrl: row.taxon?.default_photo?.square_url || "",
+            obsCount: row.count,
+            taxonName: row.taxon.name || "",
+            taxonCommonName: row.taxon.preferred_common_name
+        }))
+    };
+};

package/src/__shared/api/favourites.ts

@@ -0,0 +1,61 @@
+import * as C from "../constants";
+
+export type FavouritesCallProps = {
+    year: string | number;
+    taxonId: string | number;
+    placeId: string | number;
+    perPage: number;
+};
+
+export type FavouritesData = {
+    id: number;
+    imageUrl: string;
+    taxonName: string;
+    taxonCommonName: string;
+    obsDate: string;
+    obsCount: number;
+    observerUsername: string;
+    numFaves: number;
+}
+
+export type FavouritesRespData = {
+    totalResults: number;
+    results: [FavouritesData]
+}
+
+export const getFavourites = async ({ year, taxonId, placeId, perPage }: FavouritesCallProps): Promise<FavouritesRespData> => {
+    let url = `${C.BASE_API_URL}/v1/observations?verifiable=true&order_by=votes&order=desc&page=1&spam=false&place_id=${placeId}&taxon_id=${taxonId}&locale=en-US&per_page=${perPage}`;
+    if (year !== "all") {
+        url += `&d1=${year}-01-01&d2=${year}-12-31`;
+    }
+
+    const response = await fetch(url, {
+        // method: 'GET',
+        // headers: {
+        //     Accept: 'application/json'
+        // }
+    });
+
+    const resp = await response.json();
+    const sortedTaxa = resp.results.filter((i: any) => i.faves.length > 0).sort((a: any, b: any) => {
+        if (a.faves.length > b.faves.length) {
+            return -1;
+        } else if (a.faves.length < b.faves.length) {
+            return 1;
+        }
+        return 0;
+    });
+
+    return {
+        totalResults: resp.total_results,
+        results: sortedTaxa.map((row: any) => ({
+            id: row.id,
+            imageUrl: row.taxon?.default_photo?.square_url || "",
+            obsDate: row.observed_on_string,
+            obsUrl: row.uri,
+            taxonName: row.taxon.name || "",
+            taxonCommonName: row.taxon.preferred_common_name,
+            numFaves: row.faves.length
+        }))
+    };
+};

package/src/__shared/api/index.ts

@@ -0,0 +1,4 @@
+export * from "./common-taxa";
+export * from "./favourites";
+export * from "./recent-observations";
+export * from "./summary";

package/src/__shared/api/recent-observations.ts

@@ -0,0 +1,43 @@
+import * as C from "../constants";
+
+export type RecentObservationsCallProps = {
+    taxonId: string | number;
+    placeId: string | number;
+    perPage: number;
+};
+
+export type RecentObservationData = {
+    id: number;
+    imageUrl: string;
+    obsUrl: string;
+    obsDate: string;
+    taxonName: string;
+    taxonCommonName: string;
+    observerUsername: string;
+}
+
+export type RecentObservationsRespData = {
+    totalResults: number;
+    results: [RecentObservationData]
+}
+
+export const getRecentObservations = async ({ taxonId, placeId, perPage }: RecentObservationsCallProps): Promise<RecentObservationsRespData> => {
+    const url = `${C.BASE_API_URL}/v1/observations?photos=true&per_page=${perPage}&taxon_id=${taxonId}&place_id=${placeId}&order=desc&order_by=observed_on`;
+    const response = await fetch(url);
+    const obs = await response.json();
+
+    return {
+        totalResults: obs.total_results,
+        results: obs.results.map((obs: any) => {
+            return {
+                id: obs.id,
+                imageUrl: obs.observation_photos[0].photo.url,
+                obsUrl: obs.uri,
+                obsDate: obs.observed_on_string,
+                taxonName: obs?.taxon?.name || "",
+                taxonCommonName: obs?.taxon.preferred_common_name,
+                observerUsername: obs.user.login
+            }
+        })
+    };
+};

package/src/__shared/api/summary.ts

@@ -0,0 +1,84 @@
+import * as C from '../constants';
+
+export type SummaryApiProps = {
+    taxonId: number;
+    placeId: number;
+    year: string | number;
+}
+
+export const getSummary = async ({ taxonId, placeId, year }: SummaryApiProps): Promise<any> => {
+    const observers = await getObserverSummary(taxonId, placeId, year);
+    const observations = await getObservationSummary(taxonId, placeId, year);
+    const seasonalityData = await getSeasonalityData(taxonId, placeId, year);
+
+    return {
+        observers,
+        observations,
+        seasonalityData
+    };
+};
+
+export type Observer = {
+    id: number;
+    userName: string;
+    numObservations: number;
+    iconUrl: string | null;
+}
+export type SummaryData = {
+    totalCount: number;
+    top: [Observer];
+}
+
+export const getObserverSummary = async (taxonId: number, placeId: number, year: string | number): Promise<SummaryData> => {
+    let url = `${C.BASE_API_URL}/v1/observations/observers?verifiable=true&order_by=votes&order=desc&page=1&spam=false&place_id=${placeId}&taxon_id=${taxonId}&locale=en-US&per_page=10`;
+    if (year !== "all") {
+        url += `&d1=${year}-01-01&d2=${year}-12-31`;
+    }
+
+    const response = await fetch(url);
+    const data = await response.json();
+
+    return {
+        totalCount: data.total_results,
+        top: data.results.map((result: any) => ({
+            id: result.user.id,
+            userName: result.user.login,
+            numObservations: result.observation_count,
+            iconUrl: result.user.icon_url
+        }))
+    };
+};
+
+export const getObservationSummary = async(taxonId: number, placeId: number, year: string | number) => {
+    let url = `${C.BASE_API_URL}/v1/observations?photos=true&per_page=1&taxon_id=${taxonId}&place_id=${placeId}&order=desc&order_by=observed_on`;
+    if (year !== "all") {
+        url += `&d1=${year}-01-01&d2=${year}-12-31`;
+    }
+
+    const response = await fetch(url);
+    const data = await response.json();
+
+    return {
+        totalCount: data.total_results
+    };
+}
+
+export type SeasonalityData = {
+    monthOfYear: {
+        [monthNum: string]: number
+    }
+}
+
+export const getSeasonalityData = async (taxonId: number, placeId: number, year: string | number): Promise<SeasonalityData> => {
+    let url = `${C.BASE_API_URL}/v1/observations/histogram?verifiable=true&taxon_id=${taxonId}&place_id=${placeId}&locale=en-US&date_field=observed&interval=month_of_year`;
+    if (year !== "all") {
+        url += `&d1=${year}-01-01&d2=${year}-12-31`;
+    }
+
+    const response = await fetch(url);
+    const resp = await response.json();
+
+    return {
+        monthOfYear: resp.results.month_of_year
+    };
+};

package/src/__shared/constants.ts

@@ -0,0 +1,4 @@
+export const BASE_API_URL = 'https://api.inaturalist.org';
+export const PER_PAGE = 100;
+export const BASE_URL = "https://www.inaturalist.org"; // /people/name_here
+export const ERROR_LOG_FILENAME = "inat-components-error.log";

package/src/__shared/index.ts

@@ -0,0 +1,4 @@
+export * from "./api";
+export * from "./utils";
+export * as C from "./constants";
+export * from "./typings";

package/src/__shared/typings.ts

@@ -0,0 +1,69 @@
+export type ConfigFile = {
+	taxa: TaxaConfig[];
+	places: PlaceConfig[];
+	features: {
+		[Feature.commonTaxa]?: {
+			numResults?: number;
+		};
+		[Feature.favourites]?: {
+			numResults?: number;
+			numYears?: number;
+		};
+		[Feature.recentObservations]?: {
+			numResults?: number;
+			numYears?: number;
+		};
+		[Feature.stats]?: {
+			numTopObservers?: number;
+		};
+	}
+}
+
+export enum DataSource {
+	autoLoad = "autoLoad",
+	dataProp = "dataProp",
+	url = "url"
+}
+
+export enum Feature {
+	commonTaxa = "commonTaxa",
+	favourites = "favourites",
+	recentObservations = "recentObservations",
+	stats = "stats"
+}
+
+// I know this is duplicated, but it's very possible they could be different in future
+export enum Tab {
+	recent = "recent",
+	commonTaxa = "commonTaxa",
+	favourites = "favourites",
+	stats = "stats"
+}
+
+export type BaseComponentProps = {
+	taxonId?: number;
+	placeId?: number;
+	filename?: string;
+	perPage?: number;
+	source?: DataSource;
+	data?: any;
+	dataUrl?: string;
+	className?: string;
+	components?: {
+		label?: any;
+		error?: any;
+		loader?: any;
+	};
+};
+
+export type TaxaConfig = {
+	label: string;
+	short: string;
+	taxonId: number;
+}
+
+export type PlaceConfig = {
+	label: string;
+	short: string;
+	placeId: number;
+}

package/src/__shared/utils/configUtils.ts

@@ -0,0 +1,21 @@
+import {Feature, PlaceConfig, TaxaConfig} from "../typings";
+
+/*
+ * Note that right now the source filenames aren't configurable.
+ */
+export const getSourceFile = (api: Feature, taxonInfo: TaxaConfig, placeInfo: PlaceConfig, year?: string | number): string => {
+	const yearStr = year === "all" ? "allyears" : year;
+
+	let filename = "";
+	if (api === Feature.recentObservations) {
+		filename = `${taxonInfo.short}-${placeInfo.short}-recent.json`;
+	} else if (api === Feature.commonTaxa) {
+		filename = `${taxonInfo.short}-${placeInfo.short}-${yearStr}-commonTaxa.json`;
+	} else if (api === Feature.favourites) {
+		filename = `${taxonInfo.short}-${placeInfo.short}-${yearStr}-favourites.json`;
+	} else if (api === Feature.stats) {
+		filename = `${taxonInfo.short}-${placeInfo.short}-${yearStr}-stats.json`;
+	}
+
+	return filename;
+};

package/src/__shared/utils/dateUtils.ts

@@ -0,0 +1,14 @@
+import {format} from "date-fns";
+
+export const getCurrentYear = () => new Date().getFullYear();
+
+// not 100% this shows the date in the right timezone, but it's fine for BC
+export const formatDate = (date: string, dateFormat = "MMM do, h:mm b"): any => {
+	let formattedDate = "";
+	try {
+		formattedDate = format(Date.parse(date), dateFormat);
+	} catch (e) {
+		console.log("Failed to parse date: ", date);
+	}
+	return formattedDate;
+}

package/src/__shared/utils/index.ts

@@ -0,0 +1,3 @@
+export * from "./configUtils";
+export * from "./dateUtils";
+export * from "./numberUtils";

package/src/__shared/utils/numberUtils.ts

@@ -0,0 +1 @@
+export const numberWithCommas = (x: number) => (x || 0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

package/src/components/common-taxa/__tests__/common-taxa.test.tsx

@@ -0,0 +1,14 @@
+import {render} from '@testing-library/react';
+
+import { CommonTaxa } from '../common-taxa';
+
+const defaultProps = {
+	year: 2022
+};
+
+describe('CommonTaxa', () => {
+	it('should render successfully', () => {
+		const {baseElement} = render(<CommonTaxa {...defaultProps} />);
+		expect(baseElement).toBeTruthy();
+	});
+});

package/src/components/common-taxa/common-taxa.tsx

@@ -0,0 +1,99 @@
+import React, {useEffect, useState} from 'react';
+import {numberWithCommas, C, CommonTaxData, getCommonTaxa, BaseComponentProps, DataSource} from "../../__shared";
+import {Observation} from "../observation/observation";
+import Loader from "../loader/loader";
+import Error from "../error/error";
+import {NoResults} from "../no-results/no-results";
+import styles from "../shared/css/general.module.scss";
+
+export type CommonTaxaProps = BaseComponentProps & {
+	year: string | number;
+}
+
+export const CommonTaxaLabel = (data: CommonTaxData) => (
+	<div className={styles.obsLabel}>
+		<h3>{data.taxonCommonName || data.taxonName}</h3>
+		<label className={styles.count}>{numberWithCommas(data.obsCount)}</label>
+	</div>
+);
+
+export const CommonTaxa = ({
+	year,
+	source,
+	taxonId,
+	placeId,
+	perPage = C.PER_PAGE,
+	data,
+	dataUrl,
+	components,
+	className
+}: CommonTaxaProps) => {
+	const [taxa, setTaxa] = 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 getCommonTaxa({taxonId, placeId, year, perPage});
+			setTaxa(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();
+			setTaxa(json.results);
+			setLoading(false);
+		})();
+	}, [source, dataUrl]);
+
+	const Load = components?.loader ? components.loader as any : Loader;
+	const Label = components?.label ? components.label as any : CommonTaxaLabel;
+	const ErrorMsg = components?.error ? components.error as any : Error;
+
+	let classes = styles.panel;
+	if (className) {
+		classes += ` ${className}`;
+	}
+
+	return (
+		<div className={classes}>
+			<Load loading={loading}/>
+			{!loading && taxa.length === 0 && <NoResults/>}
+			<div className={styles.grid}>
+				{taxa.map((data: CommonTaxData) => (
+					<Observation
+						key={data.id}
+						imageUrl={data.imageUrl.replace(/square/, "medium")}
+						linkUrl={`${C.BASE_URL}/${data.id}`}>
+						<Label {...data} />
+					</Observation>
+				))}
+			</div>
+		</div>
+	)
+};

package/src/components/error/__tests__/error.test.tsx

@@ -0,0 +1,9 @@
+import {render} from '@testing-library/react';
+import Error from '../error';
+
+describe('Error', () => {
+	it('should render successfully', () => {
+		const {baseElement} = render(<Error />);
+		expect(baseElement).toBeTruthy();
+	});
+});

package/src/components/error/error.module.scss

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

package/src/components/error/error.tsx

@@ -0,0 +1,15 @@
+import styles from './error.module.scss';
+
+/* eslint-disable-next-line */
+export interface ErrorProps {
+}
+
+export const Error = (props: ErrorProps) => {
+	return (
+		<div className={styles['container']}>
+			<h1>Welcome to Error!</h1>
+		</div>
+	);
+};
+
+export default Error;