Return isLoading from useCreateEntity and useDeleteEntity

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { z } from 'zod';
 
 import { useApi, useAppDispatch } from 'soapbox/hooks';
@@ -25,13 +26,13 @@ function useCreateEntity<TEntity extends Entity = Entity, Data = any>(
 ) {
   const api = useApi();
   const dispatch = useAppDispatch();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const { entityType, listKey } = parseEntitiesPath(expandedPath);
 
-  return async function createEntity(
-    data: Data,
-    callbacks: CreateEntityCallbacks = {},
-  ): Promise<void> {
+  async function createEntity(data: Data, callbacks: CreateEntityCallbacks = {}): Promise<void> {
+    setIsLoading(true);
+
     try {
       const result = await api.request({
         ...toAxiosRequest(request),
@@ -52,6 +53,13 @@ function useCreateEntity<TEntity extends Entity = Entity, Data = any>(
         callbacks.onError(error);
       }
     }
+
+    setIsLoading(false);
+  }
+
+  return {
+    createEntity,
+    isLoading,
   };
 }
 

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

@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 import { useApi, useAppDispatch, useGetState } from 'soapbox/hooks';
 
 import { deleteEntities, importEntities } from '../actions';
@@ -23,8 +25,11 @@ function useDeleteEntity(
   const api = useApi();
   const dispatch = useAppDispatch();
   const getState = useGetState();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  async function deleteEntity(entityId: string, callbacks: DeleteEntityCallbacks = {}): Promise<void> {
+    setIsLoading(true);
 
-  return async function deleteEntity(entityId: string, callbacks: DeleteEntityCallbacks = {}): 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];
 
@@ -54,6 +59,13 @@ function useDeleteEntity(
         callbacks.onError();
       }
     }
+
+    setIsLoading(false);
+  }
+
+  return {
+    deleteEntity,
+    isLoading,
   };
 }
 

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

@@ -1,5 +1,3 @@
-import { useState } from 'react';
-
 import { useCreateEntity } from './useCreateEntity';
 import { useDeleteEntity } from './useDeleteEntity';
 import { parseEntitiesPath } from './utils';
@@ -22,27 +20,17 @@ function useEntityActions<TEntity extends Entity = Entity, Data = any>(
   opts: UseEntityActionsOpts<TEntity> = {},
 ) {
   const { entityType, path } = parseEntitiesPath(expandedPath);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  const _delete = useDeleteEntity(entityType, { method: 'delete', url: endpoints.delete });
-  const create = useCreateEntity<TEntity, Data>(path, { method: 'post', url: endpoints.post }, opts);
+  const { deleteEntity, isLoading: deleteLoading } =
+    useDeleteEntity(entityType, { method: 'delete', url: endpoints.delete });
 
-  const createEntity: typeof create = async (...args) => {
-    setIsLoading(true);
-    await create(...args);
-    setIsLoading(false);
-  };
-
-  const deleteEntity: typeof _delete = async (...args) => {
-    setIsLoading(true);
-    await _delete(...args);
-    setIsLoading(false);
-  };
+  const { createEntity, isLoading: createLoading } =
+    useCreateEntity<TEntity, Data>(path, { method: 'post', url: endpoints.post }, opts);
 
   return {
     createEntity,
     deleteEntity,
-    isLoading,
+    isLoading: createLoading || deleteLoading,
   };
 }