first somewhat stable version

src/components/Graphs.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
 	export let hrefPrefix = "";
 	import { login } from "./stores";
-	import { getGraphs } from "../lib/api";
+	import { checkPermissions, Permissions } from "../lib/permissions";
+	import { getGraphs, getPermissions } from "../lib/api";
 
+	let add = false;
 	let graphsPromise: ReturnType<typeof getGraphs> = new Promise(() => {});
 	$: if ($login !== undefined) {
 		graphsPromise = getGraphs($login?.token);
+		getPermissions($login?.token).then(permissions => {
+			if (checkPermissions([Permissions.ADD_GRAPH], permissions)) {
+				add = true;
+			}
+		});
 	}
 </script>
 
@@ -23,7 +30,9 @@
 			</a>
 		{/each}
 		<!-- svelte-ignore a11y-missing-content -->
+		{#if add}
 			<a class="item add" href="/graph/new" />
+		{/if}
 	{:catch error}
 		<span class="item">
 			<h2 style="color: red">{error.message}</h2>

src/components/stores.ts

@@ -50,27 +50,6 @@ function createExtraNav() {
 
 export const extraNav = createExtraNav();
 
-function createCache() {
+export let playerCache: Record<string, string> = {};
-	const { subscribe, set, update } = writable<{
+export let uuidCache: Record<string, string> = {};
-		[key: string]: string;
+export let profileCache: Record<string, string> = {};
-	}>({});
-
-	return {
-		subscribe,
-		set: (key: string, value: string) =>
-			update(current => ({
-				...current,
-				[key]: value
-			})),
-		unset: (key: string) =>
-			update(current => {
-				delete current[key];
-				return current;
-			}),
-		clear: () => set({}),
-		update
-	};
-}
-
-export const playerCache = createCache();
-export const profileCache = createCache();

src/lib/api.ts

@@ -1,4 +1,5 @@
 import type { Graph, Tracker } from "../routes/api/_types";
+import { playerCache, profileCache, uuidCache } from "../components/stores";
 import type { Profile } from "./hypixel";
 import { requestWithDefaults } from "./util";
 
@@ -60,12 +61,17 @@ export async function getProfiles(
  * @returns A list of profiles
  */
 export async function getPlayerProfiles(
-	token: string,
+	token: string | undefined,
 	player: string
 ): Promise<Profile[]> {
-	let response = await request(`/api/profiles/${player}`, {
+	let response = await request(
+		`/api/profiles/${player}`,
+		token
+			? {
 					headers: { Authorization: token }
-	});
+			  }
+			: {}
+	);
 	return response.json();
 }
 
@@ -79,10 +85,15 @@ export async function getProfileCuteName(
 	player: string,
 	profile: string
 ): Promise<string> {
+	if (profileCache[player + profile] !== undefined) {
+		return profileCache[player + profile];
+	}
 	let response = await request(
 		`/api/profiles/${player}/${profile}/cute-name`
 	);
-	return response.json();
+	let cuteName = await response.json();
+	profileCache[player + profile] = cuteName;
+	return cuteName;
 }
 
 /**
@@ -106,8 +117,13 @@ export async function getGraphs(
  * @returns Player's username
  */
 export async function getUsername(uuid: string): Promise<string> {
+	if (playerCache[uuid] !== undefined) {
+		return playerCache[uuid];
+	}
 	let response = await request(`/api/username?uuid=${uuid}`);
-	return response.json();
+	let username = await response.json();
+	playerCache[uuid] = username;
+	return username;
 }
 
 /**
@@ -116,8 +132,13 @@ export async function getUsername(uuid: string): Promise<string> {
  * @returns Player's UUID
  */
 export async function getUUID(username: string): Promise<string> {
+	if (uuidCache[username] !== undefined) {
+		return uuidCache[username];
+	}
 	let response = await request(`/api/uuid?username=${username}`);
-	return response.json();
+	let uuid = await response.json();
+	uuidCache[username] = uuid;
+	return uuid;
 }
 
 /**
@@ -155,6 +176,18 @@ export async function getPermissions(token?: string): Promise<string[]> {
 	return response.json();
 }
 
+/**
+ * Create a graph
+ * @param token Authorization token
+ * @param type Graph type
+ * @param name Graph name
+ * @param style Graph style
+ * @param value AQL code for graph
+ * @param xAxisName X-axis name
+ * @param xAxisType X-axis type
+ * @param yAxisName Y-axis name
+ * @param yAxisType Y-axis type
+ */
 export async function putGraph(
 	token: string | undefined,
 	type: string,
@@ -183,6 +216,14 @@ export async function putGraph(
 	return;
 }
 
+/**
+ * Get graph data for a profile
+ * @param token Authorization token
+ * @param graph Graph's ID
+ * @param profile Profile's UUID
+ * @param member Player's UUID
+ * @returns Graph data
+ */
 export async function getGraph(
 	token: string | undefined,
 	graph: string,

src/routes/api/profiles/[profile]/[player]/cute-name.ts

@@ -17,7 +17,7 @@ export async function get(
 	}
 
 	let response = await getProfilesByPlayer(API_KEY || "", req.params.player);
-	if (response.success && response.profiles !== undefined) {
+	if (response.success && response.profiles) {
 		if (profileNameCache[req.params.player] === undefined) {
 			profileNameCache[req.params.player] = {};
 		}
@@ -28,8 +28,10 @@ export async function get(
 		);
 		res.writeHead(200);
 		res.end(
+			JSON.stringify(
 				response.profiles.find(p => p.profile_id === req.params.profile)
 					?.cute_name
+			)
 		);
 	} else {
 		res.writeHead(response._response.status);

src/routes/graph/new.svelte

@@ -44,7 +44,17 @@
 			on:submit={async event => {
 				event.preventDefault();
 				try {
-					await putGraph($login?.token, type, name, style, value);
+					await putGraph(
+						$login?.token,
+						type,
+						name,
+						style,
+						value,
+						xAxisName,
+						xAxisType,
+						yAxisName,
+						yAxisName
+					);
 					goto("/graphs");
 				} catch (e) {
 					if (

src/routes/profile/[profile]/member/[member].svelte

@@ -15,18 +15,16 @@
 	import Graphs from "../../../../components/Graphs.svelte";
 	import { goto } from "@sapper/app";
 	import { extraNav, login } from "../../../../components/stores";
-	import { getPlayerProfiles, getUsername } from "../../../../lib/api";
+	import { getProfileCuteName, getUsername } from "../../../../lib/api";
 
 	$extraNav;
 	$: if ($login !== undefined) {
 		(async () => {
 			let username = await getUsername(member);
-			let profiles = await getPlayerProfiles(member);
+			let cuteName = await getProfileCuteName(profile, member);
 			extraNav.set([
 				[
-					username +
+					`${username} @ ${cuteName}`,
-						" @ " +
-						profiles.find(p => p.profile_id === profile)?.cute_name,
 					() => goto(`/profile/${profile}/member/${member}`)
 				]
 			]);

src/routes/profile/[profile]/member/[member]/graph/[graph].svelte

@@ -16,13 +16,50 @@
 	export let graph: string;
 
 	import { onMount } from "svelte";
+	import { goto } from "@sapper/app";
 	import { init } from "echarts";
-	import { getGraph, getGraphs } from "../../../../../../lib/api";
+	import {
-	import { login } from "../../../../../../components/stores";
+		getGraph,
+		getGraphs,
+		getProfileCuteName,
+		getUsername
+	} from "../../../../../../lib/api";
+	import { login, extraNav } from "../../../../../../components/stores";
+	import type { Graph } from "../../../../../api/_types";
+
+	$extraNav;
+
+	$: if ($login !== undefined) {
+		(async () => {
+			let username = await getUsername(member);
+			let cuteName = await getProfileCuteName(profile, member);
+			extraNav.update(current => {
+				return [
+					[
+						`${username} @ ${cuteName}`,
+						() => goto(`/profile/${profile}/member/${member}`)
+					],
+					...(current || [])
+				];
+			});
+		})();
+	}
 
 	onMount(async () => {
 		let graphs = await getGraphs($login?.token);
 		let g = graphs.find(g => g.graph === graph);
+		extraNav.update(current => {
+			return [
+				...(current || []),
+				[
+					g?.data.name || "Unknown graph",
+					() =>
+						goto(
+							`/profile/${profile}/member/${member}/graph/${graph}`
+						)
+				]
+			];
+		});
 
 		let data = await getGraph($login?.token, graph, profile, member);
 

src/routes/profile/new.svelte

@@ -40,6 +40,7 @@
 			event.preventDefault();
 			try {
 				profilesPromise = getPlayerProfiles(
+					$login?.token,
 					(uuid = await getUUID(username))
 				);
 			} catch (error) {

src/routes/profiles.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
 	import { login } from "../components/stores";
-	import { getProfiles, getUsername } from "../lib/api";
+	import { getPermissions, getProfiles, getUsername } from "../lib/api";
+	import { checkPermissions, Permissions } from "../lib/permissions";
 
+	let add = false;
 	let profilesPromise: ReturnType<typeof getProfiles> = new Promise(() => {});
 	$: if ($login !== undefined) {
 		profilesPromise = getProfiles($login?.token);
+		getPermissions($login?.token).then(permissions => {
+			if (checkPermissions([Permissions.ADD_GRAPH], permissions)) {
+				add = true;
+			}
+		});
 	}
 </script>
 
@@ -39,7 +46,9 @@
 			</button>
 		{/each}
 		<!-- svelte-ignore a11y-missing-content -->
+		{#if add}
 			<a class="item add" href="/profile/new" />
+		{/if}
 	{:catch error}
 		<div class="item">
 			<h2 style="color: red">{error.message}</h2>