feat: download progress bar and createDownloadResumable

tiddly-gittly · Sep 2, 2023 · d152108 · d152108
1 parent ff50149
commit d152108
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 27 deletions.
diff --git a/src/pages/Importer/Index.tsx b/src/pages/Importer/Index.tsx
@@ -3,7 +3,7 @@ import { StackScreenProps } from '@react-navigation/stack';
 import { BarCodeScannedCallback, BarCodeScanner } from 'expo-barcode-scanner';
 import React, { FC, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Text, TextInput } from 'react-native-paper';
+import { Button, MD3Colors, ProgressBar, Text, TextInput } from 'react-native-paper';
 import { styled } from 'styled-components/native';
 import { RootStackParameterList } from '../../App';
 import { useImportHTML } from './useImportHTML';
@@ -73,7 +73,7 @@ export const Importer: FC<StackScreenProps<RootStackParameterList, 'Importer'>>
     }
   }, [scannedString]);
 
-  const { error: importError, status: importStatus, storeHtml, importedWikiWorkspace } = useImportHTML();
+  const { error: importError, status: importStatus, storeHtml, downloadPercentage, createdWikiWorkspace } = useImportHTML();
 
   if (hasPermission === undefined) {
     return <Text>Requesting for camera permission</Text>;
@@ -118,21 +118,37 @@ export const Importer: FC<StackScreenProps<RootStackParameterList, 'Importer'>>
         </ImportWikiButton>
       )}
       {importStatus === 'error'
-        ? <ImportStatusText>Error: {importError}</ImportStatusText>
+        ? (
+          <ImportStatusText>
+            <Text>Error:</Text>
+            {importError}
+          </ImportStatusText>
+        )
         : (
           <>
-            <ImportStatusText>Status: {importStatus}</ImportStatusText>
-            {importedWikiWorkspace !== undefined && (
-              <Button
-                onPress={() => {
-                  navigation.navigate('WikiWebView', { id: importedWikiWorkspace.id });
-                }}
-              >
-                <Text>{`${t('Open')} ${importedWikiWorkspace.name}`}</Text>
-              </Button>
-            )}
+            <ImportStatusText>
+              <Text>Status:</Text>
+              {importStatus}
+            </ImportStatusText>
           </>
         )}
+      {importStatus === 'downloading' && (
+        <>
+          <Text>HTML</Text>
+          <ProgressBar progress={downloadPercentage.skinnyHtmlDownloadPercentage} color={MD3Colors.error50} />
+          <Text>Tiddlers</Text>
+          <ProgressBar progress={downloadPercentage.tiddlerStoreScriptDownloadPercentage} color={MD3Colors.error50} />
+        </>
+      )}
+      {importStatus === 'success' && createdWikiWorkspace !== undefined && (
+        <Button
+          onPress={() => {
+            navigation.navigate('WikiWebView', { id: createdWikiWorkspace.id });
+          }}
+        >
+          <Text>{`${t('Open')} ${createdWikiWorkspace.name}`}</Text>
+        </Button>
+      )}
     </Container>
   );
 };
diff --git a/src/pages/Importer/useImportHTML.ts b/src/pages/Importer/useImportHTML.ts
@@ -5,13 +5,16 @@ import { useCallback, useState } from 'react';
 import { getWikiFilePath, getWikiTiddlerStorePath, WIKI_FOLDER_PATH } from '../../constants/paths';
 import { IWikiWorkspace, useWikiStore } from '../../store/wiki';
 
-type StoreHtmlStatus = 'idle' | 'fetching' | 'creating' | 'storing' | 'success' | 'error';
+type StoreHtmlStatus = 'idle' | 'fetching' | 'creating' | 'downloading' | 'success' | 'error';
 
 export function useImportHTML() {
   const [status, setStatus] = useState<StoreHtmlStatus>('idle');
   const [error, setError] = useState<string | undefined>();
+  const [skinnyHtmlDownloadPercentage, setSkinnyHtmlDownloadPercentage] = useState(0);
+  const [tiddlerStoreScriptDownloadPercentage, setTiddlerStoreScriptDownloadPercentage] = useState(0);
   const addWiki = useWikiStore(state => state.add);
-  const [importedWikiWorkspace, setImportedWikiWorkspace] = useState<undefined | IWikiWorkspace>();
+  const removeWiki = useWikiStore(state => state.remove);
+  const [createdWikiWorkspace, setCreatedWikiWorkspace] = useState<undefined | IWikiWorkspace>();
 
   const storeHtml = useCallback(async (urlString: string, wikiName: string) => {
     if (WIKI_FOLDER_PATH === undefined) return;
@@ -21,31 +24,55 @@ export function useImportHTML() {
     getSkinnyTiddlywikiTiddlerStoreScriptUrl.pathname = '/tw-mobile-sync/get-skinny-tiddlywiki-tiddler-store-script';
 
     // Fetch the HTML content
+    let newWorkspaceID: string | undefined;
     try {
-      const html = await fetch(getSkinnyHTMLUrl).then(response => response.text());
-      const tiddlerStoreScript = await fetch(getSkinnyTiddlywikiTiddlerStoreScriptUrl).then(response => response.text());
-
       setStatus('creating');
 
       // Save the HTML to a file
-      const workspace = addWiki({ name: wikiName });
-      if (workspace === undefined) throw new Error('Failed to create workspace');
+      const newWorkspace = addWiki({ name: wikiName });
+      if (newWorkspace === undefined) throw new Error('Failed to create workspace');
+      newWorkspaceID = newWorkspace.id;
       try {
         // make main folder
-        await fs.makeDirectoryAsync(workspace.wikiFolderLocation);
+        await fs.makeDirectoryAsync(newWorkspace.wikiFolderLocation);
       } catch {}
-      setStatus('storing');
-      await fs.writeAsStringAsync(getWikiFilePath(workspace), html);
-      await fs.writeAsStringAsync(getWikiTiddlerStorePath(workspace), tiddlerStoreScript);
-      setImportedWikiWorkspace(workspace);
+      setCreatedWikiWorkspace(newWorkspace);
 
+      setStatus('downloading');
+      const htmlDownloadResumable = fs.createDownloadResumable(getSkinnyHTMLUrl.toString(), getWikiFilePath(newWorkspace), {}, (progress) => {
+        setSkinnyHtmlDownloadPercentage(progress.totalBytesWritten / progress.totalBytesExpectedToWrite);
+      });
+      const tiddlerStoreDownloadResumable = fs.createDownloadResumable(
+        getSkinnyTiddlywikiTiddlerStoreScriptUrl.toString(),
+        getWikiTiddlerStorePath(newWorkspace),
+        {},
+        (progress) => {
+          setTiddlerStoreScriptDownloadPercentage(progress.totalBytesWritten / progress.totalBytesExpectedToWrite);
+        },
+      );
+      await Promise.all([
+        htmlDownloadResumable.downloadAsync(),
+        tiddlerStoreDownloadResumable.downloadAsync(),
+      ]);
       setStatus('success');
     } catch (error) {
       console.error(error, (error as Error).stack);
       setError((error as Error).message || 'An error occurred');
       setStatus('error');
+      if (newWorkspaceID !== undefined) {
+        removeWiki(newWorkspaceID);
+      }
     }
-  }, [addWiki]);
+  }, [addWiki, removeWiki]);
 
-  return { storeHtml, status, error, importedWikiWorkspace };
+  return {
+    storeHtml,
+    status,
+    error,
+    createdWikiWorkspace,
+    downloadPercentage: {
+      skinnyHtmlDownloadPercentage,
+      tiddlerStoreScriptDownloadPercentage,
+    },
+  };
 }