From 6daeb966c5bbd03aab22eb479da4444b2b0d291c Mon Sep 17 00:00:00 2001
From: ZXY101 <tennershaun@gmail.com>
Date: Tue, 26 Mar 2024 01:21:20 +0200
Subject: [PATCH] Add profile uploading + cleanup

---
 src/lib/components/NavBar.svelte |   2 +-
 src/lib/util/cloud.ts            |  32 +++++
 src/lib/util/index.ts            |   3 +-
 src/routes/cloud/+page.svelte    | 194 ++++++++++++++++++++-----------
 4 files changed, 163 insertions(+), 68 deletions(-)
 create mode 100644 src/lib/util/cloud.ts

diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
index c6a7262..e38f636 100644
--- a/src/lib/components/NavBar.svelte
+++ b/src/lib/components/NavBar.svelte
@@ -37,7 +37,7 @@
     <div class="flex md:order-2 gap-5">
       <UserSettingsSolid class="hover:text-primary-700" on:click={openSettings} />
       <UploadSolid class="hover:text-primary-700" on:click={() => (uploadModalOpen = true)} />
-      <CloudArrowUpOutline class="hover:text-primary-700" on:click={() => goto('/cloud')} />
+      <!-- <CloudArrowUpOutline class="hover:text-primary-700" on:click={() => goto('/cloud')} /> -->
     </div>
   </Navbar>
 </div>
diff --git a/src/lib/util/cloud.ts b/src/lib/util/cloud.ts
new file mode 100644
index 0000000..4e95108
--- /dev/null
+++ b/src/lib/util/cloud.ts
@@ -0,0 +1,32 @@
+type FileInfo = {
+  accessToken: string;
+  metadata: any;
+  fileId?: string;
+  localStorageId: string;
+  type: string;
+}
+
+const FILES_API_URL = 'https://www.googleapis.com/upload/drive/v3/files';
+
+export async function uploadFile({ accessToken, fileId, localStorageId, metadata, type }: FileInfo) {
+  const json = localStorage.getItem(localStorageId) || '';
+  const blob = new Blob([json], { type });
+
+  const form = new FormData();
+
+  form.append('resource', new Blob([JSON.stringify(metadata)], { type }));
+  form.append('file', blob);
+
+
+  const res = await fetch(
+    `${FILES_API_URL}${fileId ? `/${fileId}` : ''}?uploadType=multipart`,
+    {
+      method: fileId ? 'PATCH' : 'POST',
+      headers: new Headers({ Authorization: 'Bearer ' + accessToken }),
+      body: form
+    }
+  );
+
+  return await res.json()
+}
+
diff --git a/src/lib/util/index.ts b/src/lib/util/index.ts
index 768a78e..629bdc9 100644
--- a/src/lib/util/index.ts
+++ b/src/lib/util/index.ts
@@ -2,4 +2,5 @@ export * from './snackbar';
 export * from './upload';
 export * from './misc';
 export * from './modals';
-export * from './zip'
\ No newline at end of file
+export * from './zip'
+export * from './cloud'
\ No newline at end of file
diff --git a/src/routes/cloud/+page.svelte b/src/routes/cloud/+page.svelte
index 2999d78..c6227c4 100644
--- a/src/routes/cloud/+page.svelte
+++ b/src/routes/cloud/+page.svelte
@@ -1,29 +1,32 @@
 <script lang="ts">
   import { processFiles } from '$lib/upload';
   import Loader from '$lib/components/Loader.svelte';
-  import { formatBytes, showSnackbar } from '$lib/util';
+  import { formatBytes, showSnackbar, uploadFile } from '$lib/util';
   import { Button, Frame, Listgroup, ListgroupItem } from 'flowbite-svelte';
   import { onMount } from 'svelte';
   import { promptConfirmation } from '$lib/util';
   import { GoogleSolid } from 'flowbite-svelte-icons';
-  import { volumes } from '$lib/settings';
+  import { profiles, volumes } from '$lib/settings';
 
   const CLIENT_ID = import.meta.env.VITE_GDRIVE_CLIENT_ID;
   const API_KEY = import.meta.env.VITE_GDRIVE_API_KEY;
 
   const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';
   const SCOPES = 'https://www.googleapis.com/auth/drive';
