From 91a9d80341daffac8def4d7ab0c4392a34ee5c00 Mon Sep 17 00:00:00 2001 From: Alain Nicolas Date: Thu, 6 Jun 2024 21:31:11 +0200 Subject: [PATCH] fix(explorer): Explorer is not displaying all the attestations from a given address (#620) --- .../src/assets/icons/magnifying-glass.svg | 6 ++ explorer/src/assets/locales/en/en.json | 3 + explorer/src/constants/index.ts | 1 + .../index.tsx | 8 +- .../loadAttestationReceivedList.ts} | 23 ++--- explorer/src/pages/Search/index.tsx | 90 ++++++++++++------- 6 files changed, 77 insertions(+), 54 deletions(-) create mode 100644 explorer/src/assets/icons/magnifying-glass.svg rename explorer/src/pages/Search/components/{SearchAttestations => SearchAttestationsReceived}/index.tsx (74%) rename explorer/src/pages/Search/components/{SearchAttestations/loadAttestationList.ts => SearchAttestationsReceived/loadAttestationReceivedList.ts} (54%) diff --git a/explorer/src/assets/icons/magnifying-glass.svg b/explorer/src/assets/icons/magnifying-glass.svg new file mode 100644 index 00000000..bd8f04eb --- /dev/null +++ b/explorer/src/assets/icons/magnifying-glass.svg @@ -0,0 +1,6 @@ + + + diff --git a/explorer/src/assets/locales/en/en.json b/explorer/src/assets/locales/en/en.json index 84c29790..b156d5fb 100644 --- a/explorer/src/assets/locales/en/en.json +++ b/explorer/src/assets/locales/en/en.json @@ -25,6 +25,7 @@ "notFound": "Not Found", "noResults": "No Results", "hasntBeenFound": "hasn`t been found", + "searchInProgress": "Searching for “{{search}}”...", "searchNotFound": "Nothing found on “{{search}}” search request", "searchFound": "{{count}} results found on “{{search}}” search request", "perPage": "per page" @@ -64,6 +65,8 @@ }, "attestation": { "title": "Attestation", + "received": "Attestations received", + "issued": "Attestations issued", "list": { "title": "Explore Attestations", "switch": { diff --git a/explorer/src/constants/index.ts b/explorer/src/constants/index.ts index c4a6a012..b2204b01 100644 --- a/explorer/src/constants/index.ts +++ b/explorer/src/constants/index.ts @@ -10,6 +10,7 @@ export const ZERO_STRING = "0"; export const TEN = 10; export const ZERO = 0; export const ITEMS_PER_PAGE_DEFAULT = 10; +export const ITEMS_SEARCHED_DEFAULT = 100; export const CURRENT_PAGE_DEFAULT = 1; export const THOUSAND = 1e3; export const BILLION = 1e9; diff --git a/explorer/src/pages/Search/components/SearchAttestations/index.tsx b/explorer/src/pages/Search/components/SearchAttestationsReceived/index.tsx similarity index 74% rename from explorer/src/pages/Search/components/SearchAttestations/index.tsx rename to explorer/src/pages/Search/components/SearchAttestationsReceived/index.tsx index 81446406..3cba8a12 100644 --- a/explorer/src/pages/Search/components/SearchAttestations/index.tsx +++ b/explorer/src/pages/Search/components/SearchAttestationsReceived/index.tsx @@ -7,11 +7,11 @@ import { SWRKeys } from "@/interfaces/swr/enum"; import { useNetworkContext } from "@/providers/network-provider/context"; import { APP_ROUTES } from "@/routes/constants"; -import { loadAttestationList } from "./loadAttestationList"; +import { loadAttestationReceivedList } from "./loadAttestationReceivedList.ts"; import { SearchComponentProps } from "../interfaces"; import { SearchWrapper } from "../SearchWrapper"; -export const SearchAttestations: React.FC = ({ getSearchData, parsedString, search }) => { +export const SearchAttestationsReceived: React.FC = ({ getSearchData, parsedString, search }) => { const { sdk, network: { chain }, @@ -19,7 +19,7 @@ export const SearchAttestations: React.FC = ({ getSearchDa const { data } = useSWR( `${SWRKeys.GET_ATTESTATION_LIST}/${SWRKeys.SEARCH}/${search}/${chain.id}`, - async () => loadAttestationList(sdk.attestation, parsedString), + async () => loadAttestationReceivedList(sdk.attestation, parsedString), { shouldRetryOnError: false, revalidateAll: false, @@ -30,7 +30,7 @@ export const SearchAttestations: React.FC = ({ getSearchDa if (!data || !data.length) return null; return ( - + ); diff --git a/explorer/src/pages/Search/components/SearchAttestations/loadAttestationList.ts b/explorer/src/pages/Search/components/SearchAttestationsReceived/loadAttestationReceivedList.ts similarity index 54% rename from explorer/src/pages/Search/components/SearchAttestations/loadAttestationList.ts rename to explorer/src/pages/Search/components/SearchAttestationsReceived/loadAttestationReceivedList.ts index 4eab757e..19d85f59 100644 --- a/explorer/src/pages/Search/components/SearchAttestations/loadAttestationList.ts +++ b/explorer/src/pages/Search/components/SearchAttestationsReceived/loadAttestationReceivedList.ts @@ -1,24 +1,20 @@ import AttestationDataMapper from "@verax-attestation-registry/verax-sdk/lib/types/src/dataMapper/AttestationDataMapper"; -import { ITEMS_PER_PAGE_DEFAULT } from "@/constants"; +import { ITEMS_SEARCHED_DEFAULT } from "@/constants"; import { ResultParseSearch } from "@/interfaces/components"; import { isNotNullOrUndefined } from "@/utils"; import { uniqMap } from "@/utils/searchUtils"; -export const loadAttestationList = async ( +export const loadAttestationReceivedList = async ( attestation: AttestationDataMapper, parsedString: Partial, ) => { - const [listByAddress] = parsedString.address + const [listBySubject] = parsedString.address ? await Promise.all( parsedString.address.map(async (address) => { - const attestationResults = attestation.findBy(ITEMS_PER_PAGE_DEFAULT, undefined, { - attester_contains: address, + return attestation.findBy(ITEMS_SEARCHED_DEFAULT, undefined, { + subject: address, }); - const subjectResults = attestation.findBy(ITEMS_PER_PAGE_DEFAULT, undefined, { - subject_contains: address, - }); - return Promise.all([attestationResults, subjectResults]); }), ) : []; @@ -30,15 +26,10 @@ export const loadAttestationList = async ( ).filter(isNotNullOrUndefined); const listBySchemaString = parsedString.schemaString - ? await attestation.findBy(ITEMS_PER_PAGE_DEFAULT, undefined, { schemaString: parsedString.schemaString }) + ? await attestation.findBy(ITEMS_SEARCHED_DEFAULT, undefined, { schemaString: parsedString.schemaString }) : []; - const results = [ - ...(listByIds || []), - ...(listByAddress?.[0] || []), - ...(listByAddress?.[1] || []), - ...(listBySchemaString || []), - ]; + const results = [...(listByIds || []), ...(listBySubject || []), ...(listBySchemaString || [])]; return uniqMap(results, "id"); }; diff --git a/explorer/src/pages/Search/index.tsx b/explorer/src/pages/Search/index.tsx index dc807b78..8bc00ec6 100644 --- a/explorer/src/pages/Search/index.tsx +++ b/explorer/src/pages/Search/index.tsx @@ -1,8 +1,9 @@ -import { useMemo, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import { Trans } from "react-i18next"; import { useSearchParams } from "react-router-dom"; import archive from "@/assets/icons/archive.svg"; +import magnifyingGlass from "@/assets/icons/magnifying-glass.svg"; import { InfoBlock } from "@/components/InfoBlock"; import { EMPTY_STRING } from "@/constants"; import { DEFAULT_SEARCH_ELEMENTS } from "@/constants/components"; @@ -10,7 +11,7 @@ import { EQueryParams } from "@/enums/queryParams"; import { Page, SearchElementProps } from "@/interfaces/components"; import { parseSearch } from "@/utils/searchUtils"; -import { SearchAttestations } from "./components/SearchAttestations"; +import { SearchAttestationsReceived } from "./components/SearchAttestationsReceived"; import { SearchModules } from "./components/SearchModules"; import { SearchPortals } from "./components/SearchPortals"; import { SearchSchemas } from "./components/SearchSchemas"; @@ -22,17 +23,37 @@ export const Search = () => { const parsedString = useMemo(() => parseSearch(search), [search]); const [searchElements, setSearchElements] = useState(DEFAULT_SEARCH_ELEMENTS); - const count = Object.values(searchElements).reduce((acc, currentValue) => acc + currentValue.count, 0); - const isLoaded = Object.values(searchElements).every((element) => element.loaded); + const [notFound, setNotFound] = useState(false); + const [count, setCount] = useState(0); + const [isLoaded, setIsLoaded] = useState(false); + + useEffect(() => { + const newCount = Object.values(searchElements).reduce((acc, currentValue) => acc + currentValue.count, 0); + const newIsLoaded = Object.values(searchElements).every((element) => element.loaded); + + setCount(newCount); + setIsLoaded(newIsLoaded); + setNotFound(newIsLoaded && newCount === 0); + }, [searchElements]); const updateSearchElement = (page: Page, count: number, loaded: boolean) => { setSearchElements((prev) => ({ ...prev, [page]: { loaded, count } })); }; - const notFound = isLoaded && count === 0; return (
- {notFound ? ( + {!isLoaded && ( + } + message={ + + }} /> + + } + /> + )} + + {notFound && ( } message={ @@ -41,35 +62,36 @@ export const Search = () => { } /> - ) : ( - <> -

- }} /> -

-
- updateSearchElement("attestation", count, loaded)} - /> - updateSearchElement("schema", count, loaded)} - /> - updateSearchElement("module", count, loaded)} - /> - updateSearchElement("portal", count, loaded)} - /> -
- )} + + {count > 0 && ( +

+ }} /> +

+ )} + +
+ updateSearchElement("attestation", count, loaded)} + /> + updateSearchElement("schema", count, loaded)} + /> + updateSearchElement("module", count, loaded)} + /> + updateSearchElement("portal", count, loaded)} + /> +
); };