feat(polling): implement poll api changes (#77)

* feat(polling): remove username from LogoOption

* finish the migration

* fix formatting and cleanup

* perf: improve variable initialization

---------

Co-authored-by: Ax333l <main@axelen.xyz>
Co-authored-by: afn <_@afn.lol>
Co-authored-by: oSumAtrIX <johan.melkonyan1@web.de>

src/lib/components/atoms/LogoOption.svelte

@@ -5,10 +5,10 @@
 
 	import next from '$lib/assets/icons/next.svg';
 	import previous from '$lib/assets/icons/previous.svg';
-	import type { APILogo } from '$lib/types';
+	import type { Logo } from '$lib/types';
 
 	export let selected: string[];
-	export let variants: APILogo[];
+	export let variants: Logo[];
 	export let clicked = false;
 	export let hideDetails = false;
 
@@ -86,7 +86,7 @@
 <div class="option" tabindex="0" class:clicked>
 	<div class="row" on:click|stopPropagation={handleClick} on:keypress={handleClick}>
 		<!-- Screenreader compatibility does not make sense in this context. -->
-		<img src={current.gdrive_direct_url} alt="" />
+		<img src={current.optimized_direct_url ?? current.logo_direct_url} alt="" />
 	</div>
 	{#if !hideDetails}
 		<div class="actions">

src/lib/types.ts

@@ -1,19 +1,7 @@
-export interface APILogo {
-	id: string;
-	gdrive_direct_url: string;
-}
-
-export interface LogoAPIResponse {
-	[key: string]: {
-		logos: APILogo[];
-	};
-}
-
 export interface Logo {
-	name: string;
-	variants: APILogo[];
+	id: string;
+	optimized_direct_url: string | null;
+	logo_direct_url: string;
 }
 
-// export interface Selected {
-
-// }
+export type LogosResponse = Logo[][];

src/routes/poll/+page.svelte

@@ -2,8 +2,7 @@
 	import { onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
 	import { expoOut } from 'svelte/easing';
-	import type { Logo, LogoAPIResponse } from '$lib/types';
-
+	import type { Logo, LogosResponse } from '$lib/types';
 	import Modal from '$lib/components/atoms/Dialogue.svelte';
 	import LogoOption from '$lib/components/atoms/LogoOption.svelte';
 	import Button from '$lib/components/atoms/Button.svelte';
@@ -12,28 +11,15 @@
 	import questionMark from '$lib/assets/icons/help.svg';
 	import trash from '$lib/assets/icons/delete.svg';
 
-	interface Selected {
-		[key: string]: string[];
-	}
-
+	let selected: string[][] = [];
+  
 	let helpModal = false;
 	let clearModal = false;
 	let submitModal = false;
-	let selected: Selected = {};
-	function calc_ui_selected_count(v: Selected) {
-		let n = 0;
-		for (const item of Object.values(v)) {
-			if (item.length != 0) {
-				console.log(item);
-				n += 1;
-			}
-		}
-		return n;
-	}
 
 	// afn please don't do this lol this is shitty code
-	$: ui_selected_count = calc_ui_selected_count(selected);
-	let logos: Logo[] = [];
+	$: ui_selected_count = selected.filter((x) => x.length > 0).length;
+	let logos: LogosResponse = [];
 	let logo_ids: string[] = [];
 	let transitionDirection = 5;
 	let logoAmount = 4;
@@ -72,17 +58,10 @@
 		window['submit_poll'] = submitBallot;
 
 		const response = await fetch('https://poll.revanced.app/logos');
-		const json: LogoAPIResponse = await response.json();
+		logos = await response.json();
 
-		for (const name of Object.keys(json)) {
-			// lol the performance
-			selected[name] = [];
-
-			logos.push({ name, variants: json[name].logos });
-			logo_ids = [...logo_ids, ...json[name].logos.map((v) => v.id)];
-		}
-		console.log(logos);
-		console.log(logo_ids);
+		selected = logos.map(_ => []);
+		logos.flatMap(x => x).forEach(variants => logo_ids.push(variants.id));
 
 		// randomize the order of the logos to minimize bias
 		for (let i = logos.length - 1; i > 0; i--) {
@@ -134,8 +113,10 @@
 		const nextMin = nextPage * logoAmount;
 		const nextMax = nextMin + logoAmount;
 
-		logos.slice(nextMin, nextMax).forEach(({ variants }) => {
-			variants.forEach((variant) => preloadImage(variant.gdrive_direct_url));
+		logos.slice(nextMin, nextMax).forEach((variants) => {
+			variants.forEach((variant) =>
+				preloadImage(variant.optimized_direct_url ?? variant.logo_direct_url)
+			);
 		});
 		transitionDirection = 5;
 	}
@@ -150,13 +131,13 @@
 			return;
 		}
 
-		logos.forEach((v) => {
-			selected[v.name] = [];
-		});
+		for (let i = 0; i < logos.length; i++) {
+			selected[i] = [];
+		}
 	}
 
 	async function submitBallot() {
-		const selected_ids = [...Object.values(selected)].flat();
+		const selected_ids = selected.flat();
 		console.log('selected ids', selected_ids);
 		const data = {
 			votes: logo_ids.map((id) => ({ cid: id, vote: selected_ids.includes(id) }))
@@ -206,27 +187,25 @@
 
 		<div class="options-grid">
 			{#if finalPage}
-				{#each logos as { variants, name }}
-					{#if selected[name].length != 0}
+				{#each logos as logo_set, i}
+					{#if selected[i].length != 0}
 						<span in:fly={{ x: transitionDirection, easing: expoOut, duration: 1000 }}>
 							<LogoOption
-								bind:selected={selected[name]}
-								clicked={selected[name].length != 0}
-								{variants}
-								{name}
+								bind:selected={selected[i]}
+								clicked={selected[i].length != 0}
+								variants={logo_set}
 							/>
 						</span>
 					{/if}
 				{/each}
 			{:else}
-				{#each logos.slice(min, max) as { variants, name }}
+				{#each logos.slice(min, max) as logo_set, i}
 					{#key currentPage}
 						<span in:fly={{ x: transitionDirection, easing: expoOut, duration: 1000 }}>
 							<LogoOption
-								bind:selected={selected[name]}
-								clicked={selected[name].length != 0}
-								{variants}
-								{name}
+								bind:selected={selected[min + i]}
+								clicked={selected[min + i].length != 0}
+								variants={logo_set}
 							/>
 						</span>
 					{/key}