Temp

Author: axelboc

apps/demo/src/H5GroveApp.tsx

@@ -1,26 +1,24 @@
 import { App, assertEnvVar, H5GroveProvider } from '@h5web/app';
 import axios from 'axios';
-import { useMemo } from 'react';
 import { useSearchParams } from 'wouter';
 
+import { createAxiosFetcher } from '../../../packages/app/src/providers/utils';
 import { getFeedbackURL } from './utils';
 
 const URL = import.meta.env.VITE_H5GROVE_URL;
 const FILEPATH = import.meta.env.VITE_H5GROVE_FALLBACK_FILEPATH;
 
+const fetcher = createAxiosFetcher(axios);
+
 function H5GroveApp() {
   assertEnvVar(URL, 'VITE_H5GROVE_URL');
   assertEnvVar(FILEPATH, 'VITE_H5GROVE_FALLBACK_FILEPATH');
 
   const [searchParams] = useSearchParams();
   const filepath = searchParams.get('file') || FILEPATH;
 
-  const client = useMemo(() => {
-    return axios.create({ adapter: 'fetch', baseURL: URL });
-  }, []);
-
   return (
-    <H5GroveProvider filepath={filepath} axiosClient={client}>
+    <H5GroveProvider baseUrl={URL} filepath={filepath} fetcher={fetcher}>
       <App
         sidebarOpen={!searchParams.has('wide')}
         getFeedbackURL={getFeedbackURL}

packages/app/src/ErrorFallback.tsx

@@ -1,7 +1,7 @@
 import { type FallbackProps } from 'react-error-boundary';
 
 import styles from './App.module.css';
-import { CANCELLED_ERROR_MSG } from './providers/utils';
+import { AbortError, CANCELLED_BY_USER } from './providers/utils';
 
 interface Props extends FallbackProps {
   className?: string;
@@ -11,10 +11,10 @@ interface Props extends FallbackProps {
 function ErrorFallback(props: Props) {
   const { className = '', error, resetErrorBoundary } = props;
 
-  if (error instanceof Error && error.message === CANCELLED_ERROR_MSG) {
+  if (error instanceof AbortError && error.message === CANCELLED_BY_USER) {
     return (
       <p className={`${styles.error} ${className}`}>
-        {CANCELLED_ERROR_MSG}
+        Request cancelled
         <span>–</span>
         <button
           className={styles.retryBtn}

packages/app/src/providers/h5grove/H5GroveProvider.tsx

@@ -1,29 +1,31 @@
-import { type AxiosInstance } from 'axios';
 import { type PropsWithChildren, useMemo } from 'react';
 
 import { type DataProviderApi } from '../api';
 import DataProvider from '../DataProvider';
+import { type Fetcher } from '../models';
 import { H5GroveApi } from './h5grove-api';
 
 interface Props {
+  baseUrl: string;
   filepath: string;
-  axiosClient: AxiosInstance;
   resetKeys?: unknown[];
+  fetcher?: Fetcher;
   getExportURL?: DataProviderApi['getExportURL'];
 }
 
 function H5GroveProvider(props: PropsWithChildren<Props>) {
   const {
+    baseUrl,
     filepath,
-    axiosClient,
     resetKeys = [],
+    fetcher,
     getExportURL,
     children,
   } = props;
 
   const api = useMemo(
-    () => new H5GroveApi(filepath, axiosClient, getExportURL),
-    [filepath, axiosClient, ...resetKeys, getExportURL], // eslint-disable-line react-hooks/exhaustive-deps
+    () => new H5GroveApi(filepath, baseUrl, fetcher, getExportURL),
+    [filepath, ...resetKeys, fetcher, getExportURL], // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   return <DataProvider api={api}>{children}</DataProvider>;

packages/app/src/providers/h5grove/h5grove-api.test.ts

@@ -5,7 +5,6 @@ import {
   assertGroupWithChildren,
   hasNonNullShape,
 } from '@h5web/shared/guards';
-import axios from 'axios';
 import { beforeAll, expect, test } from 'vitest';
 
 import { assertListeningAt } from '../../test-utils';
@@ -23,8 +22,7 @@ beforeAll(async () => {
 });
 
 test.skipIf(SKIP)('test file matches snapshot', async () => {
-  const client = axios.create({ adapter: 'fetch', baseURL: H5GROVE_URL });
-  const api = new H5GroveApi(TEST_FILE, client);
+  const api = new H5GroveApi(TEST_FILE, H5GROVE_URL);
 
   const root = await api.getEntity('/');
   assertGroup(root);