refactor(webui): refetch when no bundle data is persent

expo · Apr 20, 2024 · 1403723 · 1403723
1 parent 42fbfa8
commit 1403723
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 72 deletions.
diff --git a/webui/src/app/(atlas)/[entry]/folders/[path].tsx b/webui/src/app/(atlas)/[entry]/folders/[path].tsx
@@ -8,7 +8,7 @@ import { BundleSelectForm } from '~/components/BundleSelectForm';
 import { ModuleFiltersForm } from '~/components/ModuleFilterForm';
 import { PropertySummary } from '~/components/PropertySummary';
 import { StateInfo } from '~/components/StateInfo';
-import { EntryDeltaToast, useEntry } from '~/providers/entries';
+import { BundleDeltaToast, useBundle } from '~/providers/bundle';
 import { Layout, LayoutHeader, LayoutNavigation, LayoutTitle } from '~/ui/Layout';
 import { Spinner } from '~/ui/Spinner';
 import { Tag } from '~/ui/Tag';
@@ -18,21 +18,23 @@ import { formatFileSize } from '~/utils/formatString';
 
 export default function FolderPage() {
   const { path: absolutePath } = useLocalSearchParams<{ path: string }>();
-  const { entry } = useEntry();
+  const { bundle } = useBundle();
   const { filters, filtersEnabled } = useModuleFilters();
-  const modules = useModuleGraphDataInFolder(entry.id, absolutePath!, filters);
+  const modules = useModuleGraphDataInFolder(bundle.id, absolutePath!, filters);
   const treeHasData = !!modules.data?.data?.children?.length;
 
   return (
     <Layout variant="viewport">
+      <BundleDeltaToast bundle={bundle} />
+
       <LayoutNavigation>
         <BundleSelectForm />
       </LayoutNavigation>
       <LayoutHeader>
         <LayoutTitle>
-          <BreadcrumbLinks entry={entry} path={absolutePath!} />
+          <BreadcrumbLinks bundle={bundle} path={absolutePath!} />
           <PropertySummary>
-            <Tag variant={entry.platform} />
+            <Tag variant={bundle.platform} />
             <span>folder</span>
             {!!modules.data?.filtered.moduleFiles && (
               <span>
@@ -48,7 +50,7 @@ export default function FolderPage() {
         </LayoutTitle>
         <ModuleFiltersForm disableNodeModules />
       </LayoutHeader>
-      <EntryDeltaToast entryId={entry.id} />
+
       {modules.isPending && !modules.isPlaceholderData ? (
         <StateInfo>
           <Spinner />
@@ -58,7 +60,7 @@ export default function FolderPage() {
           Try restarting Expo Atlas. If this error keeps happening, open a bug report.
         </StateInfo>
       ) : treeHasData ? (
-        <BundleGraph entry={entry} graph={modules.data!.data} />
+        <BundleGraph entry={bundle} graph={modules.data!.data} />
       ) : (
         !modules.isPending && (
           <StateInfo title={filtersEnabled ? 'No data matching filters' : 'No data available'}>

diff --git a/webui/src/app/(atlas)/[entry]/index.tsx b/webui/src/app/(atlas)/[entry]/index.tsx
@@ -6,7 +6,7 @@ import { BundleSelectForm } from '~/components/BundleSelectForm';
 import { ModuleFiltersForm } from '~/components/ModuleFilterForm';
 import { PropertySummary } from '~/components/PropertySummary';
 import { StateInfo } from '~/components/StateInfo';
-import { EntryDeltaToast, useEntry } from '~/providers/entries';
+import { BundleDeltaToast, useBundle } from '~/providers/bundle';
 import { Layout, LayoutHeader, LayoutNavigation, LayoutTitle } from '~/ui/Layout';
 import { Spinner } from '~/ui/Spinner';
 import { Tag } from '~/ui/Tag';
@@ -15,21 +15,23 @@ import { type ModuleFilters, moduleFiltersToParams, useModuleFilters } from '~/u
 import { formatFileSize } from '~/utils/formatString';
 
 export default function BundlePage() {
-  const { entry } = useEntry();
+  const { bundle } = useBundle();
   const { filters, filtersEnabled } = useModuleFilters();
-  const modules = useModuleGraphData(entry.id, filters);
+  const modules = useModuleGraphData(bundle.id, filters);
   const treeHasData = !!modules.data?.data?.children?.length;
 
   return (
     <Layout variant="viewport">
+      <BundleDeltaToast bundle={bundle} />
+
       <LayoutNavigation>
         <BundleSelectForm />
       </LayoutNavigation>
       <LayoutHeader>
         <LayoutTitle>
           <h1 className="text-lg font-bold mr-8">Bundle</h1>
           <PropertySummary>
-            <Tag variant={entry.platform} />
+            <Tag variant={bundle.platform} />
             {!!modules.data && <span>{modules.data.entry.moduleFiles} modules</span>}
             {!!modules.data && <span>{formatFileSize(modules.data.entry.moduleSize)}</span>}
             {modules.data &&
@@ -46,7 +48,7 @@ export default function BundlePage() {
         </LayoutTitle>
         <ModuleFiltersForm />
       </LayoutHeader>
-      <EntryDeltaToast entryId={entry.id} />
+
       {modules.isPending && !modules.isPlaceholderData ? (
         <StateInfo>
           <Spinner />
@@ -56,7 +58,7 @@ export default function BundlePage() {
           <p>Try restarting Expo Atlas. If this error keeps happening, open a bug report.</p>
         </StateInfo>
       ) : treeHasData ? (
-        <BundleGraph entry={entry} graph={modules.data!.data} />
+        <BundleGraph entry={bundle} graph={modules.data!.data} />
       ) : (
         <StateInfo title={filtersEnabled ? 'No data matching filters' : 'No data available'}>
           <p>

diff --git a/webui/src/app/(atlas)/[entry]/modules/[path].tsx b/webui/src/app/(atlas)/[entry]/modules/[path].tsx
@@ -6,7 +6,7 @@ import { BundleSelectForm } from '~/components/BundleSelectForm';
 import { ModuleCode } from '~/components/ModuleCode';
 import { PropertySummary } from '~/components/PropertySummary';
 import { StateInfo } from '~/components/StateInfo';
-import { EntryDeltaToast, useEntry } from '~/providers/entries';
+import { BundleDeltaToast, useBundle } from '~/providers/bundle';
 import { Layout, LayoutHeader, LayoutNavigation, LayoutTitle } from '~/ui/Layout';
 import { Skeleton } from '~/ui/Skeleton';
 import { Tag } from '~/ui/Tag';
@@ -16,27 +16,29 @@ import { formatFileSize } from '~/utils/formatString';
 import { type AtlasModule } from '~core/data/types';
 
 export default function ModulePage() {
-  const { entry } = useEntry();
+  const { bundle } = useBundle();
   const { path: absolutePath } = useLocalSearchParams<{ path: string }>();
-  const module = useModuleData(entry.id, absolutePath!);
+  const module = useModuleData(bundle.id, absolutePath!);
 
   return (
     <Layout>
+      <BundleDeltaToast bundle={bundle} modulePath={absolutePath} />
+
       <LayoutNavigation>
         <BundleSelectForm />
       </LayoutNavigation>
       <LayoutHeader>
         <LayoutTitle>
-          <BreadcrumbLinks entry={entry} path={absolutePath!} />
+          <BreadcrumbLinks bundle={bundle} path={absolutePath!} />
           <PropertySummary>
-            <Tag variant={entry.platform} />
+            <Tag variant={bundle.platform} />
             {!!module.data?.package && <span>{module.data.package}</span>}
             {!!module.data && <span>{getModuleType(module.data)}</span>}
             {!!module.data && <span>{formatFileSize(module.data.size)}</span>}
           </PropertySummary>
         </LayoutTitle>
       </LayoutHeader>
-      <EntryDeltaToast entryId={entry.id} modulePath={absolutePath} />
+
       {module.isLoading ? (
         <ModulePageSkeleton />
       ) : module.isError ? (
@@ -57,10 +59,10 @@ export default function ModulePage() {
                       className="text-link hover:underline"
                       href={{
                         pathname: '/(atlas)/[entry]/modules/[path]',
-                        params: { entry: entry.id, path },
+                        params: { entry: bundle.id, path },
                       }}
                     >
-                      {relativeBundlePath(entry, path)}
+                      {relativeBundlePath(bundle, path)}
                     </Link>
                   </li>
                 ))}

diff --git a/webui/src/app/_layout.tsx b/webui/src/app/_layout.tsx
@@ -1,6 +1,6 @@
 import { Slot } from 'expo-router';
 
-import { EntryProvider } from '~/providers/entries';
+import { BundleProvider } from '~/providers/bundle';
 import { QueryProvider } from '~/providers/query';
 import { ThemeProvider } from '~/providers/theme';
 import { ToastProvider } from '~/ui/Toast';
@@ -33,10 +33,10 @@ export default function RootLayout() {
   return (
     <QueryProvider>
       <ThemeProvider>
-        <EntryProvider>
+        <BundleProvider>
           <ToastProvider />
           <Slot />
-        </EntryProvider>
+        </BundleProvider>
       </ThemeProvider>
     </QueryProvider>
   );

diff --git a/webui/src/app/index.tsx b/webui/src/app/index.tsx
@@ -1,9 +1,9 @@
 import { Redirect } from 'expo-router';
 
-import { useEntry } from '~/providers/entries';
+import { useBundle } from '~/providers/bundle';
 
 export default function HomeScreen() {
-  const { entry } = useEntry();
+  const { bundle } = useBundle();
 
-  return <Redirect href={{ pathname: '/(atlas)/[entry]/', params: { entry: entry.id } }} />;
+  return <Redirect href={{ pathname: '/(atlas)/[entry]/', params: { entry: bundle.id } }} />;
 }
diff --git a/webui/src/components/BreadcrumbLinks.tsx b/webui/src/components/BreadcrumbLinks.tsx
@@ -13,20 +13,20 @@ import { relativeBundlePath, rootBundlePath } from '~/utils/bundle';
 import { type PartialAtlasEntry } from '~core/data/types';
 
 type BreadcrumbLinksProps = {
-  entry: PartialAtlasEntry;
+  bundle: PartialAtlasEntry;
   path: string;
 };
 
 export function BreadcrumbLinks(props: BreadcrumbLinksProps) {
-  const links = useMemo(() => getBreadcrumbLinks(props), [props.entry.id, props.path]);
+  const links = useMemo(() => getBreadcrumbLinks(props), [props.bundle.id, props.path]);
 
   return (
     <Breadcrumb>
       <BreadcrumbList className="mr-8">
         <BreadcrumbLink asChild>
           <Link
             className="text-lg font-bold text-default underline-offset-4 hover:underline"
-            href={{ pathname: '/(atlas)/[entry]/', params: { entry: props.entry.id } }}
+            href={{ pathname: '/(atlas)/[entry]/', params: { entry: props.bundle.id } }}
           >
             Bundle
           </Link>
@@ -62,8 +62,8 @@ type BreadcrumbLinkItem = {
 };
 
 function getBreadcrumbLinks(props: BreadcrumbLinksProps): BreadcrumbLinkItem[] {
-  const rootPath = rootBundlePath(props.entry).replace(/\/$/, '');
-  const relativePath = relativeBundlePath(props.entry, props.path).replace(/^\//, '');
+  const rootPath = rootBundlePath(props.bundle).replace(/\/$/, '');
+  const relativePath = relativeBundlePath(props.bundle, props.path).replace(/^\//, '');
 
   return relativePath.split('/').map((label, index, breadcrumbs) => {
     const isLastSegment = index === breadcrumbs.length - 1;
@@ -75,7 +75,7 @@ function getBreadcrumbLinks(props: BreadcrumbLinksProps): BreadcrumbLinkItem[] {
       breadcrumb.key = path;
       breadcrumb.href = {
         pathname: '/(atlas)/[entry]/folders/[path]',
-        params: { entry: props.entry.id, path },
+        params: { entry: props.bundle.id, path },
       };
     }
 

diff --git a/webui/src/components/BundleSelectForm.tsx b/webui/src/components/BundleSelectForm.tsx
@@ -6,20 +6,20 @@ import ChevronDownIcon from 'lucide-react/dist/esm/icons/chevron-down';
 // @ts-expect-error
 import ChevronUpIcon from 'lucide-react/dist/esm/icons/chevron-up';
 
-import { useEntry } from '~/providers/entries';
+import { useBundle } from '~/providers/bundle';
 import { Button } from '~/ui/Button';
 import { Tag } from '~/ui/Tag';
 import { relativeBundlePath } from '~/utils/bundle';
 
 export function BundleSelectForm() {
   const router = useRouter();
-  const { entry, entries } = useEntry();
+  const { bundle, bundles } = useBundle();
 
   return (
-    <Select.Root value={entry.id} onValueChange={(entry) => router.setParams({ entry })}>
+    <Select.Root value={bundle.id} onValueChange={(entry) => router.setParams({ entry })}>
       <Select.Trigger asChild>
         <Button variant="quaternary" size="sm">
-          <Tag variant={entry.platform} size="xs" className="mr-2" />
+          <Tag variant={bundle.platform} size="xs" className="mr-2" />
           <Select.Value placeholder="Select bundle to inspect" />
           <Select.Icon className="text-icon-default">
             <ChevronDownIcon size={16} className="m-1 mr-0 align-middle" />
@@ -40,12 +40,12 @@ export function BundleSelectForm() {
             <ChevronUpIcon />
           </Select.ScrollUpButton>
           <Select.Viewport className="SelectViewport">
-            {entries.map((item) => (
+            {bundles.map((item) => (
               <div key={item.id}>
                 <Select.Item value={item.id} asChild>
                   <Button variant="quaternary" size="sm" className="w-full">
                     <Tag variant={item.platform} className="mr-2" />
-                    <Select.ItemText>{relativeBundlePath(entry, item.entryPoint)}</Select.ItemText>
+                    <Select.ItemText>{relativeBundlePath(item, item.entryPoint)}</Select.ItemText>
                   </Button>
                 </Select.Item>
               </div>