From 0aeff79310aa0f58ad5621a7593fb025d83ce31a Mon Sep 17 00:00:00 2001 From: Sujit Date: Mon, 21 Jul 2025 19:46:05 +0530 Subject: [PATCH 1/3] wip Signed-off-by: Sujit --- nextjs/src/components/breadcrumbs.tsx | 94 ++++++++++++++----- .../components/OrganizationDashboard.tsx | 29 ++++-- .../schemas/components/SchemaCard.tsx | 4 +- 3 files changed, 94 insertions(+), 33 deletions(-) diff --git a/nextjs/src/components/breadcrumbs.tsx b/nextjs/src/components/breadcrumbs.tsx index 461d070b1..d2d3b74b1 100644 --- a/nextjs/src/components/breadcrumbs.tsx +++ b/nextjs/src/components/breadcrumbs.tsx @@ -8,13 +8,28 @@ 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 { 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 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 + 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 @@ -23,29 +38,62 @@ export function Breadcrumbs(): React.JSX.Element | null { return ( - {items.map((item, index) => { - const decodedTitle = decodeURIComponent(item.title) + {isOrganizationUUIDPath ? ( + <> + + { + window.navigator.clipboard.writeText(items[1].title) + setCopied(true) + setTimeout(() => { + setCopied(false) + }, 2000) + }} + > +
+ 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 ? alias : decodedTitle} + + )} + + ) + })} + + )} ) diff --git a/nextjs/src/features/organization/components/OrganizationDashboard.tsx b/nextjs/src/features/organization/components/OrganizationDashboard.tsx index 7a4a7bbc5..47c95a522 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,11 @@ export const OrganizationDashboard = ({ return } - setLoading(true) + // 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 +75,20 @@ export const OrganizationDashboard = ({ setSetupButton(true) } setOrgData(data?.data) + startTransition(() => { + router.push(`/organizations/${useOrgId}`) + }) } else { setError(response as string) } - setLoading(false) + // setLoading(false) } const fetchOrganizationDashboardDetails = async (): Promise => { - setLoading(true) + // 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 +96,7 @@ export const OrganizationDashboard = ({ setError(response as string) } } - setLoading(false) + // setLoading(false) } const handleEditOrg = (): void => { @@ -106,10 +108,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) { From f7704df447a2f1dd3650b2ef6100c844c5b14f95 Mon Sep 17 00:00:00 2001 From: Sujit Date: Tue, 22 Jul 2025 17:00:32 +0530 Subject: [PATCH 2/3] fix/breadcrumb issue Signed-off-by: Sujit --- nextjs/src/components/breadcrumbs.tsx | 37 ++++++++++++++++++--------- nextjs/src/config/CommonConstant.ts | 2 ++ 2 files changed, 27 insertions(+), 12 deletions(-) diff --git a/nextjs/src/components/breadcrumbs.tsx b/nextjs/src/components/breadcrumbs.tsx index d2d3b74b1..47c4f7b59 100644 --- a/nextjs/src/components/breadcrumbs.tsx +++ b/nextjs/src/components/breadcrumbs.tsx @@ -12,6 +12,7 @@ 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 { @@ -20,8 +21,6 @@ export function Breadcrumbs(): React.JSX.Element | null { const pathname = usePathname() const searchParams = useSearchParams() const alias = React.useMemo(() => searchParams.get('alias'), [searchParams]) - 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 const isOrganizationUUIDPath = useMemo(() => { const parts = pathname.split('/').filter(Boolean) // remove empty strings return ( @@ -35,21 +34,21 @@ export function Breadcrumbs(): React.JSX.Element | null { return null } + function copyToClipboard(text: string): void { + window.navigator.clipboard.writeText(text) + setCopied(true) + setTimeout(() => { + setCopied(false) + }, 2000) + } + return ( {isOrganizationUUIDPath ? ( <> - { - window.navigator.clipboard.writeText(items[1].title) - setCopied(true) - setTimeout(() => { - setCopied(false) - }, 2000) - }} - > + copyToClipboard(items[1].title)}>
Overview {copied && ( @@ -86,7 +85,21 @@ export function Breadcrumbs(): React.JSX.Element | null { )} {index === items.length - 1 && ( - {alias ? alias : decodedTitle} + {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, From 87742439e1c84ad187e0ec697af683e6290f3da7 Mon Sep 17 00:00:00 2001 From: Sujit Date: Tue, 22 Jul 2025 17:10:09 +0530 Subject: [PATCH 3/3] fix/removed commented code Signed-off-by: Sujit --- .../organization/components/OrganizationDashboard.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/nextjs/src/features/organization/components/OrganizationDashboard.tsx b/nextjs/src/features/organization/components/OrganizationDashboard.tsx index 47c95a522..d510ad88c 100644 --- a/nextjs/src/features/organization/components/OrganizationDashboard.tsx +++ b/nextjs/src/features/organization/components/OrganizationDashboard.tsx @@ -60,7 +60,6 @@ export const OrganizationDashboard = ({ return } - // setLoading(true) const useOrgId = activeOrgId === orgIdOfDashboard ? orgId : activeOrgId const response = await getOrganizationById(useOrgId as string) const { data } = response as AxiosResponse @@ -81,11 +80,9 @@ export const OrganizationDashboard = ({ } 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 @@ -96,7 +93,6 @@ export const OrganizationDashboard = ({ setError(response as string) } } - // setLoading(false) } const handleEditOrg = (): void => {