Merge branch 'entity-request' into 'develop'

EntityStore: refactor all hooks to use callbacks

See merge request soapbox-pub/soapbox!2379

app/soapbox/entity-store/hooks/types.ts

@@ -1,4 +1,5 @@
 import type { Entity } from '../types';
+import type { AxiosResponse } from 'axios';
 import type z from 'zod';
 
 type EntitySchema<TEntity extends Entity = Entity> = z.ZodType<TEntity, z.ZodTypeDef, any>;
@@ -24,9 +25,23 @@ type EntitiesPath = [entityType: string, listKey: string]
 /** Used to look up a single entity by its ID. */
 type EntityPath = [entityType: string, entityId: string]
 
+/** Callback functions for entity actions. */
+interface EntityCallbacks<Value, Error = unknown> {
+  onSuccess?(value: Value): void
+  onError?(error: Error): void
+}
+
+/**
+ * Passed into hooks to make requests.
+ * Must return an Axios response.
+ */
+type EntityFn<T> = (value: T) => Promise<AxiosResponse>
+
 export type {
   EntitySchema,
   ExpandedEntitiesPath,
   EntitiesPath,
   EntityPath,
+  EntityCallbacks,
+  EntityFn,
 };

app/soapbox/entity-store/hooks/useCreateEntity.ts

@@ -1,52 +1,33 @@
 import { z } from 'zod';
 
-import { useAppDispatch } from 'soapbox/hooks';
+import { useAppDispatch, useLoading } from 'soapbox/hooks';
 
 import { importEntities } from '../actions';
 
 import { parseEntitiesPath } from './utils';
 
 import type { Entity } from '../types';
-import type { EntitySchema, ExpandedEntitiesPath } from './types';
-
-type CreateFn<Params, Result> = (params: Params) => Promise<Result> | Result;
+import type { EntityCallbacks, EntityFn, EntitySchema, ExpandedEntitiesPath } from './types';
 
 interface UseCreateEntityOpts<TEntity extends Entity = Entity> {
   schema?: EntitySchema<TEntity>
 }
 
