migrate other onSettled callbacks to fix state of component on tab ch…

…ange
jay-hodgson · Jun 21, 2023 · ce231cd · ce231cd
1 parent 9889fb0
commit ce231cd
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 75 deletions.
diff --git a/packages/synapse-react-client/src/components/ChallengeDetailPage/ChallengeDetailPage.tsx b/packages/synapse-react-client/src/components/ChallengeDetailPage/ChallengeDetailPage.tsx
@@ -3,7 +3,6 @@ import ChallengeRegisterButton from '../ChallengeRegisterButton'
 import ChallengeTeamWizard from '../ChallengeTeamWizard'
 import AccessRequirementList from '../AccessRequirementList/AccessRequirementList'
 import { useGetEntity, useGetEntityChallenge } from '../../synapse-queries'
-import { Challenge } from '@sage-bionetworks/synapse-types'
 import ConfirmationDialog from '../ConfirmationDialog'
 import { SynapseQueries, displayToast, useSynapseContext } from '../..'
 import { useDeleteTeamMembership } from '../../synapse-queries/team/useTeamMembers'
@@ -16,7 +15,6 @@ export function ChallengeDetailPage({ projectId }: ChallengeDetailPageProps) {
   const { accessToken } = useSynapseContext()
   const [showWizard, setShowWizard] = useState<boolean>(false)
   const [showRequirements, setShowRequirements] = useState<boolean>(false)
-  const [challenge, setChallenge] = useState<Challenge>()
   const [showLeaveConfirm, setShowLeaveConfirm] = useState<boolean>(false)
   const { data: userProfile } = SynapseQueries.useGetCurrentUserProfile()
   const { data: project } = useGetEntity(projectId)
@@ -35,6 +33,9 @@ export function ChallengeDetailPage({ projectId }: ChallengeDetailPageProps) {
     onSuccess: () => {
       displayToast('You are no longer registered for this challenge', 'info')
     },
+    onError: error => {
+      displayToast(error.reason, 'danger')
+    },
   })
 
   const doLeaveChallenge = () => {
@@ -63,18 +64,7 @@ export function ChallengeDetailPage({ projectId }: ChallengeDetailPageProps) {
     }
   }
 
