destructure

Author: pa-lem

frontend/app/src/entities/events/api/get-events.query.ts

@@ -2,7 +2,9 @@ import { getCurrentBranchName } from "@/entities/branches/domain/get-current-bra
 import { store } from "@/shared/stores";
 import { datetimeAtom } from "@/shared/stores/time.atom";
 import { queryOptions, useQuery } from "@tanstack/react-query";
-import { getEventsFromApi } from "./get-events";
+import { EventType } from "../ui/event";
+import { INFRAHUB_EVENT } from "../utils/constants";
+import { getEventsFromApi } from "./get-events-from-api";
 
 export function getEventsQueryOptions({
   ids,
@@ -34,5 +36,17 @@ export const useEvents = ({
   limit,
   search,
 }: { ids?: Array<string | undefined>; offset?: number; limit?: number; search?: string }) => {
-  return useQuery(getEventsQueryOptions({ ids, offset, limit, search }));
+  const { data } = useQuery(getEventsQueryOptions({ ids, offset, limit, search }));
+
+  const activities: EventType[] = data?.data?.[INFRAHUB_EVENT]?.edges?.map((edge) => {
+    return edge.node;
+  });
+
+  const count = data?.data?.[INFRAHUB_EVENT]?.count;
+
+  return {
+    ...useQuery(getEventsQueryOptions({ ids, offset, limit, search })),
+    data: activities,
+    count,
+  };
 };

frontend/app/src/entities/events/ui/global-events.tsx

@@ -8,25 +8,17 @@ import { Spinner } from "@/shared/components/ui/spinner";
 import usePagination from "@/shared/hooks/usePagination";
 import useSearch from "@/shared/hooks/useSearch";
 import { useEvents } from "../api/get-events.query";
-import { INFRAHUB_EVENT } from "../utils/constants";
-import { EventType } from "./event";
 import { Event } from "./global-event";
 
 export const GlobalEvents = () => {
   const [pagination] = usePagination();
   const [search] = useSearch();
-  const { isLoading, data, error, refetch } = useEvents({ ...pagination, search });
+  const { isLoading, data, count, error, refetch } = useEvents({ ...pagination, search });
 
   if (error) {
     return <ErrorFallback error={error} />;
   }
 
-  const activities: EventType[] = data?.data?.[INFRAHUB_EVENT]?.edges?.map((edge) => {
-    return edge.node;
-  });
-
-  const count = data?.data?.[INFRAHUB_EVENT]?.count;
-
   return (
     <Content.Card>
       <Content.CardTitle
@@ -43,9 +35,9 @@ export const GlobalEvents = () => {
         </div>
 
         <div className="flex flex-col gap-2">
-          {!isLoading && !activities?.length && <NoDataFound message="No activity found." />}
+          {!isLoading && !data?.length && <NoDataFound message="No activity found." />}
 
-          {activities?.map((activity) => (
+          {data?.map((activity) => (
             <Event key={activity.id} {...activity} />
           ))}
         </div>