@imerss/inat-components 2.0.0 → 3.0.0

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

@@ -1,73 +0,0 @@
-import React from 'react';
-import { numberWithCommas, C, CommonTaxData, getCommonTaxa, BaseComponentProps, GeneralClasses } from "../../__shared";
-import { Observation } from "../observation/observation";
-import Loader from "../loader/loader";
-import { NoResults } from "../no-results/no-results";
-import { useLoadSourceData } from "../../hooks/useLoadSourceData";
-import styles from "../shared/css/general.module.scss";
-
-export type CommonTaxaProps = BaseComponentProps & {
-	year: number;
-}
-
-export const CommonTaxaLabel = (data: CommonTaxData & { classes: GeneralClasses }) => (
-	<div className={styles.obsLabel}>
-		<h3 className={data.classes?.observationLabelTitle}>{data.taxonCommonName || data.taxonName}</h3>
-		<label className={`${data.classes?.observationCount || ''} ${styles.count}`}>{numberWithCommas(data.obsCount)}</label>
-	</div>
-);
-
-export const CommonTaxa = ({
-	year,
-	source,
-	taxonId,
-	placeId,
-	numResults = C.NUM_RESULTS,
-	itemWidth = C.DEFAULT_ITEM_WIDTH,
-	dataUrl,
-	components,
-	generalClasses,
-	className,
-	tabDesc
-}: CommonTaxaProps) => {
-	const { loading, results: taxa } = useLoadSourceData({
-		taxonId,
-		placeId,
-		numResults,
-		dataUrl,
-		source,
-		year,
-		action: getCommonTaxa
-	});
-
-	const Load = components?.loader ? components.loader as any : Loader;
-	const Label = components?.label ? components.label as any : CommonTaxaLabel;
-
-	let elClasses = styles.panel;
-	if (className) {
-		elClasses += ` ${className}`;
-	}
-	let descClasses = styles.tabDesc;
-	if (generalClasses?.tabDesc) {
-		descClasses += ` ${generalClasses.tabDesc}`;
-	}
-
-	return (
-		<div className={elClasses}>
-			{tabDesc && <p className={descClasses}>{tabDesc}</p>}
-			<Load loading={loading}/>
-			{!loading && taxa.length === 0 && <NoResults/>}
-			<div className={styles.grid} style={{ gridTemplateColumns: `repeat(auto-fit, minmax(${itemWidth}px, 1fr))` }}>
-				{taxa.map((data: CommonTaxData) => (
-					<Observation
-						key={data.id}
-						imageUrl={data.imageUrl.replace(/square/, "medium")}
-						itemWidth={itemWidth}
-						linkUrl={`${C.BASE_URL}/${data.id}`}>
-						<Label {...data} classes={generalClasses} />
-					</Observation>
-				))}
-			</div>
-		</div>
-	)
-};

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

@@ -1,9 +0,0 @@
-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

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

package/src/components/error/error.tsx

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

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

@@ -1,13 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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 { useLoadSourceData } from "../../hooks/useLoadSourceData";
-import generalStyles from "../shared/css/general.module.scss";
-
-export type FavouritesProps = BaseComponentProps & {
-	year: number | string;
-}
-
-export const FavouritesLabel = (data: FavouritesData & { classes: GeneralClasses }) => (
-	<div className={generalStyles.obsLabel}>
-		<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>
-);
-
-export const Favourites = ({
-	year,
-	source,
-	taxonId,
-	placeId,
-	dataUrl,
-	components,
-	className,
-	tabDesc,
-	generalClasses,
-	itemWidth = C.DEFAULT_ITEM_WIDTH,
-	numResults = C.NUM_RESULTS
-}: FavouritesProps) => {
-	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 elClasses = generalStyles.panel;
-	if (className) {
-		elClasses += ` ${className}`;
-	}
-	let descClasses = generalStyles.tabDesc;
-	if (generalClasses?.tabDesc) {
-		descClasses += ` ${generalClasses.tabDesc}`;
-	}
-	return (
-		<div className={elClasses}>
-			{tabDesc && <p className={descClasses}>{tabDesc}</p>}
-			<Load loading={loading}/>
-			{!loading && observations.length === 0 && <NoResults/>}
-			<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} classes={generalClasses} />
-					</Observation>
-				))}
-			</div>
-		</div>
-	);
-};

package/src/components/hooks/hooks.tsx

@@ -1,34 +0,0 @@
-import { useEffect, useState } from "react";
-import { Feature, TaxonPanelFeatures } from "../../__shared";
-
-const defaultTitles = {
-    [Feature.recentObservations]: "Recent",
-    [Feature.commonTaxa]: "Most common",
-    [Feature.favourites]: "Most favourited",
-    [Feature.stats]: "General stats"
-};
-
-export const useFeatureTitles = (features: any) => {
-    const [titles, setTitles] = useState(defaultTitles);
-
-    useEffect(() => {
-        setTitles({
-            [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/__tests__/loader.test.tsx

@@ -1,10 +0,0 @@
-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

@@ -1,26 +0,0 @@
-import React from "react";
-import LoadingSpinner from "react-spinners/MoonLoader.js";
-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

@@ -1,9 +0,0 @@
-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

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

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

@@ -1,14 +0,0 @@
-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

@@ -1,20 +0,0 @@
-.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

@@ -1,30 +0,0 @@
-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, itemWidth, children}: ObservationProps) => {
-	const gotoObservation = useCallback(() => {
-		window.open(linkUrl);
-	}, [linkUrl]);
-
-	return (
-		<article className={styles.obs} onClick={gotoObservation}>
-			<div style={{
-				width: itemWidth,
-				height: itemWidth,
-				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

@@ -1,9 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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 { useLoadSourceData } from "../../hooks/useLoadSourceData";
-import styles from "../shared/css/general.module.scss";
-
-export type RecentObservationsProps = BaseComponentProps;
-
-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>
-		<div className={obs.classes?.observationLabelName}>
-			<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,
-	dataUrl,
-	components,
-	className,
-	generalClasses,
-	tabDesc,
-	source = DataSourceEnum.autoLoad,
-	numResults = C.NUM_RESULTS,
-	itemWidth = C.DEFAULT_ITEM_WIDTH
-}: RecentObservationsProps) => {
-	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 componentClasses = styles.panel;
-	if (className) {
-		componentClasses += ` ${className}`;
-	}
-	let descClasses = styles.tabDesc;
-	if (generalClasses?.tabDesc) {
-		descClasses += ` ${generalClasses.tabDesc}`;
-	}
-
-	return (
-		<div className={componentClasses}>
-			{tabDesc && <p className={descClasses}>{tabDesc}</p>}
-			<Load loading={loading}/>
-			<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} classes={generalClasses} />
-					</Observation>
-				))}
-			</div>
-		</div>
-	);
-};

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

@@ -1,9 +0,0 @@
-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

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

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

@@ -1,46 +0,0 @@
-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

@@ -1,73 +0,0 @@
-.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;
-  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;
-}
-
-.tabDesc {
-  font-size: 14px;
-  margin-bottom: 20px;
-}

package/src/components/summary/ObserverList.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import { numberWithCommas, Observer, C, GeneralClasses } from "../../__shared";
-import styles from "./summary.module.scss";
-
-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/__tests__/summary.test.tsx

@@ -1,18 +0,0 @@
-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();
-	});
-});