fix(web): fix-registries-ordering

Author: tractorss

web/src/hooks/queries/useRegistriesByIdsQuery.ts

@@ -1,6 +1,7 @@
 import { graphql } from "src/graphql";
 import { useQuery } from "@tanstack/react-query";
 import { useGraphqlBatcher } from "context/GraphqlBatcher";
+import { GetRegistriesByIdsQuery } from "src/graphql/graphql";
 
 export const registriesByIdsQuery = graphql(`
   query GetRegistriesByIds($ids: [ID!]!) {
@@ -19,7 +20,7 @@ export const registriesByIdsQuery = graphql(`
 export const useRegistriesByIdsQuery = (ids) => {
   const { graphqlBatcher } = useGraphqlBatcher();
 
-  return useQuery({
+  return useQuery<GetRegistriesByIdsQuery>({
     queryKey: ["GetRegistriesByIds", ids.join(",")],
     queryFn: async () =>
       await graphqlBatcher.fetch({

web/src/pages/AllLists/RegistriesFetcher.tsx

@@ -12,6 +12,7 @@ import { isUndefined } from "utils/index";
 import { OrderDirection } from "src/graphql/graphql";
 import { useRegistryDetailsQuery } from "hooks/queries/useRegistryDetailsQuery";
 import { List_filters } from "consts/filters";
+import { sortRegistriesByIds } from "utils/sortRegistriesByIds";
 
 const RegistriesFetcher: React.FC = () => {
   const { page, order, filter } = useParams();
@@ -44,18 +45,23 @@ const RegistriesFetcher: React.FC = () => {
   const registryIds = useMemo(
     () =>
       itemsData
-        ? itemsData?.items
+        ? (itemsData?.items
             .map((item) => item?.props[0]?.value?.toLowerCase() ?? undefined)
-            .filter((id) => !isUndefined(id))
+            .filter((id) => !isUndefined(id)) as string[])
         : [],
     [itemsData]
   );
 
   // get registries by id
   const { data: registriesData, isLoading: isRegistriesDataLoading } = useRegistriesByIdsQuery(registryIds);
 
+  const sortedRegstries = useMemo(
+    () => (registriesData?.registries ? sortRegistriesByIds(registryIds, registriesData?.registries) : []),
+    [registriesData]
+  );
+
   const combinedListsData = useMemo(() => {
-    return registriesData?.registries.map((registry) => {
+    return sortedRegstries.map((registry) => {
       const registryAsItem = itemsData?.items.find((item) => item?.props[0]?.value?.toLowerCase() === registry.id);
       return {
         ...registry,
@@ -65,7 +71,7 @@ const RegistriesFetcher: React.FC = () => {
         itemId: registryAsItem?.id,
       };
     });
-  }, [registriesData, itemsData]);
+  }, [sortedRegstries, itemsData]);
 
   const totalRegistries = useMemo<number>(() => {
     if (!mainCurate || !mainCurate.registry) return 0;

web/src/pages/Home/Highlights/index.tsx

@@ -14,6 +14,7 @@ import { useNavigateAndScrollTop } from "hooks/useNavigateAndScrollTop";
 import { useItemsQuery } from "queries/useItemsQuery";
 import { useRegistriesByIdsQuery } from "queries/useRegistriesByIdsQuery";
 import { mapFromSubgraphStatus } from "components/RegistryCard/StatusBanner";
+import { sortRegistriesByIds } from "utils/sortRegistriesByIds";
 
 const Container = styled.div`
   width: 100%;
@@ -51,21 +52,25 @@ const HighlightedLists = () => {
     registry: listOfListsAddresses[DEFAULT_CHAIN],
   });
 
-  // TODO: Json.parse can throw error
   const registryIds = useMemo(
     () =>
       itemsData
-        ? itemsData?.items
+        ? (itemsData?.items
             .map((item) => item?.props[0]?.value?.toLowerCase() ?? undefined)
-            .filter((id) => !isUndefined(id))
+            .filter((id) => !isUndefined(id)) as string[])
         : [],
     [itemsData]
   );
 
   const { data: registriesData, isLoading: isRegistriesDataLoading } = useRegistriesByIdsQuery(registryIds);
 
+  const sortedRegstries = useMemo(
+    () => (registriesData?.registries ? sortRegistriesByIds(registryIds, registriesData?.registries) : []),
+    [registriesData]
+  );
+
   const combinedListsData = useMemo(() => {
-    return registriesData?.registries.map((registry) => {
+    return sortedRegstries.map((registry) => {
       const registryAsItem = itemsData?.items.find((item) => item?.props[0]?.value?.toLowerCase() === registry.id);
       return {
         ...registry,
@@ -75,7 +80,7 @@ const HighlightedLists = () => {
         itemId: registryAsItem?.id,
       };
     });
-  }, [registriesData, itemsData]);
+  }, [sortedRegstries, itemsData]);
 
   const registriesLoading = isUndefined(combinedListsData) || isItemsDataLoading || isRegistriesDataLoading;
 

web/src/utils/sortRegistriesByIds.ts

@@ -0,0 +1,17 @@
+import { GetRegistriesByIdsQuery } from "src/graphql/graphql";
+
+/**
+ *
+ * @param registryIds Array containing registry ids
+ * @param registries Array containing registry objects to be sorted
+ * @returns An array of Registries matching the order of registryIds
+ */
+export const sortRegistriesByIds = (registryIds: string[], registries: GetRegistriesByIdsQuery["registries"]) => {
+  const idToIndexMap = {};
+  registryIds.forEach((id, index) => {
+    idToIndexMap[id] = index;
+  });
+
+  registries.sort((a, b) => idToIndexMap[a.id] - idToIndexMap[b.id]);
+  return registries;
+};