@imerss/inat-components 1.0.0

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

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

package/src/components/favourites/favourites.tsx

@@ -0,0 +1,98 @@
+import React, {useEffect, useState} from "react";
+import {formatDate, C, getFavourites, FavouritesData, BaseComponentProps, DataSource} from "../../__shared";
+import {Observation} from "../observation/observation";
+import Loader from "../loader/loader";
+import {NoResults} from "../no-results/no-results";
+import generalStyles from "../shared/css/general.module.scss";
+
+export type FavouritesProps = BaseComponentProps & {
+	year: string | number;
+}
+
+export const FavouritesLabel = (data: FavouritesData) => (
+	<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>
+	</div>
+);
+
+export const Favourites = ({
+	year,
+	source,
+	taxonId,
+	placeId,
+	data,
+	dataUrl,
+	components,
+	className,
+	perPage = C.PER_PAGE
+}: 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 Load = components?.loader ? components.loader as any : Loader;
+	const Label = components?.label ? components.label as any : FavouritesLabel;
+
+	let classes = generalStyles.panel;
+	if (className) {
+		classes += ` ${className}`;
+	}
+	return (
+		<div className={classes}>
+			<Load loading={loading}/>
+			{!loading && observations.length === 0 && <NoResults/>}
+			<div className={generalStyles.grid}>
+				{observations.map((obs: any) => (
+					<Observation
+						key={obs.id}
+						imageUrl={obs.imageUrl.replace(/square/, "medium")}
+						linkUrl={obs.obsUrl}>
+						<Label {...obs} />
+					</Observation>
+				))}
+			</div>
+		</div>
+	);
+};

package/src/components/hooks/hooks.tsx

@@ -0,0 +1,24 @@
+import {useEffect, useState} from "react";
+import {Tab} from "../../__shared";
+
+const defaultTitles = {
+    [Tab.recent]: "Recent",
+    [Tab.commonTaxa]: "Most common",
+    [Tab.favourites]: "Most favourited",
+    [Tab.stats]: "General stats"
+};
+
+export const useFeatureTitles = (features: any) => {
+    const [titles, setTitles] = useState(defaultTitles);
+
+    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]
+        });
+    }, [features]);
+
+    return titles;
+};

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

@@ -0,0 +1,10 @@
+import {render} from '@testing-library/react';
+
+import Loader from '../loader';
+
+describe('Loader', () => {
+	it('should render successfully', () => {
+		const {baseElement} = render(<Loader loading={true} />);
+		expect(baseElement).toBeTruthy();
+	});
+});

package/src/components/loader/loader.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import LoadingSpinner from "react-spinners/MoonLoader.js"; // TODO. Interesting. Why is this required?
+import styles from "../shared/css/general.module.scss";
+
+export type LoaderProps = {
+    loading: boolean;
+};
+
+const Loader = ({ loading }: LoaderProps) => {
+    let loaderClasses = styles.loader;
+    // if (loading) {
+    //     loaderClasses += ` ${styles.loading}`;
+    // }
+    if (!loading) {
+        return null;
+    }
+
+    return (
+        <div className={loaderClasses}>
+            <div className={styles.loaderBg} />
+            <LoadingSpinner color="#000000" />
+        </div>
+    );
+};
+
+export default Loader;

package/src/components/no-results/__tests__/no-results.test.tsx

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

package/src/components/no-results/no-results.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const NoResults = () => {
+    return (
+        <p>
+            No results found.
+        </p>
+    );
+};

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

@@ -0,0 +1,14 @@
+import {render} from '@testing-library/react';
+import {Observation} from '../observation';
+
+const defaultProps = {
+	linkUrl: "",
+	imageUrl: "",
+};
+
+describe('Observation', () => {
+	it('should render successfully', () => {
+		const {baseElement} = render(<Observation {...defaultProps}>test</Observation>);
+		expect(baseElement).toBeTruthy();
+	});
+});

package/src/components/observation/observation.module.scss

