From 67e785af5baf0fe937a15b03f55a909f775ab22a Mon Sep 17 00:00:00 2001
From: Cedric van Putten <github@cedric.dev>
Date: Sat, 18 May 2024 18:19:48 +0200
Subject: [PATCH] refactor(webui): delete bundle reloading due to authorization
 issues with Metro (#56)

---
 .../src/app/--/bundles/[bundle]/reload+api.ts | 33 --------------
 webui/src/providers/bundle.tsx                | 45 +++++--------------
 2 files changed, 10 insertions(+), 68 deletions(-)
 delete mode 100644 webui/src/app/--/bundles/[bundle]/reload+api.ts

diff --git a/webui/src/app/--/bundles/[bundle]/reload+api.ts b/webui/src/app/--/bundles/[bundle]/reload+api.ts
deleted file mode 100644
index d88efc6..0000000
--- a/webui/src/app/--/bundles/[bundle]/reload+api.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { getSource } from '~/utils/atlas';
-
-export async function GET(_request: Request, params: Record<'bundle', string>) {
-  try {
-    const bundle = await getSource().getBundle(params.bundle);
-    if (!bundle) {
-      return Response.json({ error: 'Bundle not found' }, { status: 404 });
-    }
-
-    if (!bundle.serializeOptions?.sourceUrl) {
-      return Response.json(
-        { error: 'Bundle has no `serializeOptions.sourceUrl`' },
-        { status: 406 }
-      );
-    }
-
-    // Convert the source URL to localhost, and call it from within the API.
-    // This is necessary to avoid "unauthorized requests" in Metro.
-    const sourceUrl = new URL(bundle.serializeOptions.sourceUrl);
-    sourceUrl.hostname = 'localhost';
-    const response = await fetch(sourceUrl);
-    if (!response.ok) {
-      throw new Error(`Metro responded with an error: ${response.statusText}`);
-    }
-
-    // We still need to await the response body, to ensure the data is fully passed through Atlas.
-    await response.text();
-
-    return Response.json({ success: response.ok }, { status: response.status })
-  } catch (error: any) {
-    return Response.json({ error: error.message }, { status: 406 });
-  }
-}
diff --git a/webui/src/providers/bundle.tsx b/webui/src/providers/bundle.tsx
index a49d3c1..9f49439 100644
--- a/webui/src/providers/bundle.tsx
+++ b/webui/src/providers/bundle.tsx
@@ -1,19 +1,11 @@
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { useLocalSearchParams } from 'expo-router';
-import {
-  type PropsWithChildren,
-  createContext,
-  useContext,
-  useMemo,
-  useEffect,
-  useCallback,
-} from 'react';
+import { type PropsWithChildren, createContext, useContext, useMemo, useEffect } from 'react';
 
 import { type BundleDeltaResponse } from '~/app/--/bundles/[bundle]/delta+api';
 import { StateInfo } from '~/components/StateInfo';
-import { Button } from '~/ui/Button';
 import { Spinner } from '~/ui/Spinner';
-import { ToastAction, type ToasterToast, useToast } from '~/ui/Toast';
+import { type ToasterToast, useToast } from '~/ui/Toast';
 import { fetchApi, handleApiError } from '~/utils/api';
 import { type PartialAtlasBundle } from '~core/data/types';
 
@@ -94,20 +86,10 @@ export function BundleDeltaToast({
   bundle: Pick<PartialAtlasBundle, 'id'>;
   modulePath?: string;
 }) {
-  const client = useQueryClient();
   const toaster = useToast();
-
   const deltaResponse = useBundleDeltaData(bundle.id);
   const bundleDelta = deltaResponse.data?.delta;
 
-  const refetchBundleData = useCallback(
-    () =>
-      fetchApi(`/bundles/${bundle.id}/reload`)
-        .then(handleApiError)
-        .then(() => client.refetchQueries({ queryKey: ['bundles', bundle.id], type: 'active' })),
-    [bundle.id]
-  );
-
   useEffect(() => {
     if (!bundleDelta) return;
 
@@ -115,13 +97,13 @@ export function BundleDeltaToast({
       if (bundleDelta.deletedPaths.includes(modulePath)) {
         toaster.toast(toastModuleDeleted(bundle.id));
       } else if (bundleDelta.modifiedPaths.includes(modulePath)) {
-        refetchBundleData().then(() => toaster.toast(toastModuleModified(bundle.id)));
+        toaster.toast(toastModuleModified(bundle.id));
       }
       return;
     }
 
-    toaster.toast(toastBundleUpdate(bundle.id, refetchBundleData));
-  }, [bundle.id, bundleDelta, refetchBundleData, modulePath]);
+    toaster.toast(toastBundleUpdate(bundle.id));
+  }, [bundle.id, bundleDelta, modulePath]);
 
   return null;
 }
@@ -130,7 +112,7 @@ function toastModuleModified(bundleId: string): ToasterToast {
   return {
     id: `bundle-delta-${bundleId}`,
     title: 'Module modified',
-    description: 'This module is updated to reflect the latest changes.',
+    description: 'This file has changed, open your app before reloading this page.',
   };
 }
 
@@ -138,22 +120,15 @@ function toastModuleDeleted(bundleId: string): ToasterToast {
   return {
     id: `bundle-delta-${bundleId}`,
     title: 'Module deleted',
-    description: 'This file is deleted since latest build, and is no longer available.',
+    description: 'This file is deleted since last build, and is no longer available.',
   };
 }
 
-function toastBundleUpdate(bundleId: string, refetchBundleData: () => any): ToasterToast {
+function toastBundleUpdate(bundleId: string): ToasterToast {
   return {
     id: `bundle-delta-${bundleId}`,
     title: 'Bundle outdated',
-    description: 'The code was changed since last build.',
-    action: (
-      <ToastAction altText="Reload bundle">
-        <Button variant="secondary" size="xs" onClick={refetchBundleData}>
-          Reload bundle
-        </Button>
-      </ToastAction>
-    ),
+    description: 'Code was changed since last build, open your app before reloading this page.',
   };
 }