Merge pull request #112 from teaxyz/bottles

#111 package bottles table

modules/gui/src-tauri/tauri.conf.json

@@ -15,7 +15,7 @@
 			"http": {
 				"all": true,
 				"request": true,
-				"scope": ["https://api.tea.xyz/v1/*", "https://github.com/*"]
+				"scope": ["https://api.tea.xyz/v1/*", "https://github.com/*", "https://app.tea.xyz/*"]
 			},
 			"shell": {
 				"all": true,

modules/gui/src/components/PackageBanner/PackageBanner.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
 	import '$appcss';
 	import '@tea/ui/icons/icons.css';
-	import type { Package } from '@tea/ui/types';
+	import type { Package, Bottle } from '@tea/ui/types';
 	import Button from '@tea/ui/Button/Button.svelte';
 	import StarRating from '@tea/ui/StarRating/StarRating.svelte';
+	import Bottles from '@tea/ui/Bottles/Bottles.svelte';
+	import { onMount } from 'svelte';
+	import { getPackageBottles } from '@api';
 
 	export let pkg: Package;
-
+	let bottles: Bottle[] = [];
 	let packageRating = 0;
 	let copyButtonText = 'COPY';
 	const copyValue = `sh <(curl tea.xyz ) +${pkg.full_name}`;
@@ -15,6 +18,14 @@
 		copyButtonText = 'COPIED!';
 		navigator.clipboard.writeText(copyValue);
 	};
+
+	onMount(async () => {
+		try {
+			bottles = await getPackageBottles(pkg.full_name);
+		} catch (err) {
+			console.error(err);
+		}
+	});
 </script>
 
 <section class="mt-4 border border-gray bg-black">
@@ -33,6 +44,9 @@
 			<p class="mt-4 font-sono text-sm">{pkg.desc}</p>
 		</article>
 	</header>
+	<section>
+		<Bottles {bottles} />
+	</section>
 	<footer class="flex h-20 border-t border-gray text-white">
 		<input class="click-copy flex-grow bg-black pl-4" disabled value={copyValue} />
 		<Button class="w-16 border-0 border-l-2 text-sm" onClick={onCopy}>{copyButtonText}</Button>

modules/gui/src/libs/api/mock.ts

@@ -5,7 +5,7 @@
  * TODO:
  *  * make cors work with api.tea.xyz/v1
  */
-import type { Package, Review, AirtablePost } from '@tea/ui/types';
+import type { Package, Review, AirtablePost, Bottle } from '@tea/ui/types';
 import type { GUIPackage, Course, Category } from '../types';
 import { PackageStates } from '../types';
 import { loremIpsum } from 'lorem-ipsum';
@@ -322,3 +322,16 @@ export async function getCategorizedPackages(): Promise<Category[]> {
 		}
 	];
 }
+
+export async function getPackageBottles(name: string): Promise<Bottle[]> {
+	return [
+		{ name, platform: 'darwin', arch: 'aarch64', version: '3.39.4' },
+		{ name, platform: 'darwin', arch: 'aarch64', version: '3.40.0' },
+		{ name, platform: 'darwin', arch: 'x86-64', version: '3.39.4' },
+		{ name, platform: 'darwin', arch: 'x86-64', version: '3.40.0' },
+		{ name, platform: 'linux', arch: 'aarch64', version: '3.39.4' },
+		{ name, platform: 'linux', arch: 'aarch64', version: '3.40.0' },
+		{ name, platform: 'linux', arch: 'x86-64', version: '3.39.4' },
+		{ name, platform: 'linux', arch: 'x86-64', version: '3.40.0' }
+	];
+}

modules/gui/src/libs/api/tauri.ts

@@ -14,7 +14,7 @@ import { getClient } from '@tauri-apps/api/http';
 // import { invoke } from '@tauri-apps/api';
 import { Command } from '@tauri-apps/api/shell';
 import { readDir, BaseDirectory } from '@tauri-apps/api/fs';
-import type { Package, Review, AirtablePost } from '@tea/ui/types';
+import type { Package, Review, AirtablePost, Bottle } from '@tea/ui/types';
 import type { GUIPackage, Course, Category } from '../types';
 import * as mock from './mock';
 import { PackageStates } from '../types';
@@ -163,3 +163,12 @@ export async function getCategorizedPackages(): Promise<Category[]> {
 	const categories = await get<Category[]>('/packages/categorized');
 	return categories;
 }
+
+export async function getPackageBottles(packageName: string): Promise<Bottle[]> {
+	console.log('getting bottles for ', packageName);
+	const client = await getClient();
+	const uri = join('https://app.tea.xyz/api/bottles/', packageName);
+	const { data } = await client.get<Bottle[]>(uri.toString());
+	console.log('got bottles', data);
+	return data;
+}

modules/ui/src/Bottles/Bottles.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { Bottle } from '../types';
+	export let bottles: Bottle[];
+
+	let versions: string[] = [];
+	let available: Set<string>;
+
+	$: versions = [...new Set(bottles.map((b) => b.version))];
+	$: available = new Set(bottles.map((b) => `${b.platform}-${b.arch}`));
+</script>
+
+<div class="my-4 w-full p-2">
+	<div>
+		<h4 class="mb-4 text-lg text-primary">
+			{versions.length} version{versions.length === 1 ? '' : 's'} bottled
+		</h4>
+	</div>
+	<table class="w-full table-auto border border-gray font-sono">
+		<thead>
+			<tr>
+				<th class="border border-gray px-2 py-4">version</th>
+				<th class="border border-gray px-2 py-4">darwin-aarch64</th>
+				<th class="border border-gray px-2 py-4">darwin-x86-64</th>
+				<th class="border border-gray px-2 py-4">linux-aarch64</th>
+				<th class="border border-gray px-2 py-4">linux-x86-64</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#each versions as version}
+				<tr>
+					<th class="border border-gray px-2 py-4 text-left">{version}</th>
+					<td class="border border-gray px-2 py-4"
+						>{available.has('darwin-aarch64') ? '✅' : '❌'}</td
+					>
+					<td class="border border-gray px-2 py-4"
+						>{available.has('darwin-x86-64') ? '✅' : '❌'}</td
+					>
+					<td class="border border-gray px-2 py-4"
+						>{available.has('linux-aarch64') ? '✅' : '❌'}</td
+					>
+					<td class="border border-gray px-2 py-4">{available.has('linux-x86-64') ? '✅' : '❌'}</td
+					>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>

modules/ui/src/types.ts

@@ -34,3 +34,10 @@ export type AirtablePost = {
 	published_at: Date;
 	tags: string[];
 };
+
+export type Bottle = {
+	name: string;
+	platform: string;
+	arch: string;
+	version: string;
+};