feat: begin using TaxonObserved in the UI

Author: mihow

ui/src/data-services/constants.ts

@@ -19,6 +19,7 @@ export const API_ROUTES = {
   SESSIONS: 'events',
   SITES: 'deployments/sites',
   SPECIES: 'taxa',
+  TAXA_OBSERVED: 'taxa/observed',
   STORAGE: 'storage',
   SUMMARY: 'status/summary',
   USERS: 'users',

ui/src/data-services/hooks/species-observed/useSpeciesObserved.ts

@@ -0,0 +1,38 @@
+import { API_ROUTES } from 'data-services/constants'
+import { FetchParams } from 'data-services/types'
+import { getFetchUrl } from 'data-services/utils'
+import { useMemo } from 'react'
+import { ServerSpecies, Species } from '../../models/species'
+import { useAuthorizedQuery } from '../auth/useAuthorizedQuery'
+
+const convertServerRecord = (record: ServerSpecies) => new Species(record)
+
+export const useSpeciesObserved = (
+  params?: FetchParams
+): {
+  species?: Species[]
+  total: number
+  isLoading: boolean
+  isFetching: boolean
+  error?: unknown
+} => {
+  const fetchUrl = getFetchUrl({ collection: API_ROUTES.TAXA_OBSERVED, params })
+
+  const { data, isLoading, isFetching, error } = useAuthorizedQuery<{
+    results: ServerSpecies[]
+    count: number
+  }>({
+    queryKey: [API_ROUTES.TAXA_OBSERVED, params],
+    url: fetchUrl,
+  })
+
+  const species = useMemo(() => data?.results.map(convertServerRecord), [data])
+
+  return {
+    species,
+    total: data?.count ?? 0,
+    isLoading,
+    isFetching,
+    error,
+  }
+}

ui/src/data-services/hooks/species-observed/useSpeciesObservedDetails.ts

@@ -0,0 +1,38 @@
+import { API_ROUTES, API_URL } from 'data-services/constants'
+
+import {
+  ServerSpeciesDetails,
+  SpeciesDetails,
+} from 'data-services/models/species-details'
+import { useMemo } from 'react'
+import { useAuthorizedQuery } from '../auth/useAuthorizedQuery'
+
+const convertServerRecord = (record: ServerSpeciesDetails) =>
+  new SpeciesDetails(record)
+
+export const useSpeciesObservedDetails = (
+  id: string
+): {
+  species?: SpeciesDetails
+  isLoading: boolean
+  isFetching: boolean
+  error?: unknown
+} => {
+  const { data, isLoading, isFetching, error } =
+    useAuthorizedQuery<SpeciesDetails>({
+      queryKey: [API_ROUTES.TAXA_OBSERVED, id],
+      url: `${API_URL}/${API_ROUTES.TAXA_OBSERVED}/${id}/`,
+    })
+
+  const species = useMemo(
+    () => (data ? convertServerRecord(data) : undefined),
+    [data]
+  )
+
+  return {
+    species,
+    isLoading,
+    isFetching,
+    error,
+  }
+}

ui/src/data-services/models/species.ts

@@ -1,8 +1,8 @@
-import { Taxon } from './taxa'
+import { TaxonObserved } from './taxa-observed'
 
 export type ServerSpecies = any // TODO: Update this type
 
-export class Species extends Taxon {
+export class Species extends TaxonObserved {
   protected readonly _species: ServerSpecies
   private readonly _images: { src: string }[] = []
 
@@ -34,7 +34,7 @@ export class Species extends Taxon {
   }
 
   get trainingImagesUrl(): string {
-    return `https://www.gbif.org/occurrence/gallery?advanced=1&verbatim_scientific_name=${this.name}`
+    return `https://www.gbif.org/occurrence/gallery?advanced=1&verbatim_scientific_name=${this.taxon.name}`
   }
 
   get score(): number {

ui/src/data-services/models/taxa-observed.ts

@@ -0,0 +1,21 @@
+import { ServerTaxon, Taxon } from './taxa'
+
+export type ServerTaxonObserved = {
+  id: string
+  taxon: ServerTaxon
+  detections_count: number
+  occurrences_count: number
+  best_determinations_score: number
+  occurrence_images: string[]
+  last_detected: string
+}
+
+export class TaxonObserved {
+  readonly id: string
+  readonly taxon: Taxon
+
+  public constructor(taxonObserved: ServerTaxonObserved) {
+    this.id = taxonObserved.id
+    this.taxon = new Taxon(taxonObserved.taxon)
+  }
+}

ui/src/data-services/models/taxa.ts

@@ -6,7 +6,7 @@ export type ServerTaxon = {
   parents?: ServerTaxon[]
 }
 
-const SORTED_RANKS = [
+export const SORTED_RANKS = [
   'Unknown',
   'ORDER',
   'SUBORDER',
@@ -34,9 +34,6 @@ export class Taxon {
 
     if (taxon.parents) {
       this.ranks = taxon.parents
-    } else if (taxon.parent?.parents) {
-      // TODO: Update this when species list is returning parents similar to other endpoints
-      this.ranks = [taxon.parent, ...taxon.parent.parents]
     } else {
       this.ranks = []
     }

ui/src/pages/species-details/species-details.tsx

@@ -45,7 +45,7 @@ export const SpeciesDetails = ({ species }: { species: Species }) => {
       value: species.numOccurrences || 'View all',
       to: getAppRoute({
         to: APP_ROUTES.OCCURRENCES({ projectId: projectId as string }),
-        filters: { determination: species.id },
+        filters: { determination: species.taxon.id },
       }),
     },
     {
@@ -59,7 +59,7 @@ export const SpeciesDetails = ({ species }: { species: Species }) => {
     <div className={styles.wrapper}>
       <div className={styles.header}>
         <TaxonInfo
-          taxon={species}
+          taxon={species.taxon}
           size={TaxonInfoSize.Large}
           getLink={(id: string) =>
             getAppRoute({

ui/src/pages/species/species-columns.tsx

@@ -51,7 +51,7 @@ export const columns: (projectId: string) => TableColumn<Species>[] = (
         })}
       >
         <BasicTableCell>
-          <TaxonInfo compact taxon={item} />
+          <TaxonInfo compact taxon={item.taxon} />
         </BasicTableCell>
       </Link>
     ),

ui/src/pages/species/species.tsx

@@ -1,5 +1,5 @@
-import { useSpecies } from 'data-services/hooks/species/useSpecies'
-import { useSpeciesDetails } from 'data-services/hooks/species/useSpeciesDetails'
+import { useSpeciesObserved } from 'data-services/hooks/species-observed/useSpeciesObserved'
+import { useSpeciesObservedDetails } from 'data-services/hooks/species-observed/useSpeciesObservedDetails'
 import * as Dialog from 'design-system/components/dialog/dialog'
 import { IconType } from 'design-system/components/icon/icon'
 import { PageFooter } from 'design-system/components/page-footer/page-footer'
@@ -28,7 +28,7 @@ export const Species = () => {
   const { sort, setSort } = useSort({ field: 'name', order: 'asc' })
   const { pagination, setPage } = usePagination()
   const { filters } = useFilters()
-  const { species, total, isLoading, isFetching, error } = useSpecies({
+  const { species, total, isLoading, isFetching, error } = useSpeciesObserved({
     projectId,
     sort,
     pagination,
@@ -101,10 +101,10 @@ const SpeciesDetailsDialog = ({ id }: { id: string }) => {
   const navigate = useNavigate()
   const { projectId } = useParams()
   const { setDetailBreadcrumb } = useContext(BreadcrumbContext)
-  const { species, isLoading, error } = useSpeciesDetails(id, projectId)
+  const { species, isLoading, error } = useSpeciesObservedDetails(id)
 
   useEffect(() => {
-    setDetailBreadcrumb(species ? { title: species.name } : undefined)
+    setDetailBreadcrumb(species ? { title: species.taxon.name } : undefined)
 
     return () => {
       setDetailBreadcrumb(undefined)