-  useGetEntityChallenge(projectId, {
-    enabled: !challenge,
-    onSettled: (data, error) => {
-      // console.log('settled', { data }, { error })
-      if (data) {
-        setChallenge(data)
-      }
-      if (error) {
-        console.warn(error)
-      }
-    },
-  })
+  const { data: challenge } = useGetEntityChallenge(projectId)
 
   return (
     <>

diff --git a/packages/synapse-react-client/src/components/ChallengeSubmission/ChallengeSubmission.tsx b/packages/synapse-react-client/src/components/ChallengeSubmission/ChallengeSubmission.tsx
@@ -11,15 +11,12 @@ import {
 import { useSynapseContext } from '../../utils'
 import {
   ACCESS_TYPE,
-  AccessControlList,
   Challenge,
-  EntityId,
   Project,
   ResourceAccess,
   Team,
 } from '@sage-bionetworks/synapse-types'
 import { ErrorBanner, SynapseErrorBoundary } from '../error/ErrorBanner'
-import { SynapseClientError } from '../../utils/SynapseClientError'
 import { useGetTeam } from '../../synapse-queries/team/useTeam'
 import { createEntity } from '../../synapse-client'
 import { PROJECT_CONCRETE_TYPE_VALUE } from '@sage-bionetworks/synapse-types'
@@ -74,13 +71,14 @@ export function ChallengeSubmission({
 
   // Use the existing accessToken if present to get the current user's profile / userId
   const { data: userProfile, isLoading: isProfileLoading } =
-    useGetCurrentUserProfile({
-      enabled: isLoggedIn,
-      onError: () => {
-        setLoading(false)
-        setErrorMessage(`Error: Could not retrieve user profile`)
-      },
-    })
+    useGetCurrentUserProfile()
+  useGetCurrentUserProfile({
+    enabled: isLoggedIn,
+    onError: () => {
+      setLoading(false)
+      setErrorMessage(`Error: Could not retrieve user profile`)
+    },
+  })
 
   // Retrieve the challenge associated with the projectId passed through props
   const { data: challenge } = useGetEntityChallenge(projectId, {
@@ -120,70 +118,71 @@ export function ChallengeSubmission({
     useErrorBoundary: true,
   })
 
-  useGetEntityAlias(newProject?.alias ?? EMPTY_ID, {
-    enabled: newProject !== undefined && !!challenge && !!submissionTeam,
-    onSettled: (
-      data: EntityId | null | undefined,
-      error: SynapseClientError | null,
-    ) => {
-      if (data) {
-        setProjectAliasFound(true)
-        setChallengeProjectId(data.id)
-      }
-      if (error) {
-        setProjectAliasFound(false)
-      }
+  const { data: entityAlias } = useGetEntityAlias(
+    newProject?.alias ?? EMPTY_ID,
+    {
+      enabled: newProject !== undefined && !!challenge && !!submissionTeam,
     },
-  })
+  )
+  useEffect(() => {
+    if (entityAlias) {
+      setProjectAliasFound(true)
+      setChallengeProjectId(entityAlias.id)
+    }
+  }, [entityAlias])
 
   /**
    * If the challenge project was just created, retrieve its ACL
    * and add the submission team to it
    */
-  useGetEntityACL(challengeProjectId ?? EMPTY_ID, {
+  const { data: entityACL } = useGetEntityACL(challengeProjectId ?? EMPTY_ID, {
     enabled: !!challengeProjectId && isProjectNewlyCreated === true,
     refetchInterval: Infinity,
     useErrorBoundary: true,
-    onSettled: (data: AccessControlList | undefined) => {
-      if (data) {
-        // Give submission team admin access to challenge project
-        const teamResourceAccess: ResourceAccess = {
-          principalId: Number(submissionTeam!.id),
-          accessType: [
-            ACCESS_TYPE.CHANGE_PERMISSIONS,
-            ACCESS_TYPE.CHANGE_SETTINGS,
-            ACCESS_TYPE.CREATE,
-            ACCESS_TYPE.DELETE,
-            ACCESS_TYPE.DOWNLOAD,
-            ACCESS_TYPE.MODERATE,
-            ACCESS_TYPE.READ,
-            ACCESS_TYPE.UPDATE,
-          ],
-        }
-        updateACL({
-          ...data,
-          resourceAccess: [...data.resourceAccess, teamResourceAccess],
-        })
-        setIsProjectNewlyCreated(false)
-      }
-    },
   })
 
-  useGetEntityPermissions(challengeProjectId!, {
-    enabled: !!challengeProjectId,
-    refetchInterval: Infinity,
-    onSettled: (data, error) => {
-      if (data && data.canView && data.canAddChild) {
-        setCanSubmit(true)
-      }
-      if (error) {
-        setErrorMessage(
-          'You do not have permission to submit for this challenge team.',
-        )
+  useEffect(() => {
+    if (entityACL && isProjectNewlyCreated === true) {
+      // Give submission team admin access to challenge project
+      const teamResourceAccess: ResourceAccess = {
+        principalId: Number(submissionTeam!.id),
+        accessType: [
+          ACCESS_TYPE.CHANGE_PERMISSIONS,
+          ACCESS_TYPE.CHANGE_SETTINGS,
+          ACCESS_TYPE.CREATE,
+          ACCESS_TYPE.DELETE,
+          ACCESS_TYPE.DOWNLOAD,
+          ACCESS_TYPE.MODERATE,
+          ACCESS_TYPE.READ,
+          ACCESS_TYPE.UPDATE,
+        ],
       }
-      setLoading(false)
+      updateACL({
+        ...entityACL,
+        resourceAccess: [...entityACL.resourceAccess, teamResourceAccess],
+      })
+      setIsProjectNewlyCreated(false)
+    }
+  }, [entityACL])
+
+  const { data: entityPermissions } = useGetEntityPermissions(
+    challengeProjectId!,
+    {
+      enabled: !!challengeProjectId,
+      refetchInterval: Infinity,
     },
-  })
+  )
+
+  useEffect(() => {
+    if (
+      entityPermissions &&
+      entityPermissions.canView &&
+      entityPermissions.canAddChild
+    ) {
+      setCanSubmit(true)
+    }
+    setLoading(false)
+  }, [entityPermissions])
 
   useEffect(() => {
     if (!isLoggedIn && (!!userProfile || !isProfileLoading)) {