@@ -0,0 +1,20 @@
+.obs {
+  cursor: pointer;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+  text-align: center;
+  transition: all 0.15s ease-in-out;
+
+  &:hover {
+    background-color: #e1e1e1;
+  }
+}
+
+.obs h3 {
+  margin: 0;
+}
+
+.image {
+  max-width: 100%;
+  max-height: 100%;
+}

package/src/components/observation/observation.tsx

@@ -0,0 +1,29 @@
+import React, {useCallback} from 'react';
+import styles from "./observation.module.scss";
+
+export type ObservationProps = {
+	imageUrl: string;
+	linkUrl: string;
+	children: any;
+};
+
+export const Observation = ({imageUrl, linkUrl, children}: ObservationProps) => {
+	const gotoObservation = useCallback(() => {
+		window.open(linkUrl);
+	}, [linkUrl]);
+
+	return (
+		<article className={styles.obs} onClick={gotoObservation}>
+			<div style={{
+				width: 200,
+				height: 200,
+				overflow: "hidden",
+				borderRadius: 5,
+				background: `url(${imageUrl}) 50% 50% no-repeat`,
+				margin: "0 auto",
+				backgroundSize: "cover"
+			}}/>
+			{children}
+		</article>
+	);
+};

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

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

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

@@ -0,0 +1,101 @@
+import React, {useEffect, useState} from "react";
+import {formatDate, C, getRecentObservations, RecentObservationData, BaseComponentProps, DataSource} from "../../__shared";
+import {Observation} from "../observation/observation";
+import Loader from "../loader/loader";
+import {NoResults} from "../no-results/no-results";
+import styles from "../shared/css/general.module.scss";
+
+export type RecentObservationsProps = BaseComponentProps;
+
+export const RecentObservationLabel = (obs: RecentObservationData) => (
+	<div className={styles.obsLabel}>
+		<h3>{obs.taxonCommonName || obs.taxonName}</h3>
+		<div>{formatDate(obs.obsDate)}</div>
+		<div>
+			<a href={`${C.BASE_URL}/people/${obs.observerUsername}`}
+			   target="_blank"
+			   rel="noreferrer"
+			   onClick={(e) => e.stopPropagation()}>
+				{obs.observerUsername}
+			</a>
+		</div>
+	</div>
+);
+
+export const RecentObservations = ({
+	taxonId,
+	placeId,
+	data,
+	dataUrl,
+	source = DataSource.autoLoad,
+	perPage = C.PER_PAGE,
+	components,
+	className
+}: 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 Load = components?.loader ? components.loader as any : Loader;
+	const Label = components?.label ? components.label as any : RecentObservationLabel;
+
+	let classes = styles.panel;
+	if (className) {
+		classes += ` ${className}`;
+	}
+	return (
+		<div className={classes}>
+			<Load loading={loading}/>
+			<div className={styles.grid}>
+				{!loading && observations.length === 0 && <NoResults/>}
+				{observations.map((obs: RecentObservationData) => (
+					<Observation
+						key={obs.id}
+						imageUrl={obs.imageUrl.replace(/square/, "medium")}
+						linkUrl={obs.obsUrl}>
+						<Label {...obs} />
+					</Observation>
+				))}
+			</div>
+		</div>
+	);
+};

package/src/components/seasonality-graph/__tests__/seasonality-graph.test.tsx

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

package/src/components/seasonality-graph/seasonality-graph.module.scss

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

