standardize api calls
parent
861f6e6973
commit
e85b394dad
File diff suppressed because it is too large
Load Diff
|
|
@ -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>
|
||||
<h3>Download New Intro</h3>
|
||||
{#if !!downloadPromise}
|
||||
{#await downloadPromise}
|
||||
<p>downloading...</p>
|
||||
{:then result}
|
||||
<p>Downloaded</p>
|
||||
<button on:click={() => {downloadPromise = null}}>Add another</button>
|
||||
{:catch err}
|
||||
<p style='color: red'>{err}</p>
|
||||
<button on:click={() => {downloadPromise = null}}>Ok</button>
|
||||
{/await}
|
||||
{:else}
|
||||
<select bind:value={selectedGuild}>
|
||||
{#each allowedGuildList as guild}
|
||||
<option value={guild}>{guild}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<input bind:value={enteredTitle} placeholder='enter intro title'>
|
||||
<input bind:value={enteredUrl} placeholder='enter video url'>
|
||||
<button on:click={download}>Download</button>
|
||||
{/if}
|
||||
</div>
|
||||
<div id="cardContent">
|
||||
<div>
|
||||
<h3>Download New Intro</h3>
|
||||
{#if !!downloadPromise}
|
||||
{#await downloadPromise}
|
||||
<p>downloading...</p>
|
||||
{:then result}
|
||||
<p>Downloaded</p>
|
||||
<button on:click={() => {downloadPromise = null}}>Add another</button>
|
||||
{:catch err}
|
||||
<p style='color: red'>{err}</p>
|
||||
<button on:click={() => {downloadPromise = null}}>Ok</button>
|
||||
{/await}
|
||||
{:else}
|
||||
<select bind:value={selectedGuild}>
|
||||
{#each allowedGuildList as guild}
|
||||
<option value={guild}>{guild.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<input bind:value={enteredTitle} placeholder='enter intro title'>
|
||||
<input bind:value={enteredUrl} placeholder='enter video url'>
|
||||
<button on:click={download}>Download</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: flex;
|
||||
width: 80%;
|
||||
width: 85%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #2a2a4a;
|
||||
|
|
|
|||
|
|
@ -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 () => {
|
||||
const token = window.localStorage.getItem('token');
|
||||
let loginPromise = null;
|
||||
let mounted = false;
|
||||
|
||||
if (!!token) {
|
||||
await member.pullData(token);
|
||||
await intros.fetchIntros($member.guilds);
|
||||
}
|
||||
onMount(() => {
|
||||
loginPromise = (async () => {
|
||||
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>
|
||||
<button on:click={() => loginPromise = login(enteredUsername)}>Login</button>
|
||||
{#if !!loginPromise}
|
||||
{#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}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
};
|
||||
38
src/app.html
38
src/app.html
|
|
@ -19,37 +19,25 @@
|
|||
color: lightgrey;
|
||||
}
|
||||
|
||||
div#intros {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
div#cardContent {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
width: 85%;
|
||||
justify-items: center;
|
||||
background-color: #323259;
|
||||
padding: 0.5em;
|
||||
box-shadow: 1px 3px 15px 1px #1f1f36;
|
||||
}
|
||||
|
||||
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;
|
||||
margin: 2em;
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
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"] {
|
||||
display: none;
|
||||
#list-item > input[type="checkbox"]:checked {
|
||||
}
|
||||
#list-item:has(input[type="checkbox"]:checked) {
|
||||
background-image: linear-gradient(0deg, #40406e, #444475);
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
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 chooseIntro(guild, channel, selectedIntros, $member.token);
|
||||
await member.pullData($member.token);
|
||||
};
|
||||
|
||||
const apiRemoveIntro = async (guild, channel, username, selectedIntros) => {
|
||||
for (const intro of selectedIntros) {
|
||||
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 removeIntro(guild, channel, selectedIntros, $member.token);
|
||||
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>
|
||||
<div id="intros">
|
||||
<IntroDownloader />
|
||||
<div id="cardContent">
|
||||
{#each $member.guilds as guild}
|
||||
<h4>{guild.name}</h4>
|
||||
<IntroDownloader />
|
||||
<div id="guild-settings">
|
||||
{#each guild.channels as channel}
|
||||
<div id="channel-settings">
|
||||
<h4>{channel.name}</h4>
|
||||
{#await addIntroPromise then result}
|
||||
{:catch err}
|
||||
<p style='color: red'>Failed to add intro</p>
|
||||
{/await}
|
||||
{#await removeIntroPromise then result}
|
||||
{:catch err}
|
||||
<p style='color: red'>Failed to remove intro</p>
|
||||
{/await}
|
||||
<IntroSelector
|
||||
guild={guild.name}
|
||||
channel={channel.name}
|
||||
include={channel.intros.map((x) => x.index)}
|
||||
on:confirm={removeIntros}
|
||||
btnLabel="Remove"
|
||||
emptyMsg="You don't have any intros, try adding one"
|
||||
/>
|
||||
<div id="guild">
|
||||
<h4>{guild.name}</h4>
|
||||
<div id="guild-settings">
|
||||
{#each guild.channels as channel}
|
||||
<div id="channel-settings">
|
||||
<h4>{channel.name}</h4>
|
||||
{#await addIntroPromise then result}
|
||||
{:catch err}
|
||||
<p style='color: red'>Failed to add intro {err}</p>
|
||||
{/await}
|
||||
{#await removeIntroPromise then result}
|
||||
{:catch err}
|
||||
<p style='color: red'>Failed to remove intro</p>
|
||||
{/await}
|
||||
<h3>Your Current Intros</h3>
|
||||
<IntroSelector
|
||||
guild={guild.id}
|
||||
channel={channel.name}
|
||||
include={channel.intros.map((x) => x.index)}
|
||||
on:confirm={removeIntros}
|
||||
btnLabel="Remove"
|
||||
emptyMsg="You don't have any intros, try adding one"
|
||||
/>
|
||||
|
||||
<h3>Add Intros</h3>
|
||||
<IntroSelector
|
||||
guild={guild.name}
|
||||
channel={channel.name}
|
||||
exclude={channel.intros.map((x) => x.index)}
|
||||
on:confirm={addIntros}
|
||||
emptyMsg="There are no intros"
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
<h3>Select Intros</h3>
|
||||
<IntroSelector
|
||||
guild={guild.id}
|
||||
channel={channel.name}
|
||||
exclude={channel.intros.map((x) => x.index)}
|
||||
on:confirm={addIntros}
|
||||
btnLabel="Choose"
|
||||
emptyMsg="There are no intros"
|
||||
/>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
26
src/store.ts
26
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(
|
||||
`https://${env.PUBLIC_API_URL}/memes/api/me`,
|
||||
{ headers: {"token": token} })).json())
|
||||
const response = await getMe(token);
|
||||
|
||||
if (response === "NoUserFound") {
|
||||
return;
|
||||
if (!response.ok) {
|
||||
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)}`,
|
||||
{ method: 'GET', headers: { 'token': token } });
|
||||
const response = await addGuildIntro(guild, url, title, 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())
|
||||
if (response !== "NoGuildFound") {
|
||||
const response = await getGuildIntros(guild.id, null);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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()]
|
||||
});
|
||||
|
|
|
|||
Reference in New Issue