standardize api calls

src/IntroDownloader.svelte

@@ -12,14 +12,14 @@
 
     $: allowedGuildList = $member.guilds
         .filter((guild) => member_can(guild.permissions, Permission.CanDownload))
-        .map((guild) => guild.name);
+        .map((guild) => guild);
 
     $: canDownloadAny = allowedGuildList.length > 0;
 
     const download = () => {
         if (!!selectedGuild) {
             downloadPromise = (async () => {
-                await intros.addIntro(selectedGuild, enteredUrl, enteredTitle, $member.token);
+                await intros.addIntro(selectedGuild.id, enteredUrl, enteredTitle, $member.token);
                 await intros.fetchIntros($member.guilds);
             })();
         } else {
@@ -29,35 +29,37 @@
 </script>
 
 {#if canDownloadAny}
-<div>
+    <div id="cardContent">
-    <h3>Download New Intro</h3>
+        <div>
-    {#if !!downloadPromise}
+            <h3>Download New Intro</h3>
-        {#await downloadPromise}
+            {#if !!downloadPromise}
-            <p>downloading...</p>
+                {#await downloadPromise}
-        {:then result}
+                    <p>downloading...</p>
-            <p>Downloaded</p>
+                {:then result}
-            <button on:click={() => {downloadPromise = null}}>Add another</button>
+                    <p>Downloaded</p>
-        {:catch err}
+                    <button on:click={() => {downloadPromise = null}}>Add another</button>
-            <p style='color: red'>{err}</p>
+                {:catch err}
-            <button on:click={() => {downloadPromise = null}}>Ok</button>
+                    <p style='color: red'>{err}</p>
-        {/await}
+                    <button on:click={() => {downloadPromise = null}}>Ok</button>
-    {:else}
+                {/await}
-        <select bind:value={selectedGuild}>
+            {:else}
-            {#each allowedGuildList as guild}
+                <select bind:value={selectedGuild}>
-                <option value={guild}>{guild}</option>
+                    {#each allowedGuildList as guild}
-            {/each}
+                        <option value={guild}>{guild.name}</option>
-        </select>
+                    {/each}
-        <input bind:value={enteredTitle} placeholder='enter intro title'>
+                </select>
-        <input bind:value={enteredUrl} placeholder='enter video url'>
+                <input bind:value={enteredTitle} placeholder='enter intro title'>
-        <button on:click={download}>Download</button>
+                <input bind:value={enteredUrl} placeholder='enter video url'>
-    {/if}
+                <button on:click={download}>Download</button>
-</div>
+            {/if}
+        </div>
+    </div>
 {/if}
 
 <style>
     div {
         display: flex;
-        width: 80%;
+        width: 85%;
         flex-direction: column;
         align-items: center;
         background-color: #2a2a4a;

src/Login.svelte

@@ -1,26 +1,60 @@
 <script>
     import { onMount } from 'svelte';
     import { member, intros } from './store.ts';
+    import { env } from '$env/dynamic/public';
 
-    const authorizeUri = "https://discord.com/api/oauth2/authorize?client_id=577634620728934400&redirect_uri=https%3A%2F%2Fspacegirl.nl%2Fmemes%2Fauth&response_type=code&scope=guilds.members.read%20guilds%20identify";
+    const authorizeUri = 
+        `https://discord.com/api/oauth2/authorize?client_id=577634620728934400&redirect_uri=${encodeURIComponent(env.PUBLIC_APP_BASE_URL + '/auth')}&response_type=code&scope=${encodeURIComponent('guilds.members.read guilds identify')}`;
 
-    onMount(async () => {
+    let loginPromise = null;
-        const token = window.localStorage.getItem('token');
+    let mounted = false;
 
-        if (!!token) {
+    onMount(() => {
-            await member.pullData(token);
+        loginPromise = (async () => {
-            await intros.fetchIntros($member.guilds);
+            const token = window.localStorage.getItem('token');
-        }
+
+            if (!!token) {
+                try {
+                    await member.pullData(token);
+                    await intros.fetchIntros($member.guilds);
+
+                    return true;
+                } catch (err) {
+                    console.table(err);
+                    if (err.message === "User doesn't exist") {
+                        return false;
+                    } else {
+                        throw err;
+                    }
+                }
+            } else {
+                return false;
+            }
+        })();
+
+        mounted = true;
     }); 
 
     const login = async (username) => {
         window.location = authorizeUri;
     }
 
-    let loginPromise = null;
 
     let enteredUsername = '';
 </script>
 
-<p style="color:red;">You need to login first</p>
+{#if !!loginPromise}
-<button on:click={() => loginPromise = login(enteredUsername)}>Login</button>
+    {#await loginPromise}
+        <p>Loading...</p>
+    {:then result}
+        {#if result}
+            <p>Success</p>
+        {:else}
+            <button on:click={() => loginPromise = login(enteredUsername)}>Login</button>
+        {/if}
+    {:catch}
+        <p style="color: red">An error occurred while contacting the server. Try refreshing</p>
+    {/await}
+{:else if !mounted}
+    <p>Loading...</p>
+{/if}

src/api.js

@@ -0,0 +1,46 @@
+import { env } from '$env/dynamic/public';
+
+export const apiCall = async (method, endpoint, token) => {
+    const headers = (() => {
+        if (!!token) {
+            return { 'token': token };
+        }
+
+        return {}
+    })();
+
+    return (await
+        fetch(
+            `${env.PUBLIC_API_URL}/${endpoint}`,
+            { method: method, headers: headers })
+
+    );
+};
+
+export const authenticate = async (code) => {
+    return await apiCall('GET', `auth?code=${code}`, null);
+};
+
+export const getMe = async (token) => {
+    return await apiCall('GET', 'me', token);
+};
+
+export const getGuildIntros = async (guild, token) => {
+    return await apiCall('GET', `intros/${guild}`, token);
+};
+
+export const addGuildIntro = async (guild, url, title, token) => {
+    return await apiCall('GET', `intros/${guild}/add?url=${encodeURIComponent(url)}&name=${encodeURIComponent(title)}`, token);
+};
+
+export const chooseIntro = async (guild, channel, selectedIntros, token) => {
+    for (const intro of selectedIntros) {
+        await apiCall('POST', `intros/${guild}/${channel}/${intro}`, token);
+    }
+};
+
+export const removeIntro = async (guild, channel, selectedIntros, token) => {
+    for (const intro of selectedIntros) {
+        await apiCall('POST', `intros/${guild}/${channel}/${intro}/remove`, token);
+    }
+};

src/app.html

@@ -19,37 +19,25 @@
             color: lightgrey;
         }
 
-        div#intros {
+        div#cardContent {
-            display: flex;
+            display: grid;
-            flex-direction: column;
+            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-            align-items: center;
+            width: 85%;
+            justify-items: center;
             background-color: #323259;
-            padding: 0.5em;
             box-shadow: 1px 3px 15px 1px #1f1f36;
-        }
+            margin: 2em;
-
+            padding: 2em;
-        div#guild-settings {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            background-color: #2a2a4a;
-            margin: 1em;
-            box-shadow: 1px 3px 4px 1px #1f1f36;
-        }
-
-        div#channel-settings {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            background-color: #2a2a4a;
-            margin: 0.5em;
         }
 
         div#list {
-            display: inline-flex;
+            display: flex;
             width: 85%;
+            border-radius: 4px;
             flex-direction: column;
             align-items: center;
+            background-color: #323259;
+            padding: 1em;
         }
 
         button, #list-item {
@@ -66,10 +54,10 @@
         button:hover, #list-item:hover {
             background-image: linear-gradient(0deg, #34345b, #393963);
             box-shadow: 1px 3px 15px 1px #1f1f36;
+            cursor: pointer;
         }
 
-        #list-item > input[type="checkbox"] {
+        #list-item > input[type="checkbox"]:checked {
-            display: none;
         }
         #list-item:has(input[type="checkbox"]:checked) {
             background-image: linear-gradient(0deg, #40406e, #444475);

src/routes/+page.svelte

@@ -2,6 +2,7 @@
     import { env } from '$env/dynamic/public';
     import { member, intros } from '../store.ts';
     import { member_can } from '../permissions.ts';
+    import { chooseIntro, removeIntro } from '../api.js';
     import Login from '../Login.svelte';
     import IntroSelector from '../IntroSelector.svelte';
     import IntroDownloader from '../IntroDownloader.svelte';
@@ -10,38 +11,17 @@
     let removeIntroPromise = null;
 
     const apiAddIntro = async (guild, channel, username, selectedIntros) => {
-        for (const intro of selectedIntros) {
+        await chooseIntro(guild, channel, selectedIntros, $member.token);
-            const response = await fetch(
-                `https://${env.PUBLIC_API_URL}/memes/api/intros/${guild}/${channel}/${intro}`,
-                { method: 'POST', headers: {"token": $member.token} }
-            );
-            if (!response.ok) {
-                const body = await response.json();
-                throw new Error(`${body}`);
-            }
-        }
-
         await member.pullData($member.token);
     };
 
     const apiRemoveIntro = async (guild, channel, username, selectedIntros) => {
-        for (const intro of selectedIntros) {
+        await removeIntro(guild, channel, selectedIntros, $member.token);
-            const response = await fetch(
-                `https://${env.PUBLIC_API_URL}/memes/api/intros/${guild}/${channel}/${intro}/remove`,
-                { method: 'POST', headers: {"token": $member.token} }
-            );
-            if (!response.ok) {
-                const body = await response.json();
-                throw new Error(`${body}`);
-            }
-        }
-
         await member.pullData($member.token);
     };
 
     const addIntros = (event) => {
         addIntroPromise = apiAddIntro(event.detail.guild, event.detail.channel, $member.username, event.detail.intros);
-
     }
     const removeIntros = (event) => {
         removeIntroPromise = apiRemoveIntro(event.detail.guild, event.detail.channel, $member.username, event.detail.intros);
@@ -51,49 +31,88 @@
 <h1>MemeJoin - A bot for user intros</h1>
 
 {#if !!$member}
+<div id="mainContent">
     <p>{$member.username}</p>
 
-    <h3>Your Intros</h3>
+    <IntroDownloader />
-    <div id="intros">
+    <div id="cardContent">
         {#each $member.guilds as guild}
-            <h4>{guild.name}</h4>
+            <div id="guild">
-            <IntroDownloader />
+                <h4>{guild.name}</h4>
-            <div id="guild-settings">
+                <div id="guild-settings">
-                {#each guild.channels as channel}
+                    {#each guild.channels as channel}
-                    <div id="channel-settings">
+                        <div id="channel-settings">
-                        <h4>{channel.name}</h4>
+                            <h4>{channel.name}</h4>
-                        {#await addIntroPromise then result}
+                            {#await addIntroPromise then result}
-                        {:catch err}
+                            {:catch err}
-                            <p style='color: red'>Failed to add intro</p>
+                                <p style='color: red'>Failed to add intro {err}</p>
-                        {/await}
+                            {/await}
-                        {#await removeIntroPromise then result}
+                            {#await removeIntroPromise then result}
-                        {:catch err}
+                            {:catch err}
-                            <p style='color: red'>Failed to remove intro</p>
+                                <p style='color: red'>Failed to remove intro</p>
-                        {/await}
+                            {/await}
-                        <IntroSelector
+                            <h3>Your Current Intros</h3>
-                                guild={guild.name}
+                            <IntroSelector
-                                channel={channel.name}
+                                    guild={guild.id}
-                                include={channel.intros.map((x) => x.index)}
+                                    channel={channel.name}
-                                on:confirm={removeIntros}
+                                    include={channel.intros.map((x) => x.index)}
-                                btnLabel="Remove" 
+                                    on:confirm={removeIntros}
-                                emptyMsg="You don't have any intros, try adding one"
+                                    btnLabel="Remove" 
-                                />
+                                    emptyMsg="You don't have any intros, try adding one"
+                                    />
 
-                        <h3>Add Intros</h3>
+                            <h3>Select Intros</h3>
-                        <IntroSelector 
+                            <IntroSelector 
-                                guild={guild.name}
+                                    guild={guild.id}
-                                channel={channel.name}
+                                    channel={channel.name}
-                                exclude={channel.intros.map((x) => x.index)}
+                                    exclude={channel.intros.map((x) => x.index)}
-                                on:confirm={addIntros}
+                                    on:confirm={addIntros}
-                                emptyMsg="There are no intros"
+                                    btnLabel="Choose"
-                                />
+                                    emptyMsg="There are no intros"
-                    </div>
+                                    />
-                {/each}
+                        </div>
+                    {/each}
+                </div>
             </div>
         {/each}
     </div>
+</div>
 {:else}
     <Login />
 {/if}
 
+<style>
+    div#mainContent {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 85%;
+    }
 
+
+    div#guild {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    div#guild-settings {
+        display: flex;
+        width: 85%;
+        flex-direction: row;
+        justify-content: center;
+        background-color: #2a2a4a;
+        margin: 1em;
+        box-shadow: 1px 3px 4px 1px #1f1f36;
+    }
+
+    div#channel-settings {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        align-items: center;
+        background-color: #2a2a4a;
+        margin: 1em;
+    }
+
+</style>

src/routes/auth/+page.svelte

@@ -4,24 +4,26 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { member, intros } from '../../store.ts';
+    import { authenticate } from '../../api.js';
 
     const code = $page.url.searchParams.get('code');
 
     let loginFailed = false;
 
     onMount(async () => {
-        const response = await fetch(`https://${env.PUBLIC_API_URL}/memes/api/auth?code=${code}`);
+        const response = await authenticate(code);
         const body = await response.json();
 
         if (!response.ok)  {
             loginFailed = true
         } else {
+            window.localStorage.setItem('token', body.token);
+
             await member.pullData(body.token);
             await intros.fetchIntros($member.guilds);
 
-            window.localStorage.setItem('token', body.token);
 
-            goto('/memes')
+            goto(`${env.PUBLIC_APP_BASE_URL}`)
         }
     });
 </script>

src/store.ts

@@ -1,6 +1,6 @@
 import { env } from '$env/dynamic/public';
 import { readable, writable } from 'svelte/store';
-
+import { getMe, getGuildIntros, addGuildIntro } from './api.js';
 
 function createMemberStore() {
     const { subscribe, set, update } = writable(null)
@@ -10,14 +10,13 @@ function createMemberStore() {
         set: set,
         addIntro: (intro: IntroIndex) => { update((n) => n.intros.push(intro)); return intro },
         pullData: async (token) => {
-            const response = (await (await fetch(
+            const response = await getMe(token);
-                `https://${env.PUBLIC_API_URL}/memes/api/me`,
-                { headers: {"token": token} })).json())
 
-            if (response === "NoUserFound") {
+            if (!response.ok) {
-                return;
+                throw new Error(await response.text());
             } else {
-                set({ token: token, ...response.Me }) 
+                const body = await response.json();
+                set({ token: token, ...body.Me }) 
             }
         }
     }
@@ -29,8 +28,7 @@ function createIntroStore() {
     return {
         subscribe: subscribe,
         addIntro: async (guild, url, title, token) => {
-            const response = await fetch(`https://${env.PUBLIC_API_URL}/memes/api/intros/${guild}/add?url=${encodeURIComponent(url)}&name=${encodeURIComponent(title)}`,
+            const response = await addGuildIntro(guild, url, title, token);
-                                         { method: 'GET', headers: { 'token': token } });
 
             if (!response.ok) {
                 throw new Error(await response.body);
@@ -40,11 +38,13 @@ function createIntroStore() {
             let intros = new Map();
 
             for (const guild of guilds) {
-                const response = (await (await fetch(`https://${env.PUBLIC_API_URL}/memes/api/intros/${guild.name}`)).json())
+                const response = await getGuildIntros(guild.id, null);
-                    if (response !== "NoGuildFound") {
+                const body = await response.json();
+
+                if (response !== "NoGuildFound") {
                     let guild_intros = new Map();
 
-                    Object.entries(response.Intros).forEach(([index, intro]) => {
+                    Object.entries(body.Intros).forEach(([index, intro]) => {
                         if (!!intro.File) {
                             guild_intros.set(index, { name: intro.File.friendlyName, filename: intro.File.filename });
                         } else if (!!intro.Online) {
@@ -52,7 +52,7 @@ function createIntroStore() {
                         }
                     })
 
-                    intros.set(guild.name, guild_intros);
+                    intros.set(guild.id, guild_intros);
                 }
             }
 

vite.config.ts

@@ -2,5 +2,9 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
+    server: {
+        host: "0.0.0.0",
+        port: "8080",
+    },
 	plugins: [sveltekit()]
 });