From c52959fe7db950842bee2445734425952b77e538 Mon Sep 17 00:00:00 2001
From: Felix Schlegel <schlegel.felix@pm.me>
Date: Sun, 19 Jan 2025 18:28:19 +0100
Subject: [PATCH] feat: add catch cases to loading paper promises

---
 .../composites/PaperBookmarkButton.svelte     |  2 +-
 .../paper-view/PaperDetail.svelte             |  2 +-
 .../paper-view/cards/PaperDetailsCard.svelte  |  2 +-
 .../decision-buttons/AcceptButton.svelte      | 10 ++++----
 .../decision-buttons/DecisionButton.svelte    | 23 ++++++++++++++++---
 .../decision-buttons/DeclineButton.svelte     | 10 ++++----
 .../decision-buttons/MaybeButton.svelte       | 10 ++++----
 src/routes/paper/[paperId]/+page.svelte       |  4 ++--
 .../[projectId]/paper/[paperId]/+page.svelte  |  3 ++-
 9 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/composites/PaperBookmarkButton.svelte b/src/lib/components/composites/PaperBookmarkButton.svelte
index 70c5a631..7d700ebf 100644
--- a/src/lib/components/composites/PaperBookmarkButton.svelte
+++ b/src/lib/components/composites/PaperBookmarkButton.svelte
@@ -17,7 +17,7 @@
     let isHovered = $state(false);
     const tooltipText = $derived(isBookmarked ? "Remove from Reading List" : "Add to Reading List");
     let paperId: number | undefined = $state(undefined);
-    loadingPaperId.then((id) => (paperId = id));
+    loadingPaperId.then((id) => (paperId = id)).catch(() => (paperId = undefined));
 
     const onMouseEnter = () => (isHovered = true);
     const onMouseLeave = () => (isHovered = false);
diff --git a/src/lib/components/composites/paper-components/paper-view/PaperDetail.svelte b/src/lib/components/composites/paper-components/paper-view/PaperDetail.svelte
index 05ad013f..49033f8a 100644
--- a/src/lib/components/composites/paper-components/paper-view/PaperDetail.svelte
+++ b/src/lib/components/composites/paper-components/paper-view/PaperDetail.svelte
@@ -35,6 +35,6 @@ Usage:
     {:then}
         <ToggleableInput isEditable={areDetailsInEditMode} {value} />
     {:catch error}
-        <span class="pt-2 text-error">Coudn't load {key}: {error}</span>
+        <span class="pt-2 text-error">Coudn't load {key}{error ? `: ${error}` : ""}</span>
     {/await}
 </div>
diff --git a/src/lib/components/composites/paper-components/paper-view/cards/PaperDetailsCard.svelte b/src/lib/components/composites/paper-components/paper-view/cards/PaperDetailsCard.svelte
index a2f8858a..6714a45f 100644
--- a/src/lib/components/composites/paper-components/paper-view/cards/PaperDetailsCard.svelte
+++ b/src/lib/components/composites/paper-components/paper-view/cards/PaperDetailsCard.svelte
@@ -153,7 +153,7 @@ Usage:
                     value={paper.abstrakt}
                 />
             {:catch error}
-                <span class="text-error">Coudn't load abstract: {error}</span>
+                <span class="text-error">Coudn't load abstract{error ? `: ${error}` : ""}</span>
             {/await}
         </section>
     </PaperCardContent>
diff --git a/src/lib/components/composites/paper-components/paper-view/decision-buttons/AcceptButton.svelte b/src/lib/components/composites/paper-components/paper-view/decision-buttons/AcceptButton.svelte
index 97fde4de..61ff237b 100644
--- a/src/lib/components/composites/paper-components/paper-view/decision-buttons/AcceptButton.svelte
+++ b/src/lib/components/composites/paper-components/paper-view/decision-buttons/AcceptButton.svelte
@@ -6,15 +6,17 @@
     }
 
     const { loadingPaperId }: Props = $props();
-    let paperId: number | undefined = $state(undefined);
-    loadingPaperId.then((id) => (paperId = id));
 