-type CreateEntityResult<TEntity extends Entity = Entity, Result = unknown, Error = unknown> =
-  {
-    success: true
-    result: Result
-    entity: TEntity
-  } | {
-    success: false
-    error: Error
-  }
-
-interface EntityCallbacks<TEntity extends Entity = Entity, Error = unknown> {
-  onSuccess?(entity: TEntity): void
-  onError?(error: Error): void
-}
-
-function useCreateEntity<TEntity extends Entity = Entity, Params = any, Result = unknown>(
+function useCreateEntity<TEntity extends Entity = Entity, Data = unknown>(
   expandedPath: ExpandedEntitiesPath,
-  createFn: CreateFn<Params, Result>,
+  entityFn: EntityFn<Data>,
   opts: UseCreateEntityOpts<TEntity> = {},
 ) {
-  const { entityType, listKey } = parseEntitiesPath(expandedPath);
-
   const dispatch = useAppDispatch();
 
-  return async function createEntity(
-    params: Params,
-    callbacks: EntityCallbacks = {},
-  ): Promise<CreateEntityResult<TEntity>> {
+  const [isLoading, setPromise] = useLoading();
+  const { entityType, listKey } = parseEntitiesPath(expandedPath);
+
+  async function createEntity(data: Data, callbacks: EntityCallbacks<TEntity> = {}): Promise<void> {
     try {
-      const result = await createFn(params);
+      const result = await setPromise(entityFn(data));
       const schema = opts.schema || z.custom<TEntity>();
-      const entity = schema.parse(result);
+      const entity = schema.parse(result.data);
 
       // TODO: optimistic updating
       dispatch(importEntities([entity], entityType, listKey));
@@ -54,22 +35,16 @@ function useCreateEntity<TEntity extends Entity = Entity, Params = any, Result =
       if (callbacks.onSuccess) {
         callbacks.onSuccess(entity);
       }
-
-      return {
-        success: true,
-        result,
-        entity,
-      };
     } catch (error) {
       if (callbacks.onError) {
         callbacks.onError(error);
       }
-
-      return {
-        success: false,
-        error,
-      };
     }
+  }
+
+  return {
+    createEntity,
+    isLoading,
   };
 }
 

app/soapbox/entity-store/hooks/useDeleteEntity.ts

@@ -1,26 +1,23 @@
-import { useAppDispatch, useGetState } from 'soapbox/hooks';
+import { useAppDispatch, useGetState, useLoading } from 'soapbox/hooks';
 
 import { deleteEntities, importEntities } from '../actions';
 
-type DeleteFn<T> = (entityId: string) => Promise<T> | T;
-
-interface EntityCallbacks {
-  onSuccess?(): void
-}
+import type { EntityCallbacks, EntityFn } from './types';
 
 /**
  * Optimistically deletes an entity from the store.
  * This hook should be used to globally delete an entity from all lists.
  * To remove an entity from a single list, see `useDismissEntity`.
  */
-function useDeleteEntity<T = unknown>(
+function useDeleteEntity(
   entityType: string,
-  deleteFn: DeleteFn<T>,
+  entityFn: EntityFn<string>,
 ) {
   const dispatch = useAppDispatch();
   const getState = useGetState();
+  const [isLoading, setPromise] = useLoading();
 
-  return async function deleteEntity(entityId: string, callbacks: EntityCallbacks = {}): Promise<T> {
+  async function deleteEntity(entityId: string, callbacks: EntityCallbacks<string> = {}): Promise<void> {
     // Get the entity before deleting, so we can reverse the action if the API request fails.
     const entity = getState().entities[entityType]?.store[entityId];
 
@@ -28,22 +25,29 @@ function useDeleteEntity<T = unknown>(
     dispatch(deleteEntities([entityId], entityType, { preserveLists: true }));
 
     try {
-      const result = await deleteFn(entityId);
+      await setPromise(entityFn(entityId));
+
       // Success - finish deleting entity from the state.
       dispatch(deleteEntities([entityId], entityType));
 
       if (callbacks.onSuccess) {
-        callbacks.onSuccess();
+        callbacks.onSuccess(entityId);
       }
-
-      return result;
     } catch (e) {
       if (entity) {
         // If the API failed, reimport the entity.
         dispatch(importEntities([entity], entityType));
       }
-      throw e;
+
+      if (callbacks.onError) {
+        callbacks.onError(e);
+      }
     }
+  }
+
+  return {
+    deleteEntity,
+    isLoading,
   };
 }
 

app/soapbox/entity-store/hooks/useDismissEntity.ts

@@ -1,27 +1,31 @@
-import { useAppDispatch } from 'soapbox/hooks';
+import { useAppDispatch, useLoading } from 'soapbox/hooks';
 
 import { dismissEntities } from '../actions';
 
 import { parseEntitiesPath } from './utils';
 
-import type { ExpandedEntitiesPath } from './types';
-
-type DismissFn<T> = (entityId: string) => Promise<T> | T;
+import type { EntityFn, ExpandedEntitiesPath } from './types';
 
 /**
  * Removes an entity from a specific list.
  * To remove an entity globally from all lists, see `useDeleteEntity`.
  */
-function useDismissEntity<T = unknown>(expandedPath: ExpandedEntitiesPath, dismissFn: DismissFn<T>) {
-  const { entityType, listKey } = parseEntitiesPath(expandedPath);
-
+function useDismissEntity(expandedPath: ExpandedEntitiesPath, entityFn: EntityFn<string>) {
   const dispatch = useAppDispatch();
 
+  const [isLoading, setPromise] = useLoading();
+  const { entityType, listKey } = parseEntitiesPath(expandedPath);
+
   // TODO: optimistic dismissing
-  return async function dismissEntity(entityId: string): Promise<T> {
-    const result = await dismissFn(entityId);
+  async function dismissEntity(entityId: string) {
+    const result = await setPromise(entityFn(entityId));
     dispatch(dismissEntities([entityId], entityType, listKey));
     return result;
+  }
+
+  return {
+    dismissEntity,
+    isLoading,
   };
 }
 

app/soapbox/entity-store/hooks/useEntities.ts

@@ -11,7 +11,7 @@ import { entitiesFetchFail, entitiesFetchRequest, entitiesFetchSuccess, invalida
 import { parseEntitiesPath } from './utils';
 
 import type { Entity, EntityListState } from '../types';
-import type { EntitiesPath, EntitySchema, ExpandedEntitiesPath } from './types';
+import type { EntitiesPath, EntityFn, EntitySchema, ExpandedEntitiesPath } from './types';
 import type { RootState } from 'soapbox/store';
 
 /** Additional options for the hook. */
@@ -32,7 +32,7 @@ function useEntities<TEntity extends Entity>(
   /** Tells us where to find/store the entity in the cache. */
   expandedPath: ExpandedEntitiesPath,
   /** API route to GET, eg `'/api/v1/notifications'`. If undefined, nothing will be fetched. */
-  endpoint: string | undefined,
+  entityFn: EntityFn<void>,
   /** Additional options for the hook. */
   opts: UseEntitiesOpts<TEntity> = {},
 ) {
@@ -54,14 +54,14 @@ function useEntities<TEntity extends Entity>(
   const next = useListState(path, 'next');
   const prev = useListState(path, 'prev');
 
-  const fetchPage = async(url: string, overwrite = false): Promise<void> => {
+  const fetchPage = async(req: EntityFn<void>, overwrite = false): Promise<void> => {
     // Get `isFetching` state from the store again to prevent race conditions.
     const isFetching = selectListState(getState(), path, 'fetching');
     if (isFetching) return;
 
     dispatch(entitiesFetchRequest(entityType, listKey));
     try {
-      const response = await api.get(url);
+      const response = await req();
       const schema = opts.schema || z.custom<TEntity>();
       const entities = filteredArray(schema).parse(response.data);
       const parsedCount = realNumberSchema.safeParse(response.headers['x-total-count']);
@@ -82,20 +82,18 @@ function useEntities<TEntity extends Entity>(
   };
 
   const fetchEntities = async(): Promise<void> => {
-    if (endpoint) {
-      await fetchPage(endpoint, true);
-    }
+    await fetchPage(entityFn, true);
   };
 
   const fetchNextPage = async(): Promise<void> => {
     if (next) {
-      await fetchPage(next);
+      await fetchPage(() => api.get(next));
     }
   };
 
   const fetchPreviousPage = async(): Promise<void> => {
     if (prev) {
-      await fetchPage(prev);
+      await fetchPage(() => api.get(prev));
     }
   };
 
@@ -114,7 +112,7 @@ function useEntities<TEntity extends Entity>(
     if (isInvalid || isUnset || isStale) {
       fetchEntities();
     }
-  }, [endpoint, isEnabled]);
+  }, [isEnabled]);
 
   return {
     entities,

app/soapbox/entity-store/hooks/useEntity.ts

@@ -1,12 +1,12 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import z from 'zod';
 
-import { useApi, useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useLoading } from 'soapbox/hooks';
 
 import { importEntities } from '../actions';
 
 import type { Entity } from '../types';
-import type { EntitySchema, EntityPath } from './types';
+import type { EntitySchema, EntityPath, EntityFn } from './types';
 
 /** Additional options for the hook. */
 interface UseEntityOpts<TEntity extends Entity> {
@@ -18,10 +18,10 @@ interface UseEntityOpts<TEntity extends Entity> {
 
 function useEntity<TEntity extends Entity>(
   path: EntityPath,
-  endpoint: string,
+  entityFn: EntityFn<void>,
   opts: UseEntityOpts<TEntity> = {},
 ) {
-  const api = useApi();
+  const [isFetching, setPromise] = useLoading();
   const dispatch = useAppDispatch();
 
   const [entityType, entityId] = path;
@@ -31,18 +31,16 @@ function useEntity<TEntity extends Entity>(
 
   const entity = useAppSelector(state => state.entities[entityType]?.store[entityId] as TEntity | undefined);
 
-  const [isFetching, setIsFetching] = useState(false);
   const isLoading = isFetching && !entity;
 
-  const fetchEntity = () => {
-    setIsFetching(true);
-    api.get(endpoint).then(({ data }) => {
-      const entity = schema.parse(data);
+  const fetchEntity = async () => {
+    try {
+      const response = await setPromise(entityFn());
+      const entity = schema.parse(response.data);
       dispatch(importEntities([entity], entityType));
-      setIsFetching(false);
-    }).catch(() => {
-      setIsFetching(false);
-    });
+    } catch (e) {
+      // do nothing
+    }
   };
 
   useEffect(() => {

app/soapbox/entity-store/hooks/useEntityActions.ts

@@ -1,5 +1,3 @@
-import { useState } from 'react';
-
 import { useApi } from 'soapbox/hooks';
 
 import { useCreateEntity } from './useCreateEntity';
@@ -18,7 +16,7 @@ interface EntityActionEndpoints {
   delete?: string
 }
 
-function useEntityActions<TEntity extends Entity = Entity, Params = any>(
+function useEntityActions<TEntity extends Entity = Entity, Data = any>(
   expandedPath: ExpandedEntitiesPath,
   endpoints: EntityActionEndpoints,
   opts: UseEntityActionsOpts<TEntity> = {},
@@ -26,24 +24,16 @@ function useEntityActions<TEntity extends Entity = Entity, Params = any>(
   const api = useApi();
   const { entityType, path } = parseEntitiesPath(expandedPath);
 
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const { deleteEntity, isLoading: deleteLoading } =
+    useDeleteEntity(entityType, (entityId) => api.delete(endpoints.delete!.replaceAll(':id', entityId)));
 
-  const deleteEntity = useDeleteEntity(entityType, (entityId) => {
-    if (!endpoints.delete) return Promise.reject(endpoints);
-    return api.delete(endpoints.delete.replace(':id', entityId))
-      .finally(() => setIsLoading(false));
-  });
-
-  const createEntity = useCreateEntity(path, (params: Params) => {
-    if (!endpoints.post) return Promise.reject(endpoints);
-    return api.post(endpoints.post, params)
-      .finally(() => setIsLoading(false));
-  }, opts);
+  const { createEntity, isLoading: createLoading } =
+    useCreateEntity<TEntity, Data>(path, (data) => api.post(endpoints.post!, data), opts);
 
   return {
     createEntity,
     deleteEntity,
-    isLoading,
+    isLoading: createLoading || deleteLoading,
   };
 }
 

app/soapbox/entity-store/hooks/useIncrementEntity.ts

@@ -1,32 +1,36 @@
-import { useAppDispatch } from 'soapbox/hooks';
+import { useAppDispatch, useLoading } from 'soapbox/hooks';
 
 import { incrementEntities } from '../actions';
 
 import { parseEntitiesPath } from './utils';
 
-import type { ExpandedEntitiesPath } from './types';
-
-type IncrementFn<T> = (entityId: string) => Promise<T> | T;
+import type { EntityFn, ExpandedEntitiesPath } from './types';
 
 /**
  * Increases (or decreases) the `totalCount` in the entity list by the specified amount.
  * This only works if the API returns an `X-Total-Count` header and your components read it.
  */
-function useIncrementEntity<T = unknown>(
+function useIncrementEntity(
   expandedPath: ExpandedEntitiesPath,
   diff: number,
-  incrementFn: IncrementFn<T>,
+  entityFn: EntityFn<string>,
 ) {
-  const { entityType, listKey } = parseEntitiesPath(expandedPath);
   const dispatch = useAppDispatch();
+  const [isLoading, setPromise] = useLoading();
+  const { entityType, listKey } = parseEntitiesPath(expandedPath);
 
-  return async function incrementEntity(entityId: string): Promise<void> {
+  async function incrementEntity(entityId: string): Promise<void> {
     dispatch(incrementEntities(entityType, listKey, diff));
     try {
-      await incrementFn(entityId);
+      await setPromise(entityFn(entityId));
     } catch (e) {
       dispatch(incrementEntities(entityType, listKey, diff * -1));
     }
+  }
+
+  return {
+    incrementEntity,
+    isLoading,
   };
 }
 

app/soapbox/entity-store/hooks/utils.ts

@@ -12,4 +12,5 @@ function parseEntitiesPath(expandedPath: ExpandedEntitiesPath) {
   };
 }
 
+
 export { parseEntitiesPath };

app/soapbox/hooks/api/groups/useGroupMembershipRequests.ts

@@ -11,20 +11,20 @@ function useGroupMembershipRequests(groupId: string) {
 
   const { entities, invalidate, ...rest } = useEntities(
     path,
-    `/api/v1/groups/${groupId}/membership_requests`,
+    () => api.get(`/api/v1/groups/${groupId}/membership_requests`),
     { schema: accountSchema },
   );
 
-  const authorize = useIncrementEntity(path, -1, (accountId: string) => {
-    return api
-      .post(`/api/v1/groups/${groupId}/membership_requests/${accountId}/authorize`)
-      .then(invalidate);
+  const { incrementEntity: authorize } = useIncrementEntity(path, -1, async (accountId: string) => {
+    const response = await api.post(`/api/v1/groups/${groupId}/membership_requests/${accountId}/authorize`);
+    invalidate();
+    return response;
   });
 
-  const reject = useIncrementEntity(path, -1, (accountId: string) => {
-    return api
-      .post(`/api/v1/groups/${groupId}/membership_requests/${accountId}/reject`)
-      .then(invalidate);
+  const { incrementEntity: reject } = useIncrementEntity(path, -1, async (accountId: string) => {
+    const response = await api.post(`/api/v1/groups/${groupId}/membership_requests/${accountId}/reject`);
+    invalidate();
+    return response;
   });
 
   return {

app/soapbox/hooks/api/useGroupMembers.ts

@@ -2,10 +2,14 @@ import { Entities } from 'soapbox/entity-store/entities';
 import { useEntities } from 'soapbox/entity-store/hooks';
 import { GroupMember, groupMemberSchema } from 'soapbox/schemas';
 
+import { useApi } from '../useApi';
+
 function useGroupMembers(groupId: string, role: string) {
+  const api = useApi();
+
   const { entities, ...result } = useEntities<GroupMember>(
     [Entities.GROUP_MEMBERSHIPS, groupId, role],
-    `/api/v1/groups/${groupId}/memberships?role=${role}`,
+    () => api.get(`/api/v1/groups/${groupId}/memberships?role=${role}`),
     { schema: groupMemberSchema },
   );
 

app/soapbox/hooks/api/usePopularGroups.ts

@@ -2,15 +2,17 @@ import { Entities } from 'soapbox/entity-store/entities';
 import { useEntities } from 'soapbox/entity-store/hooks';
 import { Group, groupSchema } from 'soapbox/schemas';
 
+import { useApi } from '../useApi';
 import { useFeatures } from '../useFeatures';
 import { useGroupRelationships } from '../useGroups';
 
 function usePopularGroups() {
+  const api = useApi();
   const features = useFeatures();
 
   const { entities, ...result } = useEntities<Group>(
     [Entities.GROUPS, 'popular'],
-    '/api/mock/groups', // '/api/v1/truth/trends/groups'
+    () => api.get('/api/mock/groups'), // '/api/v1/truth/trends/groups'
     {
       schema: groupSchema,
       enabled: features.groupsDiscovery,

app/soapbox/hooks/api/useSuggestedGroups.ts

@@ -2,15 +2,17 @@ import { Entities } from 'soapbox/entity-store/entities';
 import { useEntities } from 'soapbox/entity-store/hooks';
 import { Group, groupSchema } from 'soapbox/schemas';
 
+import { useApi } from '../useApi';
 import { useFeatures } from '../useFeatures';
 import { useGroupRelationships } from '../useGroups';
 
 function useSuggestedGroups() {
+  const api = useApi();
   const features = useFeatures();
 
   const { entities, ...result } = useEntities<Group>(
     [Entities.GROUPS, 'suggested'],
-    '/api/mock/groups', // '/api/v1/truth/suggestions/groups'
+    () => api.get('/api/mock/groups'), // '/api/v1/truth/suggestions/groups'
     {
       schema: groupSchema,
       enabled: features.groupsDiscovery,

app/soapbox/hooks/index.ts

@@ -11,6 +11,7 @@ export { useGroupsPath } from './useGroupsPath';
 export { useDimensions } from './useDimensions';
 export { useFeatures } from './useFeatures';
 export { useInstance } from './useInstance';
+export { useLoading } from './useLoading';
 export { useLocale } from './useLocale';
 export { useOnScreen } from './useOnScreen';
 export { useOwnAccount } from './useOwnAccount';

app/soapbox/hooks/useGroups.ts

@@ -2,17 +2,19 @@ import { z } from 'zod';
 
 import { Entities } from 'soapbox/entity-store/entities';
 import { useEntities, useEntity } from 'soapbox/entity-store/hooks';
+import { useApi } from 'soapbox/hooks';
 import { groupSchema, Group } from 'soapbox/schemas/group';
 import { groupRelationshipSchema, GroupRelationship } from 'soapbox/schemas/group-relationship';
 
 import { useFeatures } from './useFeatures';
 
 function useGroups() {
+  const api = useApi();
   const features = useFeatures();
 
   const { entities, ...result } = useEntities<Group>(
     [Entities.GROUPS],
-    '/api/v1/groups',
+    () => api.get('/api/v1/groups'),
     { enabled: features.groups, schema: groupSchema },
   );
   const { relationships } = useGroupRelationships(entities.map(entity => entity.id));
@@ -29,9 +31,11 @@ function useGroups() {
 }
 
 function useGroup(groupId: string, refetch = true) {
+  const api = useApi();
+
   const { entity: group, ...result } = useEntity<Group>(
     [Entities.GROUPS, groupId],
-    `/api/v1/groups/${groupId}`,
+    () => api.get(`/api/v1/groups/${groupId}`),
     { schema: groupSchema, refetch },
   );
   const { entity: relationship } = useGroupRelationship(groupId);
@@ -43,20 +47,22 @@ function useGroup(groupId: string, refetch = true) {
 }
 
 function useGroupRelationship(groupId: string) {
+  const api = useApi();
+
   return useEntity<GroupRelationship>(
     [Entities.GROUP_RELATIONSHIPS, groupId],
-    `/api/v1/groups/relationships?id[]=${groupId}`,
+    () => api.get(`/api/v1/groups/relationships?id[]=${groupId}`),
     { schema: z.array(groupRelationshipSchema).transform(arr => arr[0]) },
   );
 }
 
 function useGroupRelationships(groupIds: string[]) {
+  const api = useApi();
   const q = groupIds.map(id => `id[]=${id}`).join('&');
-  const endpoint = groupIds.length ? `/api/v1/groups/relationships?${q}` : undefined;
   const { entities, ...result } = useEntities<GroupRelationship>(
     [Entities.GROUP_RELATIONSHIPS, ...groupIds],
-    endpoint,
-    { schema: groupRelationshipSchema },
+    () => api.get(`/api/v1/groups/relationships?${q}`),
+    { schema: groupRelationshipSchema, enabled: groupIds.length > 0 },
   );
 
   const relationships = entities.reduce<Record<string, GroupRelationship>>((map, relationship) => {

app/soapbox/hooks/useLoading.ts

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+
+function useLoading() {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  function setPromise<T>(promise: Promise<T>) {
+    setIsLoading(true);
+
+    promise
+      .then(() => setIsLoading(false))
+      .catch(() => setIsLoading(false));
+
+    return promise;
+  }
+
+  return [isLoading, setPromise] as const;
+}
+
+export { useLoading };