-  const FILES_API_URL = 'https://www.googleapis.com/upload/drive/v3/files';
 
   const FOLDER_MIME_TYPE = 'application/vnd.google-apps.folder';
   const READER_FOLDER = 'mokuro-reader';
   const VOLUME_DATA_FILE = 'volume-data.json';
+  const PROFILES_FILE = 'profiles.json';
+
+  const type = 'application/json';
 
   let tokenClient: any;
   let zips: gapi.client.drive.File[];
   let loadingMessage = '';
   let readerFolderId = '';
   let volumeDataId = '';
+  let profilesId = '';
 
   async function fetchZips(folderId: string) {
     const { result } = await gapi.client.drive.files.list({
@@ -97,13 +100,11 @@
       });
 
       readerFolderId = createReaderFolderRes.id || '';
-      loadingMessage = '';
     } else {
       const id = readerFolderRes.files?.[0]?.id || '';
       zips = [...((await fetchZips(id)) || [])];
 
       readerFolderId = id || '';
-      loadingMessage = '';
     }
 
     const { result: volumeDataRes } = await gapi.client.drive.files.list({
@@ -115,6 +116,16 @@
       volumeDataId = volumeDataRes.files?.[0].id || '';
     }
 
+    const { result: profilesRes } = await gapi.client.drive.files.list({
+      q: `'${readerFolderId}' in parents and name='${PROFILES_FILE}'`,
+      fields: 'files(id, name)'
+    });
+
+    if (profilesRes.files?.length !== 0) {
+      profilesId = profilesRes.files?.[0].id || '';
+    }
+
+    loadingMessage = '';
     showSnackbar('Connected to Google Drive');
   }
 
@@ -146,42 +157,55 @@
     });
   });
 