-    function acceptPaper() {
+    function acceptPaper(paperId: number) {
         console.log(`Accepted paper with id ${paperId}`);
     }
 </script>
 
-<DecisionButton class="bg-accept-green hover:bg-accept-green-hover" onClick={acceptPaper}>
+<DecisionButton
+    class="bg-accept-green hover:bg-accept-green-hover"
+    onClick={acceptPaper}
+    {loadingPaperId}
+>
     {#snippet buttonContent()}
         <p>Accept</p>
         <p class="text-accept-green-shortcut">Ctrl+A</p>
diff --git a/src/lib/components/composites/paper-components/paper-view/decision-buttons/DecisionButton.svelte b/src/lib/components/composites/paper-components/paper-view/decision-buttons/DecisionButton.svelte
index 634c284a..8cf51460 100644
--- a/src/lib/components/composites/paper-components/paper-view/decision-buttons/DecisionButton.svelte
+++ b/src/lib/components/composites/paper-components/paper-view/decision-buttons/DecisionButton.svelte
@@ -8,16 +8,29 @@
     type Props = WithElementRef<TooltipTriggerProps> & {
         buttonContent: Snippet;
         tooltipContent: Snippet;
-        onClick: () => void;
+        loadingPaperId: Promise<number>;
+        onClick: (paperId: number) => void;
     };
 
     const {
         buttonContent,
         tooltipContent,
+        loadingPaperId,
         onClick,
         class: className,
         ...restProps
     }: Props = $props();
+
+    let paperId = $state<number | undefined>(undefined);
+    loadingPaperId.then((id) => (paperId = id)).catch(() => (paperId = undefined));
+
+    function onButtonClick() {
+        if (paperId) {
+            onClick(paperId);
+        } else {
+            console.error("Paper ID is not set");
+        }
+    }
 </script>
 
 <!-- max width is fixed, see PaperView component for reason -->
@@ -29,7 +42,11 @@ Rather use `AcceptButton` or `DeclineButton` or `MaybeButton` instead of this co
 
 Usage:
 ```svelte
-    <DecisionButton class="bg-decline-red" onClick={() => console.log("clicked button")}>
+    <DecisionButton
+        class="bg-decline-red"
+        onClick={(paperId) => console.log("clicked button")}
+        {loadingPaperId}
+    >
         {#snippet buttonContent()}
             <p>This is a button</p>
         {/snippet}
@@ -43,7 +60,7 @@ Usage:
     class={cn("text-primary max-w-[20rem] shadow-lg flex-grow-1000", className)}
     trigger={buttonContent}
     content={tooltipContent}
-    onclick={onClick}
+    onclick={onButtonClick}
     {...restProps}
     data-testid="decision-button"
 ></Tooltip>
diff --git a/src/lib/components/composites/paper-components/paper-view/decision-buttons/DeclineButton.svelte b/src/lib/components/composites/paper-components/paper-view/decision-buttons/DeclineButton.svelte
index 7c259e51..11b3be15 100644
--- a/src/lib/components/composites/paper-components/paper-view/decision-buttons/DeclineButton.svelte
+++ b/src/lib/components/composites/paper-components/paper-view/decision-buttons/DeclineButton.svelte
@@ -6,15 +6,17 @@
     }
 
     const { loadingPaperId }: Props = $props();
-    let paperId: number | undefined = $state(undefined);
-    loadingPaperId.then((id) => (paperId = id));
 
-    function declinePaper() {
+    function declinePaper(paperId: number) {
         console.log(`Declined paper with id ${paperId}`);
     }
 </script>
 
-<DecisionButton class="bg-decline-red hover:bg-decline-red-hover" onClick={declinePaper}>
+<DecisionButton
+    class="bg-decline-red hover:bg-decline-red-hover"
+    onClick={declinePaper}
+    {loadingPaperId}
+>
     {#snippet buttonContent()}
         <p>Decline</p>
         <p class="text-decline-red-shortcut">Ctrl+D</p>
diff --git a/src/lib/components/composites/paper-components/paper-view/decision-buttons/MaybeButton.svelte b/src/lib/components/composites/paper-components/paper-view/decision-buttons/MaybeButton.svelte
index a3e58c15..b3cb3df1 100644
--- a/src/lib/components/composites/paper-components/paper-view/decision-buttons/MaybeButton.svelte
+++ b/src/lib/components/composites/paper-components/paper-view/decision-buttons/MaybeButton.svelte
@@ -6,15 +6,17 @@
     }
 
     const { loadingPaperId }: Props = $props();
-    let paperId: number | undefined = $state(undefined);
-    loadingPaperId.then((id) => (paperId = id));
 
-    function markPaperAsUndecided() {
+    function markPaperAsUndecided(paperId: number) {
         console.log(`Undecided paper with id ${paperId}`);
     }
 </script>
 
-<DecisionButton class="bg-maybe-yellow hover:bg-maybe-yellow-hover" onClick={markPaperAsUndecided}>
+<DecisionButton
+    class="bg-maybe-yellow hover:bg-maybe-yellow-hover"
+    onClick={markPaperAsUndecided}
+    {loadingPaperId}
+>
     {#snippet buttonContent()}
         <p>Maybe</p>
         <p class="text-maybe-yellow-shortcut">Ctrl+S</p>
diff --git a/src/routes/paper/[paperId]/+page.svelte b/src/routes/paper/[paperId]/+page.svelte
index d836a67a..892804cb 100644
--- a/src/routes/paper/[paperId]/+page.svelte
+++ b/src/routes/paper/[paperId]/+page.svelte
@@ -7,11 +7,11 @@
 
 <svelte:head>
     {#await loadingPaper}
-        <title>Loading Paper...</title>
+        <title>Loading paper...</title>
     {:then paper}
         <title>{paper.title}</title>
     {:catch}
-        <title>Error</title>
+        <title>Failed loading paper</title>
     {/await}
 </svelte:head>
 <PaperView
diff --git a/src/routes/project/[projectId]/paper/[paperId]/+page.svelte b/src/routes/project/[projectId]/paper/[paperId]/+page.svelte
index 5b9eb06d..c68fea4b 100644
--- a/src/routes/project/[projectId]/paper/[paperId]/+page.svelte
+++ b/src/routes/project/[projectId]/paper/[paperId]/+page.svelte
@@ -7,13 +7,14 @@
 
 <svelte:head>
     {#await Promise.all([loadingProject, loadingPaper])}
-        <title>Loading Paper and Project...</title>
+        <title>Loading paper and project...</title>
     {:then [project, paper]}
         <title>{paper.title} | {project.name}</title>
     {:catch}
         <title>Failed loading data</title>
     {/await}
 </svelte:head>
+
 <PaperView
     {user}
     {loadingPaper}