diff --git a/ui/src/components/shared/SiderMenu.tsx b/ui/src/components/shared/SiderMenu.tsx index 3cee0b7c8..f87c0f88b 100644 --- a/ui/src/components/shared/SiderMenu.tsx +++ b/ui/src/components/shared/SiderMenu.tsx @@ -82,7 +82,14 @@ export function SiderMenu({ } else if (matchRoutes([{ path: issuerStatePath }], pathname)) { return [issuerStatePath]; } else if ( - matchRoutes([{ path: identitiesPath }, { path: ROUTES.createIdentity.path }], pathname) + matchRoutes( + [ + { path: identitiesPath }, + { path: ROUTES.createIdentity.path }, + { path: ROUTES.identityDetails.path }, + ], + pathname + ) ) { return [identitiesPath]; } diff --git a/ui/src/contexts/Identity.tsx b/ui/src/contexts/Identity.tsx index 54e55dfd2..bb3a8c0a6 100644 --- a/ui/src/contexts/Identity.tsx +++ b/ui/src/contexts/Identity.tsx @@ -8,7 +8,7 @@ import { useMemo, useState, } from "react"; -import { useNavigate, useSearchParams } from "react-router-dom"; +import { useLocation, useNavigate, useSearchParams } from "react-router-dom"; import { getIdentities, identifierParser } from "src/adapters/api/identities"; import { useEnvContext } from "src/contexts/Env"; import { AppError, Identifier, Identity } from "src/domain"; @@ -20,7 +20,11 @@ import { makeRequestAbortable, setStorageByKey, } from "src/utils/browser"; -import { IDENTIFIER_LOCAL_STORAGE_KEY, IDENTIFIER_SEARCH_PARAM } from "src/utils/constants"; +import { + IDENTIFIER_LOCAL_STORAGE_KEY, + IDENTIFIER_SEARCH_PARAM, + ROOT_PATH, +} from "src/utils/constants"; type IdentityState = { fetchIdentities: (signal: AbortSignal) => void; @@ -44,6 +48,7 @@ export function IdentityProvider(props: PropsWithChildren) { const env = useEnvContext(); const [messageAPI, messageContext] = message.useMessage(); const navigate = useNavigate(); + const location = useLocation(); const [identitiesList, setIdentitiesList] = useState>({ status: "pending", }); @@ -57,23 +62,6 @@ export function IdentityProvider(props: PropsWithChildren) { const identifierParam = searchParams.get(IDENTIFIER_SEARCH_PARAM); - const updateIdentifier = useCallback( - (identifier: Identifier) => { - setIdentifier(identifier); - setSearchParams( - (previousParams) => { - const params = new URLSearchParams(previousParams); - params.set(IDENTIFIER_SEARCH_PARAM, identifier); - - return params; - }, - { replace: true } - ); - setStorageByKey({ key: IDENTIFIER_LOCAL_STORAGE_KEY, value: identifier }); - }, - [setSearchParams] - ); - const fetchIdentities = useCallback( async (signal: AbortSignal) => { setIdentitiesList((previousState) => @@ -100,11 +88,11 @@ export function IdentityProvider(props: PropsWithChildren) { identifierParam && identities.some(({ identifier }) => identifier === identifierParam) ) { - updateIdentifier(identifierParam); + setIdentifier(identifierParam); } else if (identities.some(({ identifier }) => identifier === savedIdentifier)) { - updateIdentifier(savedIdentifier); + setIdentifier(savedIdentifier); } else if (identities.length > 0 && identities[0]) { - updateIdentifier(identities[0].identifier); + setIdentifier(identities[0].identifier); } } else { if (!isAbortedError(response.error)) { @@ -113,15 +101,15 @@ export function IdentityProvider(props: PropsWithChildren) { } } }, - [env, messageAPI, identifierParam, updateIdentifier] + [env, messageAPI, identifierParam] ); const handleChange = useCallback( (identifier: Identifier) => { - updateIdentifier(identifier); + setIdentifier(identifier); navigate(ROUTES.schemas.path); }, - [navigate, updateIdentifier] + [navigate] ); useEffect(() => { @@ -131,9 +119,21 @@ export function IdentityProvider(props: PropsWithChildren) { isAsyncTaskDataAvailable(identitiesList) && identitiesList.data.some((identity) => identity.identifier === identifierParam) ) { - updateIdentifier(identifierParam); + setIdentifier(identifierParam); + } else if (identifier && identifier !== identifierParam && location.pathname !== ROOT_PATH) { + setIdentifier(identifier); + setSearchParams( + (previousParams) => { + const params = new URLSearchParams(previousParams); + params.set(IDENTIFIER_SEARCH_PARAM, identifier); + + return params; + }, + { replace: true } + ); + setStorageByKey({ key: IDENTIFIER_LOCAL_STORAGE_KEY, value: identifier }); } - }, [identifier, identifierParam, identitiesList, updateIdentifier]); + }, [identifier, identifierParam, identitiesList, location, setSearchParams]); useEffect(() => { const { aborter } = makeRequestAbortable(fetchIdentities);