diff --git a/nextjs/src/components/breadcrumbs.tsx b/nextjs/src/components/breadcrumbs.tsx index 461d070b1..47c4f7b59 100644 --- a/nextjs/src/components/breadcrumbs.tsx +++ b/nextjs/src/components/breadcrumbs.tsx @@ -8,44 +8,105 @@ import { BreadcrumbPage, BreadcrumbSeparator, } from '@/components/ui/breadcrumb' -import React, { Fragment } from 'react' +import React, { Fragment, useMemo } from 'react' +import { usePathname, useSearchParams } from 'next/navigation' import { IconSlash } from '@tabler/icons-react' +import { UUID_REGEX } from '@/config/CommonConstant' import { useBreadcrumbs } from '@/hooks/use-breadcrumbs' export function Breadcrumbs(): React.JSX.Element | null { const items = useBreadcrumbs() + const [copied, setCopied] = React.useState(false) + const pathname = usePathname() + const searchParams = useSearchParams() + const alias = React.useMemo(() => searchParams.get('alias'), [searchParams]) + const isOrganizationUUIDPath = useMemo(() => { + const parts = pathname.split('/').filter(Boolean) // remove empty strings + return ( + parts.length === 2 && + parts[0] === 'organizations' && + UUID_REGEX.test(parts[1]) + ) + }, [pathname]) if (items.length === 0) { return null } + function copyToClipboard(text: string): void { + window.navigator.clipboard.writeText(text) + setCopied(true) + setTimeout(() => { + setCopied(false) + }, 2000) + } + return ( - {items.map((item, index) => { - const decodedTitle = decodeURIComponent(item.title) + {isOrganizationUUIDPath ? ( + <> + + copyToClipboard(items[1].title)}> +
+ Overview + {copied && ( +
+ Copied! +
+ )} +
+
+
+ + ) : ( + <> + {items.map((item, index) => { + const decodedTitle = decodeURIComponent(item.title) - return ( - - {index !== items.length - 1 && ( - - - {decodedTitle} - - - )} - {index < items.length - 1 && ( - - - - )} - {index === items.length - 1 && ( - {decodedTitle} - )} - - ) - })} + return ( + + {index !== items.length - 1 && ( + + + {decodedTitle} + + + )} + {index < items.length - 1 && ( + + + + )} + {index === items.length - 1 && ( + + {alias ? ( + + ) : ( + decodedTitle + )} + + )} + + ) + })} + + )}
) diff --git a/nextjs/src/config/CommonConstant.ts b/nextjs/src/config/CommonConstant.ts index ea286d37b..670d46a6f 100644 --- a/nextjs/src/config/CommonConstant.ts +++ b/nextjs/src/config/CommonConstant.ts @@ -19,6 +19,8 @@ export const totalRecords = 'totalRecords' export const successfulRecords = 'successfulRecords' export const currentPageNumber = 1 export const polygonFaucet = 'https://faucet.polygon.technology/' +export const UUID_REGEX = + /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i export const apiStatusCodes = { API_STATUS_SUCCESS: 200, diff --git a/nextjs/src/features/organization/components/OrganizationDashboard.tsx b/nextjs/src/features/organization/components/OrganizationDashboard.tsx index 7a4a7bbc5..d510ad88c 100644 --- a/nextjs/src/features/organization/components/OrganizationDashboard.tsx +++ b/nextjs/src/features/organization/components/OrganizationDashboard.tsx @@ -3,7 +3,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { Card, CardContent } from '@/components/ui/card' import { IOrgDashboard, IOrganisation } from './interfaces/organization' -import React, { useEffect, useState } from 'react' +import React, { useEffect, useState, useTransition } from 'react' import { Tooltip, TooltipContent, @@ -39,6 +39,7 @@ export const OrganizationDashboard = ({ const [showSetupButton, setSetupButton] = useState(false) const [, setError] = useState(null) const [isWalletSetupLoading, setIsWalletSetupLoading] = useState(false) + const [isPending, startTransition] = useTransition() const selecteDropdownOrgId = useAppSelector( (state) => state.organization.orgId, @@ -59,12 +60,10 @@ export const OrganizationDashboard = ({ return } - setLoading(true) const useOrgId = activeOrgId === orgIdOfDashboard ? orgId : activeOrgId const response = await getOrganizationById(useOrgId as string) const { data } = response as AxiosResponse - setLoading(false) if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) { if ( data?.data?.org_agents?.length > 0 && @@ -75,18 +74,18 @@ export const OrganizationDashboard = ({ setSetupButton(true) } setOrgData(data?.data) + startTransition(() => { + router.push(`/organizations/${useOrgId}`) + }) } else { setError(response as string) } - setLoading(false) } const fetchOrganizationDashboardDetails = async (): Promise => { - setLoading(true) if (orgId) { const response = await getOrgDashboard(orgIdOfDashboard as string) const { data } = response as AxiosResponse - setLoading(false) if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) { setOrgDashboard(data?.data) @@ -94,7 +93,6 @@ export const OrganizationDashboard = ({ setError(response as string) } } - setLoading(false) } const handleEditOrg = (): void => { @@ -106,10 +104,19 @@ export const OrganizationDashboard = ({ } useEffect(() => { - fetchOrganizationDetails() - fetchOrganizationDashboardDetails() + async function loadData(): Promise { + setLoading(true) + await fetchOrganizationDetails() + await fetchOrganizationDashboardDetails() + setLoading(false) + } + loadData() }, [activeOrgId]) + if (isPending || loading) { + return + } + return (
diff --git a/nextjs/src/features/schemas/components/SchemaCard.tsx b/nextjs/src/features/schemas/components/SchemaCard.tsx index 9a0212e0e..4b8f3667c 100644 --- a/nextjs/src/features/schemas/components/SchemaCard.tsx +++ b/nextjs/src/features/schemas/components/SchemaCard.tsx @@ -108,7 +108,9 @@ const SchemaCard = (props: ISchemaCardProps): React.JSX.Element => { } if (!props.w3cSchema && !hasNestedAttributes && props.schemaId) { - router.push(`/organizations/schemas/${props.schemaId}`) + router.push( + `/organizations/schemas/${props.schemaId}?alias=${props.schemaName}`, + ) } if (props.onClickCallback) {