diff --git a/app/soapbox/entity-store/hooks/useDeleteEntity.ts b/app/soapbox/entity-store/hooks/useDeleteEntity.ts index 006912a9d..c13482dab 100644 --- a/app/soapbox/entity-store/hooks/useDeleteEntity.ts +++ b/app/soapbox/entity-store/hooks/useDeleteEntity.ts @@ -2,17 +2,18 @@ import { useAppDispatch, useGetState } from 'soapbox/hooks'; import { deleteEntities, importEntities } from '../actions'; -interface DeleteEntityResult { - result: T -} - type DeleteFn = (entityId: string) => Promise | T; +/** + * 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(entityType: string, deleteFn: DeleteFn) { const dispatch = useAppDispatch(); const getState = useGetState(); - return async function deleteEntity(entityId: string): Promise> { + return async function deleteEntity(entityId: string): Promise { // Get the entity before deleting, so we can reverse the action if the API request fails. const entity = getState().entities[entityType]?.store[entityId]; @@ -23,7 +24,7 @@ function useDeleteEntity(entityType: string, deleteFn: DeleteFn) const result = await deleteFn(entityId); // Success - finish deleting entity from the state. dispatch(deleteEntities([entityId], entityType)); - return { result }; + return result; } catch (e) { if (entity) { // If the API failed, reimport the entity. diff --git a/app/soapbox/entity-store/hooks/useDismissEntity.ts b/app/soapbox/entity-store/hooks/useDismissEntity.ts new file mode 100644 index 000000000..65eb8599f --- /dev/null +++ b/app/soapbox/entity-store/hooks/useDismissEntity.ts @@ -0,0 +1,24 @@ +import { useAppDispatch } from 'soapbox/hooks'; + +import { dismissEntities } from '../actions'; + +type EntityPath = [entityType: string, listKey: string] +type DismissFn = (entityId: string) => Promise | T; + +/** + * Removes an entity from a specific list. + * To remove an entity globally from all lists, see `useDeleteEntity`. + */ +function useDismissEntity(path: EntityPath, dismissFn: DismissFn) { + const [entityType, listKey] = path; + const dispatch = useAppDispatch(); + + // TODO: optimistic dismissing + return async function dismissEntity(entityId: string): Promise { + const result = await dismissFn(entityId); + dispatch(dismissEntities([entityId], entityType, listKey)); + return result; + }; +} + +export { useDismissEntity }; \ No newline at end of file