Make species editing work; synonyms not working in frontend yet

backend/src/routes/species.ts

@@ -1,6 +1,9 @@
-import { Router } from 'express'
+import { Request, Router } from 'express'
 import { getAllSpecies, getSpeciesDetails } from '../services/species'
 import { fixBigInt } from '../utils/common'
+import { EditDataType, SpeciesDetailsType } from '../../../frontend/src/backendTypes'
+import { write } from '../services/write/write'
+import { printJSON } from '../services/write/writeUtils'
 
 const router = Router()
 
@@ -16,4 +19,12 @@ router.get('/:id', async (req, res) => {
   res.status(200).send(fixBigInt(species))
 })
 
+router.put('/', async (req: Request<object, object, { species: EditDataType<SpeciesDetailsType> }>, res) => {
+  const editedObject = req.body.species
+  const oldObject = await getSpeciesDetails(editedObject.species_id!)
+  console.log(printJSON(editedObject))
+  const result = await write(editedObject, 'com_species', oldObject as unknown as SpeciesDetailsType)
+  return res.status(200).send(result ? { result: result } : { error: 'error' })
+})
+
 export default router

backend/src/services/species.ts

@@ -23,12 +23,6 @@ export const getAllSpecies = async (onlyPublic: boolean) => {
   return result
 }
 
