Frontend for the Species list

frontend/src/App.tsx

@@ -3,6 +3,7 @@ import { FrontPage } from './components/FrontPage'
 import { NavBar } from './components/NavBar'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import { Localities } from './components/Locality/Localities'
+import { SpeciesTable } from './components/Species/Species'
 import { Login } from './components/Login'
 import { LocalityDetails } from './components/Locality/LocalityDetails'
 
@@ -20,6 +21,7 @@ const App = () => {
             <Routes>
               <Route element={<LocalityDetails />} path="/locality/:id" />
               <Route element={<Localities />} path="/locality/" />
+              <Route element={<SpeciesTable />} path="/species/" />
               <Route element={<FrontPage />} path="/" />
               <Route element={<Login />} path="/login" />
               <Route element={<div>Page not found.</div>} path="*" />

frontend/src/components/Species/Species.tsx

@@ -0,0 +1,50 @@
+import { useMemo } from 'react'
+import { type MRT_ColumnDef } from 'material-react-table'
+import { useGetAllSpeciesQuery } from '../../redux/speciesReducer'
+import { Species } from '@/backendTypes'
+import { TableView } from '../TableView/TableView'
+
+export const SpeciesTable = ({ selectorFn, selectedList }: { selectorFn?: ((id: string) => void); selectedList?: string[] }) => {
+  const speciesQuery = useGetAllSpeciesQuery({})
+  const columns = useMemo<MRT_ColumnDef<Species>[]>(
+    () => [
+      {
+        id: 'id',
+        accessorKey: 'species_id',
+        header: 'Id',
+        size: 20,
+      },
+      {
+        accessorKey: 'subclass_or_superorder_name',
+        header: 'Subclass or Superorder',
+      },
+      {
+        accessorKey: 'order_name',
+        header: 'Order',
+      },
+      {
+        accessorKey: 'suborder_or_superfamily_name',
+        header: 'Suborder or Superfamily',
+      },
+      {
+        accessorKey: 'family_name',
+        header: 'Family',
+      },
+    ],
+    []
+  )
+  const checkRowRestriction = (row: Species) => {
+    return !!row.sp_status
+  }
+
+  return (
+    <TableView<Species>
+      selectorFn={selectorFn}
+      selectedList={selectedList}
+      checkRowRestriction={checkRowRestriction}
+      idFieldName="species_id"
+      columns={columns}
+      data={speciesQuery.data}
+    />
+  )
+}

frontend/src/redux/speciesReducer.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { api } from './api'
-import { Species } from '@/backendTypes'
+import { Taxon } from '@/backendTypes'
 
 const speciesApi = api.injectEndpoints({
   endpoints: builder => ({
@@ -9,7 +9,7 @@ const speciesApi = api.injectEndpoints({
         url: `/species/all`,
       }),
     }),
-    getSpeciesDetails: builder.query<Species, any>({
+    getSpeciesDetails: builder.query<Taxon, any>({
       query: (id: number) => ({
         url: `/species/${id}`,
       }),