feat: sorta get real data from api

src/app.html

@@ -28,6 +28,7 @@
             background-color: #1f1f36;
             padding: 0.5em 0.5em 0.5em;
             margin: 0 0 16px 0px;
+            user-select: none;
         }
 
         #list-item > input[type="checkbox"] {

src/routes/+page.svelte

@@ -2,10 +2,24 @@
     import { member, intros } from '../store.ts';
 
     let selectedIntros = [];
+    let selectedToRemoveIntros = [];
+
+    const login = () => {
+        intros.fetchIntros()
+        member._fakeLogin("DayOldRice")
+    }
 
     const addIntros = () => {
         $member.intros = $member.intros.concat(selectedIntros)
+        selectedIntros = [];
     }
+    const removeIntros = () => {
+        $member.intros = $member.intros.filter((intro) => !selectedToRemoveIntros.includes(intro))
+
+        selectedToRemoveIntros = [];
+    }
+
+    $: console.log(selectedToRemoveIntros)
 </script>
 
 <h1>MemeJoin - A bot for user intros</h1>
@@ -17,8 +31,12 @@
         <h3>Current Set Intros</h3>
         <div id="list">
             {#each $member.intros as intro}
-            <label id="list-item">{$intros[intro].name} ({$intros[intro].filename})</label>
+                <label id="list-item">
+                    <input type="checkbox" bind:group={selectedToRemoveIntros} name="selectedToRemoveIntros" value={intro}>
+                    {$intros[intro].name} ({$intros[intro].filename})
+                </label>
             {/each}
+        <button on:click={removeIntros}>Remove</button>
         </div>
     {:else}
         <h3 style='color:yellow'>You don't have any intros, try adding one</h3>
@@ -38,6 +56,6 @@
     </div>
 {:else}
     <p style="color:red;">You need to login first</p>
-    <button on:click={member._fakeLogin}>Login</button>
+    <button on:click={login}>Login</button>
 {/if}
 

src/store.ts

@@ -20,24 +20,53 @@ function createMemberStore(): MemberStore {
         subscribe: subscribe,
         set: set,
         addIntro: (intro: IntroIndex) => { update((n) => n.intros.push(intro)); return intro },
-        _fakeLogin: () => set(
+        _fakeLogin: async (username) => {
+            const response = (await (await fetch(`http://localhost:7756/me/${username}`)).json())
+
+            if (response === "NoUserFound") {
+                return false;
+            } else {
+                set(
                     {
-                username: "TestUser",
-                intros: [0,1]
+                        username: username,
+                        intros: response.Settings[0].intros.map((intro) => intro[0])
                     }
-        ),
+                ) 
+
+                return true;
+            }
+        },
     }
 }
 
-export const member: MemberStore = createMemberStore()
-export const intros: IntroStore = readable([], (set) => {
-        // TODO: actually grab intros from the API
-        set([
-            { name: "TestSound", filename: "testsound.mp3", length: 30 },
-            { name: "Huh?", filename: "tim allen.mp3", length: 2 },
-            { name: "This sound hasn't been selected yet", filename: "totally_real.mp3", length: 9 },
-        ])
+function createIntroStore(): IntroStore {
+    const { subscribe, set, update } = writable([])
 
-        return () => {}
+    return {
+        subscribe: subscribe,
+        set: set,
+        update: update,
+        fetchIntros: async () => {
+            const response = (await (await fetch("http://localhost:7756/intros/588149178912473103")).json())
+            if (response !== "NoGuildFound") {
+                console.log(response.Intros[0].File);
+                const intros = response.Intros.map((intro) => {
+                    if (!!intro.File) {
+                        return { name: intro.File.friendlyName, filename: intro.File.filename }
+                    } else if (!!intro.Online) {
+                        return { name: intro.Online.friendlyName, url: intro.Online.url }
+                    }
                 })
+                console.log(intros)
+
+                set(intros)
+            }
+        },
+    }
+
+
+}
+
+export const intros: IntroStore = createIntroStore()
+export const member: MemberStore = createMemberStore()