diff --git a/src/app/tenders/[details]/page.tsx b/src/app/tenders/[details]/page.tsx index 2cd7f99..20febc8 100644 --- a/src/app/tenders/[details]/page.tsx +++ b/src/app/tenders/[details]/page.tsx @@ -1,12 +1,12 @@ "use client"; -import Loading from "@/components/loading"; import { LocationIcon } from "@/assets/icons"; import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb"; import { ShowcaseSection } from "@/components/Layouts/showcase-section"; +import Loading from "@/components/loading"; import Status from "@/components/ui/Status"; import { useTenderDetailQuery } from "@/hooks/queries"; import { useGetFlagQuery } from "@/hooks/queries/useFlagsQueries"; -import { msToDate } from "@/utils/shared"; +import { isValidAlpha2CountryCode, msToDate } from "@/utils/shared"; import getSymbolFromCurrency from "currency-symbol-map"; import Link from "next/link"; import { use } from "react"; @@ -20,12 +20,17 @@ interface IProps { const TenderDetails = ({ params }: IProps) => { const { details } = use(params); const { data, isLoading, isError } = useTenderDetailQuery(details); + const countryCodeNormalized = + data?.data.country_code?.trim().toUpperCase() ?? ""; + const countryCodeValid = isValidAlpha2CountryCode(countryCodeNormalized); + const { data: flagData } = useGetFlagQuery(countryCodeNormalized, { + enabled: countryCodeValid, + }); const breadcrumbItems = [ { name: "Dashboard", href: "/" }, { name: "Tenders", href: "/tenders" }, { name: "Tender details", href: `/tenders/${details}` }, ]; - const { data: flagData } = useGetFlagQuery(data?.data.country_code ?? "EU"); if (isLoading) return ; if (isError) return
Error
; return ( @@ -83,10 +88,12 @@ const TenderDetails = ({ params }: IProps) => {

{data?.data.country_code}

-
+ {flagData && ( +
+ )}
{data?.data.currency && ( diff --git a/src/hooks/queries/useFlagsQueries.ts b/src/hooks/queries/useFlagsQueries.ts index 2383695..ee40852 100644 --- a/src/hooks/queries/useFlagsQueries.ts +++ b/src/hooks/queries/useFlagsQueries.ts @@ -3,7 +3,10 @@ import { flagsService } from "@/lib/api/services/flags-service"; import { useQuery } from "@tanstack/react-query"; import { useMemo } from "react"; -export const useGetFlagQuery = (countryCode: string) => { +export const useGetFlagQuery = ( + countryCode: string, + options?: { enabled?: boolean }, +) => { const queryKey = useMemo( () => [API_ENDPOINTS.FLAGS(countryCode)], [countryCode], @@ -12,5 +15,6 @@ export const useGetFlagQuery = (countryCode: string) => { return useQuery({ queryKey, queryFn: () => flagsService.getCountryFlag(countryCode), + enabled: options?.enabled ?? true, }); }; diff --git a/src/utils/shared.ts b/src/utils/shared.ts index 7ff7269..5495435 100644 --- a/src/utils/shared.ts +++ b/src/utils/shared.ts @@ -110,3 +110,4 @@ export const deleteEmptyKeys = (obj: Record) => { } return newObj; }; +export const isValidAlpha2CountryCode = (code: string) => /^[A-Za-z]{2}$/.test(code); \ No newline at end of file