From 2aa2ac2f3a8dcf6cc207f1eacbb2a36fbf32cb56 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 13 Jul 2023 13:33:10 +0200
Subject: [PATCH] fix: retry

---
 src/lib/pages/domains/index.svelte        | 49 ++++++++++------------
 src/lib/pages/domains/index.ts            |  1 +
 src/lib/pages/domains/wizard/retry.svelte | 48 +++++++++++++++++++++
 src/lib/pages/domains/wizard/step2.svelte | 51 ++++-------------------
 4 files changed, 81 insertions(+), 68 deletions(-)
 create mode 100644 src/lib/pages/domains/wizard/retry.svelte

diff --git a/src/lib/pages/domains/index.svelte b/src/lib/pages/domains/index.svelte
index 126efdab3..a4f9d9e66 100644
--- a/src/lib/pages/domains/index.svelte
+++ b/src/lib/pages/domains/index.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <script lang="ts">
-    import { DropList, DropListItem, Empty, Heading } from '$lib/components';
+    import { DropList, DropListItem, Empty, Heading, Modal } from '$lib/components';
     import {
         TableBody,
         TableCell,
@@ -20,15 +20,12 @@
     import { onMount } from 'svelte';
     import { dependencyStore, typeStore } from './wizard/store';
     import { toLocaleDate } from '$lib/helpers/date';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdk } from '$lib/stores/sdk';
     import { wizard } from '$lib/stores/wizard';
-    import { invalidate } from '$app/navigation';
     import type { Dependencies } from '$lib/constants';
     import type { Models } from '@appwrite.io/console';
     import Create from './create.svelte';
     import Delete from './delete.svelte';
+    import Retry from './wizard/retry.svelte';
 
     export let rules: Models.ProxyRuleList;
     export let type: ProxyTypes;
@@ -36,30 +33,26 @@
 
     let showDomainsDropdown = [];
     let showDelete = false;
+    let showRetry = false;
     let selectedDomain: Models.ProxyRule;
+    let retryError = null;
 
     onMount(() => {
         typeStore.set(type);
         dependencyStore.set(dependency);
     });
 
-    const openWizard = () => {
+    function openWizard() {
         wizard.start(Create);
-    };
+    }
 