-  async function onUpload() {
-    const type = 'application/json';
-    const json = localStorage.getItem('volumes') || '';
-    const blob = new Blob([json], { type });
-
+  async function onUploadVolumeData() {
     const metadata = {
       mimeType: type,
       name: VOLUME_DATA_FILE,
       parents: [volumeDataId ? null : readerFolderId]
     };
-
     const { access_token } = gapi.auth.getToken();
 
-    const form = new FormData();
-
-    form.append('resource', new Blob([JSON.stringify(metadata)], { type }));
-    form.append('file', blob);
-
     loadingMessage = 'Uploading volume data';
 
-    const res = await fetch(
-      `${FILES_API_URL}${volumeDataId ? `/${volumeDataId}` : ''}?uploadType=multipart`,
-      {
-        method: volumeDataId ? 'PATCH' : 'POST',
-        headers: new Headers({ Authorization: 'Bearer ' + access_token }),
-        body: form
-      }
-    );
-    volumeDataId = (await res.json()).id;
+    const res = await uploadFile({
+      accessToken: access_token,
+      fileId: volumeDataId,
+      metadata,
+      localStorageId: 'volumes',
+      type
+    });
 
+    volumeDataId = res.id;
     loadingMessage = '';
 
     showSnackbar('Volume data uploaded');
   }
 
-  async function onDownload() {
+  async function onUploadProfiles() {
+    const metadata = {
+      mimeType: type,
+      name: PROFILES_FILE,
+      parents: [profilesId ? null : readerFolderId]
+    };
+    const { access_token } = gapi.auth.getToken();
+
+    loadingMessage = 'Uploading profiles';
+
+    const res = await uploadFile({
+      accessToken: access_token,
+      fileId: profilesId,
+      metadata,
+      localStorageId: 'profiles',
+      type
+    });
+
+    profilesId = res.id;
+    loadingMessage = '';
+
+    showSnackbar('Profiles uploaded');
+  }
+
+  async function onDownloadVolumeData() {
     loadingMessage = 'Downloading volume data';
 
     const { body } = await gapi.client.drive.files.get({
@@ -201,6 +225,27 @@
     loadingMessage = '';
     showSnackbar('Volume data downloaded');
   }
+
+  async function onDownloadProfiles() {
+    loadingMessage = 'Downloading profiles';
+
+    const { body } = await gapi.client.drive.files.get({
+      fileId: profilesId,
+      alt: 'media'
+    });
+
+    const downloaded = JSON.parse(body);
+
+    profiles.update((prev) => {
+      return {
+        ...prev,
+        ...downloaded
+      };
+    });
+
+    loadingMessage = '';
+    showSnackbar('Profiles downloaded');
+  }
 </script>
 
 <div class="p-2 h-[90svh]">
@@ -209,49 +254,66 @@
       {loadingMessage}
     </Loader>
   {:else if zips}
-    <div class="flex flex-col gap-5">
-      <div class="flex flex-col gap-2">
-        <h2 class="text-lg font-semibold text-center">Google Drive:</h2>
-        <div
-          class="flex gap-2 justify-center flex-wrap p-2 sm:p-5 border rounded-lg border-slate-600 border-opacity-50"
-        >
-          {#if zips.length > 0}
-            <Listgroup active class="w-full">
-              {#each zips as zip}
-                <Frame
-                  on:click={() => onClick(zip)}
-                  rounded
-                  border
-                  class="divide-y divide-gray-200 dark:divide-gray-600"
-                >
-                  <ListgroupItem normalClass="py-4">
-                    <div class="flex flex-col gap-2">
-                      <h2 class="font-semibold">{zip.name}</h2>
-                      <p>{formatBytes(parseInt(zip.size || '0'))}</p>
-                    </div>
-                  </ListgroupItem>
-                </Frame>
-              {/each}
-            </Listgroup>
-          {:else}
-            <p class="text-center">
-              Add your zip files to the <span class="text-primary-700">{READER_FOLDER}</span> folder
-              in your Google Drive.
-            </p>
+    <div class="flex flex-col gap-2">
+      <div class="flex justify-between items-center gap-2 flex-col sm:flex-row">
+        <h2 class="text-2xl font-semibold text-center">Google Drive:</h2>
+        <div class="flex flex-col sm:flex-row gap-2 sm:w-auto w-full">
+          <Button
+            color="dark"
+            on:click={() => promptConfirmation('Upload volume data?', onUploadVolumeData)}
+          >
+            Upload volume data
+          </Button>
+          {#if volumeDataId}
+            <Button
+              color="alternative"
+              on:click={() =>
+                promptConfirmation('Download and overwrite volume data?', onDownloadVolumeData)}
+            >
+              Download volume data
+            </Button>
+          {/if}
+          <Button
+            color="dark"
+            on:click={() => promptConfirmation('Upload profiles?', onUploadProfiles)}
+          >
+            Upload profiles
+          </Button>
+          {#if profilesId}
+            <Button
+              color="alternative"
+              on:click={() =>
+                promptConfirmation('Download and overwrite profiles?', onDownloadProfiles)}
+            >
+              Download profiles
+            </Button>
           {/if}
         </div>
       </div>
-      <div class="flex flex-col sm:flex-row gap-2">
-        <Button color="dark" on:click={() => promptConfirmation('Upload volume data?', onUpload)}>
-          Upload volume data
-        </Button>
-        {#if volumeDataId}
-          <Button
-            color="alternative"
-            on:click={() => promptConfirmation('Download and overwrite volume data?', onDownload)}
-          >
-            Download volume data
-          </Button>
+      <div class="flex gap-2 justify-center flex-wrap">
+        {#if zips.length > 0}
+          <Listgroup active class="w-full">
+            {#each zips as zip}
+              <Frame
+                on:click={() => onClick(zip)}
+                rounded
+                border
+                class="divide-y divide-gray-200 dark:divide-gray-600"
+              >
+                <ListgroupItem normalClass="py-4">
+                  <div class="flex flex-col gap-2">
+                    <h2 class="font-semibold">{zip.name}</h2>
+                    <p>{formatBytes(parseInt(zip.size || '0'))}</p>
+                  </div>
+                </ListgroupItem>
+              </Frame>
+            {/each}
+          </Listgroup>
+        {:else}
+          <p class="text-center">
+            Add your zip files to the <span class="text-primary-700">{READER_FOLDER}</span> folder in
+            your Google Drive.
+          </p>
         {/if}
       </div>
     </div>