Added frontend delete button and api call

frontend/src/components/DetailView/DetailView.tsx

@@ -37,6 +37,7 @@ export const DetailView = <T extends object>({
   isNew = false,
   isUserPage = false,
   hasStagingMode = false,
+  deleteFunction,
 }: {
   tabs: TabType[]
   data: T
@@ -45,6 +46,7 @@ export const DetailView = <T extends object>({
   isNew?: boolean
   isUserPage?: boolean
   hasStagingMode?: boolean
+  deleteFunction?: () => Promise<void>
 }) => {
   const [searchParams, setSearchParams] = useSearchParams()
   const theme = useTheme()
@@ -82,6 +84,11 @@ export const DetailView = <T extends object>({
     disabled?: boolean
   ) => <DropdownSelector field={field} options={options} name={name} disabled={disabled} />
 
+  const onDelete = () => {
+    if (!window.confirm('Are you sure you want to delete this item? This operation cannot be undone.')) return
+    if (deleteFunction) void deleteFunction()
+  }
+
   const radioSelection = (field: keyof EditDataType<T>, options: Array<DropdownOption | string>, name: string) => (
     <RadioSelector field={field} options={options} name={name} />
   )
@@ -140,6 +147,11 @@ export const DetailView = <T extends object>({
         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignContent: 'center', marginTop: 'auto' }}>
           <Box sx={{ display: 'flex' }} gap={10}>
             {!isUserPage && <ReturnButton />}
+            {editRights.delete && (
+              <Button onClick={onDelete} variant="contained">
+                Delete
+              </Button>
+            )}
             {editRights.edit && !mode.staging && !initialState.mode.new && (
               <Button
                 onClick={() => setMode(!mode.read ? 'read' : 'edit')}

frontend/src/components/Locality/LocalityDetails.tsx

@@ -1,5 +1,9 @@
 import { useNavigate, useParams } from 'react-router-dom'
-import { useEditLocalityMutation, useGetLocalityDetailsQuery } from '../../redux/localityReducer'
+import {
+  useDeleteLocalityMutation,
+  useEditLocalityMutation,
+  useGetLocalityDetailsQuery,
+} from '../../redux/localityReducer'
 import { CircularProgress } from '@mui/material'
 import { DetailView, TabType } from '../DetailView/DetailView'
 import { AgeTab } from './Tabs/AgeTab'
@@ -16,6 +20,8 @@ import { EditDataType, LocalityDetailsType } from '@/backendTypes'
 import { validateLocality } from '@/validators/locality'
 import { UpdateTab } from '../DetailView/common/UpdateTab'
 import { emptyLocality } from '../DetailView/common/defaultValues'
+import { useNotify } from '@/hooks/notification'
+import { useEffect } from 'react'
 
 export const LocalityDetails = () => {
   const { id } = useParams()
@@ -25,9 +31,23 @@ export const LocalityDetails = () => {
   const { isFetching, isError, data } = useGetLocalityDetailsQuery(id!, {
     skip: isNew,
   })
+  const notify = useNotify()
+  const [deleteMutation, { isSuccess: deleteSuccess, isError: deleteError }] = useDeleteLocalityMutation()
+  useEffect(() => {
+    if (deleteSuccess) {
+      notify('Deleted item successfully.')
+      navigate('/locality')
+    } else if (deleteError) {
+      notify('Could not delete item. Error happened.', 'error')
+    }
+  }, [deleteSuccess, deleteError, notify, navigate])
   if (isError) return <div>Error loading data</div>
   if (isFetching || (!data && !isNew) || mutationLoading) return <CircularProgress />
 
+  const deleteFunction = async () => {
+    await deleteMutation(parseInt(id!)).unwrap()
+  }
+
   const onWrite = async (editData: EditDataType<LocalityDetailsType>) => {
     const { id } = await editLocalityRequest(editData).unwrap()
     navigate(`/locality/${id}`)
@@ -87,6 +107,7 @@ export const LocalityDetails = () => {
       isNew={isNew}
       onWrite={onWrite}
       validator={validateLocality}
+      deleteFunction={deleteFunction}
       hasStagingMode
     />
   )

frontend/src/redux/localityReducer.ts

@@ -30,6 +30,12 @@ const localitiesApi = api.injectEndpoints({
       }),
       invalidatesTags: (result, _error, { lid }) => (result ? [{ type: 'locality', id: lid }, 'localities'] : []),
     }),
+    deleteLocality: builder.mutation<void, number>({
+      query: id => ({
+        url: `/locality/${id}`,
+        method: 'DELETE',
+      }),
+    }),
   }),
 })
 
@@ -38,4 +44,5 @@ export const {
   useGetLocalityDetailsQuery,
   useEditLocalityMutation,
   useGetLocalitySpeciesListMutation,
+  useDeleteLocalityMutation,
 } = localitiesApi