chore: update @ts-endpoint/react-admin and @ts-endpoint/tanstack-query

Author: ascariandrea

packages/@liexp/backend/src/queries/actors/fetchActors.query.ts

@@ -13,6 +13,7 @@ import { DBService } from "../../services/db.service.js";
 const defaultQuery: http.Actor.GetListActorQuery = {
   ids: O.none(),
   q: O.none(),
+  memberIn: O.none(),
   withDeleted: O.none(),
   _end: O.some(20),
   _start: O.some(0),
@@ -24,7 +25,7 @@ export const fetchActors = <C extends DatabaseContext & ENVContext>(
 ): ReaderTaskEither<C, DBError, { total: number; results: ActorEntity[] }> => {
   const finalQuery = { ...defaultQuery, ...query };
 
-  const { ids, q: search, withDeleted, ...otherQuery } = finalQuery;
+  const { ids, q: search, withDeleted, memberIn, ...otherQuery } = finalQuery;
 
   return pipe(
     DBService.getORMOptions<C, typeof otherQuery>({ ...otherQuery }),
@@ -43,6 +44,12 @@ export const fetchActors = <C extends DatabaseContext & ENVContext>(
               });
             }
 
+            if (O.isSome(memberIn)) {
+              return q.andWhere("actors.memberIn IN (:...memberIn)", {
+                memberIn: memberIn.value,
+              });
+            }
+
             if (O.isSome(withDeleted) && withDeleted.value) {
               q.andWhere("actors.deletedAt IS NOT NULL");
             }

packages/@liexp/shared/src/endpoints/group.endpoints.ts

@@ -23,6 +23,7 @@ export const List = Endpoint({
       username: OptionFromNullishToNull(Schema.String),
       ids: OptionFromNullishToNull(Schema.Array(UUID)),
       members: OptionFromNullishToNull(Schema.Array(Schema.String)),
+      excludeIds: OptionFromNullishToNull(Schema.Array(UUID)),
     }),
   },
   Output: Group.GroupListOutput,

packages/@liexp/shared/src/io/http/Actor.ts

@@ -11,7 +11,8 @@ export const ACTORS = Schema.Literal("actors");
 export type ACTORS = typeof ACTORS.Type;
 
 const GetListActorQueryStruct = Schema.Struct({
-  ids: OptionFromNullishToNull(Schema.Array(Schema.String)),
+  ids: OptionFromNullishToNull(Schema.Array(UUID)),
+  memberIn: OptionFromNullishToNull(Schema.Array(UUID)),
   withDeleted: OptionFromNullishToNull(Schema.BooleanFromString),
 });
 

packages/@liexp/ui/src/components/ActorPageContent.tsx

