From a80683024e3617d827bc45e6aa559599aee12fe3 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 28 Apr 2023 23:57:34 +0100
Subject: [PATCH] fix: cloud card endpoint

---
 src/routes/card/Card.svelte    |  5 ++++-
 src/routes/card/[uid]/+page.ts |  6 ++++--
 src/routes/card/display.svelte | 10 +++++-----
 src/routes/card/helpers.ts     | 10 ++++++----
 4 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/routes/card/Card.svelte b/src/routes/card/Card.svelte
index 4f290de85..1f7e18564 100644
--- a/src/routes/card/Card.svelte
+++ b/src/routes/card/Card.svelte
@@ -13,6 +13,8 @@
 
     import { spring } from 'svelte/motion';
     import { getCardImgUrls } from './helpers';
+    import { VARS } from '$lib/system';
+    import { page } from '$app/stores';
 
     let cardEl: HTMLDivElement | undefined;
     export let active = false;
@@ -228,7 +230,8 @@
 		--center: ${$centerProximity};
 	`;
 
-    const { frontImg, backImg } = getCardImgUrls(userId);
+    const endpoint = VARS.APPWRITE_ENDPOINT ?? `${$page.url.origin}/v1`;
+    const { frontImg, backImg } = getCardImgUrls(userId, endpoint);
 </script>
 
 <svelte:window on:keydown={windowKeyDown} />
diff --git a/src/routes/card/[uid]/+page.ts b/src/routes/card/[uid]/+page.ts
index 83de20bee..77c11504b 100644
--- a/src/routes/card/[uid]/+page.ts
+++ b/src/routes/card/[uid]/+page.ts
@@ -1,11 +1,13 @@
+import { VARS } from '$lib/system.js';
 import { redirect } from '@sveltejs/kit';
 import { getCardImgUrls } from '../helpers.js';
 
 export const ssr = true;
 
-export async function load({ params }) {
+export async function load({ params, url }) {
     const userId = params.uid;
-    const { frontImg } = getCardImgUrls(userId);
+    const endpoint = VARS.APPWRITE_ENDPOINT ?? `${url.origin}/v1`;
+    const { frontImg } = getCardImgUrls(userId, endpoint);
 
     const res = await fetch(frontImg);
     if (!res.ok) {
diff --git a/src/routes/card/display.svelte b/src/routes/card/display.svelte
index 6250cef63..96fd48bdb 100644
--- a/src/routes/card/display.svelte
+++ b/src/routes/card/display.svelte
@@ -9,6 +9,8 @@
     import Code from '$lib/components/code.svelte';
     import Button from '$lib/elements/forms/button.svelte';
     import { browser } from '$app/environment';
+    import { VARS } from '$lib/system';
+    import { page } from '$app/stores';
 
     export let userId: string;
     export let variant: 'owner' | 'external';
@@ -27,7 +29,8 @@
     let cardIsFlipped = false;
     let showEmbedCode = false;
 
-    const { frontImg, ogImg } = getCardImgUrls(userId);
+    const endpoint = VARS.APPWRITE_ENDPOINT ?? `${$page.url.origin}/v1`;
+    const { frontImg, ogImg } = getCardImgUrls(userId, endpoint);
 
     $: title = variant === 'owner' ? 'Welcome to the cloud' : 'Join the Appwrite Cloud';
     $: shareableLink =
@@ -128,10 +131,7 @@
                 </p>
             </div>
         </div>
-        <img
-            class="card-preview"
-            src={getCardImgUrls(userId).frontImg}
-            alt="The front of the card" />
+        <img class="card-preview" src={frontImg} alt="The front of the card" />
         <ul class="buttons-list u-margin-block-start-32">
             <li class="buttons-list-item">
                 <a
diff --git a/src/routes/card/helpers.ts b/src/routes/card/helpers.ts
index 9de9a13a4..aa5904ee1 100644
--- a/src/routes/card/helpers.ts
+++ b/src/routes/card/helpers.ts
@@ -1,9 +1,11 @@
 import { VARS } from '$lib/system';
 
-export function getCardImgUrls(userId: string) {
-    const frontImg = `${VARS.APPWRITE_ENDPOINT}/cards/cloud?userId=${userId}`;
-    const backImg = `${VARS.APPWRITE_ENDPOINT}/cards/cloud-back?userId=${userId}`;
-    const ogImg = `${VARS.APPWRITE_ENDPOINT}/cards/cloud-og?userId=${userId}`;
+export function getCardImgUrls(userId: string, endpoint: string) {
+    const resolved = endpoint;
+
+    const frontImg = `${resolved}/cards/cloud?userId=${userId}`;
+    const backImg = `${resolved}/cards/cloud-back?userId=${userId}`;
+    const ogImg = `${resolved}/cards/cloud-og?userId=${userId}`;
 
     return { frontImg, backImg, ogImg };
 }