-export const getSpeciesDetailsx = async (id: number) => {
-  // TODO: Check if user has access
-  const result = await nowDb.com_species.findUnique({ where: { species_id: id } })
-  return result
-}
-
 export const getSpeciesDetails = async (id: number) => {
   // TODO: Check if user has access
 

frontend/src/components/DetailView/DetailView.tsx

@@ -33,13 +33,11 @@ export const DetailView = <T extends object>({
   data,
   onWrite,
   validator,
-  loading,
 }: {
   tabs: TabType[]
   data: T
   onWrite: (editData: EditDataType<T>) => Promise<void>
   validator: (editData: EditDataType<T>, field: keyof EditDataType<T>) => ValidationObject
-  loading: boolean
 }) => {
   const [searchParams, setSearchParams] = useSearchParams()
 
@@ -142,7 +140,7 @@ export const DetailView = <T extends object>({
                 <EditIcon style={{ marginRight: '0.5em' }} /> {mode.read ? 'Edit' : 'Cancel edit'}
               </Button>
             )}
-            {!mode.read && onWrite && <WriteButton onWrite={onWrite} loading={loading} />}
+            {!mode.read && onWrite && <WriteButton onWrite={onWrite} />}
           </Box>
           <Box sx={{ marginRight: '3em' }}>
             <DetailBrowser<T> />

frontend/src/components/Locality/LocalityDetails.tsx

@@ -18,10 +18,10 @@ import { UpdateTab } from '../DetailView/common/UpdateTab'
 
 export const LocalityDetails = () => {
   const { id } = useParams()
-  const { isLoading, isError, data } = useGetLocalityDetailsQuery(id!)
-  const [editLocalityRequest, status] = useEditLocalityMutation()
+  const { isLoading, isFetching, isError, data } = useGetLocalityDetailsQuery(id!)
+  const [editLocalityRequest] = useEditLocalityMutation()
   if (isError) return <div>Error loading data</div>
-  if (isLoading || !data) return <CircularProgress />
+  if (isLoading || isFetching || !data) return <CircularProgress />
 
   const onWrite = async (editData: EditDataType<LocalityDetailsType>) => {
     await editLocalityRequest(editData)
@@ -74,7 +74,5 @@ export const LocalityDetails = () => {
     },
   ]
 
-  return (
-    <DetailView tabs={tabs} data={data} onWrite={onWrite} loading={status.isLoading} validator={validateLocality} />
-  )
+  return <DetailView tabs={tabs} data={data} onWrite={onWrite} validator={validateLocality} />
 }

frontend/src/components/Species/SpeciesDetails.tsx

@@ -1,5 +1,5 @@
 import { useParams } from 'react-router-dom'
-import { useGetSpeciesDetailsQuery } from '../../redux/speciesReducer'
+import { useEditSpeciesMutation, useGetSpeciesDetailsQuery } from '../../redux/speciesReducer'
 import { CircularProgress } from '@mui/material'
 import { DetailView, TabType } from '../DetailView/DetailView'
 import { DietTab } from './Tabs/DietTab'
@@ -11,13 +11,18 @@ import { SynonymTab } from './Tabs/SynonymTab'
 import { TaxonomyTab } from './Tabs/TaxonomyTab'
 import { TeethTab } from './Tabs/TeethTab'
 import { UpdateTab } from '../DetailView/common/UpdateTab'
+import { EditDataType, SpeciesDetailsType } from '@/backendTypes'
 
 export const SpeciesDetails = () => {
   const { id } = useParams()
-  const { isLoading, isError, data } = useGetSpeciesDetailsQuery(id!)
-
+  const { isLoading, isError, isFetching, data } = useGetSpeciesDetailsQuery(id!)
+  const [editSpeciesRequest, status] = useEditSpeciesMutation()
   if (isError) return <div>Error loading data</div>
-  if (isLoading || !data) return <CircularProgress />
+  if (isLoading || isFetching || !data) return <CircularProgress />
+
+  const onWrite = async (editData: EditDataType<SpeciesDetailsType>) => {
+    await editSpeciesRequest(editData)
+  }
 
   const tabs: TabType[] = [
     {
@@ -62,7 +67,8 @@ export const SpeciesDetails = () => {
     <DetailView
       tabs={tabs}
       data={data}
-      onWrite={() => {}}
+      loading={status.isLoading}
+      onWrite={onWrite}
       validator={() => ({
         name: 'unknown',
         error: null,

frontend/src/components/Species/Tabs/LocalityTab.tsx

@@ -7,7 +7,7 @@ import { Box, CircularProgress } from '@mui/material'
 import { SelectingTable } from '@/components/DetailView/common/SelectingTable'
 
 export const LocalityTab = () => {
-  const { data, editData, mode } = useDetailContext<SpeciesDetailsType>()
+  const { data, editData, setEditData, mode } = useDetailContext<SpeciesDetailsType>()
   const { data: localitiesData, isError } = useGetAllLocalitiesQuery()
 
   if (isError) return 'Error loading Localities.'
@@ -55,6 +55,20 @@ export const LocalityTab = () => {
       data={localitiesData}
       fieldName="now_ls"
       idFieldName="lid"
+      editingAction={(locality: Locality) => {
+        setEditData({
+          ...editData,
+          now_ls: [
+            ...editData.now_ls,
+            {
+              species_id: editData.species_id,
+              lid: locality.lid,
+              now_loc: locality,
+              rowState: 'new',
+            },
+          ],
+        })
+      }}
     />
   )
 
@@ -66,14 +80,7 @@ export const LocalityTab = () => {
         </Box>
       )}
       <EditableTable<Editable<Locality>, SpeciesDetailsType>
-        columns={columns}
-        editTableData={editData.now_ls.map(
-          item =>
-            !item.now_loc
-              ? (item as unknown as Editable<Locality>)
-              : ({ ...item.now_loc, lid: item.now_loc.lid! } as never) // TODO fix type
-        )}
-        tableData={data.now_ls.map(item => (!item.now_loc ? (item as unknown as Editable<Locality>) : item.now_loc))}
+        columns={columns.map(c => ({ ...c, accessorKey: `now_loc.${c.accessorKey}` }))}
         field="now_ls"
       />
     </Grouped>

frontend/src/components/TimeUnit/TimeUnitDetails.tsx

@@ -9,10 +9,10 @@ import { EditDataType, TimeUnitDetailsType } from '@/backendTypes'
 
 export const TimeUnitDetails = () => {
   const { id } = useParams()
-  const { isLoading, isError, data } = useGetTimeUnitDetailsQuery(encodeURIComponent(id!))
-  const [editTimeUnitRequest, status] = useEditTimeUnitMutation()
+  const { isLoading, isError, isFetching, data } = useGetTimeUnitDetailsQuery(encodeURIComponent(id!))
+  const [editTimeUnitRequest] = useEditTimeUnitMutation()
   if (isError) return <div>Error loading data</div>
-  if (isLoading || !data) return <CircularProgress />
+  if (isLoading || isFetching || !data) return <CircularProgress />
 
   const onWrite = async (editData: EditDataType<TimeUnitDetailsType>) => {
     await editTimeUnitRequest(editData)
@@ -33,13 +33,5 @@ export const TimeUnitDetails = () => {
     },
   ]
 
-  return (
-    <DetailView
-      tabs={tabs}
-      data={data}
-      onWrite={onWrite}
-      loading={status.isLoading}
-      validator={() => ({ name: '', error: null })}
-    />
-  )
+  return <DetailView tabs={tabs} data={data} onWrite={onWrite} validator={() => ({ name: '', error: null })} />
 }

frontend/src/redux/api.ts

@@ -4,7 +4,7 @@ import { RootState } from './store'
 
 export const api = createApi({
   reducerPath: 'api',
-  tagTypes: ['user', 'localities', 'species', 'references', 'timeunits', 'timeunit', 'locality'],
+  tagTypes: ['user', 'localities', 'species', 'specieslist', 'references', 'timeunits', 'timeunit', 'locality'],
   baseQuery: fetchBaseQuery({
     baseUrl: BACKEND_URL,
     prepareHeaders: (headers, { getState }) => {

frontend/src/redux/speciesReducer.ts

@@ -1,5 +1,5 @@
 import { api } from './api'
-import { Species, SpeciesDetailsType } from '@/backendTypes'
+import { EditDataType, Species, SpeciesDetailsType } from '@/backendTypes'
 
 const speciesApi = api.injectEndpoints({
   endpoints: builder => ({
@@ -7,13 +7,24 @@ const speciesApi = api.injectEndpoints({
       query: () => ({
         url: `/species/all`,
       }),
+      providesTags: result => (result ? [{ type: 'specieslist' }] : []),
     }),
     getSpeciesDetails: builder.query<SpeciesDetailsType, string>({
       query: id => ({
         url: `/species/${id}`,
       }),
+      providesTags: result => (result ? [{ type: 'species', id: result.species_id }] : []),
+    }),
+    editSpecies: builder.mutation<SpeciesDetailsType, EditDataType<SpeciesDetailsType>>({
+      query: species => ({
+        url: `/species/`,
+        method: 'PUT',
+        body: { species },
+      }),
+      invalidatesTags: (result, _error, { species_id }) =>
+        result ? [{ type: 'species', id: species_id }, 'specieslist'] : [],
     }),
   }),
 })
 
-export const { useGetAllSpeciesQuery, useGetSpeciesDetailsQuery } = speciesApi
+export const { useGetAllSpeciesQuery, useGetSpeciesDetailsQuery, useEditSpeciesMutation } = speciesApi