GREG-195: Clearing dirty state on submit

frontend/src/routes/sponsor/guest/guestRoleInfo/index.tsx

@@ -21,7 +21,9 @@ import ConfirmDialog from '../../../../components/confirmDialog'
 
 interface GuestRoleInfoProps {
   guest: Guest
+  reloadGuest: () => void
 }
+
 const endPeriodPost = (id: string, data: { end_date: Date }) => {
   const payload = {
     end_date: format(data.end_date as Date, 'yyyy-MM-dd'),
@@ -94,7 +96,10 @@ const TableContainer = styled(TableContainerMui)({
   paddingBottom: '1.5625rem',
 })
 
-export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
+export default function GuestRoleInfo({
+  guest,
+  reloadGuest,
+}: GuestRoleInfoProps) {
   const { pid, id } = useParams<GuestRoleInfoParams>()
   const [t] = useTranslation('common')
   const { displayContactAtUnit, displayComment } = useFeatureContext()
@@ -127,6 +132,14 @@ export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
     history.push(`/sponsor/guest/${guest.pid}`)
   }
 
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    reset,
+    formState: { isDirty, isValid },
+  } = useForm<RoleFormData>({ mode: 'onChange' })
+
   // Submit function for the save button
   const submit: SubmitHandler<RoleFormData> = (data) => {
     const payload: { start_date?: string; end_date: string } = {
@@ -146,18 +159,17 @@ export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
         if (result !== null) {
           console.log('result', result)
         }
+        // Reload the guest so that the information on the overview page is updated
+        reloadGuest()
+        // A submit does not clear the dirty state, so resetting values in the form
+        // to the values just submitted to clear the dirty-flag
+        reset(data)
       })
       .catch((error) => {
         console.log('error', error)
       })
   }
 
-  const {
-    control,
-    handleSubmit,
-    setValue,
-    formState: { isDirty, isValid },
-  } = useForm<RoleFormData>({ mode: 'onChange' })
   const onSubmit = handleSubmit(submit)
   const [showEndRoleConfirmationDialog, setShowEndRoleConfirmationDialog] =
     useState(false)

frontend/src/routes/sponsor/guest/index.tsx

@@ -56,7 +56,7 @@ function GuestRoutes({ reloadGuests }: GuestRoutesProps) {
   return (
     <>
       <Route path="/sponsor/guest/:pid/roles/:id">
-        <GuestRoleInfo guest={guestInfo} />
+        <GuestRoleInfo guest={guestInfo} reloadGuest={reloadGuestInfo} />
       </Route>
       <Route exact path="/sponsor/guest/:pid/newrole">
         <NewGuestRole guest={guestInfo} reloadGuestInfo={reloadGuestInfo} />