Only poll unique export taskIds, and do the polling from one hook instead of each component

Previously, the API always returned a unique taskId for each table being exported,
but a recent change optimized it to return one taskId for the set of tables being
exported, but still one taskId for each query being exported. Also previously, this
demo code rendered a loading component for each table, and each component had its
own hook for polling the taskId of that table. But now that multiple tables can share
a taskId, it doesn't make sense for each component to poll for its own taskId.

Now, we track the set of taskIds separately from the set of completed tables, and
we only poll for unique taskIds, which we do in a hook instead of in each component. And
each table preview checks the set of completed tables to know whether it's been completed.

Author: milesrichardson

examples/nextjs-import-airbyte-github-export-seafowl/components/EmbeddedQuery/EmbeddedQuery.tsx

@@ -9,10 +9,8 @@ import {
   SplitgraphEmbeddedQuery,
   SeafowlEmbeddedQuery,
 } from "../RepositoryAnalytics/ImportedRepoMetadata";
-import {
-  useStepperDebug,
-  useFindMatchingExportTable,
-} from "../ImportExportStepper/StepperContext";
+import { useStepperDebug } from "../ImportExportStepper/StepperContext";
+import { useFindMatchingExportTable } from "../ImportExportStepper/export-hooks";
 
 import type { ExportTable } from "../ImportExportStepper/stepper-states";
 

examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/DebugPanel.tsx

@@ -6,7 +6,11 @@ export const DebugPanel = () => {
   return (
     <div>
       <pre style={{ minWidth: "80%", minHeight: "300px" }}>
-        {JSON.stringify(state, null, 2)}
+        {JSON.stringify(
+          state,
+          (_key, value) => (value instanceof Set ? Array.from(value) : value),
+          2
+        )}
       </pre>
     </div>
   );

examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/ExportLoadingBars.module.css

@@ -1,6 +1,5 @@
 import { useStepper } from "./StepperContext";
 import styles from "./ExportPanel.module.css";
-import { ExportLoadingBars } from "./ExportLoadingBars";
 
 import { splitgraphTablesToExportToSeafowl } from "../../lib/config/github-tables";
 import {
@@ -16,29 +15,20 @@ import type {
 import { useMemo, useCallback } from "react";
 import { StepTitle } from "./StepTitle";
 import { StepDescription } from "./StepDescription";
-import {
-  SeafowlEmbeddedQuery,
-  SplitgraphEmbeddedQuery,
-  makeSplitgraphQueryHref,
-  makeSeafowlQueryHref,
-} from "../RepositoryAnalytics/ImportedRepoMetadata";
+import { makeSplitgraphQueryHref } from "../RepositoryAnalytics/ImportedRepoMetadata";
 import type { ExportTable } from "./stepper-states";
 
 import { ExportEmbedPreviewTableOrQuery } from "../EmbeddedQuery/EmbeddedQuery";
+import { usePollExportTasks } from "./export-hooks";
 
 export const ExportPanel = () => {
   const [
-    {
-      stepperState,
-      exportError,
-      splitgraphRepository,
-      splitgraphNamespace,
-      exportedTablesCompleted,
-      repository: githubRepositoryFromStepper,
-    },
+    { stepperState, exportError, splitgraphRepository, splitgraphNamespace },
     dispatch,
   ] = useStepper();
 
+  usePollExportTasks();
+
   const queriesToExport = useMemo<ExportQueryInput[]>(
     () =>
       makeQueriesToExport({
@@ -239,7 +229,6 @@ ${genericDemoQuery}
           splitgraphNamespace={splitgraphNamespace}
         />
       )}
-      {stepperState === "awaiting_export" && <ExportLoadingBars />}
     </div>
   );
 };

examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/ExportLoadingBars.tsx

@@ -1,10 +1,9 @@
-import { createContext, useContext, useMemo } from "react";
+import { createContext, useContext } from "react";
 import {
   StepperState,
   StepperAction,
   useStepperReducer,
 } from "./stepper-states";
-import type { ExportTable } from "./stepper-states";
 
 // Define the context
 const StepperContext = createContext<
@@ -35,46 +34,3 @@ export const useStepper = () => {
 };
 
 export const useStepperDebug = () => useStepper()[0].debug;
-
-/**
- * Given a function to match a candidate `ExportTable` to (presumably) an `ExportTableInput`,
- * determine if the table (which could also be a query - it's keyed by `destinationSchema`
- * and `destinationTable`) is currently exporting (`loading`) or has exported (`completed`).
- *
- * Return `{ loading, completed, unstarted }`, where:
- *
- * * `loading` is `true` if there is a match in the `exportedTablesLoading` set,
- * * `completed` is `true` if there is a match in the `exportedTablesCompleted` set
- *    (or if `stepperState` is `export_complete`),
- * * `unstarted` is `true` if there is no match in either set.
- *
- */
-export const useFindMatchingExportTable = (
-  isMatch: (candidateTable: ExportTable) => boolean
-) => {
-  const [{ stepperState, exportedTablesLoading, exportedTablesCompleted }] =
-    useStepper();
-
-  const matchingCompletedTable = useMemo(
-    () => Array.from(exportedTablesCompleted).find(isMatch),
-    [exportedTablesCompleted, isMatch]
-  );
-  const matchingLoadingTable = useMemo(
-    () => Array.from(exportedTablesLoading).find(isMatch),
-    [exportedTablesLoading, isMatch]
-  );
-
-  // If the state is export_complete, we might have loaded the page directly
-  // and thus we don't have the sets of exportedTablesCompleted, but we know they exist
-  const exportFullyCompleted = stepperState === "export_complete";
-
-  const completed = matchingCompletedTable ?? (exportFullyCompleted || false);
-  const loading = matchingLoadingTable ?? false;
-  const unstarted = !completed && !loading;
-
-  return {
-    completed,
-    loading,
-    unstarted,
-  };
-};