bugfix: clear dialogs data upon reopening

Author: maximeBAY

canopeum_frontend/src/components/analytics/site-modal/SiteModal.tsx

@@ -50,15 +50,17 @@ const SiteModal = ({ open, handleClose, siteId }: Props) => {
   const [site, setSite] = useState(defaultSiteDto)
   const [availableSiteTypes, setAvailableSiteTypes] = useState<SiteType[]>([])
   const [siteImageURL, setSiteImageURL] = useState<string>()
+  const [loading, setLoading] = useState(true)
 
   const fetchSite = useCallback(async () => {
     if (!siteId) {
       // Clear the image that could come from having opened the modal with a previous site
       setSiteImageURL(undefined)
-
       return
     }
 
+    setLoading(true)
+
     const siteDetail = await getApiClient().siteClient.detail(siteId)
     const { dmsLatitude, dmsLongitude } = siteDetail.coordinate
 
@@ -82,10 +84,15 @@ const SiteModal = ({ open, handleClose, siteId }: Props) => {
       visibleOnMap: siteDetail.visibleMap,
     })
     setSiteImageURL(URL.createObjectURL(blob))
+    setLoading(false)
   }, [siteId, getApiClient])
 
   const fetchSiteTypes = useCallback(
-    async () => setAvailableSiteTypes(await getApiClient().siteClient.types()),
+    async () => {
+      setLoading(true)
+      setAvailableSiteTypes(await getApiClient().siteClient.types())
+      setLoading(false)
+    },
     [getApiClient],
   )
 
@@ -97,13 +104,19 @@ const SiteModal = ({ open, handleClose, siteId }: Props) => {
   useEffect(() => void fetchSiteTypes(), [fetchSiteTypes])
 
   useEffect(() => {
-    if (!open) return
+    if (!open) {
+      if (!siteId) setSite(defaultSiteDto)
+
+      return
+    }
 
     void fetchSite()
-  }, [open, fetchSite])
+  }, [open, fetchSite, siteId])
 
   useEffect(() => setSite(defaultSiteDto), [siteId])
 
+  if (loading) return null
+
   return (
     <Dialog fullWidth maxWidth='sm' onClose={(_, reason) => handleClose(reason)} open={open}>
       <DialogTitle>

canopeum_frontend/src/components/social/PostCommentsDialog.tsx

@@ -41,7 +41,12 @@ const PostCommentsDialog = ({ open, postId, siteId, handleClose }: Props) => {
 
   useEffect(() => {
     // Since this is a dialog, we only want to fetch the comments once it is opened
-    if (!open || commentsLoaded) return
+    if (!open || commentsLoaded) {
+      setCommentBody('')
+      setCommentBodyNumberOfWords(0)
+      setCommentBodyError(undefined)
+      return
+    }
 
     const fetchComments = async () => setComments(await getApiClient().commentClient.all(postId))
 

canopeum_frontend/src/components/social/site-modal/SiteAnnouncementModal.tsx

@@ -1,5 +1,5 @@
 import { Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material'
-import { useContext, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { SnackbarContext } from '@components/context/SnackbarContext'
@@ -27,6 +27,10 @@ const SiteAnnouncementModal = ({ announcement, isOpen, handleClose }: Props) =>
   const { getApiClient } = useApiClient()
   const { openAlertSnackbar } = useContext(SnackbarContext)
 
+  useEffect(() => {
+    if (!isOpen) setEditedAnnouncement(announcement)
+  }, [isOpen, announcement])
+
   const handleSubmitSiteAnnouncement = async () => {
     try {
       await getApiClient().announcementClient.update(

canopeum_frontend/src/components/social/site-modal/SiteContactModal.tsx

@@ -1,5 +1,5 @@
 import { Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material'
-import { useContext, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import facebookLogo from '@assets/icons/facebook-contact-logo.svg'
@@ -36,6 +36,10 @@ const SiteContactModal = ({ contact, isOpen, handleClose }: Props) => {
   const { getApiClient } = useApiClient()
   const { openAlertSnackbar } = useContext(SnackbarContext)
 
+  useEffect(() => {
+    if (!isOpen) setEditedContact(contact)
+  }, [isOpen, contact])
+
   const handleSubmitSiteContact = (): void => {
     getApiClient().contactClient.update(contact.id, editedContact as PatchedContact).then(
       () => {