Add data sync for wish counter

src/routes/settings.svelte

@@ -3,7 +3,7 @@
 
   import Button from '../components/Button.svelte';
   import Icon from '../components/Icon.svelte';
-  import { driveSignedIn, driveLoading, synced } from '../stores/dataSync';
+  import { driveSignedIn, driveLoading, synced, localModified, lastSyncTime } from '../stores/dataSync';
 
   function signIn() {
     gapi.auth2.getAuthInstance().signIn();
@@ -12,6 +12,8 @@
   function signOut() {
     gapi.auth2.getAuthInstance().signOut();
   }
+
+  $: isSynced = $synced && !$localModified;
 </script>
 
 <div class="lg:ml-64 pt-20 px-8 lg:pt-8">
@@ -33,14 +35,17 @@
     </Button>
     <p class="text-white mt-4">
       Sync Status:
-      <span class={`font-bold ${$synced ? 'text-green-400' : 'text-yellow-400'}`}>
+      <span class={`font-bold ${isSynced ? 'text-green-400' : 'text-yellow-400'}`}>
-        {$synced ? 'Synced' : 'Syncing...'}
+        {isSynced ? 'Synced' : $localModified && $synced ? 'Waiting...' : 'Syncing...'}
-        {#if $synced}
+        {#if isSynced}
           <Icon path={mdiCheckCircleOutline} className="text-green-400" />
-        {:else}
+        {:else if $localModified && !$synced}
           <Icon path={mdiLoading} className="text-yellow-400" spin />
         {/if}
       </span>
     </p>
+    {#if $lastSyncTime !== null}
+      <p class="text-gray-400">Last Sync: {$lastSyncTime.format('dddd, MMMM D, YYYY h:mm:ss A')}</p>
+    {/if}
   {/if}
 </div>

src/stores/dataSync.js

@@ -3,5 +3,6 @@ import { writable } from 'svelte/store';
 export const driveSignedIn = writable(false);
 export const driveLoading = writable(true);
 export const lastSyncTime = writable(null);
+export const localModified = writable(false);
 export const synced = writable(false);
 export const saveId = writable('');

src/stores/saveManager.js

@@ -1,7 +1,8 @@
 import dayjs from 'dayjs';
 import { writable } from 'svelte/store';
+import debounce from 'lodash/debounce';
 
-import { synced } from './dataSync';
+import { synced, saveId, localModified, lastSyncTime } from './dataSync';
 
 export const updateTime = writable(null);
 export const fromRemote = writable(false);
@@ -10,13 +11,43 @@ export const UPDATE_TIME_KEY = 'update-time';
 
 let pendingQueue = [];
 let queueSave = true;
+let saveFileId = '';
 
-const unsubscribe = synced.subscribe((value) => {
+saveId.subscribe((val) => {
+  saveFileId = val;
+});
+
+const saveToRemote = debounce(() => {
+  saveData(getLocalSaveJson());
+}, 5000);
+
+async function saveData(data) {
+  console.log('saving to remote file');
+  synced.set(false);
+
+  try {
+    await gapi.client.request({
+      path: `/upload/drive/v3/files/${saveFileId}`,
+      method: 'PATCH',
+      params: {
+        uploadType: 'media',
+      },
+      body: data,
+    });
+    synced.set(true);
+    localModified.set(false);
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+synced.subscribe((value) => {
   console.log('synced:', value);
   queueSave = !value;
 
   if (value) {
     flushPendingQueue();
+    lastSyncTime.set(dayjs());
   }
 });
 
@@ -33,6 +64,10 @@ export const getLocalSaveJson = () => {
 };
 
 export const updateSave = (key, data, isFromRemote) => {
+  if (!isFromRemote) {
+    localModified.set(true);
+  }
+
   if (queueSave && !isFromRemote) {
     pendingQueue.push({ key, data });
     return;
@@ -44,6 +79,7 @@ export const updateSave = (key, data, isFromRemote) => {
     const currentTime = dayjs().toISOString();
     updateTime.set(currentTime);
     localStorage.setItem(UPDATE_TIME_KEY, currentTime);
+    saveToRemote();
   } else {
     fromRemote.set(true);
   }
@@ -64,5 +100,4 @@ export const flushPendingQueue = () => {
 
   pendingQueue = [];
   queueSave = false;
-  unsubscribe();
 };