Fix time unit save navigation state

frontend/src/components/DetailView/components.tsx

@@ -2,7 +2,7 @@
 import { Button, Box, Typography, CircularProgress, Divider, alpha, List, ListItemText, Tooltip } from '@mui/material'
 import { useDetailContext } from './Context/DetailContext'
 import { EditDataType, Editable, Reference, Role, Species } from '@/shared/types'
-import { useState, useEffect, Fragment, useContext } from 'react'
+import { useState, useEffect, Fragment } from 'react'
 import SaveIcon from '@mui/icons-material/Save'
 import { referenceValidator } from '@/shared/validators/validator'
 import { checkSpeciesTaxonomy, convertSpeciesTaxonomyFields, hasTaxonomyChanges } from '../../util/taxonomyUtilities'
@@ -15,7 +15,6 @@ import { OutOfBoundsWarningModal, OutOfBoundsWarningModalState } from './OutOfBo
 import { skipToken } from '@reduxjs/toolkit/query'
 import { finalizeEntry } from '@/services/entryApi'
 import { checkFieldErrors } from './common/checkFieldErrors'
-import { UnsavedChangesContext } from '../unsavedChangesContext'
 export { ReturnButton } from '@/components/common/ReturnButton'
 
 export const WriteButton = <T,>({
@@ -34,7 +33,6 @@ export const WriteButton = <T,>({
   const user = useUser()
   const [loading, setLoading] = useState(false)
   const { notify } = useNotify()
-  const unsavedChanges = useContext(UnsavedChangesContext)
   const { data: speciesData } = useGetAllSpeciesQuery(!taxonomy ? skipToken : undefined)
   const { data: synonymData } = useGetAllSynonymsQuery(!taxonomy ? skipToken : undefined)
 
@@ -176,7 +174,6 @@ export const WriteButton = <T,>({
     }
 
     await onWrite((speciesEditData as EditDataType<T>) ?? editData, setEditData)
-    unsavedChanges?.setDirty(false)
     setMode('read')
   }
 
@@ -198,7 +195,6 @@ export const WriteButton = <T,>({
       setLoading(true)
       await onWrite(editData, setEditData)
       setLoading(false)
-      unsavedChanges?.setDirty(false)
       setMode('read')
     }
 

frontend/src/components/TimeUnit/TimeUnitDetails.tsx

@@ -2,6 +2,7 @@ import { EditDataType, TimeUnitDetailsType } from '@/shared/types'
 import { useNotify } from '@/hooks/notification'
 import { CircularProgress } from '@mui/material'
 import { useNavigate, useParams } from 'react-router-dom'
+import { useContext } from 'react'
 import {
   formatTimeUnitWriteError,
   useEditTimeUnitMutation,
@@ -17,6 +18,7 @@ import { makeEditData } from '../DetailView/Context/DetailContext'
 import { useDeleteTimeUnit } from '@/hooks/useDeleteTimeUnit'
 import { getApiErrorMessage, isDuplicateNameError } from '@/utils/api'
 import { useTimeUnitForm } from '@/hooks/useTimeUnitForm'
+import { UnsavedChangesContext } from '../unsavedChangesContext'
 
 export const TimeUnitDetails = ({
   wrapWithUnsavedChangesProvider = true,
@@ -32,6 +34,7 @@ export const TimeUnitDetails = ({
   const [editTimeUnitRequest] = useEditTimeUnitMutation()
 
   const { notify } = useNotify()
+  const unsavedChanges = useContext(UnsavedChangesContext)
   const navigate = useNavigate()
   const { deleteTimeUnit } = useDeleteTimeUnit({
     onSuccess: () => navigate('/time-unit'),
@@ -55,6 +58,7 @@ export const TimeUnitDetails = ({
     try {
       const normalizedEditData = normalizeRank(editData)
       const { tu_name } = await editTimeUnitRequest(normalizedEditData).unwrap()
+      unsavedChanges?.setDirty(false)
       setTimeout(() => navigate(`/time-unit/${tu_name}`), 15)
       notify('Edited item successfully.')
     } catch (e) {
@@ -93,6 +97,7 @@ export const TimeUnitDetails = ({
 
   return (
     <DetailView
+      key={isNew ? 'new' : data!.tu_name}
       tabs={tabs}
       isNew={isNew}
       hasStagingMode