fix toasts

ng-app/src/apps/SparqlQueryEditor.svelte

@@ -52,7 +52,7 @@
     let union = false;
     const run = async () => {
       try{
-        reset_toasts();
+        await reset_toasts();
         results = await sparql_query($in_memory_discrete, union);
       } catch(e) {
         toast_error(display_error(e));

ng-app/src/apps/SparqlUpdateEditor.svelte

@@ -38,7 +38,7 @@
     });
     const run = async () => {
       try{
-        reset_toasts();
+        await reset_toasts();
         await sparql_update($in_memory_discrete);
         toast_success($t("app.sparql_update_editor.success"));
       } catch(e) {
@@ -52,7 +52,6 @@
   
   </script>
   <div class="flex-col">
-    
     <CodeMirror bind:value={$in_memory_discrete} lineWrapping useTab={false} extensions={[basicSetup,StreamLanguage.define(sparql)]} styles={{
       "&": {
           maxWidth: "100%",

ng-app/src/lib/FullLayout.svelte

@@ -17,7 +17,6 @@
     SidebarWrapper,
     Modal,
     Toggle,
-    Toast,
   } from "flowbite-svelte";
   import { link, location, push } from "svelte-spa-router";
   import MobileBottomBarItem from "./MobileBottomBarItem.svelte";
@@ -28,6 +27,7 @@
   import MenuItem from "./components/MenuItem.svelte";
   import PaneHeader from "./components/PaneHeader.svelte";
   import BranchIcon from "./components/BranchIcon.svelte";
+  import Message from "./components/Message.svelte";
   // @ts-ignore
   import { t } from "svelte-i18n";
   import { onMount, onDestroy, tick } from "svelte";
@@ -35,7 +35,7 @@
           available_editors, available_viewers, set_editor, set_viewer, set_view_or_edit, toggle_live_edit,
           has_editor_chat, all_files_count, all_comments_count, nav_bar, save, hideMenu, show_modal_menu } from "../tab";
   import {
-    active_session, redirect_after_login, toasts, remove_toast
+    active_session, redirect_after_login, toasts
   } from "../store";
   import ZeraIcon from "./ZeraIcon.svelte";
 
@@ -392,20 +392,6 @@
     "mc":Sparkles,
   };
 
-  const toast_color = {
-    "error":"red",
-    "warning":"orange",
-    "success":"green",
-    "info":"blue"
-  };
-
-  const toast_icon = {
-    "error": XCircle,
-    "warning": ExclamationCircle,
-    "success": CheckCircle,
-    "info": InformationCircle,
-  }
-
   const customEv = new CustomEvent('loaded', {});
 
 	async	function addLoaded(node) {
@@ -697,13 +683,7 @@
 </Modal>
 
 {#each $toasts as toast, i}
-  <div class="toast fixed flex w-full max-w-xs" style="top:{16+i*74}px;" on:click|capture|stopPropagation={()=>{if (toast.timer) {clearTimeout(toast.timer);}; remove_toast(i);}} 
+  <Message {toast} {i}/>
-    use:addLoaded on:loaded={()=>{if (toast.level=="success") {toast.timer = setTimeout(()=>{remove_toast(i);}, toast.timeout || 10000);}}} >
-    <Toast  color="{toast_color[toast.level]}" >
-      <Icon tabindex="-1"  slot="icon" class="w-8 h-8 p-1 focus:outline-none"  variation="outline" color="currentColor" icon={toast_icon[toast.level]} />
-      {toast.text}
-    </Toast>
-  </div>
 {/each}
 {#if mobile}
   <div class="full-layout">

ng-app/src/lib/components/Message.svelte

@@ -0,0 +1,63 @@
+<!--
+// Copyright (c) 2022-2024 Niko Bonnieure, Par le Peuple, NextGraph.org developers
+// All rights reserved.
+// Licensed under the Apache License, Version 2.0
+// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0>
+// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>,
+// at your option. All files in the project carrying such
+// notice may not be copied, modified, or distributed except
+// according to those terms.
+-->
+
+<script lang="ts">
+  import {
+    Toast,
+  } from "flowbite-svelte";
+ 
+  import {
+    remove_toast
+  } from "../../store";
+  import { onMount, onDestroy, tick } from "svelte";
+
+  const toast_color = {
+    "error":"red",
+    "warning":"orange",
+    "success":"green",
+    "info":"blue"
+  };
+
+  const toast_icon = {
+    "error": XCircle,
+    "warning": ExclamationCircle,
+    "success": CheckCircle,
+    "info": InformationCircle,
+  }
+  import {
+    CheckCircle,
+    XCircle,
+    ExclamationCircle,
+    InformationCircle,
+    Icon,
+  } from "svelte-heros-v2";
+
+  export let toast;
+  export let i;
+
+  onMount(()=>{
+    toast.i = i;
+    if (toast.level=="success") 
+    {
+        toast.timer = setTimeout(()=>{remove_toast(i);}, toast.timeout || 10000);
+    }
+  });
+
+</script>
+
+<div class="toast fixed flex w-full max-w-xs" style="top:{16+i*74}px;" 
+    on:click|capture|stopPropagation={()=>{remove_toast(toast.i);}} 
+    >
+    <Toast color="{toast_color[toast.level]}" >
+      <Icon tabindex="-1" slot="icon" class="w-8 h-8 p-1 focus:outline-none"  variation="outline" color="currentColor" icon={toast_icon[toast.level]} />
+      {toast.text}
+    </Toast>
+  </div>

ng-app/src/locales/en.json

@@ -33,10 +33,12 @@
       "upload": "Upload file"
     },
     "errors": {
-      "InvalidNuri": "Invalid NURI"
+      "InvalidNuri": "Invalid NURI",
+      "no_session": "No active session"
     },
     "errors_details": {
-      "InvalidNuri": "The provided NextGraph URI is invalid"
+      "InvalidNuri": "The provided NextGraph URI is invalid",
+      "no_session": "Please refresh the page or close and reopen the app"
     },
     "graph" : "Graph",
     "discrete" : "Document",

ng-app/src/store.ts

@@ -45,6 +45,7 @@ init({
 });
 
 export const display_error = (error: string) => {
+    if (e.message) return e.message;
     //console.log(error);
     // TODO: Check, if error tranlsation does not exist
     const parts = error.split(":");
@@ -70,36 +71,36 @@ export const select_default_lang = async () => {
         }
     }
 };
-/**
+
- * { 
- *      level:"error",//"warning","success","info"
- *      text: ""
- * }
- */
 export const toasts = writable([
     // {
     //     level:"error",
     //     text: "this is a serious error",
     // },
     // {
+    //     level:"success",
+    //     text: "this is a success story",
+    //     timeout: 5000,
+    // },
+    // {
     //     level:"info",
     //     text: "this is an information for you that is very long long long and so long it doesnt fit",
     // },
     // {
     //     level:"warning",
     //     text: "this is a warning. be warned!",
-    // },
-    // {
-    //     level:"success",
-    //     text: "this is a success story",
-    //     timeout: 5000,
     // }
-    
 ]);
 
-export const remove_toast = function(idx) {
+export const remove_toast = function(toast) {
     toasts.update((old)=>{
-        old.splice(idx,1);
+        for (const [index, value] of old.entries()) {
+            if (value.i == toast){
+                let t = old.splice(index,1);
+                if (t.timer) {clearTimeout(t.timer);}; 
+                break;
+            }
+        }
         return old;
     });
 }
@@ -111,10 +112,17 @@ export const toast = function(level, text) {
     });
 }
 
-export const reset_toasts = function() {
+export const reset_toasts = async function() {
-    toasts.update((old)=>{
+    let count = get(toasts).length;
-        return [];
+    if (count) {
-    });
+        toasts.update((old)=>{
+            for (let o of old) {
+                if (o.timer) clearTimeout(o.timer);
+            }
+            return [];
+        });
+        await new Promise((resolve) => setTimeout(resolve, 500));
+    }
 }
 
 export const toast_error = (text) => {
@@ -386,6 +394,10 @@ export const digest_to_string = function(digest) {
 export const sparql_query = async function(sparql:string, union:boolean) {
     let session = get(active_session);
     if (!session) {
+        persistent_error(get(cur_branch), {
+            title: get(format)("doc.errors.no_session"),
+            desc: get(format)("doc.errors_details.no_session")
+        });
         throw new Error("no session");
     }
     let nuri = union ? undefined : "did:ng:"+get(cur_tab).branch.nuri;
@@ -395,6 +407,10 @@ export const sparql_query = async function(sparql:string, union:boolean) {
 export const sparql_update = async function(sparql:string) {
     let session = get(active_session);
     if (!session) {
+        persistent_error(get(cur_branch), {
+            title: get(format)("doc.errors.no_session"),
+            desc: get(format)("doc.errors_details.no_session")
+        });
         throw new Error("no session");
     }
     let nuri = "did:ng:"+get(cur_tab).branch.nuri;
@@ -466,6 +482,10 @@ export const branch_subscribe = function(nuri:string, in_tab:boolean) {
                             //console.log("load down");
                             let session = get(active_session);
                             if (!session) {
+                                persistent_error(get(cur_branch), {
+                                    title: get(format)("doc.errors.no_session"),
+                                    desc: get(format)("doc.errors_details.no_session")
+                                });
                                 console.error("no session");
                                 return;
                             }