package/src/components/seasonality-graph/seasonality-graph.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { AxisOptions, Chart } from "react-charts";
+import { format } from "date-fns";
+
+export const SeasonalityGraph = ({ data }: any) => {
+    const primaryAxis = React.useMemo<
+        AxisOptions<typeof data[number]["data"][number]>
+        >(
+        () => ({
+            getValue: (datum: any) => datum.primary as any
+        }),
+        []
+    );
+
+    const secondaryAxes = React.useMemo<
+        AxisOptions<typeof data[number]["data"][number]>[]
+        >(
+        () => [
+            {
+                getValue: (datum: any) => datum.secondary,
+                elementType: "area"
+            }
+        ],
+        []
+    );
+
+    const formattedData = [
+        {
+            label: "Observations",
+            data: Object.keys(data).map((monthNum) => ({
+                primary: format(new Date(2000, parseInt(monthNum, 10)-1, 1), 'MMMM'),
+                secondary: data[monthNum]
+            }))
+        }
+    ];
+
+    return (
+        <Chart
+            options={{
+                data: formattedData,
+                primaryAxis,
+                secondaryAxes
+            }}
+        />
+    );
+}

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

@@ -0,0 +1,69 @@
+.page {
+  padding: 80px 10px 10px;
+  margin: 0 auto;
+  max-width: 1100px;
+
+  h1 {
+    border-bottom: 1px solid #efefef;
+    padding-bottom: 2px;
+    margin-bottom: 25px;
+  }
+}
+
+.panel {
+  position: relative;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr) );
+  width: 100%;
+  grid-gap: 8px;
+  text-align: center;
+}
+
+.obsLabel {
+  padding: 10px 20px;
+
+  a {
+    text-decoration: none;
+    color: #336699;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.loader {
+  position: absolute;
+  top: 50px;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loaderBg {
+  position: absolute;
+  background-color: #cccccc;
+  padding: 20px;
+  width: 100px;
+  border-radius: 10px;
+  height: 100%;
+  opacity: 0.8;
+}
+
+.count {
+  background-color: #efefef;
+  color: #666666;
+  padding: 2px 8px;
+  margin-top: 6px;
+  display: inline-block;
+  border-radius: 3px;
+  font-weight: bold;
+  font-size: 18px;
+}

package/src/components/summary/ObserverList.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import {numberWithCommas, Observer, C} 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>
+);

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

@@ -0,0 +1,18 @@
+import {render} from "@testing-library/react";
+import {DataSource} from "../../../index";
+import {Summary} from "../summary";
+
+describe("Summary", () => {
+	it("should render successfully", () => {
+		const {baseElement} = render(
+			<Summary
+				placeId={1}
+				taxonId={1}
+				source={DataSource.url}
+				year={2020}
+				dataUrl=""
+			/>
+		);
+		expect(baseElement).toBeTruthy();
+	});
+});

package/src/components/summary/summary.module.scss

@@ -0,0 +1,88 @@
+.summaryPage {
+  position: relative;
+
+  section {
+    display: flex;
+  }
+}
+
+.top {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  .avatar, .noAvatar {
+    margin-right: 10px;
+    border-radius: 20px;
+    width: 40px;
+    height: 40px;
+  }
+
+  .noAvatar {
+    display: inline-block;
+    background-color: #efefef;
+  }
+
+  h3 {
+    flex: 1;
+    color: black;
+  }
+
+  label {
+    flex: 0;
+    background-color: #efefef;
+    color: #666666;
+    padding: 2px 8px;
+    margin-top: 6px;
+    border-radius: 3px;
+    font-weight: bold;
+    font-size: 16px;
+  }
+
+  li {
+    border-radius: 3px;
+
+    a {
+      display: flex;
+      align-items: center;
+      text-decoration: none;
+    }
+
+    &:hover {
+      background-color: #efefef;
+    }
+  }
+}
+
+.countSummary {
+  list-style-type: none;
+  line-height: 28px;
+  font-size: 16px;
+  padding: 0;
+  margin: 0 0 30px;
+}
+
+.seasonalityBlock {
+  flex: 3;
+}
+
+.observersBlock {
+  flex: 1;
+  margin-left: 40px;
+  margin-bottom: -40px;
+}
+
+@media screen and (max-width: 800px) {
+  .summaryPage section {
+    display: block;
+  }
+
+  .seasonalityBlock {
+    height: 250px;
+    margin-bottom: 80px;
+  }
+
+  .observersBlock {
+    margin-left: 0;
+  }
+}