@imerss/inat-components 1.0.0

package/src/components/summary/summary.tsx

@@ -0,0 +1,83 @@
+import React, {useEffect, useState} from "react";
+import {numberWithCommas, DataSource, getSummary, FavouritesRespData} from "../../__shared";
+import { ObserverList } from './ObserverList';
+import Loader from "../loader/loader";
+import {SeasonalityGraph} from "../seasonality-graph/seasonality-graph";
+import styles from "./summary.module.scss";
+
+export type SummaryProps = {
+    source: DataSource;
+    taxonId: number;
+    placeId: number;
+    year: string | number;
+    data?: FavouritesRespData; /// TODO
+    dataUrl?: 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;
+        }
+
+        (async () => {
+            setLoading(true);
+            const data = await getSummary({ taxonId, placeId, year });
+            setSummaryData(data);
+            setLoading(false);
+        })();
+    }, [source, year, placeId, taxonId]);
+
+    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();
+            setSummaryData(json);
+            setLoading(false);
+        })();
+    }, [source, dataUrl]);
+
+    return (
+        <div className={styles.summaryPage}>
+            <Loader loading={loading} />
+
+            <ul className={styles.countSummary}>
+                <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} />}
+                </div>
+            </section>
+        </div>
+    );
+}

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

@@ -0,0 +1,16 @@
+import {render} from '@testing-library/react';
+import Tabs from '../tabs';
+import {Tab} from "../../../index";
+
+const defaultProps = {
+	selectedTab: Tab.recent,
+	onChangeTab: () => null,
+	features: {}
+};
+
+describe('Tabs', () => {
+	it('should render successfully', () => {
+		const {baseElement} = render(<Tabs {...defaultProps} />);
+		expect(baseElement).toBeTruthy();
+	});
+});

package/src/components/tabs/tabs.module.scss

@@ -0,0 +1,28 @@
+.tabs {
+  display: flex;
+  flex-direction: row;
+  list-style: none;
+  font-size: 18px;
+  padding: 0;
+  margin-bottom: 30px;
+
+  li {
+    margin: 0 20px;
+    padding: 4px 20px;
+    cursor: pointer;
+    color: #999999;
+    transition: all 0.2s ease-in-out;
+
+    &.selected, &:hover {
+      border-bottom: 5px solid #0099cc;
+      color: black;
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .tabs li {
+    margin: 0 5px;
+    padding: 4px 6px;
+  }
+}

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import {Tab} from "../../__shared";
+import styles from "./tabs.module.scss";
+import {useFeatureTitles} from "../hooks/hooks";
+
+export type TabsProps = {
+    selectedTab: Tab;
+    onChangeTab: (tab: Tab) => void;
+    features: any; // TODO
+}
+
+const Tabs = ({ selectedTab, onChangeTab, features }: 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]}
+                </li>
+            )}
+            {features.commonTaxa && (
+                <li onClick={() => onChangeTab(Tab.commonTaxa)}
+                    className={selectedTab === Tab.commonTaxa ? styles.selected : ""}>
+                    {titles[Tab.commonTaxa]}
+                </li>
+            )}
+            {features.favourites && (
+                <li onClick={() => onChangeTab(Tab.favourites)}
+                    className={selectedTab === Tab.favourites ? styles.selected : ""}>
+                    {titles[Tab.favourites]}
+                </li>
+            )}
+            {features.stats && (
+                <li onClick={() => onChangeTab(Tab.stats)} className={selectedTab === Tab.stats ? styles.selected : ""}>
+                    {titles[Tab.stats]}
+                </li>
+            )}
+        </ul>
+    );
+}
+
+export default Tabs;

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

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

package/src/components/taxon-panel/taxon-panel.module.scss

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

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

