Add toast

src/components/DataSync.svelte

@@ -7,6 +7,7 @@
   import { getLocalSaveJson, updateSave, updateTime, UPDATE_TIME_KEY } from '../stores/saveManager';
 
   import SyncConflictModal from '../components/SyncConflictModal.svelte';
+  import { pushToast } from '../stores/toast';
 
   const { open: openModal, close: closeModal } = getContext('simple-modal');
 
@@ -25,6 +26,10 @@
 
   onMount(() => {
     startSync();
+
+    window.onerror = function () {
+      handleError();
+    };
   });
 
   function startSync() {
@@ -42,6 +47,7 @@
     driveLoading.set(false);
     driveError.set(true);
     synced.set(true);
+    pushToast('Drive sync not available right now 😔', 'error');
   }
 
   function handleClientLoad() {
@@ -114,6 +120,7 @@
         );
       } else {
         synced.set(true);
+        pushToast('Data has been synced!');
       }
     } catch (err) {
       console.error(err);
@@ -178,7 +185,7 @@
   }
 
   async function getData() {
-    console.log('reading remote file');
+    console.log('reading remote file now');
 
     try {
       const { result } = await gapi.client.drive.files.get({
@@ -186,10 +193,10 @@
         alt: 'media',
       });
 
-      console.log(result);
+      console.log('get file res', result);
       return result;
     } catch (err) {
-      console.error(err);
+      console.error('get file res error', err);
       handleError();
     }
   }
@@ -227,10 +234,7 @@
         },
         function (error) {
           console.error(error);
-          driveSignedIn.set(false);
-          driveLoading.set(false);
-          driveError.set(true);
-          synced.set(true);
+          handleError();
         },
       );
   }

src/components/Toast.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { fade, fly } from 'svelte/transition';
+  import { backOut } from 'svelte/easing';
+  import { toasts } from '../stores/toast';
+
+  const types = {
+    default: 'text-white',
+    error: 'text-red-400',
+  }
+</script>
+
+<div class="fixed left-0 right-0 bottom-0 text-center px-4 z-50 md:left-auto md:max-w-screen-sm">
+  {#each $toasts as toast (toast._id)}
+    <div
+      class={`rounded-xl px-4 py-2 mb-4 w-full bg-black bg-opacity-75 ${types[toast.type]}`}
+      in:fly={{ delay: 0, duration: 300, x: 0, y: 50, opacity: 0.1, easing: backOut }}
+      out:fade={{ duration: 500, opacity: 0 }}>
+      {toast.msg}
+    </div>
+  {/each}
+</div>

src/routes/_layout.svelte

@@ -15,6 +15,7 @@
   import { checkLocalSave } from '../stores/saveManager';
   import TodoData from '../components/TodoData.svelte';
   import SettingData from '../components/SettingData.svelte';
+  import Toast from '../components/Toast.svelte';
 
   export let segment;
 
@@ -78,6 +79,7 @@
   <DataSync>
     <TodoData />
     <SettingData />
+    <Toast />
     <main style="flex: 1 0 auto;">
       <slot />
     </main>

src/stores/saveManager.js

@@ -3,6 +3,7 @@ import { writable } from 'svelte/store';
 import debounce from 'lodash/debounce';
 
 import { synced, saveId, localModified, lastSyncTime } from './dataSync';
+import { pushToast } from './toast';
 
 export const updateTime = writable(null);
 export const fromRemote = writable(false);
@@ -36,8 +37,12 @@ async function saveData(data) {
     });
     synced.set(true);
     localModified.set(false);
+
+    pushToast('Data has been synced!')
   } catch (err) {
     console.error(err);
+    pushToast('Error when uploading your data!', 'error')
+    synced.set(true);
   }
 }
 

src/stores/toast.js

@@ -0,0 +1,29 @@
+import { writable } from 'svelte/store';
+
+export const toasts = writable([]);
+
+let toastId = 0;
+
+const unshiftToast = () => {
+  toasts.update((val) => {
+    return val.slice(1);
+  });
+};
+
+export const pushToast = (msg = '', type = 'default') => {
+  toasts.update((val) => {
+    const updatedToasts = [
+      ...val,
+      {
+        _id: ++toastId,
+        msg,
+        type,
+      },
+    ];
+    setTimeout(() => {
+      unshiftToast();
+    }, 3500);
+
+    return updatedToasts;
+  });
+};