-    async function refreshDomain(domain: Models.ProxyRule) {
-        const domainId = domain.$id;
-        try {
-            await sdk.forProject.proxy.updateRuleVerification(domainId);
-            await invalidate(dependency);
-            trackEvent(Submit.DomainUpdateVerification);
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-            trackError(error, Submit.DomainUpdateVerification);
+    function openRetry(domain: Models.ProxyRule, index?: number) {
+        retryError = null;
+        if (index !== undefined) {
+            showDomainsDropdown[index] = false;
         }
+        selectedDomain = domain;
+        showRetry = true;
     }
 </script>
 
@@ -103,7 +96,7 @@
                                     aria-hidden="true"
                                     style="color: hsl(var(--color-danger-100))" />
                                 <span class="u-text">Failed</span>
-                                <Button text on:click={() => refreshDomain(domain)}>
+                                <Button text on:click={() => openRetry(domain)}>
                                     <span class="link">Retry</span>
                                 </Button>
                             </div>
@@ -160,12 +153,7 @@
                                 <span class="icon-dots-horizontal" aria-hidden="true" />
                             </Button>
                             <svelte:fragment slot="list">
-                                <DropListItem
-                                    icon="refresh"
-                                    on:click={() => {
-                                        refreshDomain(domain);
-                                        showDomainsDropdown[i] = false;
-                                    }}>
+                                <DropListItem icon="refresh" on:click={() => openRetry(domain, i)}>
                                     Retry
                                 </DropListItem>
                                 <DropListItem
@@ -193,3 +181,12 @@
 {/if}
 
 <Delete bind:showDelete bind:selectedDomain {dependency} />
+<Modal bind:show={showRetry} headerDivider={false} bind:error={retryError}>
+    <svelte:fragment slot="header">Retry verification</svelte:fragment>
+    {#if selectedDomain}
+        <Retry on:error={(e) => (retryError = e.detail)} />
+    {/if}
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showRetry = false)}>Close</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/lib/pages/domains/index.ts b/src/lib/pages/domains/index.ts
index 5988113b0..5e730fdbd 100644
--- a/src/lib/pages/domains/index.ts
+++ b/src/lib/pages/domains/index.ts
@@ -1 +1,2 @@
 export { default as ProxyRulesPage, ProxyTypes } from './index.svelte';
+export { default as Retry } from './wizard/retry.svelte';
diff --git a/src/lib/pages/domains/wizard/retry.svelte b/src/lib/pages/domains/wizard/retry.svelte
new file mode 100644
index 000000000..9473d1b5c
--- /dev/null
+++ b/src/lib/pages/domains/wizard/retry.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import { sdk } from '$lib/stores/sdk';
+    import { domain } from './store';
+    import CnameTable from './cnameTable.svelte';
+    import { createEventDispatcher } from 'svelte';
+
+    let retrying = false;
+
+    const dispatch = createEventDispatcher();
+
+    async function retry() {
+        console.log('retry');
+        try {
+            retrying = true;
+            $domain = await sdk.forProject.proxy.updateRuleVerification($domain.$id);
+        } catch (error) {
+            dispatch('error', error.message);
+        } finally {
+            retrying = false;
+        }
+    }
+</script>
+
+<div class="u-flex u-gap-8 u-cross-center">
+    <span
+        class="icon-exclamation-circle"
+        aria-hidden="true"
+        style="color: hsl(var(--color-danger-100))" />
+    <p class="u-stretch">Verification failed</p>
+    <Button secondary on:click={retry} disabled={retrying}>
+        {#if retrying}
+            <div class="loader" style="color: hsl(var(--color-neutral-50))" />
+        {:else}
+            Retry
+        {/if}
+    </Button>
+</div>
+<div class="u-margin-block-start-24">
+    <p>
+        In order to continue, set the following record on your DNS provider. Find a list of domain
+        providers and their DNS settings in our documentation. Changes may take time to be
+        effective.
+    </p>
+</div>
+<div class="u-margin-block-start-24">
+    <CnameTable />
+</div>
diff --git a/src/lib/pages/domains/wizard/step2.svelte b/src/lib/pages/domains/wizard/step2.svelte
index 546ad8dab..bffbe6e92 100644
--- a/src/lib/pages/domains/wizard/step2.svelte
+++ b/src/lib/pages/domains/wizard/step2.svelte
@@ -1,25 +1,15 @@
 <script lang="ts">
-    import { Button } from '$lib/elements/forms';
     import { WizardStep } from '$lib/layout';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdk } from '$lib/stores/sdk';
     import { domain } from './store';
-    import CNameTable from './cnameTable.svelte';
+    import Retry from './retry.svelte';
+    import { addNotification } from '$lib/stores/notifications';
 
-    let retrying = false;
-
-    async function retry() {
-        try {
-            retrying = true;
-            $domain = await sdk.forProject.proxy.updateRuleVerification($domain.$id);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        } finally {
-            retrying = false;
-        }
+    function onRetryError(event: CustomEvent<string>) {
+        addNotification({
+            title: 'Error',
+            message: event.detail,
+            type: 'error'
+        });
     }
 </script>
 
@@ -29,30 +19,7 @@
     <div class="boxes-wrapper u-margin-block-start-24">
         <div class="box">
             {#if $domain.status === 'created'}
-                <div class="u-flex u-gap-8 u-cross-center">
-                    <span
-                        class="icon-exclamation-circle"
-                        aria-hidden="true"
-                        style="color: hsl(var(--color-danger-100))" />
-                    <p class="u-stretch">Verification failed</p>
-                    <Button secondary on:click={retry} disabled={retrying}>
-                        {#if retrying}
-                            <div class="loader" style="color: hsl(var(--color-neutral-50))" />
-                        {:else}
-                            Retry
-                        {/if}
-                    </Button>
-                </div>
-                <div class="u-margin-block-start-24">
-                    <p>
-                        In order to continue, set the following record on your DNS provider. Find a
-                        list of domain providers and their DNS settings in our documentation.
-                        Changes may take time to be effective.
-                    </p>
-                </div>
-                <div class="u-margin-block-start-24">
-                    <CNameTable />
-                </div>
+                <Retry on:error={onRetryError} />
             {:else}
                 <div class="u-flex u-gap-8 u-cross-center">
                     <span