@@ -0,0 +1,104 @@
+import React, {useState} from "react";
+import {getSourceFile, Tab, DataSource, Feature} 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 Years from "../year-dropdown/year-dropdown";
+import Tabs from "../tabs/tabs";
+import {useFeatureTitles} from "../hooks/hooks";
+import styles from '../shared/css/general.module.scss';
+
+const TaxonPanel = ({ taxonId, placeId, dataSource, config, baseURL }: any) => {
+    const [tab, setTab] = useState(Tab.recent);
+    const [year, setYear] = useState<string>("all");
+    const titles = useFeatureTitles(config.features);
+    const [taxonInfo, setTaxonInfo] = useState(() => config.taxa.find((i) => i.taxonId === taxonId));
+    const [placeInfo, setPlaceInfo] = useState(() => config.places.find((i) => i.placeId === placeId));
+
+    const getCurrentTab = () => {
+        switch (tab) {
+            case Tab.recent: {
+                const props: Partial<RecentObservationsProps> = {
+                    source: dataSource
+                };
+                if (dataSource === DataSource.url) {
+                    props.dataUrl = baseURL + '/' + getSourceFile(Feature.recentObservations, taxonInfo, placeInfo);
+                } else {
+                    props.placeId = placeId;
+                    props.taxonId = taxonId;
+                }
+                return (
+                    <RecentObservations {...props} />
+                );
+            }
+
+            case Tab.commonTaxa: {
+                const props: any = {
+                    source: dataSource,
+                    year
+                };
+                if (dataSource === DataSource.url) {
+                    props.dataUrl = baseURL + '/' + getSourceFile(Feature.commonTaxa, taxonInfo, placeInfo, year);
+                } else {
+                    props.placeId = placeId;
+                    props.taxonId = taxonId;
+                }
+                return (
+                    <CommonTaxa {...props} />
+                );
+            }
+
+            case Tab.favourites: {
+                const props: any = {
+                    source: dataSource,
+                    year
+                };
+                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 = {
+                    source: dataSource,
+                    year
+                };
+                if (dataSource === DataSource.url) {
+                    props.dataUrl = baseURL + '/' + getSourceFile(Feature.stats, taxonInfo, placeInfo, year);
+                } else {
+                    props.placeId = placeId;
+                    props.taxonId = taxonId;
+                }
+                return <Summary {...props} />;
+            }
+        }
+    };
+
+    return (
+        <div className={styles.page}>
+            <Tabs
+                selectedTab={tab}
+                onChangeTab={setTab}
+                features={config.features}
+            />
+            <div>
+                {tab !== Tab.recent && (
+                    <div style={{ float: "right" }}>
+                        <Years value={year} onChange={setYear} />
+                    </div>
+                )}
+                <h1>{titles[tab]}</h1>
+            </div>
+            {getCurrentTab()}
+        </div>
+    );
+}
+
+export default TaxonPanel;

package/src/components/year-dropdown/__tests__/year-dropdown.test.tsx

@@ -0,0 +1,14 @@
+import {render} from '@testing-library/react';
+import YearDropdown from '../year-dropdown';
+
+const defaultProps = {
+	value: "1",
+	onChange: () => null
+};
+
+describe('YearDropdown', () => {
+	it('should render successfully', () => {
+		const {baseElement} = render(<YearDropdown {...defaultProps} />);
+		expect(baseElement).toBeTruthy();
+	});
+});

package/src/components/year-dropdown/year-dropdown.module.scss

@@ -0,0 +1,3 @@
+.dropdown {
+  font-size: 18px;
+}

package/src/components/year-dropdown/year-dropdown.tsx

@@ -0,0 +1,33 @@
+import React, {useState} from "react";
+import {getCurrentYear} from "../../__shared";
+import styles from "./year-dropdown.module.scss";
+
+interface YearsProps {
+    value: string;
+    onChange: (year: string) => void;
+    className?: string;
+}
+
+const Years = ({ value, onChange, className }: YearsProps) => {
+    const [years] = useState(() => {
+        const currentYear = getCurrentYear();
+        const years: any = [];
+        for (let i = currentYear; i>=currentYear-10; i--) {
+            years.push(i);
+        }
+        return years;
+    });
+
+    let classes = styles.dropdown;
+    if (className) {
+        classes += ` ${className}`;
+    }
+    return (
+        <select className={classes} onChange={(e) => onChange(e.target.value)} defaultValue={value}>
+            <option value="all">All years</option>
+            {years.map((year) => <option value={year} key={year}>{year}</option>)}
+        </select>
+    )
+}
+
+export default Years;

package/src/index.ts

@@ -0,0 +1,15 @@
+import TaxonPanel from "./components/taxon-panel/taxon-panel";
+
+// front-end components
+export * from "./components/observation/observation";
+export * from "./components/common-taxa/common-taxa";
+export * from "./components/recent-observations/recent-observations";
+export * from "./components/favourites/favourites";
+export * from "./components/taxon-panel/taxon-panel";
+export * from "./components/seasonality-graph/seasonality-graph";
+export * from "./components/summary/summary";
+
+// all typings
+export * from "./__shared";
+
+export default TaxonPanel;

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "exclude": [
+    "src/**/*.test.tsx"
+  ]
+}