From fb4c15bf523d8f004ea4a0082ec24af96573d749 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 9 Oct 2024 15:05:08 +0530
Subject: [PATCH] Cleanup

---
 .../new/photos/components/use-wrap.tsx        | 75 ++++++-------------
 1 file changed, 21 insertions(+), 54 deletions(-)

diff --git a/web/packages/new/photos/components/use-wrap.tsx b/web/packages/new/photos/components/use-wrap.tsx
index 5495ffef72..136a03ab4b 100644
--- a/web/packages/new/photos/components/use-wrap.tsx
+++ b/web/packages/new/photos/components/use-wrap.tsx
@@ -1,60 +1,27 @@
 import React from "react";
-import type { NewAppContextPhotos } from "../types/context";
+import { useAppContext } from "../types/context";
 
 /**
- * Return a wrap function.
+ * Wrap an asynchronous operation (e.g. API calls) in an global activity
+ * indicator and error handler.
  *
- * This returned wrap function itself takes an async function, and will return a
- * new function that wraps the provided async function (a) in an error handler,
- * and (b) shows the global loading bar when the function runs.
+ * This function takes a async function, and wraps it in a function that starts
+ * the global activity indicator, lets the promise resolve, and then stop the
+ * activity indicator. If the promise rejects, then it shows a generic error.
  *
- * This legend of the three functions that are involved might help:
- *
- * - useWrap: () => wrap
- * - wrap: (f) => void
- * - f: async () => Promise<void>
+ * The global activity indicator and error alert triggering mechanism is
+ * obtained from the app context.
  */
-export const useWrapLoadError = (
-    /** See: [Note: Migrating components that need the app context]. */
-    { startLoading, finishLoading, onGenericError }: NewAppContextPhotos,
-) =>
-    React.useCallback(
-        (f: () => Promise<void>) => {
-            const wrapped = async () => {
-                startLoading();
-                try {
-                    await f();
-                } catch (e) {
-                    onGenericError(e);
-                } finally {
-                    finishLoading();
-                }
-            };
-            return (): void => void wrapped();
-        },
-        [onGenericError, startLoading, finishLoading],
-    );
-
-/**
- * A variant of {@link useWrapLoadError} that does not handle the error, only
- * does the loading indicator. It also returns the async function directly
- * instead of voiding the await.
- */
-export const useWrapLoadAsync = (
-    /** See: [Note: Migrating components that need the app context]. */
-    { startLoading, finishLoading }: NewAppContextPhotos,
-) =>
-    React.useCallback(
-        (f: () => Promise<void>) => {
-            const wrapped = async () => {
-                startLoading();
-                try {
-                    await f();
-                } finally {
-                    finishLoading();
-                }
-            };
-            return wrapped;
-        },
-        [startLoading, finishLoading],
-    );
+export const useWrapAsyncOperation = (f: () => Promise<void>) => {
+    const { startLoading, finishLoading, onGenericError } = useAppContext();
+    return React.useCallback(async () => {
+        startLoading();
+        try {
+            await f();
+        } catch (e) {
+            onGenericError(e);
+        } finally {
+            finishLoading();
+        }
+    }, [f, startLoading, finishLoading, onGenericError]);
+};