Add realtime updates for drafts, progress blocks.

ShindouMihou · Jun 3, 2022 · 71913cc · 71913cc
1 parent fc79379
commit 71913cc
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 24 deletions.
diff --git a/src/lib/components/Block.svelte b/src/lib/components/Block.svelte
@@ -0,0 +1,11 @@
+<script>
+  import { fade } from "svelte/transition";
+</script>
+
+<div class="fixed top-5 w-full right-[0.5%] left-[0.6%] md:left-[50%] md:right-[50%]" transition:fade>
+  <div class="flex flex-row justify-between items-center w-[50%] bg-green-500 shadow p-3 m-auto mb-4 text-white rounded-lg">
+    <div class="flex flex-row gap-2 items-center">
+      <slot></slot>
+    </div>
+  </div>
+</div>
diff --git a/src/lib/components/ErrorBlock.svelte → src/lib/components/ErrorBlock copy.svelte b/src/lib/components/ErrorBlock.svelte → src/lib/components/ErrorBlock copy.svelte
diff --git a/src/lib/components/editor/FloraEditor.svelte b/src/lib/components/editor/FloraEditor.svelte
@@ -13,8 +13,9 @@
         Trash,
         X,
     } from "svelte-hero-icons";
-    import ErrorBlock from "../ErrorBlock.svelte";
+    import ErrorBlock from "../Block.svelte";
     import { fade } from "svelte/transition";
+import Block from "../Block.svelte";
 
     export let postId: string | null = null;
     let initialLoading = false;
@@ -329,25 +330,10 @@
     {/each}
 {/if}
 {#if showSaving}
-    <div
-        class="fixed bottom-5 md:bottom-5 left-5 md:left-14 print:hidden"
-        transition:fade
-    >
-        <div
-            id="saving-context"
-            class="flex flex-row justify-between items-center w-full dark:bg-black bg-white  p-4 mb-4 
-                dark:text-white shadow-xl dark:shadow-none dark:border-green-500 dark:border rounded"
-        >
-            <div class="flex flex-row gap-2 items-center">
-                <Icon
-                    src={Cloud}
-                    solid
-                    class="text-green-500 w-[1.2rem] flex-shrink-0"
-                />
-                <p class="text-sm">Saving...</p>
-            </div>
-        </div>
-    </div>
+<Block>
+    <Icon src={Cloud} solid class="h-5 w-5 flex-shrink-0 animate-pulse"></Icon>
+    <p class="text-xs animate-pulse">Saving...</p>
+</Block>
 {/if}
 {#if postId !== null && !initialLoading}
     <div class="min-h-screen bg-neutral-900 text-white opensans">

diff --git a/src/routes/posts/[id].svelte b/src/routes/posts/[id].svelte
@@ -10,10 +10,12 @@
             if (!response.error) {
                 return {
                     props: {
+                        id: params.id,
                         title: response.title,
                         image: response.image,
                         content: response.content,
                         timestamp: new Date(response.timestamp),
+                        published: response.published
                     },
                 };
             } else {
@@ -30,10 +32,12 @@
 
                 return {
                     props: {
+                        id: firstResult._id,
                         title: firstResult.title,
                         image: firstResult.image,
                         content: firstResult.content,
                         timestamp: new Date(firstResult.timestamp),
+                        published: firstResult.published
                     },
                 };
             }
@@ -48,23 +52,28 @@
 </script>
 
 <script lang="ts">
-    import PostLoading from "$lib/components/PostLoading.svelte";
-    import ErrorBlock from "$lib/components/ErrorBlock.svelte";
     import removeMarkdown from "remove-markdown";
     import { fade } from "svelte/transition";
-    import { ArrowUp, Icon } from "svelte-hero-icons";
-    import { onMount } from "svelte";
+    import { ArrowUp, Globe, Icon } from "svelte-hero-icons";
+    import { onDestroy, onMount } from "svelte";
     import { toHTML } from "$lib/renderer/markdown";
+    import axios from "axios";
+    import PostLoading from "$lib/components/PostLoading.svelte";
+    import ErrorBlock from "$lib/components/Block.svelte";
+    import Block from "$lib/components/Block.svelte";
 
+    export let id: string;
     export let title: string;
     export let image: string;
     export let content: string;
     export let timestamp: Date;
+    export let published: boolean;
 
     let errors: string[] = [];
     let metaDescription: string = removeMarkdown(content);
 
     let showBackToTop = false;
+    let refreshing = false;
 
     const BACK_TO_TOP_FEATURE =
         import.meta.env.VITE_BACK_TO_TOP == null
@@ -81,6 +90,8 @@
             ? true
             : import.meta.env.VITE_SHOW_POST_ENDING === "true";
 
+    let realtimeUpdatesInterval: NodeJS.Timer | undefined;
+
     // The OpenGraph specifications indicate 1-2 sentences instead of 165 characters.
     // https://ogp.me/#optional
     metaDescription = metaDescription.split('.', 2).join('.') + "."; 
@@ -91,6 +102,40 @@
 
             window.onscroll = () => (showBackToTop = window.scrollY > 300);
         }
+
+        if (!published) {
+            realtimeUpdatesInterval = setInterval(() => {
+                refreshing = true;
+                axios.get(`/api/posts/${id}`).then(result => {
+                    setTimeout(() => {
+                        if (title !== result.data.title) {
+                            title = result.data.title;
+                        }
+
+                        if (content !== result.data.content) {
+                            content = result.data.content;
+                        }
+
+                        if (image !== result.data.image) {
+                            image = result.data.image;
+                        }
+                    
+                        refreshing = false;
+                    }, 2500);
+                }).catch(err => {
+                    errors = [
+                        "Failed to request content changes for real-time updates, please reload."
+                    ]
+                })
+            }, 7000);
+        }
+    });
+
+    onDestroy(() => {
+        if (realtimeUpdatesInterval) {
+            clearInterval(realtimeUpdatesInterval);
+            realtimeUpdatesInterval = undefined;
+        }
     });
 
     function backToTop() {
@@ -155,6 +200,12 @@
         </div>
     </button>
 {/if}
+{#if refreshing}
+<Block>
+    <Icon src={Globe} solid class="h-5 w-5 flex-shrink-0 animate-pulse"></Icon>
+    <p class="text-xs animate-pulse">Checking for new content...</p>
+</Block>
+{/if}
 <div class="flex flex-col gap-4" id="contentContainer">
     {#if title && image && content}
         <img