@@ -60,14 +60,10 @@ export const ActorPageContent: React.FC<ActorPageContentProps> = ({
           <ActorsBox
             style={{ display: "flex", flexDirection: "row" }}
             params={{
-              sort: { field: "updatedAt", order: "DESC" },
-              pagination: {
-                page: 1,
-                perPage: 3,
-              },
-              filter: {
-                group: groups.map((g) => g.id),
-              },
+              memberIn: groups.map((g) => g.id),
+              _sort: "updatedAt",
+              _order: "DESC",
+              _end: "3",
             }}
             onActorClick={onActorClick}
           />

packages/@liexp/ui/src/components/Common/BlockNote/plugins/block/MediaBlock.plugin.tsx

@@ -63,12 +63,10 @@ export const MediaBlockPluginRenderer: React.FC<{
           enableDescription={enableDescription}
           disableZoom={false}
           query={{
-            filter: { ids: ids },
-            pagination: { page: 1, perPage: ids.length },
-            sort: {
-              field: "id",
-              order: "ASC",
-            },
+            ids: ids,
+            _end: ids.length.toString(),
+            _sort: "id",
+            _order: "ASC",
           }}
           itemStyle={() => ({ height })}
         />

packages/@liexp/ui/src/components/Common/BlockNote/plugins/renderer/InlineRelationsBoxPlugin.tsx

@@ -49,13 +49,10 @@ export const InlineRelationsPlugin: React.FC<InlineRelationsPluginProps> = ({
     <StyledBox className={classes.root}>
       <ActorsBox
         style={{ display: "flex", flexDirection: "row" }}
-        params={{ filter: { ids: actors } }}
+        params={{ ids: actors }}
         onActorClick={onActorClick}
       />
-      <GroupsBox
-        params={{ filter: { ids: groups } }}
-        onItemClick={onGroupClick}
-      />
+      <GroupsBox params={{ ids: groups }} onItemClick={onGroupClick} />
       <KeywordsBox ids={keywords} onItemClick={onKeywordClick} />
       <EventTimelinePlugin events={events} onEventClick={onEventClick} />
       <MediaBox columns={3} filter={{ ids: media }} onClick={onMediaClick} />

packages/@liexp/ui/src/components/Common/Filters/SearchFiltersBox.tsx

@@ -252,7 +252,7 @@ const SearchFiltersBar: React.FC<SearchFiltersBarProps> = ({
         display: "flex",
         flexDirection: "row",
       }}
-      params={{ filter: { ids: query.actors } }}
+      params={{ ids: query.actors }}
       onActorClick={(a, e) => {
         e.stopPropagation();
         handleQueryChange({
@@ -329,7 +329,7 @@ const SearchFiltersBar: React.FC<SearchFiltersBarProps> = ({
                     display: "flex",
                     flexDirection: "row",
                   }}
-                  params={{ filter: { ids: query.groups } }}
+                  params={{ ids: query.groups }}
                   onItemClick={(k, e) => {
                     e.stopPropagation();
                     const groups = (query.groups ?? []).filter(

packages/@liexp/ui/src/components/EventsMap.tsx

@@ -102,23 +102,23 @@ const EventsMap: React.FC<EventsMapProps> = (props) => {
     <QueriesRenderer
       queries={(Q) => ({
         events: Q.Event.list.useQuery(
+          undefined,
           {
-            pagination: { page: 1, perPage: 100 },
-            sort: { field: "startDate", order: "DESC" },
-            filter: {
-              title: pipe(title ?? fp.O.none, fp.O.toUndefined),
-              startDate:
-                startDate?._tag === "Some"
-                  ? startDate.value.toISOString()
-                  : undefined,
-              endDate:
-                endDate?._tag === "Some"
-                  ? endDate.value.toISOString()
-                  : undefined,
-              ...filters,
-            },
+            _end: 100,
+            _field: "startDate",
+            _order: "DESC",
+            title: pipe(title ?? fp.O.none, fp.O.toUndefined),
+            startDate:
+              startDate?._tag === "Some"
+                ? startDate.value.toISOString()
+                : undefined,
+            endDate:
+              endDate?._tag === "Some"
+                ? endDate.value.toISOString()
+                : undefined,
+            ...filters,
           },
-          undefined,
+
           false,
         ),
       })}

packages/@liexp/ui/src/components/Graph/ActorHierarchyEdgeBundlingGraph.tsx

@@ -18,11 +18,9 @@ export const ActorHierarchyEdgeBundlingGraph: React.FC<
   return (
     <QueriesRenderer
       queries={(Q) => ({
-        graph: Q.Stats.list.useQuery({
-          filter: {
-            id: actor,
-            type: StatsType.members[1].literals[0],
-          },
+        graph: Q.Stats.list.useQuery(undefined, {
+          id: actor,
+          type: StatsType.members[1].literals[0],
         }),
       })}
       render={({ graph }) => {

packages/@liexp/ui/src/components/GroupMembersBox.tsx

@@ -40,14 +40,13 @@ export const GroupMembersBox: React.FC<GroupMembersBoxProps> = ({
         loader="default"
         queries={(Q) => ({
           groupsMembers: Q.GroupMember.list.useQuery(
+            undefined,
             {
-              pagination: { page: 1, perPage: 10 },
-              sort: { field: "createdAt", order: "DESC" },
-              filter: {
-                ids,
-              },
+              ids,
+              _sort: "createdAt",
+              _order: "DESC",
+              _end: "10",
             },
-            undefined,
             false,
           ),
         })}

packages/@liexp/ui/src/components/Input/AutocompleteActorInput.tsx

@@ -1,3 +1,4 @@
+import { type Endpoints } from "@liexp/shared/lib/endpoints/index.js";
 import { type Actor } from "@liexp/shared/lib/io/http/index.js";
 import { useQuery } from "@tanstack/react-query";
 import * as React from "react";
@@ -23,7 +24,7 @@ export const AutocompleteActorInput: React.FC<AutocompleteActorInputProps> = ({
 }) => {
   const Queries = useEndpointQueries();
   return (
-    <AutocompleteInput<Actor.Actor>
+    <AutocompleteInput<typeof Endpoints.Actor.List>
       disablePortal={true}
       placeholder="Actors..."
       getOptionLabel={(a) => (typeof a === "string" ? a : a.fullName)}
@@ -37,7 +38,7 @@ export const AutocompleteActorInput: React.FC<AutocompleteActorInputProps> = ({
               queryFn: () =>
                 Promise.resolve({ data: options, total: options.length }),
             })
-          : Queries.Actor.list.useQuery(p, undefined, discrete)
+          : Queries.Actor.list.useQuery(undefined, p, discrete)
       }
       renderTags={(items) => (
         <ActorList

packages/@liexp/ui/src/components/Input/AutocompleteAreaInput.tsx

@@ -1,3 +1,4 @@
+import { type Endpoints } from "@liexp/shared/lib/endpoints/index.js";
 import { type Area } from "@liexp/shared/lib/io/http/index.js";
 import * as React from "react";
 import { useConfiguration } from "../../context/ConfigurationContext.js";
@@ -23,14 +24,14 @@ export const AutocompleteAreaInput: React.FC<AutocompleteAreaInputProps> = ({
   const Queries = useEndpointQueries();
   const conf = useConfiguration();
   return (
-    <AutocompleteInput<Area.Area>
+    <AutocompleteInput<typeof Endpoints.Area.List>
       className={className}
       placeholder="Search area..."
       getOptionLabel={(a) => (typeof a === "string" ? a : a.label)}
       searchToFilter={(q) => ({ q })}
       selectedItems={selectedItems}
       query={(p) =>
-        Queries.Area.list.useQuery(p, undefined, discrete, "search")
+        Queries.Area.list.useQuery(undefined, p, discrete, "search")
       }
       renderTags={(items) => (
         <AreaList

packages/@liexp/ui/src/components/Input/AutocompleteEventInput.tsx

@@ -1,3 +1,4 @@
+import { type Endpoints } from "@liexp/shared/lib/endpoints/index.js";
 import { getTitle } from "@liexp/shared/lib/helpers/event/index.js";
 import { toSearchEvent } from "@liexp/shared/lib/helpers/event/search-event.js";
 import { type EventType } from "@liexp/shared/lib/io/http/Events/EventType.js";
@@ -29,7 +30,7 @@ export const AutocompleteEventInput: React.FC<AutocompleteEventInputProps> = ({
   const Queries = useEndpointQueries();
   const conf = useConfiguration();
   return (
-    <AutocompleteInput<Events.Event>
+    <AutocompleteInput<typeof Endpoints.Event.List, Events.Event>
       placeholder="Event description..."
       getOptionLabel={(a) =>
         typeof a === "string"
@@ -48,16 +49,13 @@ export const AutocompleteEventInput: React.FC<AutocompleteEventInputProps> = ({
       selectedItems={selectedItems}
       query={(p) =>
         Queries.Event.list.useQuery(
+          undefined,
           {
             ...p,
-            filter: {
-              ...filter,
-              ...p.filter,
-              // TODO: implement this on backend
-              relations: [MEDIA.Type],
-            },
+            ...filter,
+            // TODO: implement this on backend
+            relations: [MEDIA.Type],
           },
-          undefined,
           discrete,
         )
       }

packages/@liexp/ui/src/components/Input/AutocompleteGroupInput.tsx

@@ -1,3 +1,4 @@
+import { type Endpoints } from "@liexp/shared/lib/endpoints/index.js";
 import { type Group } from "@liexp/shared/lib/io/http/index.js";
 import { useQuery } from "@tanstack/react-query";
 import * as React from "react";
@@ -25,7 +26,7 @@ export const AutocompleteGroupInput: React.FC<AutocompleteGroupInputProps> = ({
 }) => {
   const Queries = useEndpointQueries();
   return (
-    <AutocompleteInput<Group.Group>
+    <AutocompleteInput<typeof Endpoints.Group.List>
       placeholder="Groups..."
       getOptionLabel={(a) => (typeof a === "string" ? a : a.name)}
       searchToFilter={(q) => ({ q })}
@@ -39,10 +40,11 @@ export const AutocompleteGroupInput: React.FC<AutocompleteGroupInputProps> = ({
                 Promise.resolve({ data: options, total: options.length }),
             })
           : Queries.Group.list.useQuery(
+              undefined,
               {
-                filter: { ...p.filter, excludeIds },
+                ...p,
+                excludeIds,
               },
-              undefined,
               discrete,
             )
       }

packages/@liexp/ui/src/components/Input/AutocompleteGroupMemberInput.tsx

@@ -1,3 +1,4 @@
+import { type Endpoints } from "@liexp/shared/lib/endpoints/index.js";
 import { type GroupMember } from "@liexp/shared/lib/io/http/index.js";
 import * as React from "react";
 import { useEndpointQueries } from "../../hooks/useEndpointQueriesProvider.js";
@@ -18,14 +19,17 @@ export const AutocompleteGroupMemberInput: React.FC<
 > = ({ selectedItems, onItemClick, ...props }) => {
   const Queries = useEndpointQueries();
   return (
-    <AutocompleteInput<GroupMember.GroupMember>
+    <AutocompleteInput<
+      typeof Endpoints.GroupMember.List,
+      GroupMember.GroupMember
+    >
       placeholder="Group Member..."
       searchToFilter={(tag) => ({ tag })}
       selectedItems={selectedItems}
       getOptionLabel={(k) =>
         typeof k === "string" ? k : `${k.group.name} - ${k.actor.fullName}`
       }
-      query={(p) => Queries.GroupMember.list.useQuery(p, undefined, true)}
+      query={(p) => Queries.GroupMember.list.useQuery(undefined, p, true)}
       renderTags={(items) => (
         <GroupsMembersList
           groupsMembers={items.map((i) => ({