From ac9718e6ed7b34811a56925bd27d6ce705ab6e57 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 23 Mar 2023 15:30:45 -0500
Subject: [PATCH] Return isLoading from useCreateEntity and useDeleteEntity

---
 .../entity-store/hooks/useCreateEntity.ts     | 16 ++++++++++----
 .../entity-store/hooks/useDeleteEntity.ts     | 14 +++++++++++-
 .../entity-store/hooks/useEntityActions.ts    | 22 +++++--------------
 3 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/app/soapbox/entity-store/hooks/useCreateEntity.ts b/app/soapbox/entity-store/hooks/useCreateEntity.ts
index 7df1220b1..8c4aac94a 100644
--- a/app/soapbox/entity-store/hooks/useCreateEntity.ts
+++ b/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,
   };
 }
 
diff --git a/app/soapbox/entity-store/hooks/useDeleteEntity.ts b/app/soapbox/entity-store/hooks/useDeleteEntity.ts
index 790a6dba8..e7220e746 100644
--- a/app/soapbox/entity-store/hooks/useDeleteEntity.ts
+++ b/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,
   };
 }
 
diff --git a/app/soapbox/entity-store/hooks/useEntityActions.ts b/app/soapbox/entity-store/hooks/useEntityActions.ts
index fa90765b0..f3dcd4db1 100644
--- a/app/soapbox/entity-store/hooks/useEntityActions.ts
+++ b/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,
   };
 }