Remove axios-hooks from demo

Author: axelboc

apps/demo/package.json

@@ -15,7 +15,6 @@
   "dependencies": {
     "@h5web/app": "workspace:*",
     "@h5web/h5wasm": "workspace:*",
-    "axios-hooks": "5.1.1",
     "h5wasm-plugins": "0.3.0",
     "modern-normalize": "3.0.1",
     "react": "18.3.1",

apps/demo/src/h5wasm/UrlForm.tsx

@@ -1,11 +1,14 @@
-import useAxios from 'axios-hooks';
-import { type FormEvent, useCallback, useEffect } from 'react';
+import { createBasicFetcher } from '@h5web/app';
+import { type FormEvent, useCallback, useEffect, useState } from 'react';
 import { FiLoader } from 'react-icons/fi';
 import { useSearchParams } from 'wouter';
 
+import { FetcherError } from '../../../../packages/app/src/providers/utils';
 import { type RemoteFile } from './models';
 import styles from './UrlForm.module.css';
 
+const fetcher = createBasicFetcher();
+
 interface Props {
   onLoad: (h5File: RemoteFile) => void;
 }
@@ -16,20 +19,29 @@ function UrlForm(props: Props) {
   const [searchParams, setSearchParams] = useSearchParams();
   const url = searchParams.get('url') || '';
 
-  const [{ loading, error }, execute] = useAxios<ArrayBuffer>(
-    { url, responseType: 'arraybuffer' },
-    { manual: true },
-  );
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<unknown>();
 
   const fetchFile = useCallback(async () => {
-    if (url) {
-      const { data } = await execute();
+    if (!url) {
+      return;
+    }
+
+    setLoading(true);
+    setError(undefined);
+
+    try {
+      const buffer = await fetcher(url, {});
       onLoad({
         filename: url.slice(url.lastIndexOf('/') + 1),
-        buffer: data,
+        buffer,
       });
+    } catch (error_) {
+      setError(error_);
+    } finally {
+      setLoading(false);
     }
-  }, [url, execute, onLoad]);
+  }, [url, onLoad]);
 
   useEffect(() => {
     void fetchFile();
@@ -77,9 +89,9 @@ function UrlForm(props: Props) {
       </form>
       {error && (
         <p className={styles.hint} role="alert">
-          {error.isAxiosError
+          {error instanceof FetcherError
             ? 'Sorry, your file could not be fetched'
-            : `An error occured: ${error.message}`}
+            : `An error occured${error instanceof Error ? `: ${error.message}` : ''}`}
         </p>
       )}
     </>