Add profile uploading + cleanup

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>

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()
+}
+

src/lib/util/index.ts

@@ -3,3 +3,4 @@ export * from './upload';
 export * from './misc';
 export * from './modals';
 export * from './zip'
+export * from './cloud'

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() {
+  async function onUploadVolumeData() {
-    const type = 'application/json';
-    const json = localStorage.getItem('volumes') || '';
-    const blob = new Blob([json], { type });
-
     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(
+    const res = await uploadFile({
-      `${FILES_API_URL}${volumeDataId ? `/${volumeDataId}` : ''}?uploadType=multipart`,
+      accessToken: access_token,
-      {
+      fileId: volumeDataId,
-        method: volumeDataId ? 'PATCH' : 'POST',
+      metadata,
-        headers: new Headers({ Authorization: 'Bearer ' + access_token }),
+      localStorageId: 'volumes',
-        body: form
+      type
-      }
+    });
-    );
-    volumeDataId = (await res.json()).id;
 
+    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,12 +254,43 @@
       {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 justify-between items-center gap-2 flex-col sm:flex-row">
-        <div
+        <h2 class="text-2xl font-semibold text-center">Google Drive:</h2>
-          class="flex gap-2 justify-center flex-wrap p-2 sm:p-5 border rounded-lg border-slate-600 border-opacity-50"
+        <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 gap-2 justify-center flex-wrap">
         {#if zips.length > 0}
           <Listgroup active class="w-full">
             {#each zips as zip}
@@ -235,26 +311,12 @@
           </Listgroup>
         {:else}
           <p class="text-center">
-              Add your zip files to the <span class="text-primary-700">{READER_FOLDER}</span> folder
+            Add your zip files to the <span class="text-primary-700">{READER_FOLDER}</span> folder in
-              in your Google Drive.
+            your Google Drive.
           </p>
         {/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>
-        {/if}
-      </div>
-    </div>
   {:else}
     <button
       class="w-full border rounded-lg border-slate-600 p-10 border-opacity-50 hover:bg-slate-800"